/**
 * Site header.
 *
 * Header markup is a template, not a block, so it has no block.json to carry
 * its styles — see sws-kit/docs/core-blocks.md. It is also never rendered in
 * the editor canvas, so plain media queries are honest here; the container
 * query rule applies to blocks.
 *
 * The bar is always fixed to the top of the viewport. Three states of one
 * element (docs/figma-template/blocks/header.md):
 *   default     — solid white bar, 120px tall on desktop
 *   over-hero   — transparent, laid over a light hero; switched by the
 *                 .sws-header-over-hero body class
 *   pinned      — frosted glass, shrunk; switched by the .sws-header-pinned
 *                 body class from js/scroll-ui.js once the page is scrolled
 *
 * Neither the sticky behaviour nor the pinned look is drawn in Figma — the
 * template only notes that its demo header is sticky.
 *
 * Show/hide of .menu-toggle and .nav-menu belongs to style.css and
 * js/navigation.js. Nothing here sets `display` on them below 782px.
 *
 * The submenu disclosure is the exception: the .sws-header__submenu-toggle
 * button, its caret and the .main-navigation--js gate that hides both without
 * JavaScript all live here, because the .sub-menu rules they work with are
 * here too. Splitting one control across two files would be worse.
 */

/* Geometry
--------------------------------------------- */

/* --sws-header-h is the height the bar keeps at rest and the room the page
   reserves for it; --sws-header-h-pinned is what it shrinks to on scroll.
   scroll-padding-top uses the pinned value so in-page anchors and the skip
   link never land underneath the bar. */
:root {
	--sws-header-h: 4.5rem;
	--sws-header-h-pinned: 3.75rem;

	/* How far below the viewport top the bar starts. Non-zero only under the
	   admin bar, see below. */
	--sws-header-offset: 0px;
}

@media (min-width: 782px) {

	:root {
		--sws-header-h: var(--wp--custom--header-height, 120px);
		--sws-header-h-pinned: 5rem;
	}
}

html {
	scroll-padding-top: var(--sws-header-h-pinned);
}

.sws-header {
	position: fixed;
	inset-inline: 0;
	top: var(--sws-header-offset);
	z-index: 100;
	background-color: var(--wp--preset--color--white, #fff);
	transition: background-color var(--wp--custom--transition, 200ms ease), box-shadow var(--wp--custom--transition, 200ms ease);
}

/* The header is out of flow, so the page reserves its height instead. The
   over-hero state opts out — there the hero's own top padding is that room. */
.site {
	padding-top: var(--sws-header-h);
}

/* For a logged-in user WordPress prints a fixed admin bar over everything
   (z-index 99999), and a fixed header would slide underneath it. Its height is
   32px, 46px on narrow screens; below 600px it turns absolute and scrolls away
   with the page, so there the header goes back to the top edge. Carried as a
   variable because the mobile menu has to subtract the same amount. */
.admin-bar {
	--sws-header-offset: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar {
		--sws-header-offset: 46px;
	}
}

@media screen and (max-width: 600px) {

	.admin-bar {
		--sws-header-offset: 0px;
	}
}

.sws-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	max-width: var(--wp--custom--container, 1170px);
	min-height: var(--sws-header-h);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter, 1rem);
	transition: min-height var(--wp--custom--transition, 200ms ease), padding-top var(--wp--custom--transition, 200ms ease);
}

/* Brand
--------------------------------------------- */

.sws-header__brand {
	flex: 0 0 auto;
}

.sws-header__brand-link {
	display: inline-block;
	color: var(--wp--preset--color--dark, #232d36);
	text-decoration: none;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-header__brand-link img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 2.5rem;
	height: auto;
}

.sws-header__wordmark {
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Toggle
--------------------------------------------- */

.sws-header__toggle {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--dark, #232d36);
	cursor: pointer;
}

.sws-header__burger,
.sws-header__burger::before,
.sws-header__burger::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--wp--custom--transition, 200ms ease), background-color var(--wp--custom--transition, 200ms ease);
}

.sws-header__burger {
	position: relative;
	margin-inline: auto;
}

.sws-header__burger::before,
.sws-header__burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.sws-header__burger::before {
	top: -7px;
}

.sws-header__burger::after {
	top: 7px;
}

