/* ==========================================================================
   FRESH DENTAL SOLUTIONS — BASE
   ==========================================================================
   Reset, bare-element defaults (headings, links, lists, media, tables),
   the single focus-visible treatment, layout primitives (.container,
   .grid, .stack, .cluster) and cross-cutting utilities (.visually-hidden,
   .skip-link, the reduced-motion kill switch).

   Depends on: tokens.css. Load this file second.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  block-size: 100%;
  scroll-behavior: smooth;
  /* The nav is the one position:fixed element on every page — this is what
     keeps a fragment jump (services.html#general, a skip-link, a saved
     anchor) landing BELOW it instead of underneath it. Combines additively
     with any scroll-margin-top an individual target also carries. */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-block-size: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Every page's content lives in <main id="main">, directly under the fixed
   nav in source order — without this, the page's own first heading (often
   the only <h1>) renders straight under the nav bar and is sliced in half.
   kb/index.html's <main class="kb-main"> re-states this in its own
   padding-block so the KB's own top rhythm isn't lost underneath it. */
main { padding-top: var(--nav-h); }

/* Overflow-x guard: the page body itself must never scroll sideways; wide
   content (tables, code) gets its own overflow-x:auto container instead.
   `clip` rather than `hidden`: `hidden` makes html/body a scroll CONTAINER,
   which silently breaks `position: sticky` for every descendant (it cost us
   ai.html's TOC rail). `clip` guards overflow identically without becoming
   one. The `hidden` line stays first as the fallback for engines that don't
   know `clip` — they keep today's guard and simply don't get sticky. */
html, body { overflow-x: hidden; overflow-x: clip; }

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* ---- Headings & running text ---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.06em; }

p { color: var(--text-muted); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--t) var(--ease-out);
}
a:hover { color: var(--link-hover); }

small { font-size: var(--fs-sm); }

strong, b { font-weight: 700; color: var(--text); }

code, pre, kbd, samp { font-family: var(--font-mono); }

hr {
  border: none;
  border-top: 1px solid var(--border);
}

::selection {
  background: var(--brand-200);
  color: var(--ink-900);
}

/* ---- Focus visibility: the ONE treatment, everywhere ----------------------*/
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Skip link -------------------------------------------------------------
   <a class="skip-link" href="#main">Skip to content</a> as the first thing
   inside <body>. Off-screen until focused. */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-toast);
  padding: var(--s-3) var(--s-5);
  background: var(--brand);
  color: var(--brand-contrast);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--t) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 4px;
}

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

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

/* ---- Container: the page-width wrapper ------------------------------------*/
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Container-narrow: for prose / centered single-column content --------*/
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Grid: responsive card/content grid -----------------------------------
   Default: auto-fit columns, each at least 260px. Modifiers cap the column
   count at wide viewports for editorial (asymmetric) rhythm. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-8);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Anti-orphan: card counts here are content-driven (KB category size,
   article picks) and often don't divide evenly into whatever column count
   auto-fit lands on, stranding one lone card alone on the last row. When
   that happens, pull it under the row above instead of leaving it stuck at
   the left edge. Each breakpoint matches the width where .grid-3's own
   260px/32px-gap minmax is actually rendering that column count. */
@media (min-width: 58rem) {
  /* Exactly four items read better as a balanced 2x2 than as three across
     with a lone card floated into the middle of row two. */
  .grid-3:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Any other count that strands a single trailing card still centres it. */
  .grid-3:has(> :nth-child(5)) > :last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}
@media (min-width: 40rem) and (max-width: 57.99rem) {
  .grid-3:has(> :nth-child(3)) > :last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    max-width: 22rem;
    margin-inline: auto;
  }
}

/* Asymmetric two-up: a lede column and a narrower companion (figure, list,
   card) — the "earns it" layout the brief asks for. Stacks below 800px. */
.grid-asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 50rem) {
  .grid-asym { grid-template-columns: 3fr 2fr; align-items: start; }
  .grid-asym.is-reversed { grid-template-columns: 2fr 3fr; }
}

/* ---- Stack: the "owl" selector — consistent vertical rhythm ---------------
   .stack sets a default gap; .stack-sm / .stack-lg tune it. */
.stack { --stack-space: var(--s-4); }
.stack > * + * { margin-top: var(--stack-space); }
.stack-sm { --stack-space: var(--s-2); }
.stack-lg { --stack-space: var(--s-8); }
.stack-xl { --stack-space: var(--s-12); }

/* ---- Cluster: horizontal grouping that wraps gracefully -------------------*/
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.cluster-between { justify-content: space-between; }
.cluster-tight { gap: var(--s-2); }

/* ---- Scroll containers for wide content (tables, code) --------------------
   Wrap any table or <pre> that can overflow in one of these; the page body
   itself never scrolls sideways. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Small text-alignment / display helpers -------------------------------*/
.text-center { text-align: center; }
.u-muted { color: var(--text-muted); }
.u-faint { color: var(--text-faint); }

/* ---- Reduced motion kill switch --------------------------------------------
   The one place !important is used in this design system: components below
   define their own transitions/animations with normal specificity, and this
   rule must always be able to silence every one of them regardless of load
   order or selector weight. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}