/*
 * theme.css — Bloomfield Physio's design-system values.
 * Warm-craft: cream canvas, clay ink, sage-green action, terracotta links.
 */

:root {
  --canvas: #f6f1ea;
  --surface: #fbf9f6;
  --surface-2: #efe4d3;
  --border: #e2d5c1;
  --border-strong: #cbb797;
  --ink: #2b2420;
  --muted: #696460;
  --accent: #4f6f52;
  --accent-hover: #435f46;
  --accent-ink: #fbf9f6;
  --accent-text: #945539;
  --accent-strong: #375a3a;
  --accent-soft: #e3ead9;
  --accent-border: #bdd0ba;
  --success: #3f7d43;
  --success-ink: #fbf9f6;
  --success-soft: #e2ecdd;
  --success-strong: #2c5c2f;
  --warning: #a8681c;
  --warning-ink: #fbf9f6;
  --warning-soft: #f2e2c9;
  --warning-strong: #7d4c12;
  --danger: #9a3a2b;
  --danger-ink: #fbf9f6;
  --danger-soft: #f2ddd5;
  --danger-strong: #7a2c20;
  --chart-1: #4f6f52;
  --chart-2: #945539;
  --chart-3: #a8681c;
  --chart-4: #6f8f72;
  --chart-5: #6f3f2a;
  --chart-6: #b0895a;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.05em;

  --radius-btn: 10px;
  --radius-card: 18px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 65ch;
  --shadow-card: 0 20px 40px -30px color-mix(in srgb, var(--ink) 45%, transparent), 0 2px 10px -4px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-raised: 0 28px 56px -24px color-mix(in srgb, var(--ink) 50%, transparent);
  --shadow-btn: 0 12px 22px -14px color-mix(in srgb, var(--accent) 60%, transparent);
  --gradient-hero: linear-gradient(180deg, color-mix(in srgb, var(--ink) 10%, transparent) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 55%, color-mix(in srgb, var(--ink) 82%, transparent) 100%);

  /* App-owned tokens (--x-): the statement band and the closing clay band. */
  --x-ink-band: #241c16;
  --x-ink-band-ink: #f6efe3;
  --x-ink-band-muted: #cbb9a3;
  --x-clay-band: #e6c6a8;
  --x-clay-band-ink: #2b2420;
  --x-clay-band-muted: #5b4736;
}

html[data-theme="dark"] {
  --canvas: #201a15;
  --surface: #2a231d;
  --surface-2: #342a21;
  --border: #40342a;
  --border-strong: #5c4c3c;
  --ink: #f3ece1;
  --muted: #b7a894;
  --accent: #6f9c73;
  --accent-hover: #7fae82;
  --accent-ink: #17231a;
  --accent-text: #dd9a72;
  --accent-strong: #a3cfa5;
  --accent-soft: #2b3a2c;
  --accent-border: #43583f;
  --success: #6fae74;
  --success-ink: #15231a;
  --success-soft: #223223;
  --success-strong: #a1d6a4;
  --warning: #d99a4e;
  --warning-ink: #241a0d;
  --warning-soft: #3a2b16;
  --warning-strong: #f0bd80;
  --danger: #d9836f;
  --danger-ink: #241210;
  --danger-soft: #3c221d;
  --danger-strong: #f0aa98;
  --chart-1: #7fae82;
  --chart-2: #dd9a72;
  --chart-3: #d99a4e;
  --chart-4: #96b998;
  --chart-5: #b07a58;
  --chart-6: #cba97e;

  --shadow-card: 0 20px 44px -28px rgba(0, 0, 0, 0.6), 0 2px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  --shadow-btn: 0 12px 22px -14px color-mix(in srgb, var(--accent) 55%, transparent);
  --gradient-hero: linear-gradient(180deg, color-mix(in srgb, black 20%, transparent) 0%, color-mix(in srgb, black 40%, transparent) 55%, color-mix(in srgb, black 88%, transparent) 100%);

  --x-ink-band: #161210;
  --x-ink-band-ink: #f3ece1;
  --x-ink-band-muted: #b7a894;
  --x-clay-band: #4a3626;
  --x-clay-band-ink: #f3ece1;
  --x-clay-band-muted: #cbb9a3;
}

/*
 * app.css — Bloomfield Physio's own stylesheet. Compiled last, unlayered.
 * Everything here is built from theme.css tokens; no primitive selector is
 * redeclared here (see tailwind/components.css for those).
 */

