/* ==================================================================
 * site.css — page furniture
 *
 * Layout, header, mobile navigation, footer, floating contact button,
 * page head, grids, pagination, prose and the small set of utilities.
 *
 * Legacy rules moved here unchanged from style.css 0.2.1. The mobile
 * navigation is the one structural change: it exists now, where 0.2.1
 * hid the whole nav below 861px and left four pages unreachable on a
 * phone.
 * ================================================================== */

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
	position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 16px; z-index: 200;
	min-height: var(--tap); display: inline-flex; align-items: center;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- header ---------- */

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--graphite);
	color: #fff; border-bottom: 1px solid #23282f;
}
.site-header__inner {
	display: flex; align-items: center; gap: 24px; min-height: var(--header-h);
}
.site-brand {
	display: flex; align-items: center; gap: 10px; min-height: var(--tap);
	color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap;
}
.site-brand:hover { color: #fff; }
.site-brand__mark {
	width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--accent); display: inline-block;
}

/* Two lines, not one: the wordmark is the manufacturer, the line under it says
   what it makes. Kept tight (line-height 1) so the hatched header does not grow
   taller than --header-h on a laptop — the mark stays optically centred because
   the block is only ~31px tall. */
.site-brand__name {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.site-brand__main {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.site-brand__sub {
	margin-top: 2px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

/* The focus ring default (--steel) is only 2.9:1 against the header ground.
   On dark grounds the ring switches to a light blue: 8.1:1. */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }

/* --- nav disclosure (mobile) -------------------------------------
 * One markup path, two presentations. The list of links lives in a
 * <nav> that is a sibling of <details>, not a child: browsers do not
 * paint a closed <details> subtree, and no CSS override makes them
 * (neither display:flex on the child nor display:contents on the
 * parent — both were measured in Chromium 156). The sibling form lets
 * the desktop simply display the nav and hide the toggle, with no
 * engine-specific escape hatch and no JavaScript.
 *
 * Keyboard: <summary> is focusable natively, Enter/Space toggles it.
 * DOM order is brand -> toggle -> links -> CTA, which is also the tab
 * order.
 * ------------------------------------------------------------------ */

.nav-disclosure { margin-left: auto; }

.nav-disclosure__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: var(--tap); min-width: var(--tap); padding: 0 10px;
	font: inherit; font-size: var(--fs-3); color: #fff;
	border: 1px solid #3a414b; border-radius: var(--radius-md);
	cursor: pointer; list-style: none;
}
.nav-disclosure__toggle::-webkit-details-marker { display: none; }
.nav-disclosure__toggle:hover { border-color: #5a636f; }
.nav-disclosure__bars {
	position: relative; display: block; width: 18px; height: 2px;
	background: currentColor; flex: 0 0 auto;
}
.nav-disclosure__bars::before,
.nav-disclosure__bars::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-disclosure__bars::before { top: -6px; }
.nav-disclosure__bars::after { top: 6px; }
.nav-disclosure[open] .nav-disclosure__toggle { background: #23282f; border-color: #5a636f; }

.site-nav { display: none; }

/* Open panel (mobile only — see the media query below): in flow, full width,
   under the header row. In flow rather than an overlay means no focus trap, no
   scroll lock, and the panel cannot cover the CTA it is supposed to lead to.
   It must stay inside the max-width block: scoped globally it outranks the
   desktop .site-nav rule (attribute + class beats class) and pushes the header
   CTA in front of the nav when the menu was left open and the window widened. */
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: flex; align-items: center;
	min-height: var(--tap);       /* 48px hit area — 6px of padding was not */
	color: var(--on-dark-2); text-decoration: none; font-size: 16px;
	border-bottom: 1px solid #23282f;
}
.site-nav li:last-child a { border-bottom: 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a[aria-current="page"] { font-weight: 600; }

.header-cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--amber); color: #fff; border-radius: var(--radius-md);
	padding: 10px 16px; min-height: var(--tap);
	font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.header-cta:hover { background: var(--amber-deep); color: #fff; }

@media (max-width: 860px) {
	.site-header__inner { gap: var(--sp-2); flex-wrap: wrap; padding-bottom: 0; }
	.header-cta { font-size: 13px; padding: 8px 12px; }
	/* Below 380px the word "Menu" costs the CTA its line; the bars carry it. */
	.nav-disclosure__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	/* Keep the last primary CTA clear of the floating contact button. */
	body { padding-bottom: 76px; }

	.nav-disclosure[open] + .site-nav {
		display: block;
		flex-basis: 100%;
		order: 4;
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		border-top: 1px solid #23282f;
		padding-bottom: 6px;
	}
}

@media (min-width: 861px) {
	.nav-disclosure { display: none; }
	.site-nav {
		display: block; order: 0; flex-basis: auto;
		margin-left: auto; max-height: none; border-top: 0; padding-bottom: 0;
	}
	.site-nav__list { display: flex; flex-wrap: wrap; gap: 20px; }
	.site-nav a {
		min-height: var(--header-h); border-bottom: 0;
		font-size: 15px;
	}
	/* underline the current section rather than only bolding it */
	.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--amber); }
}

@media (max-width: 379px) {
	.nav-disclosure__toggle { padding: 0 8px; gap: 0; }
}

/* ---------- page furniture ---------- */

.pagehead { padding: 44px 0 28px; border-bottom: 1px solid var(--line); }
.pagehead .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.pagehead h1 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.2; letter-spacing: -.01em; }
.pagehead p { margin: 12px 0 0; color: var(--ink-2); max-width: 68ch; }

