/*
 * Guide redesign — condition library.
 * Loaded only on pages carrying _srcl_redesign. Unflagged pages are unaffected.
 *
 * Part 1 fixes the reading frame (width, measure, rhythm).
 * Part 2 gives long-form articles structure, hierarchy and scanning affordances
 * using the existing brand palette and type. Numbered topics and the contents rail
 * adapt to the article length; clinical caution callouts use a semantic class so
 * the opt-in design can be reused without assigning meaning to a section number.
 *
 * Palette sampled from /cancer-care/, which is the reference build for this
 * design system. The site sits on a blue-cyan axis; earlier drafts of this file
 * drifted green-teal, which is why it read as off-brand.
 *
 *   text      #083f5b navy (147 uses)  #405e6a body (81)  #617d89 muted (27)
 *   accent    #087cac link (48)        #087c8a teal (49)  #27b9c0 CTA cyan
 *   on dark   #ffffff                  #65d5d9 cyan
 *   surfaces  #f7fbfc (36)             #e7f8f9 chip (42)  #f0f6f8
 *   borders   #dce9ee (228 — the card border)  #d9e9ef  #cce2e9
 *   shadows   0 8px 24px rgba(9,62,91,.055) — the site stays under .06 alpha
 *   dark      linear-gradient(135deg, #083f5b, #08698f)
 */

/* Compact physiology explainer; existing page and gutter geometry are unchanged. */
body.srcl-redesign .srcl-pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
body.srcl-redesign .srcl-pathway > div {
  padding: 20px;
  border: 1px solid var(--srcl-edge);
  border-radius: 12px;
  background: var(--srcl-surface);
}
body.srcl-redesign .srcl-pathway strong {
  display: block;
  color: var(--srcl-navy);
  margin-bottom: 8px;
}
body.srcl-redesign .srcl-pathway span {
  display: block;
  font-size: 17px;
  line-height: 1.55;
}
body.srcl-redesign .srcl-citation { white-space: nowrap; }
body.srcl-redesign .srcl-citation a { padding: 0 2px; }
body.srcl-redesign .srcl-sources li { scroll-margin-top: calc(var(--srcl-sticky-top) + 16px); }
body.srcl-redesign .srcl-editorial-note { font-size: 15px; color: var(--srcl-muted); }
@media (max-width: 680px) {
  body.srcl-redesign .srcl-pathway { grid-template-columns: 1fr; }
  body.srcl-redesign .srcl-sources li { scroll-margin-top: 110px; }
}

