/* Gate 52 — Header styles */

/* =========================================
   Site Header — fixed, full-width shell
   ========================================= */

.site-header {
	position: fixed;
	/* Honor iOS safe-area-inset when no announcement bar is present. The
	 * --g52-ab-offset variable already accounts for an active announcement
	 * bar; max() falls back to the safe-area inset when that's zero. */
	top: max(var(--g52-ab-offset, 0px), env(safe-area-inset-top, 0px));
	left: 0;
	width: 100%;
	z-index: var(--g52--z--nav);
	transition: top 150ms ease;

	/* No background or backdrop-filter here — both live on ::before.
	   backdrop-filter on this element would act as a containing block for
	   position:fixed descendants (e.g. the mobile nav overlay), trapping
	   them inside the fixed header instead of covering the full viewport. */

	/* Explicit text color so nav links are visible */
	color: var(--g52--color--nav-text, #111827);

	/* Bottom border for visual separation */
	border-bottom: 1px solid var(--g52--color--border, #e5e7eb);

	/* Strip any WP block layout padding so the inner container owns all spacing */
	padding: 0 !important;
	margin: 0 !important;
}

/* Frosted-glass background on a pseudo-element so backdrop-filter doesn't
   create a containing block that traps position:fixed children. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Solid fallback for browsers without backdrop-filter (older Android). */
	background-color: var(--g52--color--nav-background, var(--g52--color--background, #f8f9fa));
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	.site-header::before {
		background-color: var(--g52--color--nav-background, var(--g52--color--background, #f8f9fa));
		background-color: color-mix(in srgb, var(--g52--color--nav-background, var(--g52--color--background)) 95%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}

/* =========================================
   Inner container — max-width + 3-column flex row
   Mirrors: max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-20
   ========================================= */

.site-header__inner {
	max-width: 96rem; /* max-w-screen-2xl = 1536px */
	margin-inline: auto;
	padding-inline: max(1rem, env(safe-area-inset-left, 0)) max(1rem, env(safe-area-inset-right, 0));
	height: var(--g52--header-height, 80px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;

	/* Height animates when filter bar goes sticky */
	transition: height 250ms ease;
}

@media (min-width: 640px) {
	.site-header__inner {
		padding-inline: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		padding-inline: 2rem;
	}
}

/* Reset any WP-injected block gap on the inner group */
.site-header__inner.wp-block-group {
	gap: 0 !important;
}

/* Shrink modifier: toggled by nav-shrink.js */
.site-header.nav-shrunk .site-header__inner {
	height: var(--g52--header-height-shrunk, 40px);
}

/* =========================================
   Logo — left column
   ========================================= */

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* WP site-logo: constrain to h-10 (40px) → md:h-12 (48px), animate on shrink */
.site-header__logo .wp-block-site-logo img {
	display: block;
	height: 2.5rem; /* h-10 = 40px */
	width: auto;
	object-fit: contain;
	transition: height 250ms ease;
}

@media (min-width: 768px) {
	.site-header__logo .wp-block-site-logo img {
		height: 3rem; /* h-12 = 48px */
	}
}

/* Shrink: logo collapses to h-6 (24px) */
.site-header.nav-shrunk .site-header__logo .wp-block-site-logo img {
	height: 1.5rem; /* h-6 = 24px */
}

/* Site-title text fallback */
.site-header__logo .wp-block-site-title {
	font-family: var(--g52--font--display, 'Anton', sans-serif);
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--g52--color--text, #111827);
}

.site-header__logo .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

/* Hide site title when a logo image is present */
.site-header__logo:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

/* =========================================
   Primary Navigation — center column
   WP navigation block: reset block defaults, then style links
   ========================================= */

/* The nav element itself: don't let WP add height or padding */
.site-header .site-header__nav.wp-block-navigation,
.site-header .wp-block-navigation {
	display: flex;
	align-items: center;
	background: transparent !important;
	color: inherit;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

/* The flex container holding nav items */
.site-header .wp-block-navigation .wp-block-navigation__container {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0 !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── Nav link styles ─────────────────────────────────────────────────────── */
/* Mirror: text-sm font-bold uppercase tracking-widest hover:text-primary */

.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation a.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	font-family: var(--g52--font--body, 'Inter', sans-serif) !important;
	font-size: 0.875rem !important; /* text-sm */
	font-weight: 700 !important;    /* font-bold */
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important; /* tracking-widest */
	color: var(--g52--color--nav-text, #111827) !important;
	text-decoration: none !important;
	padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
	border-radius: 2px;
	transition: color 200ms ease;
	line-height: 1.25;
}

/* Hover */
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--g52--color--primary, #D90429) !important;
}

/* Active / current page */
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-page-ancestor > .wp-block-navigation-item__content {
	color: var(--g52--color--primary, #D90429) !important;
}

/* Remove any WP-injected background/border on nav items */
.site-header .wp-block-navigation .wp-block-navigation-item {
	background: transparent !important;
	border: none !important;
}

/* Mobile overlay toggle (hamburger) — do NOT set display here; WP controls show/hide */
.site-header .wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
	background: transparent !important;
	border: none;
	border-radius: 2px;
	color: var(--g52--color--nav-text, #111827);
	cursor: pointer;
	transition: color 200ms ease;
	line-height: 1;
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	color: var(--g52--color--primary, #D90429);
}

/* Mobile overlay close button */
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--g52--color--nav-text, #111827);
	transition: color 200ms ease;
}

.site-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--g52--color--primary, #D90429);
}

/* =========================================
   Actions — right column (newsletter icon)
   ========================================= */

.site-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.5rem;
}

.site-header__newsletter-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: transparent;
	border: none;
	border-radius: 9999px;
	/* Match the primary nav link color (see .wp-block-navigation-item__content) */
	color: var(--g52--color--nav-text, #111827);
	text-decoration: none !important;
	cursor: pointer;
	transition: color 200ms ease;
	line-height: 1;
}

.site-header__newsletter-btn:hover {
	color: var(--g52--color--primary, #D90429);
}

.site-header__newsletter-btn .material-symbols-outlined {
	font-size: 1.5rem; /* text-2xl */
	font-variation-settings: 'FILL' 0, 'wght' 300;
	transition: transform 300ms ease;
	vertical-align: middle;
}

.site-header__newsletter-btn:hover .material-symbols-outlined {
	transform: scale(1.1);
}

/* =========================================
   Responsive breakpoint — 768px
   WP core switches from mobile overlay → desktop inline nav at 600px.
   We override that to 768px so there's never a state where both the
   hamburger and the desktop nav links are visible simultaneously.
   ========================================= */

/* Below 768px: keep the nav container hidden (as mobile-overlay mode).
   WP would make it display:block at 600px+ — we delay that until 768px. */
@media (max-width: 767px) {
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
		position: fixed !important;
	}
}

/* At 768px and above: show inline desktop nav, hide the hamburger. */
@media (min-width: 768px) {
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block !important;
		position: relative !important;
		background-color: transparent !important;
		z-index: auto !important;
		width: 100% !important;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* =========================================
   Mobile touch targets (44×44px minimum)
   ========================================= */

@media (max-width: 767px) {
	.site-header .site-header__actions,
	.site-header__actions.wp-block-group {
		display: none !important;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		min-width: 44px;
		min-height: 44px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	.site-header .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
	}
}

/* =========================================
   Mobile overlay — full-viewport cover
   WP core structure: .wp-block-navigation__responsive-container
     > .wp-block-navigation__responsive-close
       > .wp-block-navigation__responsive-dialog
         > .wp-block-navigation__responsive-container-content
           > ul.wp-block-navigation__container
   ========================================= */

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: var(--g52--z--panel, 100) !important;
	background: var(--g52--color--background, #f8f9fa) !important;
	visibility: visible !important;
	display: flex !important;
	flex-direction: column !important;
	overflow-y: auto !important;
	padding: 0 !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
	position: static !important;
	background: transparent !important;
	padding: 0 !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
	position: static !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1;
	padding: 1rem 1.5rem !important;
}

.site-header .is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: stretch !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
}

.site-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.site-header .is-menu-open .wp-block-navigation-item__content,
.site-header .is-menu-open a.wp-block-navigation-item__content {
	font-size: 1.5rem !important;
	padding: 1rem 0 !important;
	border-bottom: 1px solid var(--g52--color--border, #e5e7eb);
	border-radius: 0 !important;
	width: 100% !important;
	display: block !important;
	color: var(--g52--color--nav-text, #111827) !important;
}

.site-header .is-menu-open .wp-block-navigation-item__content:hover,
.site-header .is-menu-open a.wp-block-navigation-item__content:hover {
	color: var(--g52--color--primary, #D90429) !important;
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	margin: 1rem 1.5rem 0;
}

/* =========================================
   Mobile menu footer — newsletter access surfaced
   inside the open overlay only.
   ========================================= */

.site-header__mobile-menu-footer {
	display: none;
}

/* Show only when the navigation overlay is in the open state. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .site-header__mobile-menu-footer {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem 1.5rem max(1rem, env(safe-area-inset-bottom));
	z-index: calc(var(--g52--z--panel, 100) + 1);
	background: var(--g52--color--background, #f8f9fa);
	border-top: 1px solid var(--g52--color--border, #e5e7eb);
	justify-content: stretch;
}

.site-header__newsletter-btn--mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 44px;
	padding: 0 1rem;
	background: var(--g52--color--primary, #D90429);
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-family: var(--g52--font--body, 'Inter', sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.site-header__newsletter-btn--mobile:hover {
	background: var(--g52--color--primary-dark, #b00220);
	color: #fff;
}

.site-header__newsletter-btn--mobile .material-symbols-outlined {
	font-size: 1.25rem;
	font-variation-settings: 'FILL' 0, 'wght' 400;
}

.site-header__newsletter-btn-label {
	letter-spacing: 0.12em;
}

@media (min-width: 768px) {
	.site-header__mobile-menu-footer,
	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .site-header__mobile-menu-footer {
		display: none !important;
	}
}

/* Smooth-scroll to the newsletter callout (respects reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Keep the sticky header from covering the callout heading on jump.
   Derives from the real header-height + announcement-bar offset tokens
   (see .site-header__inner / .site-header top) plus a spacing-30 preset
   for breathing room — resolves to the same 96px by default
   (80px + 0px + 1rem/16px). */
#newsletter {
	scroll-margin-top: calc(
		var(--g52--header-height, 80px) + var(--g52-ab-offset, 0px) +
			var(--wp--preset--spacing--30, 1rem)
	);
}

/* Social icons in the header actions row. */
.site-header__actions .g52-social-links--nav {
	gap: 0.25rem;
}

.site-header__actions .g52-social-links__link {
	width: 36px;
	height: 36px;
	color: var(--g52--color--nav-text, currentColor);
}

/* Social row inside the mobile menu overlay. */
.site-header__mobile-menu-footer .g52-social-links--nav {
	justify-content: center;
	margin-top: 1rem;
}