/* Open state: the bars fold into a cross. */
.toggled .sws-header__burger {
	background-color: transparent;
}

.toggled .sws-header__burger::before {
	transform: translateY(7px) rotate(45deg);
}

.toggled .sws-header__burger::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Menu
--------------------------------------------- */

.sws-header__menu,
.sws-header__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header__menu a {
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--wp--custom--transition, 200ms ease);
}

.sws-header__menu a:hover,
.sws-header__menu .current-menu-item > a,
.sws-header__menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--dark, #232d36);
}

/* Submenu indicator. */
.sws-header__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

/* Call to action: the menu item flagged .sws-menu-cta gets the site button
   look from theme.json through the wp-element-button class added in PHP.
   Colour is restated because .sws-header__menu a outranks .wp-element-button. */
.sws-header__menu .sws-menu-cta > a {
	display: inline-block;
	color: var(--wp--preset--color--white, #fff);
}

/* Colour only. display must never be restated here: the mobile panel below
   overrides it to block, and a :hover/:focus selector outranks that override —
   which used to shrink the button back to its text width on hover and, since
   :focus sticks after a tap, leave it shrunk on a touch screen. */
.sws-header__menu .sws-menu-cta > a:hover,
.sws-header__menu .sws-menu-cta > a:focus {
	color: var(--wp--preset--color--white, #fff);
}

/* Submenu toggle
--------------------------------------------- */

/* Printed next to every top-level parent link by sws_theme_menu_submenu_toggle()
   in inc/template-functions.php. It is the disclosure control of the mobile
   panel and exists nowhere else: on desktop the dropdown opens on hover and on
   :focus-within, so the button stays hidden — the rule that reveals it lives
   inside the mobile media query and is gated on .main-navigation--js, the class
   js/navigation.js adds. Without JavaScript neither the button nor the closed
   state exists, and the submenu is simply always open. */
.sws-header__submenu-toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--body, #7b7b8a);
	cursor: pointer;
}

/* Same geometry as the caret of .menu-item-has-children > a, but sized in rem:
   a <button> does not inherit the 1.125rem of the menu link, so 0.4em would
   come out smaller here. 0.45rem is 0.4em of 18px. */
.sws-header__submenu-caret {
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
	transition: transform var(--wp--custom--transition, 200ms ease);
}

.sws-header__submenu-toggle[aria-expanded="true"] > .sws-header__submenu-caret {
	transform: translateY(0.15rem) rotate(225deg);
}

/* Focus
--------------------------------------------- */

.sws-header a:focus-visible,
.sws-header button:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 2px;
}

/* Mobile
--------------------------------------------- */

