/* Every treatment page (tools/treatment-pages.mjs), served once at /treatments/page.css.
   Every row is a captured injectables, homepage or /faq/ row styled by its own layout
   CSS; this file only styles the few elements those rows never had: the breadcrumb,
   the reviewer byline, the key-facts list, section labels as real H2s, and the doctor links. */

/* Section labels: the injectables "Our Approach" label, now an H2. Look unchanged. */
.dr-tx-label {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: inherit; line-height: inherit; margin: 0; padding: 0;
}

/* Breadcrumb above "What Is <treatment>?" */
/* side padding lines the crumbs up with the "What Is" heading (x 25px desktop; QA) */
.dr-tx-crumbs ol { list-style: none; margin: 0 0 24px; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.dr-tx-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.dr-tx-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dr-tx-crumbs [aria-current] { opacity: .7; }

/* "Medically reviewed by Dr. ___, MD · Updated <month year>" */
/* "Medically reviewed by": a quiet line at the end of the content, after the FAQ */
.dr-tx-byline-row { max-width: 1240px; margin: 0 auto; padding: 8px 20px 48px; text-align: center; }
.dr-tx-byline { font-size: 14px; color: #555; margin: 0; }
.dr-tx-byline a { color: inherit; text-decoration: underline !important; text-underline-offset: 3px; } /* the WordPress theme forces a{text-decoration:none!important} */
.dr-tx-byline a { color: inherit; text-decoration: underline !important; text-underline-offset: 3px; }

/* Key facts: plain HTML (Build Spec), five cells on desktop, two on phones. */
.dr-tx-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 28px 0 0; border-top: 1px solid currentColor; }
.dr-tx-facts > div { padding: 18px 16px 18px 0; }
.dr-tx-facts > div + div { padding-left: 16px; border-left: 1px solid rgba(0, 0, 0, .15); }
.dr-tx-facts dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; text-align: left; }
.dr-tx-facts dd { margin: 0; font-size: 16px; line-height: 1.4; text-align: left; }
.dr-tx-note { margin-top: 18px; font-size: 15px; text-align: left; }
@media (max-width: 767px) {
  .dr-tx-facts { grid-template-columns: 1fr 1fr; }
  .dr-tx-facts > div, .dr-tx-facts > div + div { padding: 14px 12px 14px 0; border-left: 0; border-bottom: 1px solid rgba(0, 0, 0, .15); }
  .dr-tx-facts > div:last-child { grid-column: 1 / -1; }
}

/* In-page anchors clear the sticky header. No scroll-behavior: the site runs Lenis. */
#what-is, #key-facts, #results, #right-for-you, #doctors, #how-it-works, #the-science, #pairs-well-with, #why, #not-to-do, #best-treatment, #options, #compare, #faq, #skinvive { scroll-margin-top: 90px; }

/* The /faq/ section heading is an orange pill sized `width: max-content`; a long
   treatment name ("Sculptra & Radiesse Questions") ran past a 390px phone. Cap it at
   the column so it wraps (QA, 2026-10-14). */
.fl-node-pjnf3o49d6wm { max-width: 100%; box-sizing: border-box; }

/* "Is <treatment> Right for You?" heading row: on /services/injectables/ it follows the
   01/02/03 row and carries a 122px top margin + rule as a separator; here it does not. */
#right-for-you .fl-row-content-wrap { margin-top: 0; border-top: 0; }

/* Tab headers are keyboard-operable here (page.js): show focus. */
.custom-faq-single > h3[role="button"]:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

/* The Science: captions read left-aligned beside their step numbers. */
.dr-science .dr-science__steps li { text-align: left; }

/* Under the patient-review cards: link to all testimonials */
.dr-tx-more { text-align: center; margin-top: 24px; }
.dr-tx-more a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* Portrait in a split row (15:16, the site's doctor photo ratio): the audience pages' photo */
/* 20px side margins line it up with the heading module's own inset (measured: h2 at x 25 desktop, 20 phone) */
.dr-tx-portrait { display: block; width: calc(100% - 40px); max-width: 360px; margin: 0 20px 24px; }
.dr-tx-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 15 / 16; object-fit: cover; }
@media (max-width: 767px) { .dr-tx-portrait { max-width: none; } }


/* "The Science" captions sit in a heading row that centres its text; the step number
   is left-aligned beside them, so the caption must be too (QA 2026-10-14). */
.dr-science__cap .dr-science__slide, .dr-science__cap .dr-science__slide p { text-align: left !important; }

/* ---- Copy pass 2026-10-18 (tools/copy-system.mjs, tools/treatment-pages.mjs) ---- */
/* One-line rows inside the content width: "Often paired with" (in The Treatment) and the
   pregnancy line under the FAQ. */
.dr-tx-line-row { max-width: 1240px; margin: 0 auto; padding: 0 20px 40px; text-align: center; }
.dr-tx-pairs { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.dr-tx-pairs__k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }
.dr-tx-pairs a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 4px; }
.dr-tx-faq-note { margin: 0 auto; max-width: 70ch; font-size: 15px; color: #444; }

/* Pull-quotes (at most two per page): Dr. Fisher's by registry id, approval-gated
   (tools/fisher-quotes.mjs); Dr. Idriss's verbatim words. */
.dr-pq-row { max-width: 1240px; margin: 0 auto; padding: 24px 20px 56px; }
.dr-pq { max-width: 760px; margin: 0 auto; padding: 0 0 0 28px; border-left: 3px solid #FFFF6E; text-align: left; }
.dr-pq blockquote { margin: 0; padding: 0; border: 0; }
.dr-pq blockquote p { margin: 0; font-family: DidotDisplay, Verdana, Arial, sans-serif; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.dr-pq figcaption { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
/* Drafts exist only on preview and staging builds (the production build fails on one). */
.dr-pq[data-draft]::after { content: "Draft, awaiting Dr. Fisher’s approval"; display: block; margin-top: 10px; font-size: 12px; color: #6B6B6B; }
.dr-fq[data-draft] { background: rgba(255, 255, 110, .45); }