/* Heartbeat Medical Services — shared stylesheet
   Generated 2026-08-10 from the approved drafts in Website project/Media/.
   Source of truth is DESIGN.md; do not hand-edit on the server.
   Regenerate with scripts/build_stylesheet.py. */

:root {
  /* --- Brand, sampled from the logo ---------------------- */
  --hb-green:       #005028;
  --hb-green-deep:  #00401F;
  --hb-green-wash:  #E6F0E9;
  --hb-gold:        #C09020;   /* fills and rules, never text on light */
  --hb-gold-deep:   #A87C10;
  --hb-gold-text:   #A87C10;   /* light grounds, large bold text only */
  --hb-gold-light:  #E0BC5C;   /* text on the dark ground, 10.19:1 */
  --hb-gold-wash:   #F7EFD9;

  /* --- Dark grounds -------------------------------------- */
  --hb-ground:      #02170C;
  --hb-ground-2:    #053A1E;
  --hb-glow:        #0A6B38;   /* background wash only, never text */

  /* --- Neutrals, biased green ---------------------------- */
  --hb-white:      #FFFFFF;
  --hb-surface:    #F4F7F5;
  --hb-line:       #D8E2DB;
  --hb-muted:      #466152;
  --hb-ink:        #10221A;
  --hb-on-dark:    #A9C9B6;
  --hb-on-dark-dim:#7FB595;

  /* Hairlines on the dark ground. Two weights only — one that
     separates, one that barely whispers. */
  --hb-rule-dark:  rgba(255,255,255,.14);
  --hb-rule-faint: rgba(255,255,255,.09);

  /* --- Typography ---------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --tracking-caps: 0.09em;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 5.5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Square is the default. The two radii that survive are for the
     things that act, and one soft corner for the mobile panel. */
  --r-sm:   4px;
  --r-pill: 999px;
  /* Not used by this direction, which is deliberately square. Retained
     because hb-design.css is generated from this :root and the live legal
     pages consume --r-md. Do not remove without regenerating and checking. */
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;

  --shadow-card:  0 18px 44px rgba(2,23,12,.10);

  --max-w: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Printed-paper grain, laid over every saturated field so it reads
     as ink on stock rather than a flat vector fill. */
  --grain: radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) .5px, transparent .6px);
  --grain-size: 3px 3px;

  /* Blocksy's sticky header height. The drafts hardcoded a pixel value;
     DESIGN.md's Sticky-Offset Rule requires a single variable so in-page
     anchors and the sticky table of contents stay in agreement. */
  --hb-header-h: 82px;
}

@media (max-width: 782px) {
  :root { --hb-header-h: 70px; }
}

/* ---------------------------------------------------------------
   Long-form legal pages (privacy, cookies)
   --------------------------------------------------------------- */
/* ---- Privacy policy: long-form legal prose ------------------------ */

.legal-layout{
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-8); align-items: start;
  padding: var(--sp-8) 0 var(--sp-9);
}
/* clears the sticky site header rather than sliding under it */
.legal-toc{ position: sticky; top: calc(var(--hb-header-h) + var(--sp-4)); }
.legal-toc h2{
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--hb-muted);
  margin: 0 0 var(--sp-3);
}
.legal-toc ol{ list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li{ counter-increment: toc; margin-bottom: 2px; }
.legal-toc a{
  display: block; padding: 8px 12px; border-radius: 0;
  font-size: var(--fs-sm); color: var(--hb-muted); text-decoration: none;
  border-left: 1px solid var(--hb-line); transition: color .18s var(--ease),
  border-color .18s var(--ease), background .18s var(--ease);
}
.legal-toc a::before{ content: counter(toc) ". "; color: var(--hb-gold-text); font-weight: 600; }
.legal-toc a:hover{ color: var(--hb-green); background: var(--hb-white); border-left-color: var(--hb-gold); }
.legal-body{ max-width: 68ch; }
/* the table-of-contents links target the sections, so the offset lives here */
.legal-body section{ scroll-margin-top: calc(var(--hb-header-h) + var(--sp-4)); }
.legal-body section + section{ margin-top: var(--sp-7); }
.legal-body h2{
  font-size: var(--fs-xl); color: var(--hb-green); margin: 0 0 var(--sp-3);
}
.legal-body h3{
  font-size: var(--fs-lg); color: var(--hb-ink); margin: var(--sp-5) 0 var(--sp-2);
}
.legal-body p{ margin: 0 0 var(--sp-4); }
.legal-body ul{ margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
.legal-body li{ margin-bottom: var(--sp-2); }
.legal-body li::marker{ color: var(--hb-gold-text); }
.legal-body a{ color: var(--hb-green); text-underline-offset: 3px; }

/* what-we-collect table */
.legal-table-wrap{ overflow-x: auto; margin: 0 0 var(--sp-4); }
.legal-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
.legal-table th, .legal-table td{
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hb-line);
  vertical-align: top;
}
.legal-table th{
  background: var(--hb-surface); color: var(--hb-green);
  border-bottom: 2px solid var(--hb-green);
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-weight: 700;
}
.legal-table tr:last-child td{ border-bottom: 0; }

/* callouts */
.legal-callout{
  position: relative; background: var(--hb-gold-wash);
  border: 1px solid #E8D5A0; border-radius: 0;
  padding: var(--sp-5); margin: 0 0 var(--sp-4);
}
/* Gold arrives as this design's short rule, not a coloured spine. */
.legal-callout::before{ content:""; position:absolute; top:0; left:0;
  width:46px; height:3px; background: var(--hb-gold); }
.legal-callout p:last-child{ margin-bottom: 0; }
.legal-callout strong{ color: var(--hb-ink); }

/* unresolved draft items — must be gone before publication */
.legal-flag{
  border: 1px dashed var(--hb-gold-deep); background: #fff;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--hb-muted); margin: 0 0 var(--sp-4);
}
.legal-flag::before{
  content: "Draft note"; display: block; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 700; color: var(--hb-gold-deep); margin-bottom: 4px;
}

@media (max-width: 900px){
  .legal-layout{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .legal-toc{ position: static; }
  .legal-toc ol{ column-count: 2; column-gap: var(--sp-4); }
}
@media (max-width: 560px){
  .legal-toc ol{ column-count: 1; }
}

/* ---------------------------------------------------------------
   Consent-tool embed slot
   --------------------------------------------------------------- */
/* Slot the consent tool renders the live cookie list into. Styled as a
   container rather than a table, because the tool supplies its own markup. */
.legal-embed{
  border: 1px solid var(--hb-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-4);
  background: var(--hb-surface);
}
.legal-embed__note{
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--hb-muted);
}
.legal-embed__fallback{
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--hb-muted);
}
/* The tool injects its own tables; keep them inside the page's language
   and let them scroll rather than pushing the body sideways. */
.legal-embed table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-embed th, .legal-embed td{
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hb-line);
}
.legal-embed h2, .legal-embed h3{ font-size: var(--fs-lg); color: var(--hb-green); }