/* ===========================================================================
 * run.css - Melbourne Airport Transfers token layer.
 *
 * The single source of colour, type, spacing and shape for the whole site.
 * Pages compose these tokens; they never hard-code a hex value or a font.
 *
 * Direction is derived from addisonlee.com/airport-transfers: black ground,
 * one loud accent, wide uppercase display type, sharp 2px corners, and
 * promises stated as numbers. Two deliberate departures from that reference:
 * the price appears in the hero, and a real suburb fare grid ships on the
 * page. See docs/BRAND-DIRECTION.md.
 *
 * Deliberately not the sister brand's palette. That one is white-ground with a
 * sky accent and Manrope. If a shared component starts looking like both
 * brands at once, that is a bug, not a convergence.
 * ======================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --run-ink:          #0A0A0A;   /* hero and band grounds, body text on white */
  --run-ink-soft:     #1A1A1A;   /* raised surfaces on the black ground */
  --run-paper:        #FFFFFF;   /* content band ground */
  --run-paper-warm:   #FAFAF8;   /* alternate white band, table zebra */
  --run-accent:       #FFC800;   /* buttons, headline line two, icon strokes */
  --run-accent-dim:   #E0AE00;   /* accent hover / pressed */
  --run-accent-ink:   #0A0A0A;   /* text ON the accent, always near-black */
  --run-muted:        #6B6B6B;   /* secondary text on white */
  --run-muted-dark:   #A8A8A8;   /* secondary text on black */
  --run-hairline:     #E4E4E4;   /* borders and table rules on white */
  --run-hairline-dk:  #2A2A2A;   /* borders on black */
  --run-ok:           #1D7A3D;   /* confirmation states only */
  --run-warn:         #B4401A;   /* errors and hard warnings only */

  /* ── Type ───────────────────────────────────────────────────────────── */
  /* Display is Archivo Expanded; body is Archivo. One family, two widths.
     Never Manrope or Anton: those belong to the sister brand. */
  --run-font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --run-font-body:    'Archivo', system-ui, -apple-system, sans-serif;

  --run-h1:      clamp(2.75rem, 7vw, 5.5rem);  /* 44 → 88px */
  --run-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --run-h3:      1.25rem;
  --run-body:    1rem;
  --run-small:   0.8125rem;

  --run-display-tracking: 0.01em;   /* wide uppercase, just barely open */
  --run-display-leading:  0.95;     /* tight, so two lines lock together */

  /* ── Shape and space ────────────────────────────────────────────────── */
  --run-radius:     2px;            /* everything. buttons, cards, inputs. */
  --run-band:       clamp(3rem, 7vw, 6rem);   /* vertical band padding */
  --run-gutter:     clamp(1.25rem, 4vw, 3rem);
  --run-max:        1200px;
  --run-transition: 120ms ease;     /* colour and border only. no reveals. */
}

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--run-paper);
  color: var(--run-ink);
  font-family: var(--run-font-body);
  font-size: var(--run-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--run-font-display);
  text-transform: uppercase;
  letter-spacing: var(--run-display-tracking);
  line-height: var(--run-display-leading);
  font-weight: 600;
  margin: 0;
}
h1 { font-size: var(--run-h1); }
h2 { font-size: var(--run-h2); }
h3 { font-size: var(--run-h3); font-weight: 600; margin: 0; }

/* The signature: line two of the headline carries the accent. */
.run-h1-accent { color: var(--run-accent); display: block; }

/* ── Bands ─────────────────────────────────────────────────────────────── */
/* The page alternates black and white full-width bands. The accent is never
   used as a large fill: type, rules and buttons only. */

.run-band       { padding: var(--run-band) var(--run-gutter); }
.run-band-dark  { background: var(--run-ink); color: var(--run-paper); }
.run-band-dark h3      { color: var(--run-paper); }
.run-band-dark .run-sub { color: var(--run-muted-dark); }
.run-band-warm  { background: var(--run-paper-warm); }
.run-inner      { max-width: var(--run-max); margin: 0 auto; }
.run-sub        { color: var(--run-muted); font-size: 1.0625rem; max-width: 46ch; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Solid accent, near-black uppercase label, trailing arrow, no shadow. */

.run-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  background: var(--run-accent);
  color: var(--run-accent-ink);
  font-family: var(--run-font-body);
  font-size: var(--run-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--run-radius);
  cursor: pointer;
  transition: background var(--run-transition);
}
.run-btn:hover { background: var(--run-accent-dim); }

.run-btn-ghost {
  background: transparent;
  color: var(--run-paper);
  border: 1px solid var(--run-paper);
}
.run-btn-ghost:hover { background: var(--run-paper); color: var(--run-ink); }

/* ── Inputs ────────────────────────────────────────────────────────────── */

.run-field {
  width: 100%;
  padding: 0.9em 1em;
  font-family: var(--run-font-body);
  font-size: 1rem;
  color: var(--run-ink);
  background: var(--run-paper);
  border: 1px solid var(--run-hairline);
  border-radius: var(--run-radius);
  transition: border-color var(--run-transition);
}
.run-field:focus {
  outline: 2px solid var(--run-accent);
  outline-offset: 0;
  border-color: transparent;
}
.run-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--run-muted);
  margin-bottom: 0.35em;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
/* Hairline borders, never shadows. */

.run-card {
  background: var(--run-paper);
  border: 1px solid var(--run-hairline);
  border-radius: var(--run-radius);
  padding: 1.5rem;
}
.run-band-dark .run-card {
  background: var(--run-ink-soft);
  border-color: var(--run-hairline-dk);
}

/* ── Price ─────────────────────────────────────────────────────────────── */
/* Fares are the argument of this brand, so they get the accent and the
   display face. Never hand-typed: every figure is generated from the shared
   pricing config. */

.run-price {
  font-family: var(--run-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--run-ink);
}
.run-band-dark .run-price { color: var(--run-accent); }
.run-price-from {
  font-family: var(--run-font-body);
  font-size: var(--run-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--run-muted);
}

/* ── Fare table ────────────────────────────────────────────────────────── */
/* Wide content scrolls inside itself; the page body never scrolls sideways. */

.run-table-scroll { overflow-x: auto; }
.run-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* A 42-row fare table scrolls past its own header, and a column of bare dollar
   figures means nothing once you cannot see which vehicle it belongs to. The
   header sticks under the site header instead. */
.run-table th {
  position: sticky;
  top: 3.25rem;
  z-index: 5;
  background: var(--run-paper);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--run-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--run-hairline);
  white-space: nowrap;
}
.run-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--run-hairline);
}
.run-table tbody tr:nth-child(even) { background: var(--run-paper-warm); }
/* The warm band already tints the page, so the header must match it there or it
   reads as a floating white bar. */
.run-band-warm .run-table th { background: var(--run-paper-warm); }

/* ── Trust strip ───────────────────────────────────────────────────────── */
/* Sits under the hero. Every item carries a number or a fact, never an
   adjective. */

.run-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--run-small);
  letter-spacing: 0.04em;
  color: var(--run-muted-dark);
}
.run-trust li { list-style: none; }

/* ── Accessibility ─────────────────────────────────────────────────────── */

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--run-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Why there is no accent field behind type ──────────────────────────────
 * A solid yellow panel with black type knocked out of it, sitting on a black
 * ground, is the Pornhub lockup. It does not matter that the hue differs or
 * that the intent was airport wayfinding: the construction is read before the
 * detail is. Do not reintroduce it, in the wordmark or in a headline.
 * Emphasis on this brand is carried by accent-coloured type, not by a field. */