/* ==========================================================================
   Counted Health CIC
   Design system, built to the adopted "Present" identity (brand turn 3).

   Rules enforced here, do not undo them without checking the usage sheet:
   1. Olive #40501F is constant across both tiers. Never substitute it.
   2. Bright Olive #AFC96B is a FILL, never a letterform on paper (1.65:1).
      Only Warm Ink is legal on top of a Bright Olive fill (9.1:1).
      Slate on Bright Olive is 4.75:1, so no captions inside a green block.
   3. The rule under the wordmark runs the exact width of the word, and sits
      underneath it. Never through it.
   4. Body text never goes below 19px (16px absolute floor). Urdu never below 22px.
   5. Community tier runs hero through founder. Institutional tier runs from the
      sponsor section down. (Build note 4.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts. Self-hosted so the site makes no third-party request, which is
   what the privacy page promises. Run scripts/fetch-fonts.mjs to populate
   site/fonts/. Until then the brand-sanctioned fallback applies: "If neither
   is available, use whatever the device offers rather than picking a
   different font by hand." (Usage sheet, page 3.)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

/* Script companion faces. Each locale page links only the sheet it needs,
   so a Bengali visitor never downloads Nastaliq. See css/scripts/. */

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Community tier, warmed. Anything a person is handed or reads. */
  --warm-ink: #231C15;
  --olive: #40501F;
  --bright-olive: #AFC96B;
  --warm-paper: #F7F2E8;

  /* Institutional tier, cool. Anything official. */
  --charcoal: #1B1E1A;
  --slate: #434D49;
  --cool-paper: #F2F1EC;

  /* Active tier. Community is the default: most visitors are community. */
  --ink: var(--warm-ink);
  --paper: var(--warm-paper);
  --ink-quiet: #4A4340;          /* Warm Grey, 9.7:1 on warm paper */
  --panel: #FFFFFF;
  --edge: rgba(35, 28, 21, 0.16);
  --edge-strong: rgba(35, 28, 21, 0.32);

  /* Type. Fallbacks are the device's own, per the usage sheet. */
  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --size-body: 1.1875rem;        /* 19px, the floor, not a choice */
  --lh-body: 1.6;
  --lh-head: 1.1;
  --w-display: 800;
  --w-head: 600;
  --track-display: -0.04em;
  --track-label: 0.2em;

  /* Scale. Fluid, but never below the floor at any viewport. */
  --step-display: clamp(2.375rem, 1.6rem + 3.9vw, 3.875rem);   /* 38 -> 62 */
  --step-h2: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);            /* 28 -> 40 */
  --step-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);      /* 21 -> 26 */
  --step-lead: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20 -> 24 */
  --step-small: 0.9375rem;                                      /* 15px labels */

  /* Space */
  --gap: 1.25rem;
  --pad-section: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  --measure: 34rem;              /* reading measure, ~68 characters */
  --measure-wide: 46rem;
  --shell: 72rem;
  --radius: 4px;                 /* near-square. Nothing decorative. */
  --tap: 3rem;                   /* 48px minimum tap target */

  --rule-weight: 0.34em;         /* tied to cap height, per brand */
}

/* Institutional tier. Same mark, same olive. The ink loses its green cast
   and the paper loses its sand. */
.tier-institutional {
  --ink: var(--charcoal);
  --paper: var(--cool-paper);
  --ink-quiet: var(--slate);
  --edge: rgba(27, 30, 26, 0.16);
  --edge-strong: rgba(27, 30, 26, 0.32);
}

/* Dark. Brand-sanctioned: Bright Olive is the accent for dark backgrounds
   at 8:1 on Charcoal. It becomes legal as text here, and only here. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F1EC;
    --paper: #16110F;
    --ink-quiet: #C6C2B6;
    --panel: #221D19;
    --olive-link: var(--bright-olive);
    --edge: rgba(242, 241, 236, 0.18);
    --edge-strong: rgba(242, 241, 236, 0.36);
  }
  .tier-institutional {
    --ink: #F2F1EC;
    --paper: #1B1E1A;
    --ink-quiet: #C0C4BC;
    --panel: #242823;
  }
}
:root { --olive-link: var(--olive); }
@media (prefers-color-scheme: dark) { :root { --olive-link: var(--bright-olive); } }

/* --------------------------------------------------------------------------
   3. Per-script typography.
   Findings from the brand doc's script test, applied as token overrides.
   Archivo and Figtree contain no Bengali, Devanagari, Gujarati, Gurmukhi or
   Arabic glyphs at all, so each script gets a companion face rather than a
   silent substitution.
   -------------------------------------------------------------------------- */

/* Bengali, Devanagari and Gurmukhi all hang from a headline stroke (matra /
   shirorekha). Display weight steps down from 800 to 700: at 800 the headline
   and the counters below it merge. Line-height floor 1.75, the scripts hang
   below the baseline. */