body.srcl-redesign {
  /*
   * Sized to what the three columns need, NOT to the viewport. A reading page
   * stretched to a 2842px display just moves the wasted space inside the text
   * column: at a 1760px container the prose cap left a 434px dead zone to the
   * right of every paragraph. 1460px fits rail + prose + form with no void.
   */
  --srcl-page: clamp(1340px, 70vw, 1460px);
  --srcl-toc-width: 232px;
  --srcl-toc-gap: 56px;
  --srcl-sticky-top: 176px;
  --srcl-section-gap: 56px;

  --srcl-navy: #083f5b;
  --srcl-body: #405e6a;
  --srcl-muted: #617d89;
  --srcl-teal: #087c8a;
  --srcl-link: #087cac;
  --srcl-cyan: #27b9c0;
  --srcl-edge: #dce9ee;
  --srcl-edge-soft: #e6f0f3;
  --srcl-edge-strong: #cce2e9;
  --srcl-surface: #f7fbfc;
  --srcl-surface-teal: #e7f8f9;
  --srcl-shadow: 0 8px 24px rgba(9, 62, 91, .055);
  --srcl-shadow-lift: 0 10px 28px rgba(7, 63, 89, .09);
  --srcl-dark: linear-gradient(135deg, #083f5b 0%, #08698f 100%);
}

/* Leave clearance below the fixed header, including WordPress's editor toolbar. */
body.srcl-redesign.admin-bar { --srcl-sticky-top: 208px; }

/* ============================================================ 1. READING FRAME */

body.srcl-redesign.srcl-managed-page .srcl-wrap {
  width: min(var(--srcl-page), 100% - 48px);
  max-width: none;
}

body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-wrap {
  width: 100%;
  max-width: none;
}

/*
 * The page's own <style> block — stored inside the Elementor JSON, scoped
 * ".elementor-<post id> .srcp-hero > .elementor-container" — hardcodes
 * max-width:1340px and wins here, so this needs !important to reach it.
 *
 * Must stay inside .site-content. The site header and footer are Elementor
 * sections too and live outside that wrapper, so an unscoped
 * `.elementor-section > .elementor-container` squeezes the header bar down to
 * the article width and leaves the page background showing on both sides of it.
 */
body.srcl-redesign.srcl-managed-page .site-content .elementor-section > .elementor-container {
  max-width: var(--srcl-page) !important;
  width: 100%;
}

/*
 * Body copy runs the full width of the article column — no prose measure cap.
 * A wide line needs more leading to stay trackable, so the extra line-height
 * here is doing the work the narrower measure used to do.
 */
body.srcl-redesign .srcl-article > .srcl-content-section > p {
  font-size: 20px;
  line-height: 1.75;
}

/* Bind each heading to its own paragraphs, and separate the groups. */
body.srcl-redesign .srcl-content-section {
  margin-bottom: var(--srcl-section-gap);
}

/*
 * Scaled up with the body copy. The library caps h2 at 34px, which was a 2x
 * step over 17px prose but only 1.7x over 20px — enough to make the heading
 * read as bold body text rather than a section break.
 */
body.srcl-redesign .srcl-article h2 {
  font-size: clamp(27px, 2.2vw, 38px);
  margin-bottom: 14px;
}

body.srcl-redesign .srcl-article h3 {
  margin-top: 34px;
}

body.srcl-redesign .srcl-article ul:not(.srcl-link-list) li,
body.srcl-redesign .srcl-article ol:not(.srcl-link-list) li {
  font-size: 20px;
  line-height: 1.75;
  margin-bottom: 10px;
}

/* ==================================================== 1b. PALETTE CORRECTION */

/*
 * The condition-library base stylesheet runs an olive-green and mint accent set
 * (#527620 kickers, #759434 review rule, #70d3d0 buttons, #92c8c9 borders,
 * #276f70 hero text) that does not appear anywhere on /cancer-care/. That is the
 * real reason this template reads as off-brand, and no amount of restyling the
 * article fixes it — the accents sit in the hero, the CTA and the related rail.
 *
 * Everything below is a one-for-one swap onto the sampled palette. No layout,
 * sizing or component changes here; if this block is deleted the page keeps its
 * structure and simply reverts to the green accents.
 */

/*
 * Body copy: the library's #153e50 is far darker and bluer than the site's.
 * Set on the containers so inline <strong>, <em> and nested text inherit it too
 * — scoping this to paragraphs alone left everything else on the old colour.
 */
body.srcl-redesign .srcl-article,
body.srcl-redesign .srcl-content-section {
  color: var(--srcl-body);
}

/* The triage callout is inverted, so it must not inherit the body colour. */
body.srcl-redesign .srcl-article .srcl-clinical-caution p {
  color: #d3e5ee;
}

body.srcl-redesign .srcl .srcl-kicker {
  color: var(--srcl-link);
}

body.srcl-redesign .srcl h3 {
  color: var(--srcl-navy);
}

/* Practitioner-review note: green rule and wash become the site's blue pair. */
body.srcl-redesign .srcl-review {
  border-left-color: var(--srcl-link);
  background: var(--srcl-surface);
}

body.srcl-redesign .srcl-cta {
  background: linear-gradient(135deg, #f7fbfc 0%, #e5f2f6 100%);
}

/* Same treatment as the hero primary button, for the same contrast reason. */
body.srcl-redesign .srcl .srcl-button {
  background: var(--srcl-cyan);
  color: var(--srcl-navy);
  box-shadow: 0 6px 18px rgba(8, 63, 91, .12);
}

body.srcl-redesign .srcl .srcl-button:hover {
  background: #1fa3aa;
  color: var(--srcl-navy);
}

body.srcl-redesign .srcl-related,
body.srcl-redesign .srcl-directory,
body.srcl-redesign .srcl-breadcrumbs {
  background: var(--srcl-surface);
}

body.srcl-redesign .srcl-card,
body.srcl-redesign .srcl-directory-group {
  border-color: var(--srcl-edge);
}

body.srcl-redesign .srcl-card:hover {
  border-color: #99cee0;
}

/*
 * Hero. These carry !important in the base stylesheet, so the overrides do too.
 * The primary button keeps navy text: #27b9c0 with white is 2.2:1, with navy 5:1.
 */
body.srcl-redesign.srcl-managed-page .srcp-hero .srcl-photo .srcp-kicker,
body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-heading span {
  color: var(--srcl-teal) !important;
}

body.srcl-redesign.srcl-managed-page .srcp-hero .srcl-photo .srcp-lead,
body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-heading p {
  color: var(--srcl-body);
}

body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-btn-primary {
  background: var(--srcl-cyan);
  box-shadow: 0 6px 18px rgba(8, 63, 91, .12);
}

body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-btn-secondary {
  border-color: #99cee0;
}

/* ================================================= 2a. NUMBERED SECTION SYSTEM */

/*
 * Sections with srcl-section- IDs form the numbered topic sequence. A numeral
 * chip gives each one an anchor and ties it back to the contents rail, regardless
 * of article length. Unnumbered clinical notes, the table, FAQ and references use
 * other IDs and are deliberately excluded from this sequence.
 */
body.srcl-redesign .srcl-article {
  counter-reset: srcl-step;
}

body.srcl-redesign .srcl-article [id^="srcl-section-"] {
  counter-increment: srcl-step;
}

body.srcl-redesign .srcl-article [id^="srcl-section-"]::before {
  content: counter(srcl-step, decimal-leading-zero);
  display: inline-block;
  margin-bottom: 15px;
  padding: 4px 12px;
  border: 1px solid var(--srcl-edge-strong);
  border-radius: 999px;
  background: var(--srcl-surface-teal);
  color: var(--srcl-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}

/* The opening section reads as the lead-in to everything that follows. */
body.srcl-redesign .srcl-article #srcl-section-0 > p {
  font-size: 22px;
  line-height: 1.7;
  color: #254d60;
}

/* ============================================ 2b. TRIAGE SECTION AS A CALLOUT */

/*
 * Add .srcl-clinical-caution to the article's clinical or urgent-care note.
 * The inverted card reuses the navy gradient the theme ships for dark heroes.
 * This semantic marker keeps the treatment attached to its meaning when topics
 * are reordered or the opt-in design is applied to another condition page.
 * A note without a srcl-section- ID remains outside the numbered topic sequence.
 */
body.srcl-redesign .srcl-article .srcl-clinical-caution {
  max-width: none;
  padding: 34px 38px 38px;
  border-radius: 18px;
  background: var(--srcl-dark);
  box-shadow: 0 10px 28px rgba(7, 63, 89, .12);
}

body.srcl-redesign .srcl-article .srcl-clinical-caution::before {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #65d5d9;
}

body.srcl-redesign .srcl-article .srcl-clinical-caution h2 {
  color: #ffffff;
}

body.srcl-redesign .srcl-article .srcl-clinical-caution p {
  color: #d3e5ee;
  margin-bottom: 0;
}

/* ===================================================== 2c. LINK LISTS AS CARDS */

/*
 * "Explore this area of care" is the main navigation on the page and renders as
 * bare text links in a bordered box. Cards give them a target, a hover state and
 * a direction cue.
 */
body.srcl-redesign .srcl-directory-group {
  border: 1px solid var(--srcl-edge);
  border-radius: 16px;
  background: #ffffff;
  padding: 30px 32px 32px;
}

body.srcl-redesign .srcl-directory-group > h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--srcl-teal);
  margin-bottom: 4px;
}

