/*
 * Site chrome (THM3): skip link, sticky header, desktop nav, header search, menu dialog, footer.
 * Only --occ-* tokens. Desktop nav from 80rem (8 top-level items + 220px logo + 5 icons fit without cramming; COMPONENT_CONTRACTS "Header").
 */

@layer occ.components {
	html {
		/* Anchor targets clear the sticky header. */
		scroll-padding-top: var(--occ-space-24);
	}

	html:has(.occ-menu-dialog[open]) {
		overflow: hidden;
	}

	/* Skip link: hidden by the .occ-visually-hidden-focusable utility until focused. */
	.occ-skip-link {
		position: fixed;
		top: var(--occ-space-2);
		left: var(--occ-space-2);
		z-index: var(--occ-z-toast);
		padding: var(--occ-space-3) var(--occ-space-4);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
	}

	.occ-site-main:focus {
		outline: none;
	}

	/* Header ------------------------------------------------------------- */
	.occ-site-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0);
		z-index: var(--occ-z-sticky);
		background: var(--occ-bg);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-site-header__inner {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-4); /* ≥20% logo height clear space with room to breathe */
	}

	.occ-site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--occ-space-1);
		margin-inline-start: auto;
	}

	/* 320px (400% zoom reflow): the 40px symbol + 5 × 44px actions need 276px, so the header
	   alone takes a space-2 gutter here (layout-math exception; the page gutter token is untouched). */
	@media (max-width: 23.99rem) {
		.occ-site-header__inner {
			width: calc(100% - 2 * var(--occ-space-2));
			gap: var(--occ-space-2);
		}

		.occ-site-header__actions {
			gap: 0;
		}
	}

	/* Header logo: horizontal 160–220px from 48rem (LOGO_USAGE min 140px), the 40px symbol below
	   (components.css). Clear space: the header padding and gap exceed 20% of the logo height. */
	.occ-site-header__logo .occ-logo__wordmark img {
		width: clamp(160px, 16vw, 220px);
	}

	/* ThemeToggle: shows the icon of the theme you switch to. Hidden without JS (Light only). */
	html:not([data-theme-pref]) [data-occ-theme-toggle] {
		display: none;
	}

	.occ-theme-toggle__sun,
	[data-theme="dark"] .occ-theme-toggle__moon {
		display: none;
	}

	[data-theme="dark"] .occ-theme-toggle__sun {
		display: inline-block;
	}

	.occ-theme-toggle--labelled {
		width: 100%;
		margin-top: var(--occ-space-8);
	}

	.occ-header-action {
		position: relative;
		display: inline-grid;
		place-items: center;
		width: var(--occ-touch-min);
		height: var(--occ-touch-min);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		text-decoration: none;
		cursor: pointer;
		transition: background var(--occ-duration-base) var(--occ-ease-standard);
	}

	button.occ-header-action {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.occ-header-action:hover,
	.occ-header-search[open] > .occ-header-action {
		background: var(--occ-bg-subtle);
	}

	.occ-header-cart__count {
		position: absolute;
		top: var(--occ-space-1);
		right: 0;
		display: grid;
		place-items: center;
		min-width: calc(var(--occ-space-4) + var(--occ-space-1));
		height: calc(var(--occ-space-4) + var(--occ-space-1));
		padding-inline: var(--occ-space-1);
		border-radius: var(--occ-radius-round);
		color: var(--occ-fg-inverse);
		background: var(--occ-fg);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		line-height: 1;
	}

	/* Search: native <details>; the panel spans the header container on mobile. */
	.occ-header-search > summary {
		list-style: none;
	}

	.occ-header-search > summary::-webkit-details-marker {
		display: none;
	}

	.occ-header-search__panel {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
		box-shadow: var(--occ-shadow-sm);
	}

	.occ-search-form {
		display: flex;
		gap: var(--occ-space-2);
	}

	.occ-search-form .occ-field__control {
		flex: 1;
		min-width: 0;
	}

	/* Desktop nav (hidden below 80rem; the menu dialog takes over). */
	.occ-site-nav {
		display: none;
	}

	.occ-site-nav__list,
	.occ-site-nav .sub-menu,
	.occ-menu-dialog__list,
	.occ-menu-dialog .sub-menu,
	.occ-footer-menu,
	.occ-footer-menu .sub-menu,
	.occ-footer-legal {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-site-nav a,
	.occ-menu-dialog__list a,
	.occ-footer-menu a,
	.occ-footer-legal a {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		color: var(--occ-fg);
		text-decoration: none;
		transition: color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-site-nav a:hover,
	.occ-menu-dialog__list a:hover,
	.occ-footer-menu a:hover,
	.occ-footer-legal a:hover {
		color: var(--occ-accent-ink);
		text-decoration: underline;
	}

	.occ-site-nav [aria-current="page"],
	.occ-site-nav .current-menu-ancestor > a,
	.occ-menu-dialog__list [aria-current="page"],
	.occ-footer-menu [aria-current="page"] {
		text-decoration: underline;
		text-decoration-color: var(--occ-accent-strong);
	}

	.occ-menu-toggle {
		display: inline-grid;
	}

	@media (min-width: 80rem) {
		.occ-site-nav {
			display: block;
			flex: 1;
		}

		.occ-menu-toggle {
			display: none;
		}

		.occ-site-nav__list {
			display: flex;
			justify-content: center;
			gap: var(--occ-space-1);
		}

		.occ-site-nav__list > li {
			position: relative;
		}

		.occ-site-nav__list > li > a {
			padding-inline: var(--occ-space-3);
			font-size: var(--occ-text-sm);
			white-space: nowrap;
		}

		.occ-site-nav .menu-item-has-children > a::after {
			content: "";
			width: 0.4em;
			height: 0.4em;
			margin-inline-start: var(--occ-space-2);
			border-right: var(--occ-border-width-strong) solid currentColor;
			border-bottom: var(--occ-border-width-strong) solid currentColor;
			transform: translateY(-25%) rotate(45deg);
		}

		.occ-site-nav .sub-menu {
			position: absolute;
			top: 100%;
			left: 0;
			min-width: 15rem;
			padding: var(--occ-space-2);
			border: var(--occ-border-width) solid var(--occ-border);
			border-radius: var(--occ-radius-lg);
			background: var(--occ-surface);
			box-shadow: var(--occ-shadow-sm);
			visibility: hidden;
			opacity: 0;
			transform: translateY(calc(-1 * var(--occ-space-1)));
			transition:
				opacity var(--occ-duration-base) var(--occ-ease-standard),
				transform var(--occ-duration-base) var(--occ-ease-standard),
				visibility 0s linear var(--occ-duration-base);
		}

		.occ-site-nav li:is(:hover, :focus-within):not([data-occ-closed]) > .sub-menu {
			visibility: visible;
			opacity: 1;
			transform: none;
			transition-delay: 0s;
		}

		.occ-site-nav .sub-menu a {
			display: flex;
			padding-inline: var(--occ-space-3);
			border-radius: var(--occ-radius-md);
			font-size: var(--occ-text-sm);
		}

		.occ-site-nav .sub-menu a:hover {
			background: var(--occ-bg-subtle);
		}

		.occ-header-search__panel {
			inset-inline: auto 0;
			width: min(26rem, 100%);
		}
	}

	/* Menu dialog (mobile/tablet): a right-hand sheet with an editorial top level. */
	.occ-menu-dialog {
		width: min(28rem, 100%);
		max-width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0 0 0 auto;
		padding: var(--occ-space-3) var(--occ-page-gutter) var(--occ-space-12);
		border: 0;
		color: var(--occ-fg);
		background: var(--occ-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.occ-menu-dialog[open] {
		transform: none;
		transition: transform var(--occ-duration-base) var(--occ-ease-emphasis);
	}

	@starting-style {
		.occ-menu-dialog[open] {
			transform: translateX(100%);
		}
	}

	.occ-menu-dialog::backdrop {
		background: var(--occ-overlay);
	}

	.occ-menu-dialog__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-4);
	}

	.occ-menu-dialog__head form {
		margin: 0;
	}

	.occ-menu-dialog__title {
		margin: var(--occ-space-8) 0 var(--occ-space-2);
		color: var(--occ-fg-muted);
	}

	.occ-menu-dialog__list > li {
		border-bottom: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-menu-dialog__list > li > a {
		display: flex;
		min-height: var(--occ-control-lg);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		letter-spacing: var(--occ-tracking-tight);
	}

	.occ-menu-dialog .sub-menu {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--occ-space-6);
		padding-bottom: var(--occ-space-3);
	}

	.occ-menu-dialog .sub-menu a {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-md);
	}

	/* Footer --------------------------------------------------------------- */
	.occ-site-footer {
		margin-top: var(--occ-space-24);
		padding-top: var(--occ-space-16);
		border-top: var(--occ-border-width) solid var(--occ-border);
		background: var(--occ-bg-subtle);
	}

	.occ-site-footer__grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-12) var(--occ-space-8);
		padding-bottom: var(--occ-space-12);
	}

	.occ-site-footer__brand {
		flex: 1 1 20rem;
		max-width: 26rem;
	}

	.occ-site-footer__brand .occ-eyebrow {
		margin: 0;
		color: var(--occ-accent-ink);
	}

	.occ-site-footer__nav {
		flex: 1 1 9rem;
	}

	.occ-site-footer__nav:focus {
		outline: none;
	}

	.occ-site-footer__nav:first-of-type {
		flex: 2 1 18rem;
	}

	.occ-site-footer__nav .occ-eyebrow {
		margin: 0 0 var(--occ-space-2);
		color: var(--occ-fg-muted);
	}

	.occ-footer-menu--primary {
		columns: 3 9rem;
		column-gap: var(--occ-space-8);
	}

	.occ-footer-menu--primary > li {
		break-inside: avoid;
	}

	.occ-footer-menu--primary > li > a {
		font-weight: var(--occ-fw-bold);
	}

	.occ-footer-menu .sub-menu {
		padding-inline-start: var(--occ-space-3);
		border-inline-start: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-footer-menu .sub-menu a {
		color: var(--occ-fg-muted);
	}

	.occ-footer-menu a,
	.occ-footer-legal a,
	.occ-site-footer__bar a {
		font-size: var(--occ-text-sm);
	}

	.occ-site-footer__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-2) var(--occ-space-6);
		padding-block: var(--occ-space-4);
		border-top: var(--occ-border-width) solid var(--occ-border);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-site-footer__bar p {
		margin: 0;
	}

	.occ-footer-legal {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--occ-space-6);
	}

	.occ-footer-legal a {
		color: var(--occ-fg-muted);
	}
}