[data-script="bengali"] {
  --font-head: 'Noto Sans Bengali', 'Archivo', system-ui, sans-serif;
  --font-body: 'Noto Sans Bengali', 'Figtree', system-ui, sans-serif;
  --lh-body: 1.75; --lh-head: 1.35; --w-display: 700;
}
[data-script="devanagari"] {
  --font-head: 'Noto Sans Devanagari', 'Archivo', system-ui, sans-serif;
  --font-body: 'Noto Sans Devanagari', 'Figtree', system-ui, sans-serif;
  --lh-body: 1.75; --lh-head: 1.35; --w-display: 700;
}
[data-script="gurmukhi"] {
  --font-head: 'Noto Sans Gurmukhi', 'Archivo', system-ui, sans-serif;
  --font-body: 'Noto Sans Gurmukhi', 'Figtree', system-ui, sans-serif;
  --lh-body: 1.75; --lh-head: 1.35; --w-display: 700;
}

/* Gujarati dropped the headline stroke, so it holds together at a heavier
   weight than its cousins and needs slightly less leading. */
[data-script="gujarati"] {
  --font-head: 'Noto Sans Gujarati', 'Archivo', system-ui, sans-serif;
  --font-body: 'Noto Sans Gujarati', 'Figtree', system-ui, sans-serif;
  --lh-body: 1.7; --lh-head: 1.3; --w-display: 700;
}

/* Arabic. Kufi is geometric so it carries Archivo's logic in display, but it
   does not carry it in body text: Naskh reads far better at small sizes.
   Display weight caps at 600, heavier and the counters close up. */
[data-script="arabic"] {
  --font-head: 'Noto Kufi Arabic', 'Archivo', system-ui, sans-serif;
  --font-body: 'Noto Naskh Arabic', 'Figtree', system-ui, serif;
  --lh-body: 1.9; --lh-head: 1.5; --w-display: 600; --w-head: 600;
  --step-small: 1rem;
}

/* Urdu. Nastaliq cascades diagonally: 22px floor, 2.1 line-height, and its
   own grid. 15px Nastaliq is not readable. Urdu copy is written shorter
   rather than translated straight across, so the measure widens. */
[data-script="nastaliq"] {
  --font-head: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', system-ui, serif;
  --font-body: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', system-ui, serif;
  --size-body: 1.375rem;         /* 22px floor */
  --lh-body: 2.1; --lh-head: 1.9; --w-display: 700; --w-head: 600;
  --step-display: clamp(2rem, 1.5rem + 2.6vw, 3rem);
  --step-h2: clamp(1.625rem, 1.4rem + 1.2vw, 2.125rem);
  --step-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --step-lead: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --step-small: 1.125rem;
  --measure: 38rem;
  --track-display: 0;
}

/* No script other than Latin takes tracking or uppercasing. Arabic script has
   no capitals and its letters join: tracking severs the joins and turns a
   word into loose characters. The Indic scripts have conjuncts that break the
   same way. This is the descriptor-line finding from the brand doc, applied
   everywhere the treatment appears. */
[data-script]:not([data-script="latin"]) {
  --track-display: 0;
  --track-label: 0;
}
[data-script]:not([data-script="latin"]) .label,
[data-script]:not([data-script="latin"]) .wordmark__descriptor,
[data-script]:not([data-script="latin"]) .eyebrow {
  text-transform: none;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Text-size control, three steps, set by js/site.js and remembered. */
  font-size: 100%;
}
html[data-textsize="large"]  { font-size: 112.5%; }
html[data-textsize="larger"] { font-size: 125%; }

@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;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-display); font-weight: var(--w-display); letter-spacing: var(--track-display); }
h2 { font-size: var(--step-h2);      font-weight: var(--w-head); letter-spacing: calc(var(--track-display) / 2); }
h3 { font-size: var(--step-h3);      font-weight: var(--w-head); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--step-lead); line-height: 1.45; }
[data-script="nastaliq"] .lead { line-height: var(--lh-body); }

strong, b { font-weight: 700; }

a { color: var(--olive-link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--ink); }

/* Focus. Never removed. Thick enough to find on a phone in sunlight. */
:focus-visible {
  outline: 3px solid var(--olive-link);
  outline-offset: 3px;
  border-radius: 2px;
}

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

ul { padding-inline-start: 1.15em; margin: 0 0 1.1em; max-width: var(--measure); }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 2.5rem 0;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (max-width: 30rem) { .shell { width: min(100% - 1.75rem, var(--shell)); } }

.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

.tier-institutional { background: var(--paper); color: var(--ink); }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--olive);
  color: #FFFFFF;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { inset-inline-start: 0; color: #FFFFFF; }

