/*
 * HILO base — self-hosted fonts, design tokens, reset, and the handful of
 * components (buttons, kickers, section headers) that repeat across pages.
 *
 * Every value here comes from "HILO Design files/README.md" § Design tokens.
 * Templates reference the variables, never the literals, so a brand tweak is
 * a one-line change here rather than a hunt through nine stylesheets.
 *
 * Loaded on every page (inc/setup.php); page-specific layout lives in
 * home.css / range.css / pattern.css / tech.css / content.css.
 */

/* ---------------------------------------------------------------------
   Fonts — self-hosted rather than Google Fonts CDN.
   The design uses three families. Over the CDN that is two extra DNS
   lookups plus two TLS handshakes sitting in the LCP critical path, and
   the stylesheet itself is render-blocking. Self-hosting costs ~96KB in
   the repo and removes all of it. Latin subset only; the site is
   English-AU.
   JetBrains Mono ships as a single variable file covering 400-700 —
   Google serves the identical file for all three weights we asked for.
   --------------------------------------------------------------------- */
@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/chakra-petch-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/chakra-petch-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Chakra Petch';
	src: url('../fonts/chakra-petch-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-normal-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
	/* Base black-blues. Three distinct surfaces, not one colour at three
	   opacities — the Technology band has to read as a different plane. */
	--hl-black: #07080a;        /* page, header, footer */
	--hl-black-2: #0b0e12;      /* Technology band */
	--hl-surface: #0e1116;      /* cards, trade panel */

	/* Text */
	--hl-text: #eef1f4;
	--hl-body: #b3bcc4;
	--hl-body-2: #a8b1b9;
	--hl-muted: #8d969e;
	--hl-mono: #7d868e;
	--hl-mono-2: #5f676e;
	--hl-nav: #9aa4ad;

	/* Cyan — the tech accent. Hairlines, grid, scan line, mono labels,
	   hover borders. Never used as a fill for large areas. */
	--hl-cyan: #17e7dc;
	--hl-cyan-hover: #5ff3eb;
	--hl-cyan-hairline: rgba(23, 231, 220, 0.18);
	--hl-cyan-border: rgba(23, 231, 220, 0.5);
	--hl-cyan-border-strong: rgba(23, 231, 220, 0.55);
	--hl-cyan-grid: rgba(23, 231, 220, 0.08);
	--hl-cyan-wash: rgba(23, 231, 220, 0.1);

	/* Heat gradient — the brand/primary CTA. Two angles: 100deg on
	   buttons, 120deg on full panels (the shallower angle reads wrong at
	   panel width). */
	--hl-heat: linear-gradient(100deg, #e01f13, #f5a01c);
	--hl-heat-panel: linear-gradient(120deg, #e01f13, #f5a01c);
	--hl-heat-tile: linear-gradient(150deg, #e01f13, #f5a01c);
	--hl-red: #e01f13;
	--hl-orange: #f5a01c;
	--hl-red-muted: #e0554b;
	--hl-on-heat: #0a0605;      /* text on the gradient */

	/* Hairlines on dark */
	--hl-line: rgba(255, 255, 255, 0.07);
	--hl-line-2: rgba(255, 255, 255, 0.08);
	--hl-line-3: rgba(255, 255, 255, 0.09);

	/* Type */
	--hl-font-head: 'Chakra Petch', sans-serif;
	--hl-font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--hl-font-body: 'Archivo', sans-serif;

	/* Layout.
	   The design bundle is edge-to-edge by intent ("no centered max-width
	   container — the grid is edge-to-edge on purpose"), but that reads as
	   uncomfortably wide past about 1500px, so content is capped at the same
	   1320px the Grenlander site uses. Backgrounds stay full-bleed; only
	   content sits in .hl-container. */
	--hl-maxw: 1320px;
	--hl-pad-x: clamp(20px, 4vw, 40px);
	--hl-section-y: clamp(56px, 7vw, 88px);
	--hl-header-h: 76px;

	/* Radius. No skew transforms anywhere — that is Grenlander's
	   signature, and the two brands must not look related. */
	--hl-radius-btn: 2px;
	--hl-radius-card: 4px;
	--hl-radius-product: 6px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--hl-black);
	color: var(--hl-text);
	font: 400 16px/1.6 var(--hl-font-body);
	/* The hero's heat bloom and the header blur both overflow their
	   boxes; without this the page gains a horizontal scrollbar. */
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--hl-cyan); }
a:hover { color: var(--hl-cyan-hover); }

::selection { background: var(--hl-cyan); color: var(--hl-black); }

/* Standard WordPress visually-hidden helper. Defined globally from the
   start — on the Grenlander theme this only existed inside a pagination
   rule, so every other .screen-reader-text on the site rendered visibly
   until it was found. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
}
.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	background: var(--hl-cyan);
	color: var(--hl-black);
	z-index: 100000;
	top: 8px;
	left: 8px;
	font: 700 13px/1 var(--hl-font-head);
	text-transform: uppercase;
}

/* Keyboard focus must stay visible on a near-black page. */
:focus-visible {
	outline: 2px solid var(--hl-cyan);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Shared components
   --------------------------------------------------------------------- */

/* Centres content and applies the standard horizontal padding. Used inside
   full-bleed bands so the band's background reaches the viewport edge while
   its content lines up with every other section. */
.hl-container {
	max-width: var(--hl-maxw);
	margin-inline: auto;
	padding-inline: var(--hl-pad-x);
}

/* Section shell — a container with the standard vertical rhythm. */
.hl-section {
	max-width: var(--hl-maxw);
	margin-inline: auto;
	padding: var(--hl-section-y) var(--hl-pad-x) 0;
}

/* Heading + right-aligned meta ("04 / Categories", "All 12 patterns →"). */
.hl-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.hl-h2 {
	margin: 0;
	font: 700 clamp(28px, 3.6vw, 44px)/1 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.hl-h3 {
	margin: 0;
	font: 700 clamp(28px, 3.2vw, 38px)/1.05 var(--hl-font-head);
	text-transform: uppercase;
}

/* Mono label — indices, stat captions, kickers, category codes. Never
   used for anything a reader has to actually read at length. */
.hl-kicker {
	font: 500 11px/1 var(--hl-font-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--hl-cyan);
}

.hl-kicker--rule {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hl-kicker--rule::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
}

.hl-meta {
	font: 500 11px/1 var(--hl-font-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hl-mono);
	white-space: nowrap;
}

/* Buttons. Square-ish (2px), never skewed. */
.hl-btn {
	display: inline-block;
	text-decoration: none;
	font: 700 13px/1 var(--hl-font-head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 17px 28px;
	border-radius: var(--hl-radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
}

.hl-btn--primary {
	color: var(--hl-on-heat);
	background: var(--hl-heat);
}

.hl-btn--ghost {
	color: var(--hl-cyan);
	background: transparent;
	border-color: var(--hl-cyan-border);
	padding: 16px 28px;
}
.hl-btn--ghost:hover {
	background: var(--hl-cyan-wash);
	color: var(--hl-cyan);
}

/* Underlined text link used as a section's "see all" affordance. */
.hl-link-more {
	text-decoration: none;
	font: 600 12px/1 var(--hl-font-head);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hl-cyan);
	border-bottom: 1px solid rgba(23, 231, 220, 0.4);
	padding-bottom: 5px;
	white-space: nowrap;
}


/* ---------------------------------------------------------------------
   Product card — shared by the homepage Featured grid, the Range results
   grid and the related row on a pattern page. Lives here rather than in
   any one page stylesheet because all three load a different one.
   --------------------------------------------------------------------- */
.hl-pattern-card {
	display: block;
	min-width: 0;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-product);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s;
}
.hl-pattern-card:hover { border-color: var(--hl-cyan-border); }

.hl-pattern-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: radial-gradient(circle at 50% 60%, rgba(23, 231, 220, 0.14), transparent 62%);
}

.hl-pattern-card__media img {
	height: 86%;
	width: auto;
	object-fit: contain;
}

/* Most product photos are shot on white. `screen` drops the white against the
   dark tile so the tyre reads as cut out — no manual masking needed. It only
   works because the tile behind it is near-black; on a light surface this
   would wash the tyre out completely.

   The class is added by hilo_pattern_image() and ONLY for opaque photos.
   Applying it to an already-transparent PNG has nothing to knock out and
   instead lets the tile's cyan glow through the black rubber — the tyre comes
   out green. */
.hl-knockout {
	mix-blend-mode: screen;
}

.hl-pattern-card__body {
	display: block;
	padding: 18px 20px 22px;
	border-top: 1px solid var(--hl-line);
}

.hl-pattern-card__tag {
	display: block;
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.2em;
	color: var(--hl-cyan);
}

.hl-pattern-card__name {
	margin: 10px 0 0;
	font: 700 22px/1 var(--hl-font-head);
	text-transform: uppercase;
}

.hl-pattern-card__blurb {
	display: block;
	margin-top: 8px;
	font: 400 13px/1.5 var(--hl-font-body);
	color: var(--hl-muted);
}

/* ---------------------------------------------------------------------
   Breadcrumbs (also used on the Range page)
   --------------------------------------------------------------------- */
.hl-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font: 500 10px/1.6 var(--hl-font-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hl-mono);
}
.hl-crumbs li + li::before {
	content: "/";
	margin-right: 6px;
	opacity: 0.5;
}
.hl-crumbs a { color: inherit; text-decoration: none; }
.hl-crumbs a:hover { color: var(--hl-cyan); }
.hl-crumbs [aria-current] { color: var(--hl-text); }

/* ---------------------------------------------------------------------
   Motion
   The prototype leaves both animations running unconditionally; the
   README flags honouring reduced-motion as a production requirement.
   Keyframes live here so hero and Technology can't drift apart.
   --------------------------------------------------------------------- */
/* Applies to a FULL-HEIGHT wrapper whose ::before draws the 2px line, not
   to the line itself: a percentage translate resolves against the moving
   element's own box, so animating the 2px bar directly would slide it 2px
   and stop. The prototype hard-codes translateY(700px) instead, which
   breaks the moment the hero stops being exactly 700px tall — and it
   stops being 700px on mobile (see home.css). */
@keyframes hiloScan {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes hiloDrift {
	from { background-position: 0 0; }
	to   { background-position: 0 80px; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}