body.srcl-redesign .srcl-link-list {
  gap: 12px;
  margin-top: 20px;
}

body.srcl-redesign .srcl-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 14px 18px;
  border: 1px solid var(--srcl-edge);
  border-radius: 12px;
  background: var(--srcl-surface);
  color: var(--srcl-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

body.srcl-redesign .srcl-link-list a::after {
  content: '→';
  flex: none;
  color: var(--srcl-teal);
  font-weight: 700;
  transition: transform .15s ease;
}

body.srcl-redesign .srcl-link-list a:hover {
  border-color: #99cee0;
  background: #ffffff;
  transform: translateY(-1px);
}

body.srcl-redesign .srcl-link-list a:hover::after {
  transform: translateX(3px);
}

/* ======================================================= 2d. FAQ AS ACCORDIONS */

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq {
  border: 1px solid var(--srcl-edge);
  border-radius: 14px;
  background: #ffffff;
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-size: 19px;
  font-weight: 600;
  color: var(--srcl-navy);
  list-style: none;
  transition: background .15s ease;
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq summary::-webkit-details-marker {
  display: none;
}

/* Plus that becomes a minus when the panel opens. */
body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq summary::after {
  content: '+';
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--srcl-surface-teal);
  color: var(--srcl-teal);
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq[open] summary {
  background: var(--srcl-surface);
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq[open] summary::after {
  content: '\2212';
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq summary:hover {
  background: var(--srcl-surface);
}

body.srcl-redesign .srcl-article #srcl-faqs .srcl-faq p {
  padding: 0 22px 21px;
  margin: 0;
  max-width: none;
  font-size: 19px;
  line-height: 1.7;
}

/* ============================================== 2e. SOURCES AS A CITED PANEL */

/*
 * Citations are the credibility signal on a clinical page. A bare bulleted list
 * undersells them; a panel with numbered references reads as sourced work.
 */
body.srcl-redesign .srcl-article #srcl-references .srcl-sources {
  counter-reset: srcl-cite;
  list-style: none;
  margin: 0;
  padding: 8px 4px;
  border-top: 1px solid var(--srcl-edge);
  border-bottom: 1px solid var(--srcl-edge);
}

body.srcl-redesign .srcl-article #srcl-references .srcl-sources li {
  counter-increment: srcl-cite;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 14px 4px;
  font-size: 17px;
}

body.srcl-redesign .srcl-article #srcl-references .srcl-sources li + li {
  border-top: 1px solid var(--srcl-edge-soft);
}