/* --------------------------------------------------------------------------
   6. Wordmark. Type only. The rule runs the exact width of the word and sits
   underneath it, never through it: a name struck through has been crossed
   off, which is the opposite of the point.
   -------------------------------------------------------------------------- */

.wordmark { display: inline-block; text-decoration: none; color: inherit; }
.wordmark:hover { color: inherit; }

.wordmark__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--wm-size, 2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* width: fit-content so the rule below can match the word exactly */
  width: fit-content;
}
[data-script]:not([data-script="latin"]) .wordmark__name { letter-spacing: 0; font-weight: 700; }

.wordmark__rule {
  display: block;
  width: 100%;                   /* exact width of the name above it */
  height: var(--rule-weight);
  min-height: 4px;
  background: var(--olive);      /* constant across both tiers */
  margin-top: 0.22em;
  border-radius: 1px;
}
@media (prefers-color-scheme: dark) { .wordmark__rule { background: var(--bright-olive); } }

/* Block, so width:fit-content actually applies. This is what makes the rule
   below come out exactly as wide as the word above it, rather than as wide as
   the descriptor line. A span left inline silently ignores the width. */
.wordmark__lockup { display: block; width: fit-content; }

.wordmark__descriptor {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 0.7em;
  max-width: none;
}

/* The trust line. The most important thing we say, so it gets its own space
   rather than being tucked into a paragraph. Near the logo, never inside it. */
.trustline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-ink);
  background: var(--bright-olive);   /* fill, not letterform. 9.1:1 */
  padding: 0.5em 0.9em;
  border-radius: var(--radius);
  max-width: none;
}
[data-script]:not([data-script="latin"]) .trustline { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   7. Header, nav, language switcher
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step-small);
}
.topbar a { color: var(--paper); }
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.5rem;
}

/* Language switcher. Endonyms in their own script, never flags: a flag is a
   country, not a language, and most of these languages span several. */
.langbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.langbar__label {
  font-weight: 700;
  margin-inline-end: 0.35rem;
  opacity: 0.85;
}
.langbar__list { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.langbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.2em 0.6em;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.3;
}
.langbar__link:hover { background: rgba(255, 255, 255, 0.14); color: var(--paper); }
.langbar__link[aria-current="true"] {
  background: var(--bright-olive);
  color: var(--warm-ink);
}
/* Each entry carries its own lang attribute, so it gets its own script's
   metrics even inside an English page. */
.langbar__link[lang="ur"] { font-size: 1.15em; }
.langbar__link[lang="ar"] { font-size: 1.05em; }

.masthead { padding-block: 1.5rem 1.25rem; }
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.masthead .wordmark { --wm-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }

.nav { border-top: 1px solid var(--edge); }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.4em 0.7em;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
}
.nav__link:hover { background: rgba(64, 80, 31, 0.12); color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.7em 1.35em;
  border: 2px solid var(--olive);
  border-radius: var(--radius);
  background: var(--olive);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--bright-olive); border-color: var(--bright-olive); color: var(--warm-ink); }
  .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--warm-ink); }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
}

.btn__arrow { font-size: 1.1em; line-height: 1; }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   9. Pathway cards. The most important design element on the site: a visitor
   on a phone reaches "book a session" or "work with us" in one tap.
   (Build note 1.) They sit directly under the hero and are never collapsed
   behind a menu.
   -------------------------------------------------------------------------- */

.pathways {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pathway {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top: var(--rule-weight) solid var(--olive);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem;
}
@media (prefers-color-scheme: dark) { .pathway { border-top-color: var(--bright-olive); } }
.pathway h3 { margin: 0; font-size: var(--step-h3); }
.pathway p { margin: 0; max-width: none; color: var(--ink-quiet); }
.pathway .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   10. Content blocks
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 0.9rem;
  max-width: none;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.28em;
  background: var(--olive);
  margin-top: 0.55rem;
}
@media (prefers-color-scheme: dark) { .eyebrow::after { background: var(--bright-olive); } }

.stack > * + * { margin-top: 1.5rem; }

