/* =====================================================
   refresh.css — brings every subpage into the homepage's
   editorial look (ametra.css): warm cream, warm-ink dark
   surfaces, Georgia display headings set light, hairline
   rules instead of boxed cards, one quiet accent blue.

   Loaded last in <head> on every page. Subpage rules are
   scoped to body:not(.ametra-landing) so the homepage is
   untouched; the sticky-bar rules at the bottom apply
   everywhere.

   Same words, same markup, same URLs — styling only.
   ===================================================== */

:root {
  --hlr-ink: #13110e;          /* homepage warm near-black */
  --hlr-ink-2: #1c1915;
  --hlr-cream: #f8f6f1;
  --hlr-tint: #f1ede4;
  --hlr-text: #2c2c2c;
  --hlr-muted: #5a5a5a;
  --hlr-line: rgba(20, 18, 14, 0.12);
  --hlr-accent: #4069a1;
  --hlr-accent-ink: #345d93;
  --hlr-accent-2: #9cc1ec;
  --hlr-on-dark: #f6f1e7;
  --hlr-on-dark-soft: #cdc6ba;
  --hlr-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* =====================================================
   SUBPAGES
   ===================================================== */

/* ---------- Old theme tokens → homepage palette ---------- */
body:not(.ametra-landing) {
  --color-bg: var(--hlr-cream);
  --color-cream: var(--hlr-cream);
  --color-text: var(--hlr-text);
  --color-text-light: var(--hlr-muted);
  --color-navy-deep: var(--hlr-ink);
  --color-navy-mid: var(--hlr-ink-2);
  --font-display: var(--hlr-display);
  --shadow-soft: none;
  --shadow-medium: 0 30px 70px -34px rgba(20, 18, 14, 0.35);
  background: var(--hlr-cream);
}

/* ---------- Type: light serif display, ink not blue ---------- */
body:not(.ametra-landing) :is(h1, h2, h3, h4) {
  font-family: var(--hlr-display);
  font-weight: 400;
  color: var(--hlr-text);
  letter-spacing: -0.018em;
}

body:not(.ametra-landing) h1 { line-height: 1.04; }
body:not(.ametra-landing) h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; }
body:not(.ametra-landing) h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.2; }
body:not(.ametra-landing) h4 { line-height: 1.3; }

body:not(.ametra-landing) :is(h1, h2, h3) strong,
body:not(.ametra-landing) :is(h1, h2, h3) b { font-weight: 400; }

body:not(.ametra-landing) main p,
body:not(.ametra-landing) main li { color: var(--hlr-muted); }

/* In-body links: quiet ink-blue underline, like the homepage */
body:not(.ametra-landing) main :is(p, li) a:not(.btn) {
  color: var(--hlr-accent-ink);
  text-decoration: underline;
  text-decoration-color: rgba(52, 93, 147, 0.35);
  text-underline-offset: 3px;
}
body:not(.ametra-landing) main :is(p, li) a:not(.btn)::after { display: none; }

/* ---------- Light sections: cream, alternating warm tint ---------- */
body:not(.ametra-landing) :is(.content-section, .section-white, .dosing, .candidacy, .related, .faq-section, .community-section) {
  background: var(--hlr-cream);
}
body:not(.ametra-landing) :is(.how-it-works, .side-effects, .faq, .section-gray) {
  background: var(--hlr-tint);
}
body:not(.ametra-landing) main section[style*="background: var(--color-white)"],
body:not(.ametra-landing) main section[style*="background:var(--color-white)"],
body:not(.ametra-landing) main section[style*="#f8fafc"],
body:not(.ametra-landing) main section[style*="#ffffff"] {
  background: var(--hlr-cream) !important;
}

/* ---------- Saturated blue / navy bands → warm ink "moments" ----------
   Class names differ page to page, so refresh.js finds every section
   actually painted brand blue or navy and tags it .hlr-ink (and any
   light box inside it .hlr-light). Text colours designed for the blue
   stay as they were; only the surface changes. */
body:not(.ametra-landing) .hlr-ink {
  background: var(--hlr-ink) !important;
  background-image: none !important;
}
body:not(.ametra-landing) .hlr-ink::before { opacity: 0.4; }

