/*
 * pm-mobile-menu — the mobile navigation panel (WO-19).
 *
 * Source frame: docs/design/frames/19-mobile-nav.json (nodes 133:3122
 * closed, 133:3257 open, 133:4156 level 2) — the full-screen panel below the
 * 64px bar: Blush Linen, padding 24 top / 24 sides / 64 bottom, gap 40
 * (measured.panel), the primary menu as rows, Products expandable to the
 * four families, the system primary Contact button full width
 * (contradictions[1]).
 *
 * Compiled to assets/css/components/mobile-menu.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Never type a breakpoint
 * width here.
 *
 * Every colour is a --pm-color-* token; spacing, motion and font values come
 * from tokens/tokens.json. No hex value and no literal breakpoint width may
 * appear in this file. The values the token file does not hold (the 1px
 * hairline, the 16px and 24px icon boxes, the 64px bar height this panel
 * hangs from) are typed with a comment citing the extract — the same
 * technique as the header's 80px bar height and the button's 14px label.
 *
 * The panel is always Blush Linen with ink text on BOTH header variants
 * (WO-19 AC 5 — the frame): the bar's colours follow the variant, the
 * panel's do not.
 *
 * Above the laptop breakpoint the panel is display: none and the behaviour
 * bails on matchMedia (WO-19 AC 3) — the desktop menu owns the navigation
 * there.
 */

/*
 * The hidden attribute is the closed state. The UA stylesheet already
 * hides it; this explicit guard keeps the panel closed even under the
 * display: flex rule below.
 */
.pm-mobile-menu[hidden] {
	display: none;
}

/*
 * The panel: fixed, from the bar's bottom to the viewport bottom (WO-19
 * AC 2). The bar is 64px high below the laptop breakpoint
 * (19-mobile-nav.json#measured.nav_bar.height, typed in header.css like the
 * desktop bar's 80px) — the same figure typed here, the two rules citing
 * each other. z-index 10: above the page content, the mega panel's own
 * value. The panel scrolls internally when the content is taller than the
 * viewport (test plan 2's 500px-high viewport).
 */
.pm-mobile-menu {
	position: fixed;
	top: 64px; /* the bar's height below laptop — header.css's min-height */
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10; /* above the page content, inside the header's context */
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-10); /* 40 — measured.panel.gap */
	/* 24 top, 24 sides, 64 bottom (measured.panel.padding). */
	padding: var(--pm-space-6) var(--pm-space-6) var(--pm-space-16);
	background-color: var(--pm-color-surface);
	color: var(--pm-color-ink);
	overflow-y: auto;
	/* Motion (WO-19 AC 4): the panel fades in over the fast duration;
	   reduced motion neutralises it below. The hidden attribute is the
	   closed state; the open class is added after a reflow so the
	   transition runs (the mega panel's technique). */
	opacity: 0;
	transition: opacity var(--pm-motion-duration-fast) var(--pm-motion-ease-standard);
}

.pm-mobile-menu.pm-mobile-menu--open {
	opacity: 1;
}

/*
 * The eyebrow: the section-header pattern — accent rule + Caption Meta
 * accent text, 16px apart (28-intro.json#measured.eyebrow, the mega panel's
 * own citation) — left-aligned at the top of the panel (measured.panel
 * .eyebrow). Styled here, not reused from section-header.css, because that
 * component stylesheet loads only through its widget (WO-79) and the header
 * renders on every page.
 */
.pm-mobile-menu__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-4);
}

.pm-mobile-menu__eyebrow-rule {
	flex: none;
	width: 40px;
	height: 1px;
	background-color: var(--pm-color-accent);
}

.pm-mobile-menu__eyebrow-text {
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-caption);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-normal);
	letter-spacing: var(--pm-tracking-caption);
	text-transform: uppercase;
	color: var(--pm-color-accent);
}

/*
 * The rows (measured.panel.list.rows): padding 24 block, a 1px Powder Blush
 * bottom border, the first row also a top border. WordPress's own
 * current-menu-item class rides along on the li but recolours nothing — the
 * frame records no selected state for the panel.
 */
.pm-mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-mobile-menu__row {
	padding-block: var(--pm-space-6); /* 24 — measured.panel.list.rows */
	border-bottom: 1px solid var(--pm-color-surface-alt);
}

.pm-mobile-menu__list > li:first-child {
	border-top: 1px solid var(--pm-color-surface-alt);
}

/*
 * The row label: H4 Label — Roboto Regular 18px uppercase, ink
 * (measured.panel.list.rows; the size is the WO-38 h4 token, the face the
 * family token's business). Shared by the plain link and the expandable
 * toggle's label span.
 */
