/* ============================================================================
   starter.css — MECHANICS-ONLY FLOOR (copy this to the TOP of the site's single
   styles.css, then design THIS client's identity below it).

   This file sets ONLY the invisible "won't-fall-down" layer: a spacing rhythm,
   a type-size ladder, a reset, keyboard focus, responsive plumbing, and the
   contrast PATTERN the analyzer cares about.

   It deliberately defines NO palette, NO typefaces, NO section layout, and NO
   decorative shapes. ALL of that is yours to invent per brand — asymmetric
   mastheads, sawtooth rooflines, angled bands, oversized type, motifs, dark
   dramatic mastheades: every structural and decorative choice is still wide open.
   Replace and extend freely. The only rule: keep this floor intact.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
/* ^ set body font-family and color in YOUR styles below, per brand. */
img, svg, video { max-width: 100%; height: auto; }

/* --- spacing rhythm on a 4px base. Use these (or your own 0.25rem-step values)
       so margins/padding line up instead of drifting. The analyzer counts LITERAL
       lengths, so literal 0.25rem multiples keep the spacing-scale check clean. --- */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;     --space-8: 4.5rem;
  --measure: 38rem;        /* comfortable max line length for body text */
  --section-pad: 4.5rem;   /* vertical breathing room per section */
}

/* --- type-size ladder: SIZES + line-heights only (choose your own typefaces).
       A small, consistent ladder = clean hierarchy. Adjust the steps to taste;
       keep them few and distinct (avoid 9+ sizes or near-duplicate pairs). Set
       sizes in literal rem so the analyzer can read the scale. --- */
h1 { font-size: 2.5rem;   line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: 1.75rem;  line-height: 1.15; margin: 0 0 0.75rem; }
h3 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 1000px) { h1 { font-size: 3rem; } }

/* --- keyboard focus on every interactive control (recolor to one of YOUR accents) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
a { text-underline-offset: 3px; }

/* --- fixed-header safe area: if the design uses a position:fixed/sticky header,
       in-page #anchors AND any full-bleed masthead must clear it. Reference
       var(--header-safe) as a masthead's padding-top so tall masthead content can never
       tuck UNDER the header (don't rely on bottom-alignment / flex-end alone —
       at short viewports tall content rises under the header). scroll-padding-top
       keeps anchored sections from hiding beneath the header. Tune the value to
       your actual header height. --- */
:root { --header-safe: clamp(5rem, 9vh, 7rem); }
html { scroll-padding-top: var(--header-safe); }

/* --- line-height floor: never let text clip or rows collide. Anything that can
       wrap or carries a styled subline (brand lockups, stacked headings) needs
       line-height >= ~1.0, and small print >= ~1.25. Reserve ultra-tight leading
       (< 1.0) for SINGLE-LINE display headings only, paired with white-space:nowrap
       so they can't wrap into themselves. --- */

/* --- THE CONTRAST PATTERN (the #1 thing the analyzer flags) ---
   It checks contrast PER CSS RULE with no cascade. So on ANY rule that places
   light text on a dark surface, RESTATE the dark background-color in that SAME
   rule. Pick your own colors — just co-declare them together, e.g.:
       .yourDarkBand h2 { color: #ffffff; background-color: #14202b; }
       .yourFooter a    { color: #e8c39a; background-color: #14202b; }
   (No active color rules live here on purpose — the palette is entirely yours.) */

/* --- responsive plumbing: keep at least one @media and collapse multi-column
       layouts to one column on small screens. Also put <meta name="viewport"
       content="width=device-width, initial-scale=1"> in every page's <head>. --- */
