/*
Theme Name: ChiroCare 360
Author: Web Warfare
Description: ChiroCare 360 -- design by Kent, ported to WordPress. Page content
  lives in WordPress pages; only the shell (header, nav, footer) is in the theme.
  Icons are Lucide, rendered client-side from data-lucide attributes.
Version: 2.0
*/

/* ==========================================================================
   ChiroCare 360 — Design System
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f4ee;
  --color-bg-tint: #eef2ee;
  --color-dark: #182620;
  --color-dark-2: #101a15;
  --color-primary: #2f5d4f;
  --color-primary-dark: #234a3f;
  --color-primary-light: #e6eee9;
  --color-accent: #4d84a3;
  --color-accent-dark: #3c6c87;
  --color-accent-light: #e6eef2;
  --color-accent-soft: #a9cbdb;
  --color-text: #26302b;
  --color-text-muted: #5c6862;
  --color-border: #e2e0d6;
  --color-white: #ffffff;

  /* Type system, chosen for what this brand actually claims:
     Fraunces carries warmth (this is still a room where someone is in pain) at display sizes.
     Public Sans reads as plain, institutional, nothing-to-hide — matches the "honest assessment" promise.
     IBM Plex Mono is reserved for anything measured: labels, stats, spinal levels, phone numbers —
     a typographic echo of "objective testing" and "measurable outcomes." */
  --font-serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 30, 25, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 30, 25, 0.14);

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  margin: 0 0 .5em;
  color: var(--color-dark);
}
p { margin: 0 0 1em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.eyebrow.on-dark { color: #a9c9ba; }

.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-tint { background: var(--color-bg-tint); }
.section-dark { background: var(--color-dark); color: #dfe6e1; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-white); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--color-text-muted); font-size: 17px; }

h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; letter-spacing: -.015em; font-weight: 600; }
h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.18; letter-spacing: -.01em; }
h3 { font-size: 20px; line-height: 1.32; font-weight: 600; }
.lede { font-size: 18px; color: var(--color-text-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow-md); background: var(--color-accent-dark); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-dark); }
.btn-outline:hover { background: var(--color-dark); color: #fff; }
.btn-on-dark { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--color-dark); }
.btn-white { background: #fff; color: var(--color-primary-dark); }
.btn-white:hover { background: var(--color-accent-light); }
.btn-block { width: 100%; justify-content: center; }
.btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--color-dark); }
.brand .mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(from 210deg, #8fbf9f, #2f5d4f 40%, #4d86a6 75%, #8fbf9f);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: inset 0 0 0 3px #fff;
}
.brand .mark svg { width: 18px; height: 18px; stroke: #fff; }
.brand small { display:block; font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: .08em; color: var(--color-accent); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--color-text); position: relative; padding: 6px 0; }
.nav-links a.active, .nav-links a:hover { color: var(--color-primary); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-accent);
}
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-phone { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--color-dark); }
.nav-phone svg { width: 16px; height: 16px; stroke: var(--color-primary); }
.nav-toggle { display: none; background: none; border: none; padding: 6px; }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 940px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--color-border);
    box-shadow: 0 16px 28px rgba(20, 30, 25, .1);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 24px; max-height: 0; opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav-links.open { max-height: 420px; opacity: 1; padding: 8px 24px 16px; }
  .nav-links a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
  .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta-desktop { display: none; }
}

