/* ==========================================================================
   SuboxoneDoctorNearMe.com — supplemental layer on top of the shared
   Virtual Addiction Medicine design system (styles.css).
   Adds: intent hero, quick-answer boxes, city/county cards, plan badges,
   coverage tables, phone-forward CTAs.
   ========================================================================== */

:root {
  --plan-standard: #23628f;
  --plan-tailored: #1c7a30;
}

/* Intent hero ------------------------------------------------------------ */
.hero--intent {
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(87, 184, 92, .16), transparent 62%),
    linear-gradient(168deg, #103349 0%, #17496a 52%, #1a5578 100%);
  color: #dceaf3;
  padding-block: clamp(2.6rem, 6vw, 4.6rem);
}
.hero--intent h1 { color: #fff; }
.hero--intent p { color: #c2dcec; }
.hero--intent .lead { color: #dceaf3; font-size: clamp(1.06rem, 1.9vw, 1.24rem); }
.hero--intent .eyebrow { color: var(--amber-400); }
.hero--intent .eyebrow::before { background: var(--amber-400); }
.hero--intent a { color: #bfe6c3; }

.hero-split {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.hero-points li {
  display: flex; gap: .65rem; align-items: flex-start;
  color: #d6e8f3; font-size: 1rem;
}
.hero-points svg { width: 20px; height: 20px; flex: none; margin-top: .22rem; color: var(--amber-400); }

/* Booking card sitting in the hero */
.book-card {
  background: var(--white); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .5);
}
.book-card h2 { font-size: 1.32rem; margin-bottom: .4rem; }
.book-card p { font-size: .95rem; }
.book-card .btn { width: 100%; justify-content: center; margin-top: .8rem; }
.book-card .or {
  text-align: center; font-size: .82rem; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .08em; margin: .95rem 0 .3rem;
}
.phone-cta {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.32rem;
  color: var(--teal-800); padding: .55rem 0;
}
.phone-cta svg { width: 22px; height: 22px; }
.book-card .fineprint { font-size: .8rem; color: var(--ink-500); text-align: center; margin-top: .5rem; line-height: 1.5; }

/* Trust badges — 100% virtual / same-day / NC Medicaid --------------------
   These three claims do most of the convincing, so they get pill treatment
   rather than plain text, and they must stay legible on the dark hero. */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem;
  list-style: none; padding: 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .87rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--amber-100); color: #114d1e; border: 1px solid #bfe0b8;
}
.hero-badge svg { width: 17px; height: 17px; flex: none; color: var(--amber-600); }

/* On the dark intent hero, invert to a translucent glass pill */
.hero--intent .hero-badge {
  background: rgba(255, 255, 255, .12); color: #eaf6ec;
  border-color: rgba(196, 233, 199, .38);
  backdrop-filter: blur(2px);
}
.hero--intent .hero-badge svg { color: var(--amber-400); }

@media (max-width: 420px) {
  .hero-badge { font-size: .81rem; padding: .36rem .7rem; }
}

/* Quick answer — the "answer the query in the first screen" block --------- */
.quick-answer {
  background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--amber-500);
  border-radius: var(--r-md); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-sm); margin-bottom: 2rem;
}
.quick-answer h2, .quick-answer h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.quick-answer p:last-child { margin-bottom: 0; }
.quick-answer p + p { margin-top: .7rem; }

/* Callouts --------------------------------------------------------------- */
.callout {
  border-radius: var(--r-md); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
  background: var(--teal-50); border: 1px solid var(--teal-100); font-size: .96rem;
}
.callout--green { background: var(--amber-100); border-color: #bfe0b8; }
.callout--warn  { background: #fdf2ee; border-color: #f2d4c8; }
.callout h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.callout p:last-child { margin-bottom: 0; }

/* City / location cards -------------------------------------------------- */
.city-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.city-card {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.05rem 1.2rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.city-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-100); }
.city-card strong { display: block; font-family: var(--font-head); font-size: 1.08rem; color: var(--ink-900); }
.city-card span { display: block; font-size: .86rem; color: var(--ink-500); margin-top: .18rem; }

/* Plan badges ------------------------------------------------------------ */
.plan-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  padding: .28rem .65rem; border-radius: 999px; letter-spacing: .02em;
}
.plan-badge--tailored { background: var(--amber-100); color: #114d1e; }
.plan-badge--standard { background: var(--teal-50); color: var(--teal-800); }

.plan-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.plan-list li {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .95rem;
}
.plan-list li svg { width: 18px; height: 18px; flex: none; color: var(--amber-500); }

/* Simple data table ------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4rem 0; }
table.plain {
  width: 100%; min-width: 520px; border-collapse: collapse;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: .94rem; overflow: hidden;
}
table.plain th, table.plain td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
table.plain th { font-family: var(--font-head); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); background: var(--sand-50); }
table.plain tr:last-child td { border-bottom: 0; }
table.plain td strong { color: var(--ink-900); }

/* On-page table of contents ---------------------------------------------- */
.toc {
  background: var(--sand-100); border-radius: var(--r-md); padding: 1rem 1.3rem;
  margin-bottom: 2rem; font-size: .93rem;
}
.toc strong { display: block; font-family: var(--font-head); margin-bottom: .5rem; color: var(--ink-900); }
.toc ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .3rem; }

