/* ==========================================================================
   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.
	   The selector mirrors core's own (five classes, plus .site-header) because
	   core forces min-width:200px and 2rem of padding on both sides here —
	   enough, once nested, to push the menu wider than the phone. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		position: static;
		inset-block-start: auto;
		min-inline-size: 0;
		max-inline-size: 100%;
		border: 0;
		box-shadow: none;
		background-color: transparent;
		padding-inline: var(--wp--preset--spacing--40, 1rem) 0;
	}

	/* Nothing inside the dropdown may exceed the phone's width. */
	.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 {
		max-inline-size: 100%;
		inline-size: 100%;
	}

	/* 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);
	}

	/* Core's open icon is two bars, which reads as a half-drawn hamburger.
	   Drop the SVG and draw three bars from the button itself. */
	.site-header .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		inline-size: 24px;
		block-size: 24px;
		background-image: linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor);
		background-size: 20px 1.5px;
		background-position: 2px 6px, 2px 11.25px, 2px 16.5px;
		background-repeat: no-repeat;
	}

	/*
	 * Collapsible submenus. Core hides the toggle inside the overlay and
	 * renders every level expanded, which turns the mobile menu into a wall of
	 * indented links. Bring the toggle back; navigation.js owns the open state
	 * via .sya-submenu-open, because core's own state getter reports every
	 * submenu as open whenever the overlay is open.
	 */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--primary);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		transition: transform var(--wp--custom--transition--fast, 150ms ease);
	}

	/* Core rotates the chevron off its own aria-expanded, which reads "true"
	   for every submenu while the overlay is open — so the arrows all pointed
	   up before anything was opened. The class we own is the only source of
	   truth here. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] > svg,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon > svg {
		transform: rotate(0deg);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .has-child.sya-submenu-open > .wp-block-navigation__submenu-icon > svg {
		transform: rotate(180deg);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .has-child:not(.sya-submenu-open) > .wp-block-navigation__submenu-container {
		display: none;
	}

	/* One row per item: label left, toggle right, panel on its own line.
	   Core stacks overlay items in a column, so the row direction is set
	   explicitly here. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		inline-size: 100%;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		flex: 1 1 auto;
	}

	/* Core stretches the chevron to the button box in the overlay. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		inline-size: 14px;
		block-size: 14px;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-block: 0.6rem;
	}

	/* The open level is set off by an indent rule rather than indentation
	   alone, so the hierarchy survives three levels deep. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		flex-basis: 100%;
		margin-block: 0 0.5rem;
		border-inline-start: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 30%, transparent);
	}

	/* 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));
	}

}


/* ----- Desktop (≥ 782px): third-level fly-out direction -------------------
   Core positions and flips third-level panels only from 782px up, so these
   overrides match that breakpoint rather than the theme's 721px one. */
@media (min-width: 782px) {
/*
 * Third-level fly-outs open to the RIGHT, the direction their chevron
 * points. Core flips them left whenever the nav is right-justified, which
 * left the arrow contradicting the panel — so we out-specify that rule
 * (it carries six classes) and let navigation.js re-apply the flip via
 * .sya-submenu-left only when the panel really would not fit.
 */
.site-header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	right: auto;
}

/* Not enough room on the right: the panel flips left, so the chevron
   mirrors and moves to the leading edge to keep pointing at it. */
.site-header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .has-child.sya-submenu-left > .wp-block-navigation__submenu-container {
	left: auto;
	right: 100%;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .has-child.sya-submenu-left > .wp-block-navigation__submenu-icon svg {
	transform: rotate(90deg);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .has-child.sya-submenu-left {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .has-child.sya-submenu-left > .wp-block-navigation__submenu-icon {
	margin-inline: 0 0.25em;
}
}