/**
 * Site Header Styles
 * BEM: .site-header, .site-header__inner, .site-header__nav, .site-header__logo
 * Creates overlapping header effect with logo extending over hero content
 */

/* ==========================================================================
   Header Container
   ========================================================================== */

/* Header template part wrapper - positioned absolutely to overlay hero */
.wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header, 100);
}

/* Adjust for WordPress admin bar when logged in */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

.admin-bar .wp-site-blocks {
	padding-top: 32px;
}

.site-header {
	position: relative;
	z-index: var(--z-header, 100);
	background-color: var(--wp--preset--color--background, #FDFAF4);
	height: 108px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
	height: 108px;
}

/* ==========================================================================
   Navigation Styles
   ========================================================================== */

/* Navigation base styles moved to logo section below */

.site-header__nav--left {
	justify-content: flex-start;
}

.site-header__nav--right {
	justify-content: flex-end;
}

/* Navigation link styling - Butler Regular, 24px, teal per Figma */
.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary, #01666c);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--butler);
	font-size: 24px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	padding: 8px 0;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--foreground);
}

/* Navigation gaps - 30px per Figma */
.site-header__nav .wp-block-navigation__container {
	gap: 30px;
}

/* Prevent nav wrapping */
.site-header .wp-block-navigation.site-header__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* ==========================================================================
   Logo Styles
   ========================================================================== */

.site-header__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 26px;
	z-index: var(--z-header, 100);
}

/* Cream circle behind logo */
.site-header__logo::before {
	content: '';
	position: absolute;
	top: -135%;
	left: 50%;
	transform: translateX(-50%);
	width: 468px;
	height: 468px;
	background-color: var(--wp--preset--color--background, #FDFAF4);
	border-radius: 50%;
	z-index: -1;
}

/* Header navigation */
.site-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
	height: 108px;
	padding: 0 60px;
}

.site-header__logo-img {
	margin: 0;
}

.site-header__logo-img img {
	width: 300px;
	height: 164px;
	display: block;
}


/* ==========================================================================
   Responsive Styles
   Target breakpoints: 320, 375, 768, 1024, 1280, 1440, 1920px
   ========================================================================== */

/* Large desktop (1440px+) - full layout */
@media (max-width: 1440px) {
	.site-header__nav {
		padding: 0 40px;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 22px;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: 24px;
	}
}

/* Desktop (1280px) - slightly reduced */
@media (max-width: 1280px) {
	.site-header__nav {
		padding: 0 30px;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 20px;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: 20px;
	}

	.site-header__logo-img img {
		width: 260px;
		height: auto;
	}

	/* Smaller logo circle */
	.site-header__logo::before {
		width: 400px;
		height: 400px;
	}
}

/* Large tablet / small laptop (1024px) */
@media (max-width: 1024px) {
	.site-header {
		height: 90px;
	}

	.site-header__inner {
		height: 90px;
	}

	.site-header__nav {
		padding: 0 20px;
		height: 90px;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 18px;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: 16px;
	}

	.site-header__logo {
		top: 20px;
	}

	.site-header__logo-img img {
		width: 220px;
		height: auto;
	}

	/* Smaller logo circle */
	.site-header__logo::before {
		width: 340px;
		height: 340px;
		top: -120%;
	}
}

/* Tablet (768px) - switch to mobile layout */
@media (max-width: 768px) {
	.site-header {
		height: 70px;
	}

	.site-header__inner {
		height: 70px;
		justify-content: center;
	}

	/* Hide desktop navigation */
	.site-header__nav--left,
	.site-header__nav--right {
		display: none;
	}

	/* Center logo in header */
	.site-header__logo {
		position: relative;
		left: auto;
		transform: none;
		top: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70px;
	}

	.site-header__logo-img img {
		width: 180px;
		height: auto;
	}

	/* Hide the cream circle on mobile */
	.site-header__logo::before {
		display: none;
	}

	/* Admin bar adjustment */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px; /* Admin bar is 46px on mobile */
	}

	.admin-bar .wp-site-blocks {
		padding-top: 46px;
	}
}

/* Small mobile (375px) - iPhone SE, mini */
@media (max-width: 375px) {
	.site-header {
		height: 60px;
	}

	.site-header__inner {
		height: 60px;
	}

	.site-header__logo {
		height: 60px;
	}

	.site-header__logo-img img {
		width: 150px;
		height: auto;
	}
}

/* Extra small mobile (320px) */
@media (max-width: 320px) {
	.site-header {
		height: 56px;
	}

	.site-header__inner {
		height: 56px;
	}

	.site-header__logo {
		height: 56px;
	}

	.site-header__logo-img img {
		width: 130px;
		height: auto;
	}
}

/* ==========================================================================
   Z-Index Scale (for reference)
   ========================================================================== */

:root {
	--z-base: 1;
	--z-header: 100;
	--z-sticky-nav: 500;
	--z-mobile-overlay: 999;
	--z-mobile-nav: 1000;
	--z-mobile-toggle: 1001;
	--z-modal: 1100;
}