/**
 * Harbor Coffee Roasters — Site chrome
 *
 * Header utility bar, primary navigation (current-page indication), the
 * multi-column footer, the chrome extension regions later features fill in,
 * the style-guide documentation blocks, and the reduced-motion / print /
 * forced-colors safety nets.
 *
 * Every value comes from assets/css/design-tokens.css. Loads after
 * base/layout/controls/cards (see inc/chrome.php).
 */

/* ---------- Header utility bar ---------- */

.site-header__utility {
	background-color: var(--color-neutral-900);
	color: var(--color-neutral-300);
	font-size: var(--text-xs);
}

.site-header__utility-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
	padding-block: var(--space-2);
	text-align: center;
}

@media (min-width: 900px) {
	.site-header__utility-inner {
		justify-content: space-between;
		text-align: start;
	}
}

.site-header__utility a {
	color: var(--color-neutral-100);
	text-decoration: none;
}

.site-header__utility a:hover {
	color: var(--color-accent-300);
}

.site-header__utility :focus-visible {
	outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color-inverse, var(--color-accent-200));
	outline-offset: var(--focus-ring-offset, 2px);
}

/* Extension regions: an unfilled region is never rendered (see
   harbor_coffee_roasters_chrome_region()), so these only style real content. */
.site-region {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	min-width: 0;
}

.site-region ul,
.site-region ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .site-region {
	display: block;
}

.site-footer .site-region ul,
.site-footer .site-region ol {
	display: block;
}

.site-footer .site-region--footer-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* ---------- Branding mark ---------- */

.site-branding a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.site-branding__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-600);
	color: var(--color-neutral-50);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-normal);
}

.site-branding__name {
	min-width: 0;
}

/* ---------- Primary navigation: current page ---------- */

/* aria-current is the contract (inc/chrome.php adds it); the visible style is
   bound to the same attribute so what a screen reader announces and what the
   eye sees can never drift apart. */
.site-nav a[aria-current],
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_ancestor > a {
	color: var(--color-primary-700);
	border-bottom-color: var(--color-primary-600);
	font-weight: var(--weight-semibold);
}

/* In the collapsed mobile panel the underline is replaced by a leading bar,
   because each row is a full-width list item with its own divider. */
.site-header[data-nav-js="ready"] .site-nav .site-nav__list a[aria-current],
.site-header[data-nav-js="ready"] .site-nav .site-nav__list .current-menu-item > a,
.site-header[data-nav-js="ready"] .site-nav .site-nav__list .current_page_item > a {
	box-shadow: inset 3px 0 0 0 var(--color-primary-600);
	background-color: var(--color-primary-50);
}

@media (min-width: 900px) {
	.site-header[data-nav-js="ready"] .site-nav .site-nav__list a[aria-current],
	.site-header[data-nav-js="ready"] .site-nav .site-nav__list .current-menu-item > a,
	.site-header[data-nav-js="ready"] .site-nav .site-nav__list .current_page_item > a {
		box-shadow: none;
		background-color: transparent;
		border-bottom-color: var(--color-primary-600);
	}
}

/* Second level: a simple stacked list under its parent, visible on hover and
   on keyboard focus-within so it is reachable by Tab alone. */
.site-nav .sub-menu {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.site-nav__list > li {
		position: relative;
	}

	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		min-width: 12rem;
		padding: var(--space-2);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background-color: var(--color-bg);
		box-shadow: var(--shadow-lg);
	}

	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li:focus-within > .sub-menu {
		display: block;
	}

	.site-header[data-nav-js="ready"] .site-nav .sub-menu a {
		display: block;
		padding: var(--space-2);
		border-bottom: 0;
	}
}

.site-footer__nav a[aria-current],
.site-footer .current-menu-item > a,
.site-footer .current_page_item > a {
	color: var(--color-accent-300);
	font-weight: var(--weight-semibold);
}

/* ---------- Footer ---------- */

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 600px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10);
	}
}

@media (min-width: 900px) {
	/* The column count depends on how many chrome regions a later feature has
	   filled, so each count gets its own explicit asymmetric track list. */
	.site-footer__grid--2 {
		grid-template-columns: 1.6fr 1fr;
	}

	.site-footer__grid--3 {
		grid-template-columns: 1.6fr 1fr 1.2fr;
	}

	.site-footer__grid--4 {
		grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	}
}

.site-footer__col {
	min-width: 0;
}

.site-footer__blurb {
	max-width: 34ch;
	margin: 0;
	color: var(--color-neutral-300);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.site-footer__mark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	text-decoration: none;
}

.site-footer__mark-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-600);
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
}