.pm-mobile-menu__link,
.pm-mobile-menu__toggle {
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h4);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-tight);
	text-transform: uppercase;
	color: var(--pm-color-ink);
	text-decoration: none;
	overflow-wrap: break-word; /* a long Dutch label wraps (MISTAKES.md §E4) */
}

/* The plain row's link fills the row — the whole row is the target. */
.pm-mobile-menu__link {
	display: block;
}

/*
 * The expandable row's toggle (WO-19 AC 2): a real <button
 * aria-expanded aria-controls> — Enter and Space operate it natively. Full
 * width, label left and the state icon right (the accordion toggle's
 * layout). The label turns accent when open (measured.panel.list.rows —
 * "its title turns Terra Sienna when open"); the icon is accent in both
 * states. Colour-only transition over the base duration, the accordion's
 * own convention.
 */
.pm-mobile-menu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-space-4);
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition-property: color;
	transition-duration: var(--pm-motion-duration-base);
	transition-timing-function: var(--pm-motion-ease-standard);
}

.pm-mobile-menu__row--open .pm-mobile-menu__toggle {
	color: var(--pm-color-accent);
}

/*
 * The state icon (measured.panel.list.rows — the 16px plus right, accent,
 * minus when open): plus on the closed row, minus on the open one, both
 * drawing with currentColor painted accent. The swap is positional (plus
 * first, minus second inside __icon) — the accordion's convention; display,
 * not a transition, the frame records no icon motion.
 */
.pm-mobile-menu__icon {
	flex: none;
	display: inline-flex;
	color: var(--pm-color-accent);
}

.pm-mobile-menu__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.pm-mobile-menu__icon svg:nth-child(2) {
	display: none;
}

.pm-mobile-menu__row--open .pm-mobile-menu__icon svg:nth-child(1) {
	display: none;
}

.pm-mobile-menu__row--open .pm-mobile-menu__icon svg:nth-child(2) {
	display: block;
}

/*
 * The family children (measured.panel.list.children): gap 24, indented 16,
 * 16px above the list — the 16 above lives INSIDE the animated box (the
 * accordion panel-inner's rule) so the collapse clips it instead of
 * snapping it away. Roboto Regular 18px ink, sentence case — no
 * text-transform, the row label's uppercase is not inherited here.
 */
.pm-mobile-menu__children {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-6); /* 24 — measured.panel.list.children */
	margin: 0;
	/* 16 above, 16 left — measured.panel.list.children. */
	padding: var(--pm-space-4) 0 0 var(--pm-space-4);
	list-style: none;
	/* The height is animated by assets/js/mobile-menu.js (from 0 to the
	   measured content height and back), so the list clips while animating
	   and hands the height back to CSS when settled — the shared
	   accordion's technique. [hidden] is the closed state the server
	   renders. */
	overflow: hidden;
	transition-property: height;
	transition-duration: var(--pm-motion-duration-base);
	transition-timing-function: var(--pm-motion-ease-standard);
}

.pm-mobile-menu__children[hidden] {
	display: none;
}

.pm-mobile-menu__children a {
	display: block;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h4); /* 18 — measured.panel.list.children */
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-tight);
	color: var(--pm-color-ink);
	text-decoration: none;
	overflow-wrap: break-word; /* a long Dutch label wraps (MISTAKES.md §E4) */
}

/*
 * The Contact button: the system primary at full width
 * (contradictions[1]) — pm-button's geometry and colours stand; only the
 * width is this panel's.
 */
.pm-mobile-menu__cta {
	width: 100%;
}

/*
 * WO-09/WO-16's focus ring convention (2px accent, 2px offset) on every
 * focusable panel element.
 */
.pm-mobile-menu__link:focus-visible,
.pm-mobile-menu__toggle:focus-visible,
.pm-mobile-menu__cta:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/*
 * Above the laptop breakpoint the panel does not exist (WO-19 AC 3): the
 * desktop menu shows and the behaviour bails on matchMedia. The markup's
 * hidden attribute keeps it closed below laptop until the toggle opens it.
 */
@media (min-width: 1024px) {
	.pm-mobile-menu {
		display: none;
	}
}

/*
 * Reduced motion neutralises the panel's fade and the children's height
 * transition (WO-19 AC 4; MEMORY.md §3.5). mobile-menu.js checks the same
 * query and snaps the state without the height bookkeeping, so the settled
 * state is reached without waiting for a transitionend that the rule above
 * prevents. Ticket 54 — the row toggle's own colour transition had no
 * guard anywhere in this file; added here alongside the others.
 */
@media (prefers-reduced-motion: reduce) {
	.pm-mobile-menu,
	.pm-mobile-menu__children,
	.pm-mobile-menu__toggle {
		transition: none;
	}
}