/*
 * 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);
}

/* Availability — where things stand, before launch. Deliberately NOT a
   button: no hover, no pointer, no link, because there is nothing to link to.
   Replaced by .store-button on the day the App Store URL exists. */
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-divider);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgb(26 29 31 / 0.06), 0 8px 24px rgb(11 110 153 / 0.1);
}

.availability > span:last-child {
  min-width: 0;
}

.availability .label {
  display: block;
  font-size: var(--type-body-strong);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.availability .sub {
  display: block;
  color: var(--text-secondary);
  font-size: var(--type-caption);
  line-height: 1.3;
}

/* Launch only — the real link. Unused until the App Store URL is live; never
   ship it pointing anywhere else. */
.store-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-5);
  background: var(--brand-primary);
  color: var(--brand-cream);
  border-radius: 1rem;
  font-size: var(--type-body-strong);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(26 29 31 / 0.12), 0 8px 20px rgb(11 110 153 / 0.25);
}

.store-button:hover {
  background: var(--brand-primary-pressed);
  color: var(--brand-cream);
}

.store-button svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .store-button {
    transition: background-color 120ms ease;
  }
}

/* Icon tile — a glyph on a rounded square. Blue on light grounds; the
   .band version inverts to cream. */
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  background: var(--brand-primary);
  color: var(--brand-cream);
}

.icon-tile svg {
  width: 1.6rem;
  height: 1.6rem;
}

.icon-tile--large {
  width: 4rem;
  height: 4rem;
  border-radius: 1.1rem;
}

.icon-tile--large svg {
  width: 2rem;
  height: 2rem;
}

/* Hero with the app beside it. The phone sits on the line where the hero
   meets the band below. */
.hero--app {
  padding-bottom: 0;
  overflow: clip;
}

.hero--app .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: end;
  gap: var(--space-7);
}

.hero--app .hero-text {
  align-self: center;
  padding-bottom: var(--space-7);
}

.hero--app h1 {
  font-size: calc(1.25rem + 34px);
  letter-spacing: -0.02em;
}

@media (min-width: 48em) {
  .hero--app h1 {
    font-size: calc(1.5rem + 52px);
    line-height: 1.05;
  }
}

/* Subtitle — the line that completes a heading, set beneath it. In an
   hgroup, so it belongs to the h1 without being a heading itself. */
hgroup {
  margin: 0;
}

.subtitle {
  margin-top: var(--space-3);
  max-width: 24rem;
  color: var(--text-secondary);
  font-size: var(--type-page-title);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-wrap: balance;
}

/* Phone — a real screenshot in a plain frame. Only ever real screenshots of
   the shipped app, never a mock-up. */
.phone {
  width: min(100%, 17rem);
  margin-inline: auto;
  padding: 0.6rem;
  background: var(--text-primary);
  border-radius: 2.6rem;
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 2rem;
}

/* Cropped at the hero's foot: the top of the phone, rising out of the band. */
.phone--rising {
  padding-bottom: 0;
  border-radius: 2.6rem 2.6rem 0 0;
}

.phone--rising .frame {
  aspect-ratio: 9 / 15;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
}

.phone--rising img {
  border-radius: 0;
}
/* 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);
}

/* Band — a full-width section on the brand ground, as the app's header. */
.band {
  background: var(--brand-primary);
  color: var(--brand-cream);
}

.band h2,
.band h3 {
  color: var(--brand-cream);
}

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

.band .icon-tile {
  background: var(--brand-cream);
  color: var(--brand-primary);
}

.hero + .band,
.band + .section,
.section + .band,
.band + .band {
  border-top: 0;
}

/* Statement — a sentence that is the section's heading. */
.statement {
  max-width: 32rem;
  font-size: var(--type-page-title);
  line-height: 1.3;
}

/* Schedules — a week at a glance. The picture is decorative (aria-hidden);
   the heading and caption beside it carry the meaning. Outlines, not fills,
   so the day letters keep the full 5.48:1 of cream on brand. */
.schedules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, 40%)), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.schedules > li {
  padding: var(--space-5) var(--space-5) var(--space-6);
  border: 1px solid rgb(253 251 247 / 0.5);
  border-radius: calc(var(--radius-card) + 6px);
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.day {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  min-height: 6rem;
  padding: var(--space-2) 0 var(--space-3);
  border: 1.5px solid rgb(253 251 247 / 0.45);
  border-radius: 0.75rem;
}

.day b {
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}

.dose {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--brand-cream);
}

.schedules h3 {
  margin-top: var(--space-5);
  font-size: var(--type-section);
}

.schedules p {
  margin-top: var(--space-2);
}

/* Feature row — words beside a picture of the app; the picture alternates
   sides on wide screens. */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
  gap: var(--space-6) var(--space-7);
  padding-block: var(--space-7);
}

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

.feature p {
  max-width: 30rem;
}

@media (min-width: 48em) {
  .feature:nth-of-type(even) > :last-child {
    order: -1;
  }
}

/* Close-up — one piece of the app's interface, enlarged so it can be read. */
.closeup {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  border-radius: 1.4rem;
  box-shadow: 0 1px 2px rgb(26 29 31 / 0.08), 0 12px 32px rgb(11 110 153 / 0.14);
}

/* Two close-ups side by side, stacking on a phone. */
.closeup-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.closeup-pair .closeup {
  max-width: none;
  border-radius: 1rem;
}

/* A small note that qualifies what is beside it. */
.caption {
  color: var(--text-secondary);
  font-size: var(--type-caption);
}

/* The lock-screen reminder is a crop of a pill-shaped banner; clip its ends
   so no wallpaper shows. */
.closeup--notification {
  border-radius: 9% / 45%;
}

/* Icon cards — the four differences, framed on the brand band. */
.icon-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, 40%)), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
}

.icon-card {
  padding: var(--space-6);
  background: var(--brand-cream);
  color: var(--text-primary);
  border-radius: calc(var(--radius-card) + 6px);
}

.icon-card .icon-tile {
  margin-bottom: var(--space-5);
  background: var(--brand-primary);
  color: var(--brand-cream);
}

.band .icon-card h3 {
  color: var(--text-primary);
  font-size: var(--type-page-title);
}

.icon-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);
}

/* Prose — long text a reader has to get through: the privacy policy, the
   support page. Measured lines, clear steps between headings, roomy lists. */
.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-divider);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--space-3);
}

.prose ul {
  padding-inline-start: 1.25em;
}

.prose li + li {
  margin-top: var(--space-2);
}

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

.prose .notice {
  margin-top: var(--space-5);
}

/* A part marker for a document in clearly separate halves. */
.part-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--brand-primary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}

/* Page heading block for a document page. */
.doc-header {
  padding-block: var(--space-7) var(--space-5);
}

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

.doc-header + .section {
  padding-top: var(--space-4);
}

.updated {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-caption);
}

/* Footer links — full touch-size targets, not tiny inline links. */
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--type-body);
}

/* 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);
}