@media (max-width: 720px) {
  :root { --section-pad: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   END OF FLOOR. Everything below this line is yours: tokens for your palette,
   @font-face / font-family choices, section and masthead layouts, decorative shapes
   and motifs, components. Go make it unmistakably THIS business.
   ============================================================================ */

/* ============================================================================
   MEITZ FAMILY CHIROPRACTIC — design layer (warm holistic-wellness identity)
   Palette: cream canvas, pine green, terracotta clay, sage, honey.
   Type: Fraunces (display) + Libre Franklin (body).
   ============================================================================ */

:root{
  --cream:#f7f2e9; --cream-2:#efe6d4; --paper:#fbf8f1;
  --ink:#23271f; --ink-soft:#52584a;
  --pine:#2c4639; --pine-deep:#1f3329;
  --clay:#b85533; --clay-deep:#a8481f; --clay-text:#9c3f1f;
  --sage:#dfe6d8; --sage-line:#c2cfb6;
  --honey:#c9892f; --honey-text:#8a5a12; --honey-on-pine:#e6b85f;
  --rule:#e4dac4;
  --maxw:75rem; --measure-wide:44rem;
  --header-safe:5rem;
}

html{ color:var(--ink); background:var(--cream); scroll-behavior:smooth; }
body{
  font-family:'Libre Franklin', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:600; color:var(--pine); letter-spacing:-0.012em;
}
h2{ line-height:1.12; }
a{ color:var(--clay-text); }
a:hover{ color:var(--clay-deep); }
p{ color:var(--ink); }
strong{ font-weight:600; }
.lead{ font-size:1.2rem; line-height:1.6; color:var(--ink-soft); max-width:var(--measure-wide); }
.small{ font-size:0.9rem; }
.eyebrow{
  font-size:0.9rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--clay-text); margin:0 0 0.75rem;
}
img{ display:block; }

/* layout helpers */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }
.section{ padding-block:var(--section-pad); }
.narrow{ max-width:52rem; }
.measure p{ max-width:var(--measure-wide); }
.center-block{ margin-inline:auto; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; background-color:var(--pine); color:#ffffff; padding:0.5rem 1rem; z-index:100; }
.skip:focus{ left:0; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background-color:var(--paper); border-bottom:1px solid var(--rule);
}
.site-header .wrap{ display:flex; align-items:center; gap:1rem 1.75rem; min-height:4.5rem; }
/* brand can shrink (min-width:0); the wordmark SCALES to stay on one line (clamp) instead of
   wrapping into a tall stack. The nav collapses to a menu early (see media query) so the brand
   never gets a cramped narrow column. Only the smallest phones allow a 2-line wrap. */
.brand{ display:flex; align-items:center; gap:0.75rem; text-decoration:none; margin-right:auto; min-width:0; }
.brand img{ width:2.75rem; height:2.75rem; flex:none; }
.brand .lock{ min-width:0; }
.brand .lock b{
  display:block; font-family:'Fraunces', Georgia, serif; font-weight:600;
  font-size:clamp(0.98rem, 2.4vw, 1.2rem); line-height:1.12; color:var(--pine); white-space:nowrap;
}
.brand .lock span{ display:block; font-size:0.9rem; line-height:1.3; color:var(--ink-soft); }

.nav{ display:flex; align-items:center; gap:1.4rem; flex-shrink:0; }
.header-cta{ flex-shrink:0; }
.nav a{
  text-decoration:none; color:var(--ink); font-weight:500; font-size:1rem;
  padding-block:0.25rem; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--clay-deep); }
.header-cta{ display:flex; align-items:center; gap:0.75rem; }

/* active nav state via body class — keeps nav markup identical across pages */
body.p-home   .nav a[href="index.html"],
body.p-about  .nav a[href="about.html"],
body.p-svc    .nav a[href="services.html"],
body.p-new    .nav a[href="new-patients.html"],
body.p-rev    .nav a[href="reviews.html"],
body.p-contact .nav a[href="contact.html"]{
  color:var(--clay-deep); border-bottom-color:var(--clay);
}

