/**
 * Site Header Overlay Styles
 * Creates transparent header that overlays hero with centered logo circle
 */

/* ==========================================================================
   Header Container - Absolute positioning 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);
}

/* Admin bar adjustment */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 2rem;
}

.site-header {
	position: relative;
	z-index: var(--z-header, 100);
	background-color: var(--wp--preset--color--theme-01);
	height: 6.75rem;
}

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

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

.site-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
	height: 6.75rem;
	padding: 0;
	position: relative;
	z-index: calc(var(--z-header, 100) + 1);
}

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

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

/* Navigation link styling - Butler Regular, 24px, teal */
.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--theme-03);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--butler);
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	padding: var(--wp--custom--spacing--8) 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--theme-04);
}

/* Navigation gaps */
.site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.site-header .wp-block-navigation.site-header__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* ==========================================================================
   Logo Styles - Centered with cream circle
   ========================================================================== */

.site-header__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1.625rem;
	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: 29.25rem;
	height: 29.25rem;
	background-color: var(--wp--preset--color--theme-01);
	border-radius: 50%;
	z-index: -1;
}

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

.site-header__logo-img img {
	width: 18.75rem;
	height: auto;
	display: block;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1440px) {
	.site-header__nav {
		padding: 0;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 1.375rem;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: var(--wp--custom--spacing--24);
	}
}

@media (max-width: 1280px) {
	.site-header__nav {
		padding: 0;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 1.25rem;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: var(--wp--custom--spacing--20);
	}

	.site-header__logo-img img {
		width: 16.25rem;
	}

	.site-header__logo::before {
		width: 25rem;
		height: 25rem;
	}
}

@media (max-width: 1024px) {
	.site-header {
		height: 5.625rem;
	}

	.site-header__inner {
		height: 5.625rem;
	}

	.site-header__nav {
		padding: 0;
		height: 5.625rem;
	}

	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		font-size: 1.125rem;
	}

	.site-header__nav .wp-block-navigation__container {
		gap: var(--wp--custom--spacing--16);
	}

	.site-header__logo {
		top: var(--wp--custom--spacing--20);
	}

	.site-header__logo-img img {
		width: 13.75rem;
	}

	.site-header__logo::before {
		width: 21.25rem;
		height: 21.25rem;
		top: -120%;
	}
}

@media (max-width: 768px) {
	.site-header {
		height: 4.375rem;
	}

	.site-header__inner {
		height: 4.375rem;
		justify-content: center;
	}

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

	.site-header__logo {
		position: relative;
		left: auto;
		transform: none;
		top: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 4.375rem;
	}

	.site-header__logo-img img {
		width: 11.25rem;
	}

	.site-header__logo::before {
		display: none;
	}

	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 2.875rem;
	}
}

@media (max-width: 375px) {
	.site-header,
	.site-header__inner,
	.site-header__logo {
		height: 3.75rem;
	}

	.site-header__logo-img img {
		width: 9.375rem;
	}
}

/* ==========================================================================
   Z-Index Scale
   ========================================================================== */

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

/* ==========================================================================
   Hamburger Menu Touch Target (WCAG 2.5.8 - min 44x44px)
   ========================================================================== */

.wp-block-navigation__responsive-container-open {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation.site-header__nav .wp-block-navigation-item__content {
		transition: none;
	}
}