/**
 * SITE HEADER
 *
 * Two independent breakpoints, deliberately:
 *
 *   60rem  (960px)  — layout. Above this the header overlays the hero, so the
 *                     logo sits on the image and goes light. Below, the copy
 *                     comes first, so the header is a normal-flow bar on white.
 *
 *   73.75rem (1180px) — navigation. Below this the links collapse into the
 *                     burger, and the CTA moves inside the panel with them.
 *
 * They are separate because between 960 and 1180 the header still overlays the
 * hero, but the nav has already collapsed. In that band the logo is on the dark
 * image while the burger is on the white copy panel — so they cannot share a
 * colour, and the burger sets its own rather than inheriting.
 */

@layer components {
	.site-header {
		padding-block: var(--space-s);
		padding-inline: var(--header-inline, var(--gutter));
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--space-s);
	}

	.site-header__brand {
		margin-inline-end: auto;
		display: inline-flex;
		align-items: center;
	}
	.site-header__brand img {
		inline-size: auto;
		block-size: var(--logo-height, 3.5rem);
	}
	.site-header__brand .site-title {
		font-family: var(--font-display);
		font-size: var(--fs-display-4);
		line-height: 1;
		text-transform: uppercase;
		color: inherit;
		text-decoration: none;
		max-inline-size: 6ch;
	}

	/* Nav + CTA share this wrapper: a bar row on desktop, the panel on mobile. */
	.site-header__panel {
		display: flex;
		align-items: center;
		gap: var(--space-l);
	}

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-l);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.site-nav__list a {
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--clr-text);
		white-space: nowrap;
	}
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { color: var(--clr-accent); }

	/* ---- Burger ------------------------------------------------------ */

	.nav-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		padding: 0;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-pill);
		background-color: transparent;
		/* Explicit, not inherited: between 960 and 1180 the header is white for
		   the logo, but this button sits on the white copy panel. */
		color: var(--clr-text);
		cursor: pointer;
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}

	/* Three bars drawn in CSS — no icon asset needed. */
	.nav-toggle__icon,
	.nav-toggle__icon::before,
	.nav-toggle__icon::after {
		content: "";
		display: block;
		inline-size: 1rem;
		block-size: 2px;
		background-color: currentcolor;
		transition: transform var(--transition-fast), opacity var(--transition-fast);
	}
	.nav-toggle__icon { position: relative; }
	.nav-toggle__icon::before { position: absolute; inset-block-start: -6px; }
	.nav-toggle__icon::after  { position: absolute; inset-block-start: 6px; }

	.nav-toggle[aria-expanded="true"] {
		background-color: var(--clr-text);
		color: var(--clr-bg);
		border-color: var(--clr-text);
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background-color: transparent; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { transform: translateY(-6px) rotate(-45deg); }

	/* ---- Layout: overlay the hero from 60rem ------------------------- */

	@media (min-width: 60rem) {
		.site-header {
			position: absolute;
			inset-block-start: 0;
			inset-inline: 0;
			z-index: var(--z-sticky);
			padding-inline: var(--header-inline, 2.25rem);   /* 36px */
			--logo-height: 5.125rem;                          /* 82px */
			color: var(--white);                              /* logo sits on the image */
		}

		/* The admin bar offsets the document; an absolute header slides under it. */
		.admin-bar .site-header { inset-block-start: 32px; }
	}

	@media (max-width: 59.999rem) {
		.site-header {
			position: relative;
			z-index: var(--z-raised);
			background-color: var(--clr-bg);
			color: var(--clr-text);
		}
	}

	/* ---- Navigation: burger below 73.75rem (1180px) ------------------ */

	@media (max-width: 73.749rem) {
		.nav-toggle { display: inline-flex; }

		.site-header__panel {
			position: absolute;
			inset-block-start: 100%;
			inset-inline: 0;
			z-index: var(--z-overlay);

			display: none;
			flex-direction: column;
			align-items: stretch;
			gap: var(--space-s);

			padding: var(--space-s) var(--gutter) var(--space-m);
			background-color: var(--clr-bg);
			border-block-end: 1px solid var(--clr-border);
			box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
		}
		.site-header__panel.is-open { display: flex; }

		.site-nav__list {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
		}
		.site-nav__list li + li { border-block-start: 1px solid var(--clr-border); }
		.site-nav__list a {
			display: block;
			padding-block: var(--space-s);
			color: var(--clr-text);
		}

		/* The CTA comes along into the panel rather than staying in the bar. */
		.site-header__cta { align-self: stretch; }
	}
}

@layer components {
	/*
	 * Lounge pages are dark from edge to edge. data-theme="dark" on the header
	 * flips --clr-text, and these two rules are the ones that were pinned to the
	 * light-page treatment: the desktop nav sits on the home page's white copy
	 * panel, which is why it was dark to begin with.
	 */
	.site-header--lounge .site-nav__list a,
	.site-header--lounge .nav-toggle {
		color: var(--clr-text);
	}

	.site-header--lounge .site-nav__list a:hover,
	.site-header--lounge .site-nav__list .current-menu-item > a {
		color: var(--clr-accent);
	}
}