/*
 * theme.css — Bright & Wells Dental. Soft-blue, soft-saas.
 * Page --canvas #fbfcfe, cards --surface #fdfeff, buttons --accent #2c6e9e,
 * links --accent-text #3a6f97, text --ink #1e2d3a, highlight --accent-strong
 * #286591, secondary text --muted #646d73 — approved by the owner.
 */

:root {
  --canvas: #fbfcfe;
  --surface: #fdfeff;
  --surface-2: #eef4f9;
  --border: #dce6ee;
  --border-strong: #b7cadb;
  --ink: #1e2d3a;
  --muted: #646d73;

  --accent: #2c6e9e;
  --accent-hover: #24618c;
  --accent-ink: #ffffff;
  --accent-text: #3a6f97;
  --accent-strong: #286591;
  --accent-soft: #e3edf5;
  --accent-border: #bcd6e8;

  --success: #1c8a5b;
  --success-ink: #ffffff;
  --success-soft: #dff3e9;
  --success-strong: #187a50;
  --warning: #b4740e;
  --warning-ink: #ffffff;
  --warning-soft: #f7ecd8;
  --warning-strong: #8a5700;
  --danger: #c23b3b;
  --danger-ink: #ffffff;
  --danger-soft: #fae3e3;
  --danger-strong: #ab2f2f;

  --chart-1: #2c6e9e;
  --chart-2: #5aa9c9;
  --chart-3: #9fd0c8;
  --chart-4: #286591;
  --chart-5: #7bbfdb;
  --chart-6: #3f8fae;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 999px;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-raised: 0 8px 24px -6px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-btn: 0 6px 16px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  --card-pad: 1.75rem;
  --btn-weight: 700;
  --measure: 62ch;

  --x-gradient-navy: linear-gradient(160deg, #12283b 0%, #1c3c56 55%, #235777 100%);
  --x-gradient-mint: linear-gradient(180deg, #eaf6f2 0%, #eef4f9 100%);
  --x-mint-border: #cfe7dd;
  --x-navy-ink: #f4f9fc;
}

html[data-theme="dark"] {
  --canvas: #0f1c27;
  --surface: #162734;
  --surface-2: #1c3140;
  --border: #274253;
  --border-strong: #345a70;
  --ink: #eaf3fa;
  --muted: #9fb2c0;

  --accent: #4f9bcb;
  --accent-hover: #62aad7;
  --accent-ink: #0b1a24;
  --accent-text: #7cc0e6;
  --accent-strong: #8fcdec;
  --accent-soft: #1e3849;
  --accent-border: #2c516a;

  --success: #34b57e;
  --success-ink: #06261a;
  --success-soft: #123626;
  --success-strong: #6ad3a3;
  --warning: #e0a542;
  --warning-ink: #26190a;
  --warning-soft: #382a12;
  --warning-strong: #f0bd6d;
  --danger: #e07575;
  --danger-ink: #240b0b;
  --danger-soft: #3a1a1a;
  --danger-strong: #f19c9c;

  --chart-1: #4f9bcb;
  --chart-2: #7cc0e6;
  --chart-3: #9fd0c8;
  --chart-4: #8fcdec;
  --chart-5: #3f8fae;
  --chart-6: #62aad7;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 16px 32px -12px rgba(0,0,0,.55);
  --shadow-raised: 0 8px 24px -6px rgba(0,0,0,.6);
  --shadow-btn: 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);

  --x-gradient-navy: linear-gradient(160deg, #0a1620 0%, #14293a 55%, #1c3c56 100%);
  --x-gradient-mint: linear-gradient(180deg, #12222c 0%, #162734 100%);
  --x-mint-border: #274f45;
  --x-navy-ink: #f4f9fc;
}

/*
 * app.css — Bright & Wells Dental's own styles: the hero collage, the
 * two statement bands, and the swipeable review strip. Nothing here
 * re-declares a primitive; everything reads tokens.
 */

.nav-blur {
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
#treatments, #dentists, #reviews, #visit, #book { scroll-margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Hero collage --------------------------------------------------------
   A mosaic: the headline sits in its own cell beside a dominant photo of
   the chair, with the two smaller photos stacked to its right. Mobile
   stacks straight down; the two small photos sit side by side. */
.hero-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "copy copy"
    "main main"
    "hands smile";
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 4fr 5fr 3fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "copy main hands"
      "copy main smile";
    height: 34rem;
  }
}
.hero-cell {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
}
.hero-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
@media (min-width: 768px) { .hero-copy { padding: 2.75rem; } }

.hero-photo-main { grid-area: main; aspect-ratio: 4 / 3; }
.hero-hands { grid-area: hands; aspect-ratio: 1 / 1; }
.hero-smile { grid-area: smile; aspect-ratio: 1 / 1; }
@media (min-width: 1024px) {
  .hero-photo-main, .hero-hands, .hero-smile { aspect-ratio: auto; }
}

/* Hero-only motion: the collage settles into place once, on load — a plain
   CSS animation, so it runs with no dependency on script. Every cell RESTS
   visible (100% keyframe is opaque, fill-mode backwards only holds the
   0% frame for the animation's own duration) and animates in from a small
   offset; html.reduced-motion removes the animation outright, which the
   keyframe's own end state already satisfies. */
.hero-grid .hero-copy { animation: hero-settle 640ms var(--ease-out, ease) both; }
.hero-grid .hero-photo-main { animation: hero-settle 640ms var(--ease-out, ease) 100ms both; }
.hero-grid .hero-hands { animation: hero-settle 580ms var(--ease-out, ease) 220ms both; }
.hero-grid .hero-smile { animation: hero-settle 580ms var(--ease-out, ease) 320ms both; }
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
html.reduced-motion .hero-grid .hero-cell { animation: none; }

/* ---- Statement bands -------------------------------------------------- */
.x-mint-band {
  background: var(--x-gradient-mint);
  border-top: 1px solid var(--x-mint-border);
  border-bottom: 1px solid var(--x-mint-border);
}
.x-navy-band {
  background: var(--x-gradient-navy);
  color: var(--x-navy-ink);
}

/* ---- Reviews: a swipeable strip, snap-scrolled, scrollbar hidden ------ */
.review-strip {
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.review-strip::-webkit-scrollbar { display: none; }
.review-card {
  width: min(85%, 22rem);
  flex: 0 0 auto;
  scroll-snap-align: start;
}