/**
 * 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.
 */

/* 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,
.sws-header__menu .sws-menu-cta > a:hover,
.sws-header__menu .sws-menu-cta > a:focus {
	display: inline-block;
	color: var(--wp--preset--color--white, #fff);
}

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

	.sws-header__menu > li + li {
		margin-top: var(--wp--preset--spacing--20, 1rem);
	}

	.sws-header__menu .sub-menu {
		display: none;
		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);
	}

	/* .focus comes from js/navigation.js on the first tap; :focus-within
	   covers keyboard users. */
	.sws-header__menu .menu-item-has-children.focus > .sub-menu,
	.sws-header__menu .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	.sws-header__menu .sub-menu li + li {
		margin-top: 0.75rem;
	}

	.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 {
		transition: none;
	}
}