/**
 * Header (Figma: Header/Desktop, Header/Mobile+Tablet, Menu drawer, Nav link, Icon button, Logo lockup).
 * Tokens only. The desktop/mobile switch is custom.breakpoint.nav (1024px, decision 21); media queries
 * can't read custom properties, so the value is repeated as a literal (decision 1).
 */

.aa-header__desktop,
.aa-header__mobile {
	position: relative;
	z-index: 2;
}

/* custom.breakpoint.nav = 1024px */
@media (max-width: 1023.98px) {
	.aa-header__desktop { display: none; }
}
/* custom.breakpoint.nav = 1024px */
@media (min-width: 1024px) {
	.aa-header__mobile { display: none; }
}

/* ---------- Skip link: first focusable element, visible on focus ---------- */
:root .skip-link.screen-reader-text:focus {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--8);
	inset-inline-start: var(--wp--preset--spacing--8);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--text--on-light);
	font-size: var(--wp--preset--font-size--body);
	text-decoration: underline;
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* ---------- Logo lockup (placeholder image until the client asset arrives) ---------- */
.aa-logo {
	display: inline-block;
	line-height: 0;
	border-radius: var(--wp--custom--radius--sm);
}
.aa-logo img {
	display: block;
}
.aa-logo:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}
/* Figma: the 538×179 header image overhangs the 146px band content by 17px top and bottom. */
/* Each placement has an explicit width (Figma's box), so the box is the right size before the image arrives
   (no layout shift) and doesn't depend on which srcset file loads. The height follows the width/height
   attributes' aspect ratio; object-fit keeps an off-ratio upload inside Figma's box. */
.aa-logo img {
	height: auto;
	max-inline-size: 100%;
	object-fit: contain;
}
.aa-logo--header img {
	inline-size: var(--wp--custom--logo--header-width);
	max-block-size: var(--wp--custom--logo--header-height);
	margin-block: calc(-1 * var(--wp--custom--logo--header-bleed));
}
.aa-logo--mobile img {
	inline-size: var(--wp--custom--logo--mobile-width);
	max-block-size: var(--wp--custom--logo--mobile-height);
}
/* Below ~360px the 251px logo + 44px button + padding don't fit: the logo shrinks (keeping its
   proportions) so the menu/close button stays a full 44px and nothing overflows the viewport. */
.aa-header__bar > .aa-logo,
.aa-drawer__top > .aa-logo {
	flex: 0 1 auto;
	min-width: 0;
}

/* ---------- Desktop: logo band + nav band ---------- */
/* Header texture (decision 28): the client's 1440×154 paper texture over solid bg/header (fallback while it loads
   or if it fails). Shown at its native scale, anchored to the band's bottom edge, stretched only above 1440px.
   The header-to-nav torn edge continues the same texture through its mask. */
.aa-header__band,
.aa-header__mobile {
	--aa-header-texture: url("../images/header-texture.jpg");
	--aa-torn-texture: var(--aa-header-texture);
	--aa-torn-texture-width: var(--wp--custom--breakpoint--desktop);
	background: var(--aa-header-texture) center bottom / max(100%, var(--wp--custom--breakpoint--desktop)) auto no-repeat var(--wp--custom--color--bg--header);
}
.aa-header__band {
	padding-block: var(--wp--preset--spacing--4);
}
/* No text line box around the logo, so the band is Figma's 154px (4 + 146 + 4), not 162px. */
.aa-header__brand {
	display: flex;
}
.aa-header__navband {
	background-color: var(--wp--custom--color--bg--nav);
	padding-block: var(--wp--preset--spacing--4);
}
.aa-nav--desktop,
.aa-nav--desktop .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--4);
}
.aa-nav--desktop .wp-block-navigation__container {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
}
/* 1×20px border/gold-subtle separators between items (decorative). */
.aa-nav--desktop .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	flex: none;
	inline-size: var(--wp--custom--border-width--hairline);
	block-size: var(--wp--custom--nav--separator-height);
	margin-inline-end: var(--wp--preset--spacing--4);
	background-color: var(--wp--custom--color--border--gold-subtle);
}

