/*
 * theme.css — Bloom Dental Studio.
 * Powder-blue pastel palette: washed blue washes, white floating cards, soft
 * tinted shadows, rounded everything. Opens light; a deep ink/teal dark mode
 * under html[data-theme="dark"]. --x-ink-band-* is this app's own token, for
 * the always-dark statement band in the Closing section (present, tuned
 * differently, in both modes).
 */

:root {
  --canvas: #fbfcfe;
  --surface: #fdfeff;
  --surface-2: #eaf3f8;
  --border: #dce8ee;
  --border-strong: #b7cdd7;
  --ink: #1d2b33;
  --muted: #646c6f;
  --accent: #256c86;
  --accent-hover: #1c5a70;
  --accent-ink: #ffffff;
  --accent-text: #2e6f8e;
  --accent-strong: #1c5a70;
  --accent-soft: #dcedf3;
  --accent-border: #a9cbd8;
  --success: #2f7d5b;
  --success-ink: #ffffff;
  --success-soft: #e2f1e9;
  --success-strong: #276b4d;
  --warning: #a8671f;
  --warning-ink: #ffffff;
  --warning-soft: #f6ead9;
  --warning-strong: #8f5619;
  --danger: #b5443a;
  --danger-ink: #ffffff;
  --danger-soft: #f6e1de;
  --danger-strong: #9c392f;
  --chart-1: #256c86;
  --chart-2: #4f97a8;
  --chart-3: #8fbfc4;
  --chart-4: #1c5a70;
  --chart-5: #b7cdd7;
  --chart-6: #2e6f8e;

  --font-display: "Bricolage Grotesque", 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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 1rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 18px 36px -26px color-mix(in srgb, var(--accent) 40%, transparent),
    0 2px 10px -4px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-raised: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-btn: 0 12px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 62ch;

  /* This app's own tokens — the always-dark closing band. */
  --x-ink-band-bg: #142832;
  --x-ink-band-bg-2: #0e1e26;
  --x-ink-band-text: #f2f7f9;
  --x-ink-band-muted: #a9c1cb;
  --x-ink-band-accent: #8fd0e3;
  --x-mist: #eaf3f8;
}

