/* ============================================================================
   DoseBuddy — dosebuddyapp.com
   Direction: "Pastillero" — the visual language of a weekly pill organiser.
   The compartment (rounded cell with a lid edge) is the page's one signature
   shape: it carries the hero dose strip, the three setup steps and the cards.

   Colour roles are split on purpose. The brand teal #2A9D8F is only 3.2:1 on
   paper, so it is a *surface* colour (fills, borders, the mark) and never a
   text colour; --accent-ink is the darkened teal used wherever text or a
   filled button needs to clear WCAG AA.

   Type is Atkinson Hyperlegible Next, self-hosted. It is drawn by the Braille
   Institute for low-vision readers — the page is set in the same values the
   product sells.
   ========================================================================= */

@layer reset, base, layout, components, utilities;

/* --- Font ---------------------------------------------------------------- */
/* Self-hosted: loading this from the Google Fonts CDN would send every EU
   visitor's IP to Google before they consent. Latin subset covers en + es. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Tier 1 — literal brand values (shared with the Android app) */
  --teal: #2a9d8f;
  --mint: #b7e4dd;

  /* Tier 2 — semantic, light theme */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --cell-fill: #e8f6f3;
  --cell-line: #9dd3c9;
  --ink: #10322e;
  --ink-muted: #4a6360;
  --accent-ink: #12655c;
  --accent-ink-strong: #0f5e55;
  --on-accent: #ffffff;
  --line: #e2e0d8;
  --amber: #e8a33d;
  --amber-ink: #7a4a08;
  --shadow: 0 1px 2px rgb(16 50 46 / 0.05), 0 8px 24px -12px rgb(16 50 46 / 0.18);
  --shadow-lift: 0 2px 4px rgb(16 50 46 / 0.06), 0 18px 40px -18px rgb(16 50 46 / 0.28);

  /* Scale */
  --step--1: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.11rem + 0.38vw, 1.4375rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.66vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.72rem + 2.65vw, 4rem);

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.375rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: clamp(3.5rem, 8vw, 6.5rem);

  --radius-cell: 1.125rem;
  --radius-card: 1.5rem;
  --measure: 34rem;
  --container: 70rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1b19;
    --surface: #172624;
    --cell-fill: #1b322e;
    --cell-line: #35635b;
    --ink: #e9f3f1;
    --ink-muted: #a5bdb8;
    --accent-ink: #4fc2b2;
    --accent-ink-strong: #6fd3c4;
    --on-accent: #0e1b19;
    --line: #2c4a45;
    --amber: #f0b45e;
    --amber-ink: #f0b45e;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  }
}

/* --- Reset --------------------------------------------------------------- */
/* Scoped to element types rather than `*` so component styles and lower
   cascade layers can still win without !important. */
@layer reset {
  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  li,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[class],
  ol[class] {
    padding: 0;
    list-style: none;
  }

  img,
  svg,
  picture {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  a {
    color: inherit;
  }

  button {
    font: inherit;
    color: inherit;
  }
}

/* --- Base ---------------------------------------------------------------- */
@layer base {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 5rem;
  }

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

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
    /* Keeps the fallback face at the same x-height so the swap does not shift
       layout (CLS) or change how large the text reads mid-load. */
    font-size-adjust: from-font;
    font-size: var(--step-0);
    line-height: 1.6;
    accent-color: var(--accent-ink);
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3 {
    line-height: 1.14;
    letter-spacing: -0.018em;
    font-weight: 700;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-4);
  }

  h2 {
    font-size: var(--step-3);
  }

  h3 {
    font-size: var(--step-1);
    line-height: 1.25;
  }

  p {
    text-wrap: pretty;
  }

  a:where(:not([class])) {
    color: var(--accent-ink);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
  }

  a:where(:not([class])):hover {
    color: var(--accent-ink-strong);
  }

  :focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 3px;
    border-radius: 0.35rem;
  }

  ::selection {
    background: var(--mint);
    color: #10322e;
  }

  strong {
    font-weight: 700;
  }
}

/* --- Layout -------------------------------------------------------------- */
@layer layout {
  .wrap {
    inline-size: min(100% - clamp(2rem, 8vw, 5rem), var(--container));
    margin-inline: auto;
  }

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

  .section + .section {
    border-block-start: 1px solid var(--line);
  }

  .section__head {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-5);
  }

  .section__head > p {
    margin-block-start: var(--space-2);
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  .stack > * + * {
    margin-block-start: var(--space-3);
  }
}