html:not(.reduced-motion) {
  scroll-behavior: smooth;
}

body {
  background: var(--canvas);
}

/* So an anchor jump doesn't tuck the heading behind the fixed bar. */
main [id] { scroll-margin-top: 5.5rem; }

/* ---- The hero-overlay bar: transparent over the photo, solid once past it. */
.site-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  color: var(--x-ink-band-ink);
  background: var(--x-ink-band);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, color 320ms ease;
}
.site-bar.is-solid {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}
.site-bar .brand { color: inherit; }
.site-bar .brand:hover { text-decoration: none; }
.site-bar .nav-link { color: inherit; opacity: 0.88; }
.site-bar .nav-link:hover { opacity: 1; text-decoration: none; }
.site-bar .icon-btn {
  color: inherit;
  background: transparent;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.site-bar .icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.site-bar.is-solid .icon-btn { border-color: var(--border); }
.site-bar.is-solid .icon-btn:hover { background: var(--surface-2); }

/* A bordered call-to-action that inherits the hero's own text colour. */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--radius-btn, var(--radius-lg));
  font-weight: var(--btn-weight, 600);
  transition: background-color 150ms ease;
}
.btn-hero:hover { background: color-mix(in srgb, currentColor 20%, transparent); text-decoration: none; }

/* ---- Hero: full-bleed photo, gradient for legibility, one settle-in entrance. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}
.hero-content {
  position: relative;
  z-index: 1;
  color: var(--x-ink-band-ink);
  background-color: var(--x-ink-band);
}
.hero-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--x-ink-band));
  pointer-events: none;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero-enter { animation: hero-rise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-enter-1 { animation-delay: 60ms; }
.hero-enter-2 { animation-delay: 180ms; }
.hero-enter-3 { animation-delay: 300ms; }
html.reduced-motion .hero-enter { animation: none; }

/* ---- Rate list (conditions & prices) ------------------------------------- */
.rate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; }
.rate-row + .rate-row { border-top: 1px solid var(--border); }
.rate-row-tight { padding: 0.75rem 0; }
.rate-price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; color: var(--accent-text); }

/* ---- Visit steps: a single hairline connecting four numbered steps ------- */
.visit-steps { display: flex; flex-direction: column; }
.visit-step { position: relative; display: flex; gap: 1rem; padding-block: 0.5rem; }
.visit-step + .visit-step { margin-top: 0.5rem; }
.visit-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.visit-step-rail { position: absolute; left: 1.375rem; top: 2.75rem; bottom: -0.5rem; width: 1px; background: var(--border-strong); }
.visit-step:last-child .visit-step-rail { display: none; }
@media (min-width: 768px) {
  .visit-steps { flex-direction: row; }
  .visit-step { flex-direction: column; text-align: center; align-items: center; flex: 1; padding-inline: 1rem; }
  .visit-step-rail { left: 2.75rem; right: -0.5rem; top: 1.375rem; bottom: auto; width: auto; height: 1px; }
  .visit-step:last-child .visit-step-rail { display: none; }
}

/* ---- Reviews: dark ink-brown statement band, filled stars ---------------- */
.ink-band { background: var(--x-ink-band); color: var(--x-ink-band-ink); }
.ink-band .text-muted-band { color: var(--x-ink-band-muted); }
.rating { display: flex; gap: 0.2rem; }
.rating .icon { color: var(--x-ink-band-ink); fill: currentColor; stroke: none; width: 1rem; height: 1rem; }
.review-quote { border-top: 1px solid color-mix(in srgb, var(--x-ink-band-ink) 22%, transparent); padding-top: 1.5rem; }
@media (min-width: 768px) {
  .review-col + .review-col { border-left: 1px solid color-mix(in srgb, var(--x-ink-band-ink) 22%, transparent); padding-left: 2.5rem; }
}

/* ---- Clay closing band ---------------------------------------------------- */
.clay-band { background: var(--x-clay-band); color: var(--x-clay-band-ink); }
.clay-band .text-muted-clay { color: var(--x-clay-band-muted); }

/* ---- Small helpers ---------------------------------------------------------- */
.section-pad { padding-block: 5rem; }
@media (min-width: 768px) { .section-pad { padding-block: 7.5rem; } }