/* ==========================================================================
   Base — fonts, reset, elements, focus, prose.
   ========================================================================== */

/* --- Self-hosted faces. No CDN request survives the move to their hosting. --- */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  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;
}
@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  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;
}

/* --- Reset ---------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the fixed header. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body-dark);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100svh;
}

body.t-light { line-height: var(--lh-body); }

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

img { font-style: italic; }  /* styles the alt text if an image ever fails to load */

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

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

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

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;              /* Young Serif ships one weight; never faux-bold it */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-family: var(--font-text); font-weight: 600; letter-spacing: 0; }

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--gold); color: oklch(0.148 0.058 264); }

/* --- Focus: gold ring, always visible, never removed --------------------- */

/*
 * The focus ring follows the ground it is drawn on.
 *
 * It used to be `--gold` everywhere. --gold measures 1.93:1 against --bg-page, so on every
 * light surface the ring failed WCAG 2.2 SC 1.4.11 (3:1 for non-text UI) — and with the
 * site now majority-light that was a sitewide failure. --ring is redefined per ground in
 * tokens.css: --gold on navy (9.84:1), --gold-deep on light (5.02:1).
 */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Skip link: a real one, with a real target ---------------------------- */

.skip-link {
  position: fixed;
  top: var(--s-sm);
  left: var(--s-sm);
  z-index: var(--z-toast);
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: oklch(0.148 0.058 264);
  font-weight: 600;
  font-size: var(--t-small);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  transform: translateY(-160%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

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

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure       { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* --- Prose: the reading surface for blog and policy pages ----------------- */

.prose {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.72;
  color: var(--ink);
}

.prose > * + * { margin-block-start: 1.4em; }

.prose h2 {
  font-size: var(--t-h3);
  margin-block-start: 2.2em;
  margin-block-end: 0.1em;
}
.prose h3 {
  font-size: var(--t-h4);
  font-family: var(--font-display);
  margin-block-start: 1.8em;
  margin-block-end: 0.1em;
}

.prose a {
  color: var(--gold-ink);
  text-decoration-color: color-mix(in oklch, var(--gold-ink) 45%, transparent);
}
.prose a:hover { text-decoration-color: var(--gold-ink); }

.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose ul { list-style: none; }
.prose ol { list-style: decimal; }
.prose li + li { margin-block-start: 0.55em; }

/* The four-point sparkle from the wordmark, doing the job of a bullet. */
.prose ul > li {
  position: relative;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.35em;
  inset-block-start: 0.62em;
  width: 0.5em;
  height: 0.5em;
  background: var(--gold-ink);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.prose blockquote {
  border-inline-start: 1px solid var(--rule-strong);
  padding-inline-start: var(--s-md);
  font-family: var(--font-display);
  font-size: 1.15em;
  line-height: 1.4;
}

.prose figure { margin-block: 2.2em; }
.prose figcaption {
  margin-block-start: 0.75em;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.prose img { clip-path: var(--facet-soft); }

.prose hr {
  border: 0;
  height: 1px;
  margin-block: 2.6em;
  background: linear-gradient(90deg,
    transparent, var(--rule-strong) 15%, var(--gold) 50%, var(--rule-strong) 85%, transparent);
  opacity: 0.55;
}

.prose code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--ink) 8%, transparent);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.prose th, .prose td {
  text-align: start;
  padding: 0.7em 0.9em;
  border-block-end: 1px solid var(--rule);
}
.prose th { font-weight: 600; }

/* ==========================================================================
   Reachability.

   The people using this site are, by the practice's own description, often
   older and often not confident with technology — several of the reviews on
   the Reviews page are from patients who had avoided a dentist for a decade.
   For that reader, anything that depends on noticing a subtle signal is a
   thing they will not find.

   Two rules, applied globally rather than per component so nothing can be
   forgotten later.
   ========================================================================== */

/* 1. A LINK IN PROSE IS UNDERLINED.
 *
 * Colour alone was carrying it, which fails WCAG 1.4.1 and, more to the point,
 * is invisible to someone who does not already know that gold means clickable.
 * Buttons, nav items and cards are excluded: they announce themselves by shape,
 * and underlining them would be noise.                                        */
p a,
li a,
dd a,
.prose a,
address a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
p a:hover,
li a:hover,
dd a:hover,
.prose a:hover,
address a:hover { text-decoration-color: currentColor; }

/* Components that are already unmistakable keep their clean face. */
p a.btn, li a.btn, dd a.btn,
.switchboard__link, .face__link, .services__call,
.nav__link, .payer, .treatment__summary a { text-decoration: none; }

/* Tap targets are enforced at the end of pages.css, where they win on source
   order — .btn--quiet resets min-height in components.css, which loads later. */