/* Prose rhythm for content-heavy pages ----------------------------------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2.6rem; margin-bottom: .7rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .45rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose > :first-child { margin-top: 0; }

/* Nearby-counties chip row ----------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.chips span {
  font-size: .84rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--sand-100); color: var(--ink-700); border: 1px solid var(--line);
}

/* Desktop header phone --------------------------------------------------- */
.nav-phone {
  display: none; align-items: center; gap: .4rem; font-family: var(--font-head);
  font-weight: 700; color: var(--teal-800); font-size: 1.02rem; white-space: nowrap;
}
.nav-phone svg { width: 18px; height: 18px; }
@media (min-width: 1000px) { .nav-phone { display: inline-flex; } }

/* Single-CTA mobile bar. There is no public phone line on this site, so the
   sticky bar is one full-width booking button rather than a Book/Call pair. */
@media (max-width: 960px) {
  .mobile-bar--single { grid-template-columns: minmax(0, 420px); }
  .mobile-bar--single .btn { font-size: 1rem; padding: .9rem; min-height: 48px; }
  /* Keep the last section clear of the fixed bar */
  body { padding-bottom: 4.5rem; }
}

/* Footer helper */
.site-footer .footer-note { font-size: .82rem; color: #8fb4c6; margin-top: 1rem; line-height: 1.6; }

/* Print-friendly (QR / handout use) -------------------------------------- */
@media print {
  .crisis-bar, .site-header, .mobile-bar, .site-footer, .cta-band { display: none !important; }
  body { background: #fff; }
}

/* Visually-hidden (table captions for screen readers) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
table.plain th[scope="row"] { width: 42%; color: var(--ink-900); background: var(--sand-50); font-family: var(--font-head); font-size: .88rem; text-transform: none; letter-spacing: 0; }

/* A–Z jump nav — bare letters are too small to tap reliably on a phone,
   so each gets a 44px chip. */
.alpha-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.alpha-jump {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--teal-700); text-decoration: none;
}
.alpha-jump:hover, .alpha-jump:focus-visible {
  background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-800);
}

/* Menu button was 41px — below the 44px minimum tap target. */
.nav-toggle { min-width: 44px; min-height: 44px; }

/* Give anchored headings room to clear the sticky header when jumped to */
.alpha-nav ~ * h3[id], h2[id], h3[id] { scroll-margin-top: 5rem; }

/* Footer nav links sat at 33px — give them a full tap row on touch screens. */
@media (max-width: 960px) {
  .site-footer .footer-grid > div > a,
  .site-footer .footer-contact a,
  .site-footer .legal-links a {
    display: inline-flex; align-items: center; padding-block: .55rem; min-height: 44px;
  }
  .site-footer .footer-grid > div > a { display: flex; }
  .site-footer .footer-contact li { padding-block: .2rem; }
  .site-footer .legal-links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
}

/* Physician trust box — entity identity high on the page ------------------ */
.doctor-box {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); margin-bottom: 1.6rem;
}
.doctor-box__photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top center;
  flex: none; border: 2px solid var(--teal-100);
}
.doctor-box__name { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; margin-bottom: .5rem; }
.doctor-box__name a { color: var(--ink-900); }
.doctor-box__name a:hover { color: var(--teal-700); }
.doctor-box__creds { list-style: none; padding: 0; margin: 0; display: grid; gap: .28rem; }
.doctor-box__creds li { font-size: .92rem; color: var(--ink-700); padding-left: 1.1rem; position: relative; }
.doctor-box__creds li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500);
}
.doctor-box__note { font-size: .88rem; color: var(--ink-500); margin-top: .7rem; }
@media (max-width: 560px) {
  .doctor-box { flex-direction: column; gap: .9rem; }
  .doctor-box__photo { width: 64px; height: 64px; }
}

/* Compact extractable Q&A ------------------------------------------------- */
.qa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qa {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--teal-500);
  border-radius: var(--r-sm); padding: .95rem 1.1rem;
}
.qa__q { font-family: var(--font-head); font-weight: 600; color: var(--ink-900); margin-bottom: .3rem; font-size: .98rem; }
.qa__a { font-size: .93rem; margin: 0; }