/* Nav labels: gold-text gradient (decision 19), solid gold-hover on hover/focus (Figma Nav link). */
.aa-nav .wp-block-navigation-item__label {
	background-image: var(--wp--preset--gradient--gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.aa-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) .wp-block-navigation-item__label {
	background-image: none;
	color: var(--wp--custom--color--accent--gold-hover);
}
@media (forced-colors: active) {
	.aa-nav .wp-block-navigation-item__label { background-image: none; color: LinkText; }
}

/* ---------- Mobile/tablet header bar ---------- */
.aa-header__mobile {
	box-shadow: var(--wp--preset--shadow--soft);
}
.aa-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--margin);
}

/* ---------- Icon button (Figma: Icon button, Size=44) ---------- */
.aa-icon-button {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: var(--wp--custom--tap-target--base);
	block-size: var(--wp--custom--tap-target--base);
	padding: 0;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}
.aa-icon-button__icon {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--wp--custom--border-width--focus);
}
/* Menu: bg/nav fill, gold-light icon. */
.aa-menu-button {
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--accent--gold-light);
}
/* Close: bg/panel fill, border/gold-subtle icon. */
.aa-drawer__close {
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--border--gold-subtle);
}
/* Hover: gold-hover border. Figma also turns the icon gold-hover on a cream fill (1.05:1, invisible), so the
   icon stays visible instead: gold-hover on the ink menu button, ink on the cream close button.
   docs/deviations-from-figma.md #4. */
.aa-menu-button:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
}
.aa-drawer__close:hover {
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--text--on-light);
}
/* Focus (Figma): bg/nav fill, border/gold, gold-light icon, Focus/Ring. */
.aa-icon-button:focus-visible {
	background-color: var(--wp--custom--color--bg--nav);
	border-color: var(--wp--custom--color--border--gold);
	color: var(--wp--custom--color--accent--gold-light);
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}

/* ---------- Menu drawer (native <dialog>, decision 20) ---------- */
dialog.aa-drawer {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
	border: 0;
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--accent--gold-light);
	overflow-y: auto;
}
dialog.aa-drawer[open] {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}
/* Body scroll lock while the drawer is open (CSS only). */
html:has(dialog.aa-drawer[open]) {
	overflow: hidden;
}
.aa-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
}

/* Drawer nav (Figma: Nav link, Size=Drawer): full-width rows, Nav/Mobile, 48px+ targets, taupe rule. */
.aa-nav--drawer,
.aa-nav--drawer .wp-block-navigation__container {
	gap: 0;
	inline-size: 100%;
	align-items: stretch;
}
.aa-nav--drawer .wp-block-navigation-item {
	inline-size: 100%;
}
:root .aa-nav--drawer .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	min-height: var(--wp--custom--tap-target--lg);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	border-bottom: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--bg--header);
	font-size: var(--wp--preset--font-size--nav-mobile);
	line-height: var(--wp--custom--line-height--nav-mobile);
}
/* Active (current page, or the current piece's Section): the gold fleuron from the Ornament divider sits in the
   left padding, so labels don't shift. Shape, not colour alone; the drawer has no underline (decision 27). */
:root .aa-nav--drawer .wp-block-navigation-item__content {
	position: relative;
}
:root .aa-nav--drawer .wp-block-navigation-item__content[aria-current] {
	text-decoration: none;
}
:root .aa-nav--drawer .wp-block-navigation-item__content[aria-current]::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc((var(--wp--preset--spacing--24) - var(--wp--custom--ornament--fleuron)) / 2);
	inline-size: var(--wp--custom--ornament--fleuron);
	block-size: var(--wp--custom--ornament--fleuron);
	transform: translateY(-50%);
	background-color: var(--wp--custom--color--accent--gold);
	-webkit-mask: var(--aa-fleuron) center / contain no-repeat;
	mask: var(--aa-fleuron) center / contain no-repeat;
}
@media (forced-colors: active) {
	:root .aa-nav--drawer .wp-block-navigation-item__content[aria-current]::before { background-color: LinkText; }
}

/* ---------- No-JS fallback: show the drawer's links inline under the bar ---------- */
html:not(.aa-js) .aa-menu-button,
html:not(.aa-js) .aa-drawer__top,
html:not(.aa-js) dialog.aa-drawer .aa-ornament {
	display: none;
}
html:not(.aa-js) dialog.aa-drawer {
	display: block;
	position: static;
	block-size: auto;
	padding: 0 0 var(--wp--preset--spacing--16);
}