/* ---------- Dark heroes: navy → homepage warm ink ---------- */
body:not(.ametra-landing) .hlr-hero-ink {
  background: radial-gradient(120% 90% at 85% 10%, #2a241c 0%, var(--hlr-ink) 55%) !important;
}
body:not(.ametra-landing) :is(.page-hero, .hero) h1 { color: inherit; }
body:not(.ametra-landing) .hlr-hero-ink h1 { color: var(--hlr-on-dark); }
body:not(.ametra-landing) :is(.page-hero-image, .hero-image) {
  border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}

/* Tall portrait hero photos (e.g. Botox) towered over the headline:
   crop them to a calm 4:5 frame */
body:not(.ametra-landing) :is(.page-hero, .hero) .hero-image > img {
  aspect-ratio: 4 / 5;
  max-height: 600px;
  object-fit: cover;
  border-radius: 18px !important;
}

/* ---------- Boxed card grids → open columns on hairline rules ---------- */
body:not(.ametra-landing) :is(
  .mechanism-card, .benefit-card, .treatment-card, .why-card, .feature-card,
  .service-card, .info-card, .symptom-card, .option-card, .step-card,
  .side-effects-box, .candidacy-box, .related-card, .info-box,
  .area-card, .diagnostic-item, .approach-card, .who-card, .stage-card, .ideal-card, .fact-card,
  .city-card, .condition-card, .why-item, .how-card, .protocol-card, .candidates-card, .benefit-item
) {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hlr-line);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 4px 8px;
  text-align: left;
}
body:not(.ametra-landing) :is(
  .mechanism-card, .benefit-card, .treatment-card, .why-card, .feature-card,
  .service-card, .info-card, .symptom-card, .option-card, .step-card, .related-card,
  .area-card, .approach-card, .who-card, .stage-card, .ideal-card, .city-card, .condition-card, .how-card
):hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border-color: var(--hlr-accent);
}
body:not(.ametra-landing) :is(.mechanism-card, .benefit-card, .treatment-card, .why-card, .feature-card, .service-card, .info-card, .symptom-card, .option-card, .step-card, .related-card, .area-card, .approach-card, .who-card, .stage-card, .ideal-card, .fact-card, .city-card, .condition-card, .how-card, .protocol-card) :is(h3, h4) {
  color: var(--hlr-text);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
}
body:not(.ametra-landing) :is(.mechanism-card, .benefit-card, .treatment-card, .symptom-card, .why-card) p { margin-left: 0; }

/* Icon bubbles: drop the tinted circle, keep a small ink-blue mark */
body:not(.ametra-landing) :is(.mechanism-icon, .benefit-icon, .card-icon, .feature-icon, .symptom-icon, .why-icon, .treatment-icon) {
  width: auto;
  height: auto;
  margin: 0 0 18px;
  background: none;
  border-radius: 0;
  justify-content: flex-start;
  color: var(--hlr-accent);
}
body:not(.ametra-landing) :is(.mechanism-icon, .benefit-icon, .card-icon, .feature-icon, .symptom-icon, .why-icon, .treatment-icon) svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.4;
}