.site-footer__mark img {
	max-height: 40px;
	width: auto;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
}

.site-footer__bottom a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer :focus-visible {
	outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color-inverse, var(--color-accent-200));
	outline-offset: var(--focus-ring-offset, 2px);
}

/* ---------- Style guide documentation blocks ---------- */

.styleguide__palette {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.styleguide__palette li {
	max-width: none;
}

.styleguide__chip {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--space-20);
	padding: var(--space-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
}

.styleguide__chip code {
	font-size: var(--text-xs);
	word-break: break-word;
}

.styleguide__chip--on-dark {
	color: var(--color-neutral-50);
}

.styleguide__chip--on-light {
	color: var(--color-neutral-900);
}

.styleguide__type {
	margin: 0;
	padding: 0;
	list-style: none;
}

.styleguide__type > li {
	max-width: none;
	padding-block: var(--space-4);
	border-bottom: var(--border-width) solid var(--color-border);
}

.styleguide__type-sample {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
	overflow-wrap: break-word;
}

.styleguide__type-meta {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	letter-spacing: var(--letter-normal);
}

.styleguide__focus {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
}

.styleguide__focus--inverse {
	background-color: var(--color-neutral-900);
}

.styleguide__focus--inverse,
.styleguide__focus--inverse a {
	color: var(--color-neutral-50);
}

/* Permanently-rendered focus ring so the ring's contrast can be checked in a
   screenshot without having to hold focus on the element. */
.styleguide__ring {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-min-height, 44px);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	color: var(--color-neutral-900);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color, var(--color-primary-700));
	outline-offset: var(--focus-ring-offset, 2px);
}

.styleguide__ring--inverse {
	background-color: var(--color-neutral-900);
	color: var(--color-neutral-50);
	outline-color: var(--focus-ring-color-inverse, var(--color-accent-200));
}

.styleguide__ring--on-primary {
	background-color: var(--color-primary-600);
	color: var(--color-on-primary);
	outline-color: var(--focus-ring-color-on-primary, var(--color-neutral-900));
}

.styleguide__contrast {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.styleguide__contrast li {
	max-width: none;
	padding-block: var(--space-1);
}

.styleguide__contrast b {
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

/* ---------- Reduced motion ---------- */

/* Catch-all for the chrome: non-essential transitions and animations are
   removed, but nothing that affects visibility or layout is changed. */
@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.site-footer *,
	.site-nav a,
	.site-region *,
	.styleguide__ring {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Print ---------- */

@media print {
	.site-header__utility,
	.site-nav__toggle,
	.harbor-skip-link,
	.site-region--footer-newsletter {
		display: none !important;
	}

	.site-header,
	.site-footer {
		background: none !important;
		box-shadow: none !important;
		color: #000 !important;
	}

	.site-footer a,
	.site-footer p,
	.site-footer h2,
	.site-footer__brand,
	.site-footer__blurb,
	.site-footer__heading {
		color: #000 !important;
	}

	.site-header[data-nav-js="ready"] .site-nav,
	.site-header[data-nav-js="ready"] .site-nav__toggle[aria-expanded="true"] + .site-nav {
		display: block !important;
	}

	.site-footer__grid,
	.site-footer__bottom-inner {
		display: block !important;
	}

	.site-footer__mark-glyph {
		background: none !important;
		color: #000 !important;
		border: 1px solid #000;
	}

	.styleguide__palette,
	.styleguide__focus {
		display: block !important;
	}
}

/* ---------- Forced colors (Windows high contrast) ---------- */

@media (forced-colors: active) {
	.site-header,
	.site-footer,
	.site-header__utility {
		border-color: CanvasText;
	}

	.site-nav a[aria-current],
	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a {
		/* The copper underline disappears under forced colors, so the active
		   item keeps a system-coloured underline instead. */
		border-bottom-color: LinkText;
		box-shadow: none;
		background-color: Canvas;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.site-nav__toggle {
		border-color: ButtonText;
		color: ButtonText;
	}

	.site-nav__toggle-bars,
	.site-nav__toggle-bars::before,
	.site-nav__toggle-bars::after {
		background-color: ButtonText;
		forced-color-adjust: none;
	}

	.site-nav__toggle:focus-visible,
	.site-footer :focus-visible,
	.site-header__utility :focus-visible,
	.styleguide__ring {
		outline-color: Highlight;
	}

	.site-footer__mark-glyph,
	.styleguide__chip,
	.styleguide__swatch,
	.styleguide__bar,
	.styleguide__box {
		border: 1px solid CanvasText;
		background-color: Canvas !important;
		color: CanvasText !important;
	}
}