/* nav toggle (mobile) */
.nav-toggle{ display:none; }
.nav-btn{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-weight:600; font-size:1rem; text-decoration:none; line-height:1.1;
  padding:0.7rem 1.2rem; border-radius:0.5rem; border:2px solid transparent;
  cursor:pointer;
}
.btn-appt{ color:#ffffff; background-color:var(--clay-deep); }
.btn-appt:hover{ color:#ffffff; background-color:#8f3c18; }
.btn-call{ color:var(--pine); background-color:var(--sage); border-color:var(--sage-line); }
.btn-call:hover{ color:var(--pine-deep); background-color:#d3ddc8; }
.btn-ghost{ color:var(--pine); background-color:transparent; border-color:var(--pine); }
.btn-ghost:hover{ color:#ffffff; background-color:var(--pine); }
.btn-lg{ padding:0.85rem 1.5rem; font-size:1.0625rem; }

/* ---------- masthead ---------- */
.masthead{ background-color:var(--pine); }
.masthead .wrap{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:2.5rem; align-items:center;
  padding-block:var(--space-8);
}
.masthead-copy .eyebrow{ color:var(--honey-on-pine); background-color:var(--pine); }
.masthead-copy h1{ color:#ffffff; background-color:var(--pine); font-size:3rem; margin-bottom:1rem; }
.masthead-copy p{ color:#eef2e8; background-color:var(--pine); }
.masthead-copy .lead{ color:#eef2e8; background-color:var(--pine); }
.masthead-actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; }
.masthead-art{ background:transparent; padding:0; }
.masthead-art img{ width:100%; height:auto; border-radius:1rem; box-shadow:0 18px 40px rgba(20,30,24,0.28); }

/* trust strip */
.trust{ background-color:var(--cream-2); border-bottom:1px solid var(--rule); }
.trust .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; padding-block:1.25rem; align-items:center; justify-content:space-between; }
.trust .wrap > div{ display:flex; align-items:baseline; gap:0.5rem; }
.trust b{ font-family:'Fraunces', Georgia, serif; font-size:1.375rem; color:var(--pine); }
.trust .t-label{ font-size:0.9rem; color:var(--ink-soft); }

/* ---------- section bands ---------- */
.band-sage{ background-color:var(--sage); }
.band-cream2{ background-color:var(--cream-2); }
.band-pine{ background-color:var(--pine); color:#eef2e8; }
.band-pine strong{ color:#ffffff; background-color:var(--pine); }
.band-pine .lined li{ color:#eef2e8; background-color:var(--pine); }
.band-pine .lined li strong{ color:#ffffff; background-color:var(--pine); }
.band-pine h2{ color:#ffffff; background-color:var(--pine); }
.band-pine h3{ color:#ffffff; background-color:var(--pine); }
.band-pine p{ color:#eef2e8; background-color:var(--pine); }
.band-pine .lead{ color:#eef2e8; background-color:var(--pine); }
.band-pine .eyebrow{ color:var(--honey-on-pine); background-color:var(--pine); }
.band-pine a:not(.btn){ color:var(--honey-on-pine); background-color:var(--pine); }

.section-head{ max-width:46rem; margin-bottom:2.5rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .lead{ margin-inline:auto; }

/* botanical divider */
.leaf-divider{
  height:48px;
  background-image:url("images/divider-band.png");
  background-repeat:repeat-x; background-position:center; background-size:auto 48px;
  background-color:var(--cream); opacity:0.92;
}
.leaf-divider.on-sage{ background-color:var(--sage); }

/* ---------- service hub grid (unclassed children to avoid card-tell) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem,1fr)); gap:1.25rem; }
.svc-grid > a{
  display:block; text-decoration:none; color:var(--ink);
  background-color:var(--paper); border:1px solid var(--rule); border-radius:0.85rem;
  padding:1.5rem 1.5rem 1.6rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-grid > a:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,30,24,0.12); border-color:var(--sage-line); }
.svc-grid > a h3{ margin-top:0.5rem; color:var(--pine); }
.svc-grid > a p{ color:var(--ink-soft); margin-bottom:0; font-size:0.9rem; }
.svc-mark{ width:2.4rem; height:2.4rem; }
.svc-more{ display:inline-block; margin-top:0.9rem; font-weight:600; color:var(--clay-text); font-size:0.9rem; }

/* ---------- split feature (image + text, alternating) ---------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.5rem; align-items:center; }
.split.flip{ grid-template-columns:1.1fr 0.9fr; }
.split .figure{ background-color:var(--cream-2); border-radius:1rem; padding:1.25rem; border:1px solid var(--rule); }
.split.flip .figure{ order:2; }
.split img{ width:100%; height:auto; border-radius:0.6rem; }

/* ---------- prose lists ---------- */
.lined{ list-style:none; padding:0; margin:0; max-width:var(--measure-wide); }
.lined li{ padding:0.75rem 0 0.75rem 1.75rem; border-bottom:1px solid var(--rule); position:relative; }
.lined li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:0.7rem; height:0.7rem; border-radius:0 60% 60% 60%;
  background-color:var(--clay); transform:rotate(45deg);
}
.band-pine .lined li{ border-bottom-color:rgba(255,255,255,0.16); }
.band-pine .lined li::before{ background-color:var(--honey-on-pine); }

/* two-column flowing list for long item sets */
.cols-2{ columns:2; column-gap:2.5rem; }
.cols-2 li{ break-inside:avoid; }

/* technique / info tiles via parent>child, unclassed */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; list-style:none; padding:0; margin:0; }
.tiles > li{
  background-color:var(--paper); border:1px solid var(--rule); border-radius:0.75rem;
  padding:1.1rem 1.25rem;
}
.tiles > li b{ display:block; color:var(--pine); font-family:'Fraunces',Georgia,serif; font-size:1.0625rem; margin-bottom:0.25rem; }
.tiles > li span{ font-size:0.9rem; color:var(--ink-soft); }

/* callout / promise box */
.promise{ background-color:var(--sage); border-left:6px solid var(--clay); border-radius:0.5rem; padding:1.75rem 2rem; }
.promise h3{ color:var(--pine); margin-top:0; }
.promise p{ margin-bottom:0; }

/* info row (hours / contact facts) */
.factgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.5rem 2.5rem; }
.factgrid > div h3{ font-size:1.0625rem; color:var(--clay-text); letter-spacing:0.02em; margin-bottom:0.4rem; }
.factgrid > div p{ margin-bottom:0.25rem; color:var(--ink); }

/* big rating block */
.rating{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.rating .score{ font-family:'Fraunces',Georgia,serif; font-size:3rem; line-height:1; color:var(--honey-on-pine); background-color:var(--pine); }
.stars{ color:var(--honey-on-pine); background-color:var(--pine); font-size:1.375rem; letter-spacing:0.1em; }

/* testimonial cards via parent>child unclassed */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.25rem; list-style:none; padding:0; margin:0; }
.quotes > li{ background-color:var(--paper); border:1px solid var(--rule); border-radius:0.85rem; padding:1.5rem 1.6rem; }
.quotes > li p{ font-size:1.0625rem; }
.quotes > li cite{ display:block; margin-top:0.75rem; font-style:normal; font-weight:600; color:var(--clay-text); font-size:0.9rem; }

/* page masthead (interior pages) */
.page-head{ background-color:var(--pine); }
.page-head .wrap{ padding-block:var(--space-7); }
.page-head .eyebrow{ color:var(--honey-on-pine); background-color:var(--pine); }
.page-head h1{ color:#ffffff; background-color:var(--pine); margin-bottom:0.75rem; }
.page-head p{ color:#eef2e8; background-color:var(--pine); max-width:46rem; }
.crumbs{ font-size:0.9rem; color:#cdd8c3; background-color:var(--pine); margin-bottom:1rem; }
.crumbs a{ color:#cdd8c3; background-color:var(--pine); text-decoration:none; }
.crumbs a:hover{ color:#ffffff; background-color:var(--pine); }

/* spot figure on detail pages */
.spot{ background-color:var(--cream-2); border:1px solid var(--rule); border-radius:1rem; padding:1.25rem; }
.spot img{ width:100%; height:auto; border-radius:0.6rem; }

/* insurance pills */
.pills{ display:flex; flex-wrap:wrap; gap:0.6rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.pills > li{ background-color:var(--paper); border:1px solid var(--sage-line); border-radius:999px; padding:0.5rem 1rem; font-size:0.9rem; color:var(--pine); font-weight:500; }

/* demo form */
.demo-form{ background-color:var(--paper); border:1px solid var(--rule); border-radius:1rem; padding:2rem; }
.demo-form label{ display:block; font-weight:600; color:var(--pine); margin-bottom:0.4rem; font-size:0.9rem; }
.demo-form .field{ margin-bottom:1.25rem; }
.demo-form input, .demo-form select, .demo-form textarea{
  width:100%; padding:0.7rem 0.85rem; border:1px solid var(--sage-line); border-radius:0.5rem;
  font:inherit; color:var(--ink); background-color:#ffffff;
}
.demo-form .note{ font-size:0.9rem; color:var(--ink-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

/* steps (new patients) */
.steps{ list-style:none; counter-reset:step; padding:0; margin:0; max-width:var(--measure-wide); }
.steps > li{ position:relative; padding:0 0 1.5rem 3.25rem; }
.steps > li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:2.25rem; height:2.25rem;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--pine); color:#ffffff; border-radius:50%;
  font-family:'Fraunces',Georgia,serif; font-weight:600;
}
.steps > li:not(:last-child)::after{
  content:""; position:absolute; left:1.07rem; top:2.4rem; bottom:0.25rem; width:2px; background-color:var(--sage-line);
}
.steps > li h3{ margin-top:0.25rem; }

/* ---------- footer ---------- */
.site-footer{ background-color:var(--pine-deep); }
.site-footer .wrap{ padding-block:var(--space-7); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.site-footer h2{ font-family:'Fraunces',Georgia,serif; font-size:1.0625rem; line-height:1.2; color:#ffffff; background-color:var(--pine-deep); margin:0 0 0.85rem; }
.site-footer p{ color:#d7e0d2; background-color:var(--pine-deep); font-size:0.9rem; line-height:1.6; }
.site-footer a{ color:#d7e0d2; background-color:var(--pine-deep); text-decoration:none; font-size:0.9rem; }
.site-footer a:hover{ color:var(--honey-on-pine); background-color:var(--pine-deep); }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:0.5rem; }
.footer-brand{ display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.footer-brand img{ width:2.75rem; height:2.75rem; background-color:var(--cream); border-radius:50%; padding:0.3rem; }
.footer-brand b{ font-family:'Fraunces',Georgia,serif; color:#ffffff; background-color:var(--pine-deep); font-size:1.2rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); margin-top:2.5rem; padding-top:1.5rem; }
.footer-bottom p{ color:#b9c4b2; background-color:var(--pine-deep); font-size:0.9rem; margin:0; }

/* ---------- mobile sticky action bar ---------- */
.mobilebar{ display:none; }

/* The phone-number button is removed from the header at ALL sizes (the number lives in the hero,
   footer, and mobile bar). This keeps the top row short enough that the wordmark stays one line. */
.header-cta .btn-call{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .masthead .wrap{ grid-template-columns:1fr; gap:1.75rem; }
  .masthead-art{ order:-1; }
  .split, .split.flip{ grid-template-columns:1fr; gap:1.5rem; }
  .split.flip .figure{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* Collapse the horizontal nav to a menu WELL BEFORE the long wordmark + six links + CTA could
   crowd the row. Below this width the brand has the full row, so the title never wraps tall. */
@media (max-width:1360px){
  .nav-btn{
    display:inline-flex; align-items:center; gap:0.5rem; background-color:var(--sage);
    color:var(--pine); border:1px solid var(--sage-line); border-radius:0.5rem;
    padding:0.55rem 0.85rem; font-weight:600; font-size:0.9rem; cursor:pointer;
  }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0; z-index:40;
    background-color:var(--paper); border-bottom:1px solid var(--rule); padding:0.5rem 1.5rem 1rem;
  }
  .nav a{ width:100%; padding:0.75rem 0; border-bottom:1px solid var(--rule); }
  .nav-toggle:checked ~ .nav{ display:flex; }
  .site-header .wrap{ position:relative; }
}

/* Drop the subline once the lockup is compact, so the header stays a tidy single line. */
@media (max-width:900px){ .brand .lock span{ display:none; } }

/* Phone / tablet: single-column content + a sticky bottom action bar. */
@media (max-width:1024px){
  .cols-2{ columns:1; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .mobilebar{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    box-shadow:0 -6px 20px rgba(20,30,24,0.18);
  }
  .mobilebar a{ display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.9rem 0.5rem; font-weight:600; text-decoration:none; font-size:1rem; }
  .mobilebar a.m-call{ color:#ffffff; background-color:var(--pine); }
  .mobilebar a.m-appt{ color:#ffffff; background-color:var(--clay-deep); }
  body{ padding-bottom:3.5rem; }
}

/* Smallest screens: the bottom bar carries booking, so drop the header Request button and let the
   wordmark wrap to at most two lines (still short, no subline). */
@media (max-width:620px){
  .header-cta .btn-appt{ display:none; }
  .brand .lock b{ white-space:normal; }
}
@media (max-width:480px){
  .masthead-copy h1{ font-size:2.5rem; }
  .trust .wrap{ gap:0.75rem 1.5rem; }
}