html[data-theme="dark"] {
  --canvas: #0f1a1f;
  --surface: #16242b;
  --surface-2: #1c2e36;
  --border: #28404a;
  --border-strong: #3c5966;
  --ink: #eaf2f5;
  --muted: #9bb0b8;
  --accent: #5aa6c0;
  --accent-hover: #74b8cf;
  --accent-ink: #07222b;
  --accent-text: #7cc0d6;
  --accent-strong: #bfe3ee;
  --accent-soft: #1e3946;
  --accent-border: #3c6577;
  --success: #4c9a75;
  --success-ink: #06170f;
  --success-soft: #163326;
  --success-strong: #7ec6a4;
  --warning: #c98a44;
  --warning-ink: #1c1002;
  --warning-soft: #392712;
  --warning-strong: #e0ab73;
  --danger: #c96e61;
  --danger-ink: #1c0a07;
  --danger-soft: #3a1c17;
  --danger-strong: #e29184;
  --chart-1: #5aa6c0;
  --chart-2: #7cc0d6;
  --chart-3: #3c6577;
  --chart-4: #bfe3ee;
  --chart-5: #28404a;
  --chart-6: #9bb0b8;

  --font-display: "Bricolage Grotesque", 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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 1rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 18px 36px -26px color-mix(in srgb, #000000 55%, transparent),
    0 2px 10px -4px color-mix(in srgb, #000000 35%, transparent);
  --shadow-raised: 0 30px 60px -30px color-mix(in srgb, #000000 65%, transparent),
    0 6px 18px -6px color-mix(in srgb, #000000 40%, transparent);
  --shadow-btn: 0 12px 22px -12px color-mix(in srgb, #000000 55%, transparent);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 62ch;

  --x-ink-band-bg: #081217;
  --x-ink-band-bg-2: #050c0f;
  --x-ink-band-text: #f2f7f9;
  --x-ink-band-muted: #8ea7b0;
  --x-ink-band-accent: #8fd0e3;
  --x-mist: #1c2e36;
}

/*
 * app.css — Bloom Dental Studio's own styling. What no primitive covers:
 * the page ground, the collage hero, the full-screen drawer, the hairline
 * treatment list, the review strip, filled star ratings, the map sketch and
 * the always-dark closing band. No entrance motion — every rule here is
 * either layout or a hover/focus state.
 */

/* ---- Page ground: a soft powder-blue wash behind the hero ---- */
body {
  background-image: radial-gradient(60% 45% at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* ---- Hero collage: an asymmetric photo mosaic with the headline set
   into one cell. Two columns and fixed row heights on a phone so nothing
   depends on image load order; a wider bento grid from 640px up. ---- */
.collage {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 11rem 9rem 11rem;
  grid-template-areas:
    "text text"
    "photo1 photo1"
    "photo2 photo3"
    "photo4 photo4";
}
@media (min-width: 640px) {
  .collage {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 8rem);
    gap: 1.25rem;
    grid-template-areas:
      "text text text photo1 photo1 photo1"
      "text text text photo1 photo1 photo1"
      "photo2 photo2 photo3 photo3 photo4 photo4"
      "photo2 photo2 photo3 photo3 photo4 photo4";
  }
}
.collage-text { grid-area: text; display: flex; flex-direction: column; justify-content: center; }
.collage-photo1 { grid-area: photo1; }
.collage-photo2 { grid-area: photo2; }
.collage-photo3 { grid-area: photo3; }
.collage-photo4 { grid-area: photo4; }

/* ---- Full-screen drawer: the only nav surface, at every width. Beats
   .sheet's edge-pinned width because app.css is unlayered. ---- */
.drawer {
  inset: 0;
  left: auto;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: var(--surface-2);
  color: var(--ink);
  flex-direction: column;
}
/* A <dialog> with no [open] is display:none by the browser's own stylesheet;
   only set our layout once it is actually open, or that default never applies
   and the drawer's content sits visible in the page at all times. */
.drawer[open] { display: flex; }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.5rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.drawer-link {
  display: block;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 150ms var(--ease);
}
.drawer-link:last-child { border-bottom: none; }
.drawer-link:hover, .drawer-link:focus-visible { color: var(--accent-text); }
.drawer-call {
  margin: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
  transition: box-shadow 150ms var(--ease);
}
.drawer-call:hover { box-shadow: var(--shadow-raised); }

/* ---- Treatments: a hairline-divided price list, not a card grid. ---- */
.treatment-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.treatment-row:last-child { border-bottom: none; }
@media (min-width: 640px) {
  .treatment-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
}
.treatment-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-text);
  white-space: nowrap;
}

/* ---- Reviews: a horizontally swipeable strip, not a grid. ---- */
.review-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.review-strip::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 20rem; scroll-snap-align: start; }

.rating { display: flex; gap: 0.2rem; color: var(--accent); }
.rating-star { fill: currentColor; stroke: currentColor; }

/* ---- A sketched map, never a broken photograph. ---- */
.map-thumb { display: block; width: 100%; height: 100%; }
.map-ground { fill: var(--surface-2); }
.map-road { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.map-pin-ring { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.map-pin { fill: var(--accent); }
.map-pin-dot { fill: var(--surface); }

/* ---- Closing: the one section that is dark in both modes. ---- */
.ink-band { background: var(--x-ink-band-bg); color: var(--x-ink-band-text); }
.ink-band-muted { color: var(--x-ink-band-muted); }
.ink-band-accent { color: var(--x-ink-band-accent); text-decoration: none; font-size: 1.25rem; }
.ink-band-accent:hover, .ink-band-accent:focus-visible { text-decoration: underline; }