/* "Good candidate / not for you" boxes: neutral, marks carry the meaning */
body:not(.ametra-landing) :is(.good-candidate, .not-candidate) { background: transparent; }
body:not(.ametra-landing) .good-candidate h3 { color: var(--hlr-text); }
body:not(.ametra-landing) .not-candidate h3 { color: var(--hlr-text); }
body:not(.ametra-landing) .good-candidate li::before { color: #0a7e6f; }
body:not(.ametra-landing) .not-candidate li::before { color: #a14848; }

/* Related links row */
body:not(.ametra-landing) .related-card h4 { color: var(--hlr-text); }

/* ---------- FAQ: boxed accordions → ruled list ---------- */
body:not(.ametra-landing) .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hlr-line);
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}
body:not(.ametra-landing) .faq-grid > .faq-item:first-child,
body:not(.ametra-landing) .faq-item:first-of-type { border-top: 1px solid var(--hlr-line); }
body:not(.ametra-landing) .faq-question {
  padding: 26px 4px;
  font-family: var(--hlr-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  color: var(--hlr-text);
  background: none;
}
body:not(.ametra-landing) .faq-question:hover { background: none; color: var(--hlr-accent-ink); }
body:not(.ametra-landing) .faq-question::after { color: var(--hlr-muted); font-weight: 300; }
body:not(.ametra-landing) .faq-answer-content { padding: 0 4px 26px; }

/* ---------- Buttons: sentence case like the homepage ---------- */
body:not(.ametra-landing) main .btn,
body:not(.ametra-landing) .cta-buttons .btn {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  font-size: 0.98rem;
}
body:not(.ametra-landing) .btn-primary:hover { transform: none; }

/* ---------- Breadcrumb + pill eyebrows: quieter ---------- */
body:not(.ametra-landing) :is(.hero-badge, .page-hero-text .eyebrow) {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Footer: navy → homepage warm black ---------- */
/* (footers that were navy are tagged .hlr-ink by refresh.js) */

/* =====================================================
   STICKY BARS — every page, including the homepage
   ===================================================== */

/* Bottom booking bar: one slim line instead of a panel */
/* Call button is phone-only; desktop already shows the number in the header */
body .floating-cta-bar .cta-call { display: none; }
body .floating-cta-bar {
  padding: 10px 56px 10px 24px;
  gap: 20px;
  background: rgba(248, 246, 241, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hlr-line);
  box-shadow: none;
  transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body .floating-cta-bar .cta-text { font-size: 0.9rem; color: var(--hlr-muted); }
body .floating-cta-bar .cta-text strong { color: var(--hlr-text); font-weight: 600; }
body .floating-cta-bar .btn {
  padding: 10px 22px;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

@media (max-width: 768px) {
  body .floating-cta-bar {
    flex-direction: row;
    gap: 0;
    padding: 8px 52px 8px 12px;
  }
  body .floating-cta-bar .cta-text { display: none; }
  body .floating-cta-bar .btn {
    flex: 1;
    justify-content: center;
    padding: 11px 16px;
  }
  body .floating-cta-bar .close-cta { right: 10px; }
  /* Book + Call side by side on phones */
  body .floating-cta-bar { gap: 8px; }
  body .floating-cta-bar .cta-call { display: inline-flex; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  body .floating-cta-bar { transition: none; }
}

/* ---------- Dark-band context (kept last so it wins ties) ---------- */
body:not(.ametra-landing) :is(.hlr-ink, .hlr-dark) :is(h1, h2, h3, h4) { color: var(--hlr-on-dark); }
body:not(.ametra-landing) :is(.hlr-ink, .hlr-dark) .hlr-light :is(h1, h2, h3, h4) { color: var(--hlr-text); }
body:not(.ametra-landing) .hlr-ink :is(
  .mechanism-card, .benefit-card, .treatment-card, .why-card, .feature-card, .service-card,
  .info-card, .symptom-card, .option-card, .step-card, .area-card, .approach-card, .who-card,
  .stage-card, .ideal-card, .fact-card, .city-card, .condition-card, .why-item, .how-card,
  .benefit-item, .result-card
) { border-top-color: rgba(255, 255, 255, 0.14); }
body:not(.ametra-landing) .hlr-ink :is(.mechanism-icon, .benefit-icon, .card-icon, .feature-icon, .symptom-icon, .why-icon, .treatment-icon) { color: var(--hlr-accent-2); }
body:not(.ametra-landing) :is(.hlr-ink, .hlr-dark) :is(p, li) { color: var(--hlr-on-dark-soft); }
body:not(.ametra-landing) :is(.hlr-ink, .hlr-dark) .hlr-light :is(p, li) { color: var(--hlr-muted); }
body:not(.ametra-landing) footer:is(.hlr-ink, .hlr-dark) :is(h1, h2, h3, h4) { color: var(--hlr-on-dark); }
body:not(.ametra-landing) :is(.hlr-ink, .hlr-dark) :is(p, li, span)[style*="color-text-light"] { color: var(--hlr-on-dark-soft) !important; }

/* Header: Book Free Consult is the primary action; the phone number steps
   out of the desktop header so the nav fits on one line (it stays in the
   floating bar and the mobile menu). */
body:not(.ametra-landing) header nav > .nav-phone { display: none; }
/* the Book pill keeps its own look; no nav-link underline sweep */
body:not(.ametra-landing) header .nav-book-link::after { display: none !important; }