body.srcl-redesign .srcl-article #srcl-references .srcl-sources li::before {
  content: counter(srcl-cite);
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--srcl-surface-teal);
  color: var(--srcl-teal);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* External-link cue, since every citation leaves the site. */
body.srcl-redesign .srcl-article #srcl-references .srcl-sources a[target="_blank"]::after {
  content: ' ↗';
  color: var(--srcl-teal);
  font-weight: 700;
}

/* ============================================================ 2f. TABLE POLISH */

body.srcl-redesign .srcl-article .srcl-table-wrap {
  border-color: var(--srcl-edge);
  border-radius: 16px;
}

body.srcl-redesign .srcl-article table th {
  background: #eef5f9;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--srcl-teal);
  padding: 15px 18px;
}

/* Scaled with the body copy — 14px cells read as fine print beside 20px prose. */
body.srcl-redesign .srcl-article table td {
  padding: 18px;
  border-bottom-color: var(--srcl-edge-soft);
  font-size: 16px;
}

/* The leading <strong> in each cell is the row's subject, so let it read as one. */
body.srcl-redesign .srcl-article table td strong {
  color: var(--srcl-navy);
  font-size: 17px;
  margin-bottom: 7px;
}

body.srcl-redesign .srcl-article table tbody tr:hover td {
  background: var(--srcl-surface);
}