/* --- Components ---------------------------------------------------------- */
@layer components {
  /* Skip link ------------------------------------------------------------- */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    color: var(--accent-ink);
    border: 2px solid var(--accent-ink);
    border-radius: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
  }

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

  /* Header ---------------------------------------------------------------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-block-end: 1px solid var(--line);
  }

  @supports (backdrop-filter: blur(1px)) {
    .site-header {
      backdrop-filter: saturate(1.4) blur(10px);
    }
  }

  .site-header > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 0.7rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .brand img {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: 0.5rem;
  }

  /* Language switch ------------------------------------------------------- */
  .lang-switch {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--step--1);
  }

  .lang-switch a,
  .lang-switch span {
    display: grid;
    place-items: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 700;
  }

  .lang-switch a {
    color: var(--ink-muted);
  }

  .lang-switch a:hover {
    color: var(--accent-ink);
    background: var(--cell-fill);
  }

  .lang-switch [aria-current="true"] {
    background: var(--cell-fill);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 2px var(--cell-line);
  }

  /* Google Play badge ----------------------------------------------------- */
  /* Google's artwork already carries the mandated clear space, so the link box
     is sized to the artwork and never re-cropped. */
  .play-badge {
    display: inline-block;
    inline-size: 15.5rem;
    max-inline-size: 100%;
    border-radius: 0.9rem;
    transition: transform 0.18s ease, filter 0.18s ease;
  }

  .play-badge img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 646 / 250;
  }

  .play-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }

  .cta-note {
    margin-block-start: var(--space-2);
    font-size: var(--step--1);
    color: var(--ink-muted);
  }

  /* Compartment — the signature shape ------------------------------------- */
  .cell {
    position: relative;
    background: var(--cell-fill);
    border: 2px solid var(--cell-line);
    border-radius: var(--radius-cell);
    /* The lighter top edge reads as the lid of a pill-organiser compartment. */
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--surface) 70%, transparent);
  }

  /* Hero ------------------------------------------------------------------ */
  .hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.25rem);
  }

  .hero__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .hero__grid {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
  }

  .eyebrow {
    display: inline-block;
    margin-block-end: var(--space-2);
    padding: 0.3rem 0.8rem;
    background: var(--cell-fill);
    border: 1px solid var(--cell-line);
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--accent-ink);
  }

  .hero__lead {
    margin-block-start: var(--space-3);
    max-inline-size: var(--measure);
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  .hero__cta {
    margin-block-start: var(--space-4);
  }

  /* Dose strip — a day of compartments, the next dose still open ----------- */
  .dose-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: var(--space-5);
  }

  .dose-strip li {
    display: grid;
    place-items: center;
    gap: 0.15rem;
    min-inline-size: 5rem;
    padding: 0.7rem 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--step--1);
  }

  .dose-strip li small {
    font-size: 0.75em;
    font-weight: 400;
    color: var(--ink-muted);
  }

  .dose-strip .is-next {
    background: color-mix(in srgb, var(--amber) 24%, var(--surface));
    border-color: var(--amber);
    color: var(--amber-ink);
  }

  .dose-strip .is-next small {
    color: inherit;
  }

  /* Phone screenshots ----------------------------------------------------- */
  .shot {
    margin: 0;
    inline-size: min(100%, 19rem);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    background: var(--surface);
  }

  .shot img {
    inline-size: 100%;
    aspect-ratio: 640 / 1256;
  }

  .shot--center {
    margin-inline: auto;
  }

  /* Steps — a real sequence, so the numerals carry information ------------- */
  .steps {
    display: grid;
    gap: var(--space-3);
    counter-reset: step;
  }

  @media (min-width: 48rem) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }
  }

  .steps > li {
    counter-increment: step;
    padding: var(--space-4) var(--space-3) var(--space-3);
  }

  .steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-block-end: var(--space-2);
    background: var(--accent-ink);
    color: var(--on-accent);
    border-radius: 0.85rem;
    font-size: var(--step-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .steps h3 + p {
    margin-block-start: var(--space-1);
    color: var(--ink-muted);
  }

  /* Split section (copy + screenshot) ------------------------------------- */
  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    }

    .split--flip > :first-child {
      order: 2;
    }
  }

  .split__body {
    max-inline-size: var(--measure);
  }

  /* Feature list ---------------------------------------------------------- */
  .features {
    display: grid;
    gap: var(--space-3);
  }

  @media (min-width: 44rem) {
    .features {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .features > li {
    padding: var(--space-3);
  }

  .features h3 {
    margin-block-end: var(--space-1);
  }

  .features p {
    color: var(--ink-muted);
    font-size: var(--step--1);
  }

  /* Pull quote / statistic ------------------------------------------------ */
  .stat {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background: var(--cell-fill);
    border: 2px solid var(--cell-line);
  }

  .stat b {
    font-size: var(--step-3);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .stat cite {
    font-style: normal;
    font-size: var(--step--1);
    color: var(--ink-muted);
  }

  /* FAQ — native details, so it works with JS off ------------------------- */
  .faq {
    display: grid;
    gap: var(--space-2);
    max-inline-size: 48rem;
  }

  .faq details {
    padding-inline: var(--space-3);
  }

  .faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    min-block-size: 2.75rem;
    font-size: var(--step-1);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 0.2em;
    background: var(--accent-ink);
    /* Plus sign drawn as a mask so it survives Forced Colors as a solid box
       rather than vanishing like a background-image would. */
    mask: linear-gradient(var(--ink), var(--ink)) center / 0.875rem 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 0.875rem no-repeat;
    transition: rotate 0.2s ease;
  }

  .faq details[open] summary::after {
    rotate: 45deg;
    mask: linear-gradient(var(--ink), var(--ink)) center / 0.875rem 2px no-repeat;
  }

  .faq summary:focus-visible {
    outline-offset: -3px;
  }

  .faq .faq__body {
    padding-block-end: var(--space-3);
    color: var(--ink-muted);
    max-inline-size: var(--measure);
  }

  .faq .faq__body > * + * {
    margin-block-start: var(--space-2);
  }

  @supports selector(::details-content) {
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
      interpolate-size: allow-keywords;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* Closing CTA ----------------------------------------------------------- */
  .closing {
    text-align: center;
    padding-block: var(--space-6);
    background: var(--cell-fill);
    border-block: 2px solid var(--cell-line);
  }

  .closing p {
    margin-inline: auto;
    max-inline-size: var(--measure);
    margin-block-start: var(--space-3);
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  .closing .play-badge {
    margin-block-start: var(--space-4);
  }

  /* Footer ---------------------------------------------------------------- */
  .site-footer {
    padding-block: var(--space-5);
    font-size: var(--step--1);
    color: var(--ink-muted);
  }

  .site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--line);
  }

  .site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding: 0;
    list-style: none;
  }

  .site-footer nav a {
    display: inline-block;
    padding-block: 0.6rem;
    color: var(--accent-ink);
  }

  .disclaimer {
    margin-block-start: var(--space-3);
    max-inline-size: 52rem;
  }

  .colophon {
    margin-block-start: var(--space-3);
  }

  /* Language hint --------------------------------------------------------- */
  .lang-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    padding: 0.65rem var(--space-3);
    background: var(--cell-fill);
    border-block-end: 1px solid var(--cell-line);
    font-size: var(--step--1);
    text-align: center;
  }

  .lang-hint a {
    color: var(--accent-ink);
    font-weight: 700;
  }

  .lang-hint .btn {
    padding-block: 0.3rem;
    min-block-size: 2.25rem;
  }

  /* Cookie consent -------------------------------------------------------- */
  /* Rendered in the HTML and revealed by script, never injected, so it cannot
     push layout around after paint. */
  .consent {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    padding: var(--space-3);
    background: var(--surface);
    border-block-start: 2px solid var(--cell-line);
    box-shadow: var(--shadow-lift);
  }

  .consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .consent p {
    flex: 1 1 22rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
    margin: 0;
  }

  .consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Both choices are styled with equal weight — a consent banner that makes
     "reject" quieter than "accept" is not freely given consent under GDPR. */
  .btn {
    min-block-size: 2.75rem;
    padding: 0.6rem 1.4rem;
    border-radius: 0.85rem;
    border: 2px solid var(--accent-ink);
    background: var(--surface);
    color: var(--accent-ink);
    font-size: var(--step--1);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .btn:hover:not(:disabled) {
    background: var(--cell-fill);
  }

  .btn--solid {
    background: var(--accent-ink);
    color: var(--on-accent);
  }

  .btn--solid:hover:not(:disabled) {
    background: var(--accent-ink-strong);
    color: var(--on-accent);
  }

  /* Video slot ------------------------------------------------------------ */
  /* Empty on launch. Drop a <div class="video" data-yt="ID"> in and the lazy
     facade in js/ui.js takes over — no layout change needed later. */
  .video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 2px solid var(--cell-line);
    background: var(--cell-fill);
  }

  .video iframe,
  .video img,
  .video button {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .video button {
    display: grid;
    place-items: center;
    background: transparent;
    cursor: pointer;
  }
}

/* --- Utilities ----------------------------------------------------------- */
@layer utilities {
  /* Lives in the top layer on purpose: component rules set `display: flex` on
     the consent bar and the language hint, which would otherwise out-rank the
     UA stylesheet's [hidden] and leave both permanently visible. */
  [hidden] {
    display: none;
  }

  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .center {
    text-align: center;
  }

  .center .section__head,
  .center .stat,
  .center .hero__lead {
    margin-inline: auto;
  }

  .spaced {
    margin-block-start: var(--space-5);
  }
}

/* --- Motion & contrast preferences --------------------------------------- */
@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;
  }
}

@media (forced-colors: active) {
  .cell,
  .stat,
  .shot,
  .video,
  .btn {
    border: 2px solid CanvasText;
  }

  .steps > li::before {
    border: 2px solid CanvasText;
  }

  .site-header {
    border-block-end: 1px solid CanvasText;
  }
}

@media print {
  .site-header,
  .consent,
  .lang-hint,
  .skip-link {
    display: none;
  }
}