/* =====================================================================
   Wellington Periodontal Associates -- brand color + type overrides
   ---------------------------------------------------------------------
   Loaded LAST on every page (after common.css and the page's own CSS).
   Each page CSS re-declares :root and hard-codes #080808, so this file
   overrides those rules with the same selectors.

   Colors are taken from the logo SVG (navy #00356F, gold #D0AA5E).
   CONTRAST: logo gold on white is only 2.2:1, so it fails for text.
   Gold is used only on navy backgrounds or for decorative lines, dots
   and icons. Gold TEXT on white uses --gold-text (#8A6A2B, 5.0:1).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --navy:        #00356F;   /* logo navy: primary              */
  --navy-deep:   #001F45;   /* replaces black bands            */
  --navy-hover:  #002A58;
  --gold:        #D0AA5E;   /* logo gold: accents on navy      */
  --champagne:   #E4C989;   /* highlights on navy              */
  --gold-text:   #8A6A2B;   /* gold TEXT on light backgrounds  */
  --ivory:       #FAF6EE;   /* replaces cool gray sections     */
  --ivory-mid:   #F3ECDD;

  /* existing token names, remapped */
  --ink:          #0F1E33;
  --primary:      #00356F;
  --primary-d:    #002A58;
  --primary-soft: #EEF3F9;
  --primary-ring: rgba(0,53,111,.18);
  --canvas-soft:  #FAF6EE;
  --canvas-mid:   #F3ECDD;
  --hairline:     #E8E1D3;
  --accent:       #D0AA5E;  /* replaces 7 different per-service accents */
  --accent-soft:  #FAF6EE;
  --blue:         #00356F;
  --yellow:       #D0AA5E;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

body { color: #1F2937; }

/* ---------- 2. Buttons ---------- */
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(0,31,69,.25); }
.btn-primary:hover { background: var(--navy-hover); box-shadow: 0 4px 12px rgba(0,31,69,.30); }
/* buttons sitting on navy bands become gold */
.btn-on-dark { background: var(--gold); color: var(--navy-deep); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.btn-on-dark:hover { background: var(--champagne); color: var(--navy-deep); }
.btn-secondary, .btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-secondary:hover, .btn-outline:hover { background: var(--primary-soft); }

/* ---------- 3. Dark bands: black -> deep navy, with thin gold rule ---------- */
#trust, .cta-band-section, .svc-hero, .page-hero, .page-header,
.stats-section, .doctor-hero, .legal-header {
  background: var(--navy-deep);
}
#trust, .cta-band-section, .stats-section { border-top: 3px solid var(--gold); }
.aside-highlight, .legal-contact-block, .t-card.featured { background: var(--navy); }
.trust-value, .stat-value { color: var(--champagne); }
.trust-label { color: rgba(255,255,255,.72); }
/* eyebrows on dark heroes: gold instead of faded white / rainbow accent */
.svc-hero .hero-eyebrow, .page-hero .hero-eyebrow, .page-header .hero-eyebrow,
.doctor-hero .hero-eyebrow, .hero-eyebrow { color: var(--gold); }
.hero-eyebrow-dot { background: var(--gold); }

/* ---------- 4. Icon tiles, numbers, checks: black -> navy w/ gold glyph ---------- */
.step-num, .approach-num, .timeline-dot, .candidate-check, .trust-check,
.benefit-icon, .related-icon, .pillar-icon, .specialty-icon, .expect-tag {
  background: var(--navy);
}
.step-num, .approach-num { color: var(--champagne); }
details.faq-item[open] .faq-icon { background: var(--navy); border-color: var(--navy); }

/* ---------- 5. Eyebrows + accents on white ---------- */
.eyebrow, .modal-eyebrow, .section-eyebrow, .intro-eyebrow { color: var(--gold-text); }
.eyebrow::before {  /* small gold dash before every eyebrow */
  content: ''; display: inline-block; width: 22px; height: 2px;
  background: var(--gold); vertical-align: middle; margin-right: 10px;
}
.hero-h1 .accent { color: var(--gold-text); font-style: italic; }
/* "body" prefix needed: inner pages define these in an inline <style> inside <body> */
body .chip-star, body .testimonial-star, body .t-star, body .platform-star { color: var(--gold); } /* orange/yellow stars -> gold */
body .t-dot.active { background: var(--gold); }
body .t-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--primary-soft); }
body #testimonials { background: var(--ivory); border-top-color: var(--hairline); }
.pillar-num { color: var(--gold-text); }

