/* ==========================================================================
   Header & Navigation — native block header (wp:site-logo + wp:navigation),
   branded for Sya.

   - Transparent bar over hero sections, solid cream on scroll / non-hero.
   - Custom breakpoint: collapses to hamburger below 721px (core default 600px).
   - Mobile menu = a CREAM dropdown BELOW the header (not core's fullscreen
     overlay); the header + logo stay visible and the close (X) sits where the
     hamburger was.
   - Cream dropdowns + overlay done in CSS (core's overlay bg is `inherit`, and
     its colours ship UNLAYERED) — so our colour/layout overrides live OUTSIDE
     @layer and out-specify core. No hand-written !important (theme rule).

   Hero detection: a page is "hero" if it contains .sya-hero (single templates)
   or .sya-hero-curved (homepage/content covers). Do NOT include .sya-pattern-bg
   — that's the rose FOOTER, present on every page, which would mark every page
   as hero. Non-hero pages (e.g. the legal page) get a solid header from load.
   ========================================================================== */

@layer header {
	/* ----- Fixed full-width bar (background lives here) ----- */
	.wp-block-template-part:has(.site-header) {
		position: fixed;
		inset-block-start: 0;
		inline-size: 100%;
		z-index: var(--wp--custom--z-index--sticky, 200);
		background: var(--wp--preset--color--base);
		transition:
			background var(--wp--custom--timing--normal),
			box-shadow var(--wp--custom--timing--normal);
	}

	.wp-block-template-part:has(.site-header.is-stuck) {
		box-shadow: var(--wp--preset--shadow--md);
	}

	/* Transparent only on hero pages while at the top */
	body:has(.sya-hero, .sya-hero-curved)
		.wp-block-template-part:has(.site-header:not(.is-stuck)) {
		background: transparent;
		box-shadow: none;
	}

	/* ----- Inner content: centre + pad ----- */
	.site-header {
		max-inline-size: var(--wp--style--global--wide-size, 1200px);
		margin-inline: auto;
		padding-block: var(--wp--preset--spacing--30, 0.75rem);
		padding-inline: var(--wp--preset--spacing--40, 1rem);
	}

	/* ----- Logo (white while transparent over the rose hero) ----- */
	.site-header .custom-logo {
		max-block-size: 3rem;
		inline-size: auto;
		transition: filter var(--wp--custom--timing--normal);
	}

	body:has(.sya-hero, .sya-hero-curved)
		.wp-block-template-part:has(.site-header:not(.is-stuck))
		.custom-logo {
		filter: brightness(0) invert(1);
	}

	/* ----- Link-colour state value (consumed unlayered below) ----- */
	.site-header .wp-block-navigation {
		--nav-link-color: var(--wp--preset--color--base);
	}

	.wp-block-template-part:has(.site-header.is-stuck) .wp-block-navigation,
	body:not(:has(.sya-hero, .sya-hero-curved))
		.site-header
		.wp-block-navigation {
		--nav-link-color: var(--wp--preset--color--contrast);
	}
}

/* ==========================================================================
   UNLAYERED — must beat core's unlayered Navigation CSS (no !important).
   ========================================================================== */

/* Top-level links inherit the state colour from the nav; hamburger + close
   match the bar (cream over hero, taupe on cream). */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--nav-link-color);
}

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

/* ----- Custom breakpoint: stay collapsed (hamburger) up to 721px ----------
   Core flips to the inline desktop nav at min-width:600px; re-assert mobile
   behaviour across the 600–720px gap so the real breakpoint is 721px. */
@media (min-width: 600px) and (max-width: 720.98px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		inline-size: auto;
	}
}

/* ----- Mobile (< 721px): cream dropdown BELOW the header ----------------- */
@media (max-width: 720.98px) {
	/* Drop the menu below the header bar instead of core's fullscreen overlay.
	   Header height = logo (3rem) + 2× block padding. */
	/* selector includes :not(.has-background) + extra classes to out-specify
	   core's (0,4,0) white overlay fallback for backgroundless navs. */
	.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset-block-start: calc(3rem + 2 * var(--wp--preset--spacing--30, 0.75rem));
		inset-block-end: auto;
		inset-inline: 0;
		block-size: auto;
		max-block-size: calc(100svh - (3rem + 2 * var(--wp--preset--spacing--30, 0.75rem)));
		overflow-y: auto;
		background-color: var(--wp--preset--color--base);
		padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
		box-shadow: var(--wp--preset--shadow--md);
		/* Core leaves an identity transform here (from its open animation), which
		   creates a containing block that traps our position:fixed close button.
		   Clear it so the close (X) can pin to the header/viewport. */
		transform: none;
		animation: none;
	}

	/* Kill the fullscreen top padding + left-align every level */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		align-items: flex-start;
	}

	/* Submenus in the dropdown are in-flow accordions, not fly-out panels */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		inset-block-start: auto;
		min-inline-size: 0;
		border: 0;
		box-shadow: none;
		background-color: transparent;
		padding-inline-start: var(--wp--preset--spacing--30, 0.75rem);
	}

	/* Taupe text on the cream dropdown */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: var(--wp--preset--color--contrast);
	}

	/* Hamburger → X in place: hide the hamburger when open, pin the close button
	   to the header's top-right (where the hamburger sits, 24px icon). */
	.site-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}
	/* high specificity to beat core's close-button positioning; pin to the
	   header's top-right so the X lands where the hamburger was. */
	.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		inset-block-start: 1.25rem;
		inset-block-end: auto;
		inset-inline-end: var(--wp--preset--spacing--40, 1rem);
		inset-inline-start: auto;
	}
}

/* ----- Desktop (≥ 721px): submenu fly-out panels, cream ------------------ */
@media (min-width: 721px) {
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
		border-radius: var(--wp--preset--border--radius--small, 0.25rem);
		box-shadow: var(--wp--preset--shadow--md);
		min-inline-size: 14rem;
		padding-block: var(--wp--preset--spacing--10, 0.25rem);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--contrast);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:where(:hover, :focus) {
		color: var(--wp--preset--color--primary);
		background-color: var(--color-primary-alpha-10, rgb(194 114 128 / 0.1));
	}
}