/* Mobile sticky action bar */
.mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-border); box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.mobile-cta-bar a { background: var(--color-primary); color: #fff; text-align: center; padding: 15px 10px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mobile-cta-bar a.call { background: var(--color-dark); }
.mobile-cta-bar svg { width: 17px; height: 17px; }
@media (max-width: 940px) {
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: 58px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: radial-gradient(120% 140% at 15% 0%, #386c5c 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 76px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { color: #fff; }
.hero .lede { color: #cfe0d6; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #d9e6de; }
.hero-badge svg { width: 20px; height: 20px; stroke: var(--color-accent-soft); flex-shrink: 0; }
.hero-badge strong { display: block; font-family: var(--font-mono); color: #fff; font-size: 14.5px; font-weight: 600; }

.hero-portrait {
  text-align: center;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.hero-portrait .photo {
  width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; margin: 0 auto 20px;
  background: linear-gradient(160deg,#cfe0d6,#8fb39f); display:flex; align-items:center; justify-content:center;
  border: 4px solid rgba(255,255,255,.35); box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.hero-portrait .photo svg { width: 46%; height: 46%; stroke: #fff; opacity: .85; }
.hero-portrait .name { font-family: var(--font-serif); font-size: 19px; color: #fff; margin-bottom: 4px; }
.hero-portrait .role { font-size: 13px; color: #bcd3c4; margin-bottom: 14px; }
.hero-rating { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; }
.hero-rating svg { width: 13px; height: 13px; fill: var(--color-accent-soft); stroke: var(--color-accent-soft); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Icon cards / grids
   ========================================================================== */
.icon-badge {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); margin-bottom: 18px; flex-shrink: 0;
}
.icon-badge svg { width: 24px; height: 24px; stroke: var(--color-primary); }
.icon-badge.gold { background: var(--color-accent-light); }
.icon-badge.gold svg { stroke: var(--color-accent); }

.grid { display: grid; gap: 22px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-white); border-radius: var(--radius-md); padding: 30px 26px;
  border: 1px solid var(--color-border);
}
.card-flat { background: transparent; border: none; padding: 0; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--color-text-muted); font-size: 15px; margin-bottom: 0; }
.card .tag { display:inline-block; font-family: var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; margin-bottom:12px; }
.tag-soon { background:#fbeed2; color:#8a5f10; }
.tag-live { background: var(--color-primary-light); color: var(--color-primary-dark); }
.card .learn { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:600; font-size:14px; color: var(--color-primary); }
.card .learn svg { width:14px; height:14px; }

/* Process steps */
.process-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.process-row::before {
  content: ""; position: absolute; top: 17px; left: 10%; right: 10%; height: 1px; background: var(--color-border); z-index: 0;
}
.process-step { position: relative; text-align: center; padding: 0 8px; }
.process-num {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--color-primary);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; margin: 0 auto 16px; box-shadow: 0 0 0 6px var(--color-bg-alt);
}
@media (max-width: 860px) {
  .process-row { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .process-row::before { display: none; }
}
@media (max-width: 520px) { .process-row { grid-template-columns: 1fr; } }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
}
.stat-box .num { font-family: var(--font-mono); font-size: 28px; color: var(--color-primary); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.stat-box .label { font-size: 13px; color: var(--color-text-muted); line-height: 1.35; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

/* Featured case */
.case-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.case-list li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 15.5px; }
.case-list svg { width: 19px; height: 19px; stroke: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; }
.testi-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.testi-stars svg { width: 15px; height: 15px; fill: var(--color-accent); stroke: var(--color-accent); }
.testi-card blockquote { margin: 0 0 18px; font-size: 15px; color: var(--color-text); font-style: italic; flex-grow: 1; }
.testi-who { font-weight: 700; font-size: 14.5px; }
.testi-who span { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }

/* Google rating strip */
.trust-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text-muted); }
.trust-item strong { color: var(--color-dark); font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.trust-item svg { width: 20px; height: 20px; stroke: var(--color-primary); }

/* Placeholder note (clearly marked, non-shipping content) */
.placeholder-note {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: #8a5f10; background: #fbeed2; border: 1px dashed #d8ab52; border-radius: 8px; padding: 6px 10px; margin-top: 10px;
}

/* CTA banner */
.cta-banner { background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); color: #fff; text-align: center; padding: 76px 0; border-radius: var(--radius-lg); }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #cfe0d6; max-width: 560px; margin: 0 auto 30px; }
.cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Page hero (interior pages) */
.page-hero { padding: 64px 0 48px; text-align: center; }
.page-hero .section-head { margin: 0 auto; }

/* Footer */
.site-footer { background: var(--color-dark); color: #b9c4bd; padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 19px; color: #fff; margin-bottom: 14px; }
.footer-brand .mark { width: 34px; height: 34px; }
.footer-col h4 { color: #fff; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col li { margin-bottom: 11px; font-size: 14.5px; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact a[href^="tel"] { font-family: var(--font-mono); font-size: 14px; }
.footer-contact svg { width: 17px; height: 17px; stroke: #8fb39f; flex-shrink: 0; margin-top: 2px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.footer-social svg { width: 15px; height: 15px; stroke: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font-size: 13px; flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: #8fb39f; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Utility */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Accident notice */
.notice { display: flex; gap: 18px; background: var(--color-primary-light); border: 1px solid #cfe0d6; border-radius: var(--radius-md); padding: 26px; align-items: flex-start; }
.notice .icon-badge { margin-bottom: 0; background: #fff; }
.notice h3 { margin-bottom: 8px; }
.notice p { color: var(--color-text); }

/* Simple two-col content */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.pill-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.pill-list svg { width: 18px; height: 18px; stroke: var(--color-primary); flex-shrink: 0; }
.pill-list.cross svg { stroke: #b34747; }

/* Form */
.form-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 34px; box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border);
  font-family: inherit; font-size: 14.5px; background: var(--color-bg-alt);
}
.field textarea { min-height: 100px; resize: vertical; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }


/* =========================================================
   Page-scoped CSS lifted out of Kent's individual HTML files.
   ========================================================= */

/* --- from book.html --- */
.form-status { display:none; margin-top:14px; font-size:13.5px; background:var(--color-primary-light); border:1px solid #cfe0d6; border-radius:8px; padding:12px 14px; color:var(--color-primary-dark); }

/* --- from resources.html --- */
.article-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.article-row:last-child { border-bottom: none; }
.article-row h3 { font-size: 16.5px; margin-bottom: 6px; }
.article-row p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.article-row .ext { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.article-row .ext svg { width: 14px; height: 14px; stroke: var(--color-primary); }

/* --- from results.html --- */
.case-study { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.case-study-head { padding: 22px 28px; background: var(--color-primary-light); }
.case-study-body { padding: 26px 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.case-field .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.case-field .v code { font-family: var(--font-mono); font-size: 13.5px; background: var(--color-bg-alt); padding: 1px 5px; border-radius: 4px; }
.case-field .v { font-size: 14.5px; color: var(--color-text); }
@media (max-width: 860px) { .case-study-body { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .case-study-body { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   The header phone number is a link that did not look like one.

   `.nav-phone` is already `<a href="tel:...">`, but rendered as plain dark text
   it read as a caption sitting beside the real button. Giving it Kent's pill
   shape and his `--color-primary` green turns it into an obvious second action
   without competing with the blue Book Appointment CTA -- outline against
   filled, green against blue, and the phone icon was already this green.

   Desktop only in effect: Kent hides `.nav-phone` below 940px, where the
   sticky `.mobile-cta-bar` carries Call and Book instead.
--------------------------------------------------------------------------- */
.nav-phone {
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--color-primary);
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.nav-phone:hover { background: var(--color-primary); color: #fff; }
.nav-phone:hover svg { stroke: #fff; }

/* ---------------------------------------------------------------------------
   Long CTA buttons must wrap on a phone.

   `.btn` is `white-space: nowrap`, which is correct on desktop and wrong at
   390px. The PIP notice on /book/ carries "Call 305-727-0360 for same-day
   evaluation" as a .btn, and a button that cannot wrap cannot shrink: its
   min-content width propagated up through the grid item and pushed the page to
   515px inside a 390px viewport, so the whole booking page scrolled sideways
   on a phone. Predates the Elementor conversion -- the baseline measured the
   same overflow -- and it is on the one page where a fumbled tap costs a
   patient.

   Scoped to the breakpoint so nothing changes on desktop, where nowrap is
   what keeps short buttons from breaking mid-label.
--------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .btn { white-space: normal; }

  /* `.notice` is a flex ROW: a 52px icon badge, then the text. At 390 that
     leaves the text column about 164px wide, so the call-to-action inside it
     wrapped to two lines and rendered 160x78 -- a squat, cramped button on the
     one control that matters most to a patient who has just been in a car
     accident. Stacking the badge above the text gives the button the full
     column and puts it back on one line.

     Written here, in Kent's stylesheet, rather than in the Elementor compat
     sheet on purpose: nativize.py lifts any rule whose final compound lands on
     a converted container, so this is re-emitted automatically as
     `div.e-con.notice` AFTER the flex-direction neutraliser, at a specificity
     that beats it. Putting it straight into the compat sheet by hand would
     have been outranked. */
  .notice { flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------------------
   WordPress menu compatibility -- appended, Kent's CSS above is untouched.

   wp_nav_menu wraps every item in <li class="menu-item">, so the nav rendered
   as a BULLETED LIST inside his flex bar: his rules target bare `.nav-links a`
   and the LI sat between them as a list-item with a disc marker. `display:
   contents` removes the LI from layout entirely so the anchors become direct
   flex children again -- exactly the DOM his CSS was written against.

   WordPress also marks the current page with .current-menu-item rather than the
   .active class his main.js adds, so both are aliased to the same underline.
--------------------------------------------------------------------------- */
.nav-links ul,
.nav-links li { list-style: none; margin: 0; padding: 0; }
.nav-links li { display: contents; }

.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { color: var(--color-primary); }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--color-accent);
}

@media (max-width: 900px) {
  /* In the mobile drawer the anchors are full-width rows, which needs the LI
     to stop being display:contents so the border-bottom stacks correctly. */
  .nav-links li { display: block; width: 100%; }
  /* His rule is `.nav-links a { width: 100% }`, but an inline element ignores
     width -- so without this the separator borders only span the text and the
     tap target is the word rather than the row. */
  .nav-links li > a { display: block; width: 100%; }
}


/* ---------------------------------------------------------------------------
   Real brand assets. Kent's build shipped with no images at all -- an inline
   SVG for the mark and a Lucide `user` icon where the headshot belongs. His
   shapes are already correct (38px circle for the mark, 1:1 circle with
   overflow hidden for the portrait), so the images just fill them and every
   rule he wrote -- the inset ring, the shadow, the sizing -- still applies.
--------------------------------------------------------------------------- */
.brand .mark img,
.footer-brand .mark img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
  display: block; border-radius: 50%;
}
.hero-portrait .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Centre of mass of the headshot sits slightly high, so bias upward rather
     than cropping the chin in the circle. */
  object-position: 50% 22%;
}