/* ============================================================= 2g. TRUST BAR */

body.srcl-redesign .srcl-reading-column .srcl-trust {
  border-bottom: 0;
  gap: 10px;
  padding: 4px 0 26px;
}

body.srcl-redesign .srcl-reading-column .srcl-trust span {
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--srcl-edge-strong);
  border-radius: 999px;
  background: var(--srcl-surface-teal);
  color: var(--srcl-teal);
  font-size: 14px;
  font-weight: 600;
}

/* ====================================================== 2h. CONTENTS RAIL */

/*
 * Why the sticky rail has never worked on this page template.
 *
 * The theme sets body{overflow-x:hidden}, which makes body a scroll container.
 * The document scrolls on <html>, so body's scrollport never moves and no sticky
 * descendant can ever activate. The page author already spotted this and wrote
 * body{overflow-x:clip;overflow-y:visible!important} into the Elementor inline
 * styles — clip is the fix precisely because it does NOT create a scroll box.
 *
 * It is silently defeated by the instant-site-search plugin, which ships
 * `body.sr-search-unlocked,html.sr-search-unlocked{overflow-y:auto!important}`
 * and adds that class on load. overflow-y then resolves to auto, and because CSS
 * downgrades `clip` to `hidden` whenever the other axis is not clip or visible,
 * body lands back on `hidden auto`. Same scroll container, same dead sticky.
 *
 * Winning needs specificity above that plugin's `body.sr-search-unlocked` (0,1,1).
 * Overriding it is safe: the class is only ever added, never removed, and exists
 * solely to beat a third-party modal's overflow:hidden — which `visible` beats too.
 *
 * Use `visible`, not `clip`. `clip` fixes sticky but makes body a clip context, and
 * a clip context clips position:fixed descendants — which cropped the site header.
 * `visible` creates no scroll box and no clip box, so sticky works and the fixed
 * header paints edge to edge. Horizontal overflow is still contained, because
 * html{overflow-x:hidden} propagates to the viewport and does that job on its own.
 */