.section { padding: 40px 0; }
.section--tight { padding: 26px 0; }
.section h2 { font-size: 22px; margin: 0 0 16px; letter-spacing: -.01em; }

.grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- product page ---------- */

.product { display: grid; gap: 32px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); padding: 32px 0; }
.product__media { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.product__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }
.product__title { margin: 0; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.01em; }
.product__sub { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }
.product__summary { margin: 16px 0 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- pagination ---------- */

.pagination { display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-md);
	text-decoration: none; color: var(--ink); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.empty { padding: 40px 0; color: var(--ink-2); }

/* ---------- prose ---------- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 32px; }
.prose p { color: var(--ink-2); }

/* ---------- footer ---------- */

.site-footer { margin-top: 56px; background: var(--graphite); color: #b9c0c9; padding: 40px 0 28px; }
.site-footer a { color: #dfe4ea; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-grid h3 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; font-family: var(--font-body); }
.footer-grid h4.footer-grid__sub {
	color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
	margin: 20px 0 10px; font-family: var(--font-body); font-weight: 700;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
/* A footer link is a target, not a sentence: give it the 24px WCAG 2.5.8 floor. */
.footer-grid a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-legal { border-top: 1px solid #262b33; margin-top: 28px; padding-top: 18px; font-size: 13px; color: #8892a0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-legal p { margin: 0; }

/* ---------- floating WhatsApp ---------- */

.wa-fab {
	position: fixed; right: 18px; z-index: 80;
	/* the offset carries the safe-area inset: the button itself stays a
	   circle, and a phone with a home indicator does not eat it */
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: #25d366; color: #fff; text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); color: #fff; }
.wa-fab:focus-visible { outline: 3px solid #128c7e; outline-offset: 3px; }

@media (max-width: 600px) {
	.wa-fab {
		right: 14px; width: 48px; height: 48px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

@media print {
	.wa-fab { display: none; }
}

/* ---------- breadcrumbs ---------- */

.breadcrumbs { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-3); }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--line-2); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- utilities ---------- */

.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* One-column stacks below the tablet breakpoint. */
@media (max-width: 780px) {
	.product { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
	.form-row { grid-template-columns: 1fr; }
	.pagehead { padding: 32px 0 22px; }
	.section { padding: 32px 0; }
}

/* Pagination and footer controls are thumb targets on a phone too. */
@media (max-width: 860px) {
	.pagination .page-numbers { min-width: var(--tap); min-height: var(--tap); }
	.footer-grid a { min-height: var(--tap); }
}