.cols {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}
.cols--two { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.block h3 { margin-bottom: 0.35em; }
.block p { max-width: var(--measure); }

/* Numbered method list for "How we teach" */
.methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.method {
  padding-inline-start: 1.25rem;
  border-inline-start: var(--rule-weight) solid var(--olive);
  max-width: var(--measure-wide);
}
@media (prefers-color-scheme: dark) { .method { border-inline-start-color: var(--bright-olive); } }
.method h3 { margin-bottom: 0.3em; }
.method p { max-width: var(--measure); margin: 0; }

/* The green block. Warm Ink on Bright Olive only, 9.1:1. Nothing quieter
   than body text goes inside it: Slate on Bright Olive falls to 4.75:1. */
.greenblock {
  background: var(--bright-olive);
  color: var(--warm-ink);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}
.greenblock h2, .greenblock h3, .greenblock p, .greenblock a, .greenblock strong { color: var(--warm-ink); }
.greenblock a { text-decoration-thickness: 0.1em; }
.greenblock .rule-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.greenblock .rule-list h3 { margin-bottom: 0.3em; }
.greenblock .rule-list p { max-width: var(--measure); margin: 0; }

/* Quiet panel, for contact details and factual asides */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}
.panel--olive {
  background: transparent;
  border: 0;
  border-inline-start: var(--rule-weight) solid var(--olive);
  padding-inline-start: 1.25rem;
  border-radius: 0;
}
@media (prefers-color-scheme: dark) { .panel--olive { border-inline-start-color: var(--bright-olive); } }

.factlist { display: grid; gap: 0.9rem; margin: 0; }
.factlist div { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.factlist dt { font-weight: 700; min-width: 5.5rem; }
.factlist dd { margin: 0; }

/* Offer cards in the sponsor section */
.offers { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.offer {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.offer h3 { margin-bottom: 0.4em; }
.offer p { max-width: none; }
.offer p:last-child { margin-bottom: 0; }

/* Translation status notice, shown on locale pages awaiting native review */
.notice {
  background: var(--panel);
  border: 1px solid var(--edge-strong);
  border-inline-start: var(--rule-weight) solid var(--olive);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: 1rem;
}
.notice p { max-width: none; margin: 0; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--charcoal);
  color: var(--cool-paper);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-size: 1rem;
}
.footer a { color: var(--bright-olive); }
.footer a:hover { color: #FFFFFF; }
.footer .wordmark__name { color: var(--cool-paper); }
.footer .wordmark__rule { background: var(--bright-olive); }
.footer .wordmark__descriptor { color: #C0C4BC; }
.footer__grid {
  display: grid;
  gap: 2rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.footer__legal { max-width: 32rem; color: #C0C4BC; font-size: var(--step-small); }
.footer__legal p { max-width: none; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.3em 0.7em;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.footer__links a:hover { background: rgba(255, 255, 255, 0.12); }
.footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(242, 241, 236, 0.18); font-size: var(--step-small); color: #C0C4BC; }

/* --------------------------------------------------------------------------
   12. Text-size control
   -------------------------------------------------------------------------- */

.textsize { display: flex; align-items: center; gap: 0.3rem; }
.textsize__label { font-weight: 700; opacity: 0.85; }
.textsize__btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.textsize__btn:hover { background: rgba(255, 255, 255, 0.14); }
.textsize__btn[aria-pressed="true"] { background: var(--bright-olive); color: var(--warm-ink); border-color: var(--bright-olive); }
.textsize__btn--s { font-size: 0.8rem; }
.textsize__btn--m { font-size: 1rem; }
.textsize__btn--l { font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   13. Print. Someone will print a guide at a community centre.
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .nav, .skip, .textsize, .langbar { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 12pt; }
  .greenblock { background: #FFFFFF; border: 2px solid #000000; }
  .footer { background: #FFFFFF; color: #000000; }
  .footer a, a { color: #000000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .section { padding-block: 1.5rem; }
}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */

/* Available to screen readers, absent from the visual layout. Used for the
   English name of each language in the switcher ("Bengali: বাংলা"), so a
   screen reader user who does not read the script still knows what it is. */
.u-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Component lists are layout, not prose, so they opt out of the reading
   measure that the base `ul` rule applies. Without this the pathway grid and
   the nav are both clamped to 34rem and collapse to a single column. */
.pathways,
.methods,
.rule-list,
.nav__list,
.langbar__list,
.footer__links {
  max-width: none;
}

/* Inline links in running text get a taller hit area than their text box.
   Padding on an inline element grows the clickable box without changing the
   line box, so nothing reflows. WCAG 2.2 exempts inline targets from the 24px
   minimum, but the email address is the single most important link on this
   site and most visitors will be tapping it on a phone. */
main p a,
main dd a,
main li a {
  padding-block: 0.3em;
}

/* --------------------------------------------------------------------------
   15. Spacing utilities.
   These exist because the production Content-Security-Policy sets
   style-src 'self', which blocks inline style attributes. Keeping the policy
   strict is worth more than the convenience of writing style="" in the
   template, so the handful of one-off spacings live here instead.
   -------------------------------------------------------------------------- */

.u-mt-s  { margin-top: 1.25rem; }
.u-mt-m  { margin-top: 1.5rem; }
.u-mt-l  { margin-top: 2rem; }
.u-mt-xl { margin-top: 2.5rem; }
.u-mb-xl { margin-bottom: 2.5rem; }
.u-narrow { max-width: 38rem; }
.shell--prose { width: min(100% - 2.5rem, 46rem); }