body.srcl-redesign,
body.srcl-redesign.sr-search-unlocked {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

@media (min-width: 1560px) {
  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-layout {
    display: grid;
    grid-template-columns: var(--srcl-toc-width) minmax(0, 1fr);
    column-gap: var(--srcl-toc-gap);
    padding-top: 34px;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc {
    position: sticky;
    top: var(--srcl-sticky-top);
    align-self: start;
    max-height: calc(100dvh - var(--srcl-sticky-top) - 24px);
    overflow-y: auto;
    margin-bottom: 0;
    padding: 24px 22px;
    border: 1px solid var(--srcl-edge);
    border-radius: 16px;
    background: var(--srcl-surface);
    counter-reset: srcl-toc-step;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--srcl-teal);
    margin-bottom: 16px;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 9px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--srcl-body);
    border-top: 1px solid var(--srcl-edge-soft);
    text-decoration: none;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a:first-of-type {
    border-top: 0;
  }

  /* Numerals mirror the chips on the sections they point at. */
  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a[href^="#srcl-section-"] {
    counter-increment: srcl-toc-step;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a[href^="#srcl-section-"]::before {
    content: counter(srcl-toc-step, decimal-leading-zero);
    flex: none;
    color: var(--srcl-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    padding-top: 2px;
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a:hover {
    color: var(--srcl-link);
  }

  /* An inset outline stays visible inside the scrollable rail. */
  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a:focus-visible {
    outline: 2px solid var(--srcl-link);
    outline-offset: -2px;
    border-radius: 3px;
    background: var(--srcl-surface-teal);
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc a:hover::before {
    color: var(--srcl-teal);
  }

  /* Keep the form and its records note together. Sticking only the inner
   * form let it overlap the following note. Short windows use normal document
   * scrolling so every field and the submit button remain reachable. */
  body.srcl-redesign.srcl-managed-page .srcl-flow-layout .srcp-form-column {
    align-self: stretch;
  }

  body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-column > .elementor-widget-wrap {
    height: auto;
    align-content: start;
  }

  body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-column > .elementor-widget-wrap > .elementor-inner-section {
    position: static;
  }
}

@media (min-width: 1560px) and (min-height: 1440px) {
  body.srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-column > .elementor-widget-wrap {
    position: sticky;
    top: var(--srcl-sticky-top);
  }
}

/* ================================ 2i. RAIL IN THE PAGE GUTTER (ultrawide) */

/*
 * On a 2842px display the 1460px content column leaves ~690px of dead space on
 * each side, while the rail still spends 288px of the reading column and pushes
 * the article to x=1003 — out of alignment with the hero and card sections
 * above it, which all start at x=715.
 *
 * Pulling the grid left by exactly one rail-plus-gap drops the rail into that
 * dead gutter and hands the article the column's full left edge, so body copy
 * finally lines up with everything above it. The rail stays a grid item, so it
 * keeps its sticky behaviour; nothing is absolutely positioned.
 *
 * The floor is set by arithmetic, not taste: the shift only fits if the gutter
 * is wider than it is, otherwise the rail hangs off the left of the screen.
 * Below 1900px the rail stays in the reading column exactly as before.
 */
@media (min-width: 1900px) {
  body.srcl-redesign {
    --srcl-toc-width: 248px;
  }

  /*
   * Shift left by one rail-plus-gap, then grow by the same amount. The margin
   * alone only moves the grid — its width stays pinned to the parent, which
   * shrinks the article column instead of freeing it. Growing it back lets the
   * article span the reading column's full 715-1660, so its right edge lines up
   * with the cards and trust bar as well as its left.
   */
  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-layout {
    margin-left: calc(-1 * (var(--srcl-toc-width) + var(--srcl-toc-gap)));
    width: calc(100% + var(--srcl-toc-width) + var(--srcl-toc-gap));
    max-width: none;
    flex: none;
  }

  /* Reads as a margin note beside the page rather than a card inside it. */
  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--srcl-edge);
    border-radius: 0;
    padding: 6px 0 6px 22px;
  }
}

/*
 * 1900-2099px — typically a 1920px monitor. The gutter here is far tighter, so
 * the rail and its gap shrink to 240px combined, and the content width is
 * derived from the viewport rather than fixed: 528px is 2 x (240px shift +
 * 24px edge clearance), which guarantees the rail lands inside the gutter at
 * every width in this range instead of relying on a hardcoded number holding.
 * Net effect at 1920px: content grows from 1344px to 1392px and the rail still
 * moves out of the reading column.
 */
@media (min-width: 1900px) and (max-width: 2099px) {
  body.srcl-redesign {
    --srcl-toc-width: 200px;
    --srcl-toc-gap: 40px;
    --srcl-page: min(1460px, calc(100vw - 528px));
  }

  body.srcl-redesign.srcl-managed-page .srcl-reading-column .srcl-toc {
    padding-left: 18px;
    font-size: 13px;
  }
}

/* ============================================== alternate hero: ?hero=dark */

body.srcl-redesign-hero-dark .srcp-hero.srcl-flow-layout {
  background:
    radial-gradient(ellipse 900px 700px at 15% 0, rgba(39, 185, 192, .12), transparent),
    linear-gradient(#eaf6fb, #fff 1000px);
}

body.srcl-redesign-hero-dark .srcp-hero .srcl-photo {
  background: var(--srcl-dark);
  border-color: #1c6a8d;
  box-shadow: 0 10px 28px rgba(7, 63, 89, .14);
}

body.srcl-redesign-hero-dark .srcp-hero .srcl-photo-copy {
  background: transparent;
}

body.srcl-redesign-hero-dark .srcp-hero .srcl-photo h1 {
  color: #ffffff;
}

body.srcl-redesign-hero-dark .srcp-hero .srcl-photo .srcp-kicker {
  color: #65d5d9 !important;
}

body.srcl-redesign-hero-dark .srcp-hero .srcl-photo .srcp-lead {
  color: #cfe0ea;
}

body.srcl-redesign-hero-dark .srcp-hero .srcp-btn-secondary {
  background: transparent;
  color: #ffffff !important;
  border-color: #6ea9c4;
}

body.srcl-redesign-hero-dark .srcp-hero .srcp-btn-secondary:hover {
  background: rgba(255, 255, 255, .1);
}

/* ================================================================ narrower */

@media (max-width: 1024px) {
  body.srcl-redesign {
    --srcl-section-gap: 44px;
  }

  body.srcl-redesign .srcl-article .srcl-clinical-caution {
    padding: 26px 24px 28px;
  }

  body.srcl-redesign .srcl-directory-group {
    padding: 22px 20px 24px;
  }
}

@media (max-width: 680px) {
  body.srcl-redesign .srcl-link-list a {
    min-height: 0;
  }
}

/* Autoimmune and environmental pages: keep a compact consultation form beside the long article.
 * The existing grid column is the sticky boundary, so the card releases before
 * related content and the footer. Global form 8183 and its mobile layout stay intact. */
@media (min-width: 1025px) {
  body:is(.page-id-2034, .page-id-3093).srcl-redesign.srcl-managed-page .srcl-flow-layout .srcp-form-column {
    align-self: stretch;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-column > .elementor-widget-wrap {
    display: block;
    position: sticky;
    top: var(--srcl-sticky-top);
    height: fit-content;
    max-height: calc(100dvh - var(--srcl-sticky-top) - 20px);
    overflow-y: auto;
    scroll-padding-block: 12px;
    border-radius: 22px;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign.srcl-managed-page .srcp-hero .srcp-form-column > .elementor-widget-wrap > .elementor-inner-section {
    position: static;
    padding: 18px !important;
    margin: 0;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-inner-section .elementor-widget {
    margin-bottom: 0;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .srcp-form-heading {
    margin: -18px -18px 12px;
    padding: 14px 18px;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .srcp-form-heading span {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .srcp-form-heading h2 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 0;
  }

  /* These preparation details are covered in the article; keep the full version
   * in the normal-flow mobile form, and let the desktop card focus on contact. */
  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .srcp-form-heading p,
  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-widget:has(.srcp-form-points),
  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-widget:has(.srcp-side-note) {
    display: none;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column :is([data-id="0eae0dd5"], [data-id="f862f2c8"]) {
    margin: 0 !important;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column :is([data-id="0eae0dd5"], [data-id="f862f2c8"]) .elementor-widget-container {
    margin: 0 !important;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column :is([data-id="0eae0dd5"], [data-id="f862f2c8"]) .elementor-widget-container > div {
    margin-bottom: 6px !important;
    line-height: 18px;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-widget-form > .elementor-widget-container {
    padding-bottom: 0 !important;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-form-fields-wrapper {
    margin-bottom: 0;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-field-group {
    margin-bottom: 8px;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-field-textual {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column textarea.elementor-field-textual {
    height: 72px;
    min-height: 72px;
    resize: vertical;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .elementor-button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.25;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column .sunridge-recaptcha-disclosure {
    margin-top: 8px;
    margin-bottom: 0;
  }

  body:is(.page-id-2034, .page-id-3093).srcl-redesign .srcp-form-column div:has(> a[href="tel:18009237878"]) {
    margin: 10px 0 0 !important;
    padding: 8px 12px !important;
  }
}