/*
  Obesity Health Centre — design tokens
  ======================================================================
  Built directly from the OHC brand sheet. Five colours, exactly:

    Dark Blue    #1F438C
    Medium Blue  #92ACD9
    Light Blue   #BDE2F8
    White        #FFFFFF
    Black        #231F20

  These are the only colours in the system. There are no tints, no
  opacities, no gradients and no shadows anywhere on the site — a shadow
  or a scrim is a tint of black, and the brand does not have one.

  Two consequences shape the whole design, and they are deliberate:

  1. DEPTH IS MADE OF COLOUR, NOT BLUR. Where a card would normally lift
     off the page with a shadow, it sits on a flat offset block of Light
     or Medium Blue instead. See .card--block in components.css.

  2. TEXT IS NEVER SET OVER A PHOTOGRAPH. Without an overlay there is no
     way to guarantee contrast against an image, so photo-backed hero and
     CTA sections are built as a solid colour panel BESIDE the photo
     rather than on top of it. See .split in components.css.

  Contrast, measured (WCAG 2.1):
    Black   on White        16.9:1   AAA  — body copy
    Dark    on White         9.4:1   AAA  — headings, links, secondary text
    White   on Dark          9.4:1   AAA  — reversed sections
    Dark    on Light Blue    6.9:1   AA   — headings on tinted surfaces
    Black   on Light Blue   12.4:1   AAA  — body on tinted surfaces
    Black   on Medium Blue   7.2:1   AAA  — body on Medium Blue panels
    Dark    on Medium Blue   4.1:1   AA-large only — headings ≥24px only

  Medium Blue on White is 2.3:1 and therefore CANNOT carry text at any
  size. It is a surface, border and graphic colour only. Light Blue on
  White is 1.2:1 — surface only. Both rules are enforced by never
  assigning them to a text token below.
*/

/* ----------------------------------------------------------------------
   Fonts — self-hosted, so no visitor data is sent to a font CDN. That
   matters here: the site carries POPIA commitments on its privacy page.

   Bricolage Grotesque is the brand's heading face, used at SemiBold per
   the brand sheet. Both files are variable, so one request covers the
   whole weight range.

   The brand sheet specifies Basic Sans (Latinotype) for body copy. That
   is a commercial licence the practice does not currently hold, so
   Hanken Grotesk stands in: same geometric-humanist construction, near
   identical x-height and letterfit. To switch to the real thing, drop
   the licensed woff2 into /assets/fonts and change --font-body only.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colour: the five brand values ---------- */
  --ohc-dark:   #1F438C;
  --ohc-medium: #92ACD9;
  --ohc-light:  #BDE2F8;
  --ohc-white:  #FFFFFF;
  --ohc-black:  #231F20;

  /* ---------- Colour: semantic roles ----------
     Text roles resolve only to Black or Dark Blue. Medium and Light Blue
     never appear as a text colour on a light background. */
  --color-text:        var(--ohc-black);   /* body copy */
  --color-text-quiet:  var(--ohc-dark);    /* captions, secondary, eyebrows */
  --color-heading:     var(--ohc-dark);

  --color-bg:          var(--ohc-white);   /* page */
  --color-surface:     var(--ohc-light);   /* tinted panels, cards on white */
  --color-surface-mid: var(--ohc-medium);  /* stronger panels, offset blocks */
  --color-inverse:     var(--ohc-dark);    /* reversed sections */

  --color-border:      var(--ohc-medium);  /* decorative hairlines */
  --color-border-strong: var(--ohc-dark);  /* form inputs and other essential UI */

  --color-brand:       var(--ohc-dark);
  --color-link:        var(--ohc-dark);
  /* No tint available for hover, so interactive states move between the
     two text-safe colours rather than lightening or darkening. */
  --color-link-hover:  var(--ohc-black);
  --color-focus:       var(--ohc-dark);

  --color-disabled-bg:   var(--ohc-medium);
  --color-disabled-text: var(--ohc-dark);

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;  /* the brand sheet's specified heading weight */
  --fw-bold: 700;

  /* Fluid, mobile-first type scale. Bricolage runs a touch wider than
     Inter at the same size, so display sizes are pulled back slightly
     from the previous scale to keep headline line counts the same. */
  --text-display:  clamp(2.125rem, 1.45rem + 3.4vw, 3.875rem);
  --text-h1:       clamp(1.75rem, 1.4rem + 1.75vw, 2.625rem);
  --text-h2:       clamp(1.4375rem, 1.25rem + 0.95vw, 2rem);
  --text-h3:       clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --text-lead:     clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-body:     1.0625rem;   /* 17px */
  --text-small:    0.9375rem;   /* 15px */
  --text-caption:  0.8125rem;   /* 13px */
  --text-eyebrow:  0.75rem;     /* 12px, uppercase + tracked */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  --track-tight: -0.015em;
  --track-tighter: -0.025em;
  --track-normal: 0;
  --track-wide: 0.06em;
  /* The wordmark is set very open. Eyebrows and small caps echo it. */
  --track-wider: 0.16em;

  --measure: 64ch;

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5.5rem;
  --space-9: 8rem;

  --section-pad-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --section-pad-y-lg: clamp(4.5rem, 3rem + 5.5vw, 9rem);

  /* ---------- Radius ----------
     The mark is a circle, two half-discs and a third half-disc. The
     interface borrows that alphabet exactly: things are either fully
     round (pill / circle) or square. There is no soft 12px middle
     ground anywhere, because the logo has none. */
  --radius-none: 0;
  --radius-pill: 999px;
  /* A rectangle whose short ends are true half-discs — the logo's
     trailing shape, used for media frames and the arch motif. */
  --radius-arch: 50%;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: var(--space-4);
  --header-h: 76px;

  /* ---------- Borders ----------
     With no shadows, borders and rules do the structural work. */
  --rule: 1px solid var(--color-border);
  --rule-strong: 2px solid var(--color-border-strong);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.35s;
  --dur-slow: 0.6s;
}

/* Breakpoints (reference only — mobile-first, so base styles below
   ~640px are unprefixed; use these as min-width media queries):
   sm 640px · md 768px · lg 1024px · xl 1280px */

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

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-link-hover); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* A solid ring, not a soft glow — the palette has no translucent value. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-none);
}

/* ---------- Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Eyebrow — prefixed with the logo's opening move: a filled circle next
   to a half-disc. Drawn with border-radius on two flat blocks, so every
   pixel is one of the five brand colours. Replaces the old amber dash. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-text-quiet);
}

/* Both marker shapes are pseudo-elements, so no page needs extra markup.
   ::after would normally follow the text — `order` pulls it in front, so
   the pair reads circle, half-disc, label, exactly like the logo. */
.eyebrow::before,
.eyebrow::after {
  content: "";
  display: block;
  flex: none;
  height: 9px;
}
/* the circle */
.eyebrow::before {
  order: -2;
  width: 9px;
  border-radius: var(--radius-pill);
  background: var(--ohc-dark);
}
/* the half-disc: flat left edge, curving right */
.eyebrow::after {
  order: -1;
  width: 5px;
  margin-right: var(--space-1);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--ohc-medium);
}

.eyebrow--on-dark { color: var(--ohc-light); }
.eyebrow--on-dark::before { background: var(--ohc-white); }
.eyebrow--on-dark::after { background: var(--ohc-light); }

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  /* Clear of the viewport by more than the pill's own height — at -48px the
     bottom edge of the rounded button still showed above the header. */
  top: -96px;
  background: var(--ohc-dark);
  color: var(--ohc-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  z-index: 1000;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-3);
  color: var(--ohc-white);
}