@media (max-width: 781px) {

	.sws-header__menu {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--wp--preset--spacing--20, 1rem) var(--wp--custom--gutter, 1rem) var(--wp--preset--spacing--30, 1.5rem);
		background-color: var(--wp--preset--color--white, #fff);
		box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));

		/* The header is fixed, so this panel can no longer be reached by
		   scrolling the page. It has to scroll on its own, or the tail of a
		   long menu becomes unreachable.

		   box-sizing is load-bearing: the theme has no global border-box, so
		   without it max-height would cap the content box and the panel would
		   still hang its own padding past the bottom of the screen. */
		box-sizing: border-box;
		max-height: calc(100dvh - var(--sws-header-h) - var(--sws-header-offset));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* A tap target of at least 44px, the size the burger and the lead-form
	   checkbox already keep. The link is a flex box rather than a padded inline
	   one so the whole row is clickable, not just the glyphs. The call to
	   action is out: it carries its own padding from theme.json. */
	.sws-header__menu a:not(.wp-element-button) {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}

	/* The row height now sets the rhythm, so the gaps between items shrink —
	   at the old 1rem the panel grew about 100px taller than it needs to be and
	   started scrolling on a short screen for no reason. */
	.sws-header__menu > li + li {
		margin-top: 0.25rem;
	}

	.sws-header__menu .sub-menu {
		margin-top: var(--wp--preset--spacing--20, 1rem);
		padding-left: var(--wp--preset--spacing--20, 1rem);
		border-left: 2px solid var(--wp--preset--color--shade, #f8f8f8);
	}

	/* A parent is one row — link plus disclosure button — with the panel
	   wrapping onto the next line. */
	.main-navigation--js .sws-header__menu > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-navigation--js .sws-header__menu > .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.main-navigation--js .sws-header__menu > .menu-item-has-children > .sub-menu {
		flex-basis: 100%;
	}

	/* The caret belongs to the button here, not to the link: the link navigates,
	   the button opens the panel. */
	.main-navigation--js .sws-header__menu > .menu-item-has-children > a::after {
		display: none;
	}

	.main-navigation--js .sws-header__submenu-toggle {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
	}

	.main-navigation--js .sws-header__submenu-toggle:hover,
	.main-navigation--js .sws-header__menu > .menu-item-has-children.is-open > .sws-header__submenu-toggle {
		color: var(--wp--preset--color--dark, #232d36);
	}

	/* Collapsed only where JavaScript can expand it again. Without JS there is
	   no button, so the submenu stays open — the contract .menu-toggle and
	   .nav-menu already keep in style.css.

	   No :focus-within here, and that is load-bearing: the button is a sibling
	   of .sub-menu inside the same li, so focusing it would hold the panel open
	   and the second tap could never close it. Keyboard users reach the submenu
	   through the button itself, which sits in the tab order between the parent
	   link and the panel. */
	.main-navigation--js .sws-header__menu .sub-menu {
		display: none;
	}

	.main-navigation--js .sws-header__menu > .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	/* No margin between submenu rows: at 44px each they separate themselves. */

	.sws-header__menu .sws-menu-cta {
		margin-top: var(--wp--preset--spacing--30, 1.5rem);
	}

	.sws-header__menu .sws-menu-cta > a {
		display: block;
		text-align: center;
	}
}

/* Desktop
--------------------------------------------- */

@media (min-width: 782px) {

	.sws-header__brand-link img {
		max-height: 3.375rem;
	}

	.sws-header__menu {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--40, 1.875rem);
	}

	.sws-header__menu > li {
		position: relative;
	}

	.sws-header__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 15rem;
		padding: var(--wp--preset--spacing--20, 1rem) 0;
		border-radius: var(--wp--custom--radius, 8px);
		background-color: var(--wp--preset--color--white, #fff);
		box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.5rem);
		transition: opacity var(--wp--custom--transition, 200ms ease), transform var(--wp--custom--transition, 200ms ease), visibility var(--wp--custom--transition, 200ms ease);
	}

	.sws-header__menu > li:hover > .sub-menu,
	.sws-header__menu > li:focus-within > .sub-menu,
	.sws-header__menu > li.focus > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.sws-header__menu .sub-menu a {
		display: block;
		padding: 0.5rem var(--wp--preset--spacing--50, 2rem);
		white-space: nowrap;
	}
}

/* Transparent state over a hero
--------------------------------------------- */

/* The hero starts at the very top of the page, so nothing is reserved for the
   header here — the hero's own top padding is the room it sits in. */
.sws-header-over-hero .site {
	padding-top: 0;
}

.sws-header-over-hero .sws-header {
	background-color: transparent;
}

@media (min-width: 782px) {

	.sws-header-over-hero .sws-header__inner {
		/* The hero must leave at least this much air at its top. */
		min-height: 5.75rem;
		padding-top: 2rem;
	}
}

/* Pinned state
--------------------------------------------- */

/* Placed after the over-hero block on purpose: the two carry the same
   specificity, so source order is what lets this one reset the transparent
   state's background and its extra air. */

.sws-header-pinned .sws-header {
	background-color: rgba(255, 255, 255, 0.88);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.sws-header-pinned .sws-header {
		-webkit-backdrop-filter: blur(12px) saturate(1.4);
		backdrop-filter: blur(12px) saturate(1.4);
	}
}

/* Without backdrop-filter the menu would sit straight on top of raw page
   content, so keep the fill near-opaque there. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.sws-header-pinned .sws-header {
		background-color: rgba(255, 255, 255, 0.96);
	}
}

.sws-header-pinned .sws-header__inner {
	min-height: var(--sws-header-h-pinned);
	padding-top: 0;
}

/* Reduced motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sws-header,
	.sws-header__inner,
	.sws-header__burger,
	.sws-header__burger::before,
	.sws-header__burger::after,
	.sws-header__menu a,
	.sws-header__menu .sub-menu,
	.sws-header__submenu-caret {
		transition: none;
	}
}