/*
 * Hippora — website design system
 *
 * The one stylesheet for every page on hippora.co.uk. Pages carry no inline
 * styles; anything a page needs is a token or a component here.
 *
 * Source of truth: hippora-client docs/Hippora_Design_Brief.md §1–4. Colour
 * values are verbatim from §2, with the brief's "group/name" tokens written as
 * "--group-name". If the app and this file ever disagree, the app wins and
 * this file is corrected.
 *
 * Deliberate decisions:
 *  - Light only. The app is light-only, and the site should look like the
 *    product in the screenshots. A dark palette would be a website-only
 *    identity with unverified contrast; add it here, as tokens, if ever.
 *  - System fonts only (§3). No webfont, no font request of any kind.
 *  - Every size is rem-based, so the reader's own text size scales the page.
 *    Headings use rem + px so they grow with the reader's setting but less
 *    steeply than body text, which keeps long words inside a phone screen at
 *    the largest accessibility sizes. No vw-based type: it ignores zoom.
 *  - State is never carried by colour alone: links are always underlined.
 *
 * Order: tokens → base → layout → components → utilities.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Colour — Design Brief §2, verbatim */
  --brand-primary: #0B6E99;          /* header, primary actions, links */
  --brand-primary-pressed: #08556F;  /* pressed / hover state */
  --brand-cream: #FDFBF7;            /* everything on the brand ground — 5.48:1 */
  --bg-app: #F7F9FA;                 /* page background */
  --surface-card: #FFFFFF;           /* cards, panels */
  --text-primary: #1A1D1F;           /* AAA on white */
  --text-secondary: #55606A;         /* AA on white */
  --border-divider: #D6DCE1;         /* card borders, separators */

  /* Type — Design Brief §3. Body never below 17px, caption never below 15px. */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --type-display: calc(0.875rem + 22px);    /* web only: the one h1 — 36px */
  --type-page-title: calc(0.75rem + 12px);  /* h2 — 24px */
  --type-section: calc(0.75rem + 8px);      /* h3, lede — 20px */
  --type-body-strong: 1.125rem;             /* 18px, semibold */
  --type-body: 1.125rem;                    /* 18px */
  --type-caption: 0.9375rem;                /* 15px — the floor */
  --weight-regular: 400;
  --weight-semibold: 600;
  --leading-body: 1.5;
  --leading-tight: 1.25;

  /* Space — Design Brief §4 (4/8/12/16/24/32), plus two web-only steps */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;    /* web only: between blocks */
  --space-8: 4.5rem;  /* web only: between page sections */

  /* Size */
  --touch-min: 48px;    /* every interactive target */
  --radius-card: 14px;
  --measure: 38rem;     /* comfortable line length for running text */
  --page-max: 64rem;
  --focus-ring: 3px;
}

/* Wider screens: headings step up. Breakpoints are in em, so they move with
   the reader's text size rather than against it. */
@media (min-width: 48em) {
  :root {
    --type-display: calc(1rem + 32px);        /* 48px */
    --type-page-title: calc(0.75rem + 16px);  /* 28px */
    --space-8: 6rem;
  }
}

/* ------------------------------------------------------------------ base */

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

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

/* iPhone and iPad only: follow the reader's Dynamic Type setting, as the app
   does, so someone who runs large text gets large text here too. Scoped to
   touch WebKit because on macOS this keyword resolves to 13px. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-system);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-wrap: balance;
  hyphens: auto;
}

h1 {
  font-size: var(--type-display);
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--type-page-title);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--type-section);
}

p,
ul {
  margin: 0;
}

p {
  text-wrap: pretty;
}

* + p,
* + ul {
  margin-top: var(--space-4);
}

strong {
  font-weight: var(--weight-semibold);
}

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

a {
  color: var(--brand-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand-primary-pressed);
  text-decoration-thickness: 0.14em;
}

/* Visible focus on every interactive element. Dark ring on light grounds;
   the brand header overrides it to cream. */
:focus-visible {
  outline: var(--focus-ring) solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color 120ms ease, text-decoration-thickness 120ms ease;
  }
}

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

/* Centres content with a 16px minimum gutter, respecting the iPhone notch. */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left))
    max(var(--space-4), env(safe-area-inset-right));
}

@media (min-width: 48em) {
  .container {
    padding-inline: var(--space-6);
  }
}

.measure {
  max-width: var(--measure);
}

.section {
  padding-block: var(--space-8);
}

.hero + .section,
.section + .section {
  border-top: 1px solid var(--border-divider);
}

.section > .container > h2 + * {
  margin-top: var(--space-5);
}

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

/* Skip link — hidden until focused, then a full touch-size target. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  background: var(--brand-cream);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Site header — the brand band, as in the app. */
.site-header {
  background: var(--brand-primary);
  color: var(--brand-cream);
}

.site-header .container {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding-block: var(--space-3);
}

.site-header :focus-visible {
  outline-color: var(--brand-cream);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  color: var(--brand-cream);
  font-size: var(--type-section);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.brand:hover {
  color: var(--brand-cream);
}

/* The mark. hippora-mark.png is a shape (alpha only); the colour is the
   token's, painted through it as a mask — INF-6: the mark ships as a shape
   and every surface applies its own colour. */
.mark {
  display: inline-block;
  flex: none;
  aspect-ratio: 226 / 160;
  height: 1.6em;
  background: var(--brand-cream);
  -webkit-mask: url("assets/hippora-mark.png") center / contain no-repeat;
  mask: url("assets/hippora-mark.png") center / contain no-repeat;
}

/* The mark on its ground, as on the home screen icon. */
.mark-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 7rem;
  aspect-ratio: 1;
  background: var(--brand-primary);
  border-radius: 24%;
}

.mark-tile .mark {
  height: auto;
  width: 64%;
}

@media (min-width: 48em) {
  .mark-tile {
    width: 10rem;
  }
}

/* Hero */
.hero {
  padding-block: var(--space-7);
}

@media (min-width: 48em) {
  .hero {
    padding-block: var(--space-8) var(--space-7);
  }
}

.hero .container {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-7);
}

.hero-text {
  flex: 1 1 30rem;
  max-width: 44rem;
}

.lede {
  margin-top: var(--space-5);
  font-size: var(--type-section);
  line-height: 1.45;
  max-width: var(--measure);
}

/* A plain statement of where things stand, set apart by a rule and words,
   not by colour. */
.status {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  max-width: var(--measure);
  background: var(--surface-card);
  border: 1px solid var(--border-divider);
  border-inline-start: 4px solid var(--brand-primary);
  border-radius: var(--radius-card);
}

/* Cards */
.card-grid {
  display: grid;
  /* One column on a phone, two on anything wider; never an orphan third. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, 40%)), 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
}

.card p {
  margin-top: var(--space-3);
}

/* Running list with generous spacing between items. */
.list {
  padding-inline-start: 1.25em;
}

.list li + li {
  margin-top: var(--space-3);
}

.list li::marker {
  color: var(--brand-primary);
}

/* Notice — for text that must be read: the disclaimer, legal statements. */
.notice {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  max-width: 46rem;
  background: var(--surface-card);
  border: 1px solid var(--border-divider);
  border-inline-start: 6px solid var(--brand-primary);
  border-radius: var(--radius-card);
}

/* Site footer */
.site-footer {
  padding-block: var(--space-7);
  background: var(--surface-card);
  border-top: 1px solid var(--border-divider);
  color: var(--text-secondary);
  font-size: var(--type-caption);
}

.site-footer p + p {
  margin-top: var(--space-3);
}

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

.secondary {
  color: var(--text-secondary);
}