/* ---------- 6. Service cards (homepage) ---------- */
/* Same navy as now, but given depth + gold detail so 5 cards don't read as one flat block */
.svc-card { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); border-top: 3px solid var(--gold); }
.svc-card.featured { background: linear-gradient(160deg, var(--navy-deep) 0%, #00152F 100%); }
.svc-card:hover { box-shadow: 0 10px 30px rgba(0,31,69,.35); }
.svc-icon-wrap { background: rgba(208,170,94,.14); border-color: rgba(208,170,94,.45); }
.svc-icon-wrap svg { stroke: var(--champagne); }
.svc-arrow { color: var(--gold); }

/* ---------- 7. Light sections: cool gray -> warm ivory ---------- */
#services { background: var(--ivory); }
.hero-stats, .doctor-row, .doctor-row:last-child { border-color: var(--hairline); }
.photo-slot, .photo-slot-map, .intro-photo, .doctor-card-photo {
  background: linear-gradient(145deg, var(--ivory) 0%, var(--ivory-mid) 100%);
  border-color: #D9CBAE;
}

/* ---------- 8. Typography: serif headlines, Inter stays for body/UI ---------- */
h1, h2, .hero-h1, .section-h, .doc-name, .modal-title {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.2px;
}
.hero-h1 { line-height: 1.04; }
.section-h { line-height: 1.1; }
/* Cormorant runs small: bump the main sizes ~12% */
.section-h { font-size: clamp(34px, 4vw, 50px); }
.doc-name { font-size: 38px; }

/* ---------- 9. Nav + footer ---------- */
.nav-link:hover, .nav-link.active, .nav-phone:hover, .footer-phone:hover { color: var(--navy); }
.nav-link.active { box-shadow: inset 0 -2px 0 var(--gold); }
footer { border-top: 3px solid var(--gold); background: var(--ivory); }
.footer-bottom { border-top-color: var(--hairline); }

/* OPTIONAL -- navy footer. Only enable once the practice sends a
   white/gold (reversed) version of the logo, otherwise the navy logo
   disappears on the navy background.

footer { background: var(--navy-deep); color: rgba(255,255,255,.75); }
footer a, .footer-phone, .footer-address, .footer-link { color: rgba(255,255,255,.82); }
footer a:hover { color: var(--champagne); }
.footer-bottom { border-top-color: rgba(255,255,255,.12); }
*/

/* ---------- 10. Form focus ---------- */
.field-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--primary-ring); }
.reason-chip.active { border-color: var(--navy); background: var(--primary-soft); color: var(--navy); }

/* ---------- 11. Sitemap, survey, thank-you (same rules, page-specific selectors) ---------- */
.sitemap-cta-section, .survey-header, .progress-wrap, .phone-strip { background: var(--navy-deep); }
.sitemap-cta-section { border-top: 3px solid var(--gold); }
.sitemap-card-icon, .step-icon, .ty-step-num { background: var(--navy); }
.btn-next { background: var(--navy); }
.btn-next:hover { background: var(--navy-hover); }
.btn-next:disabled { background: #9ca3af; }
.option-card input:checked + .option-label { border-color: var(--navy); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-ring); }
.option-card input:checked + .option-label .option-text { color: var(--navy); }
.consent-block input[type="checkbox"] { accent-color: var(--navy); }