/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors — Skyway (SDS) values; comment cites the SDS token it comes from */

  /* #fff */
  --background-color: var(--sds-semantic-color-surface-background-primary);

  /* #f4f4f4 */
  --light-color: var(--sds-semantic-color-surface-background-secondary);

  /* #686868 */
  --dark-color: var(--sds-semantic-color-body-text-secondary);

  /* #080808 */
  --text-color: var(--sds-semantic-color-body-text-primary);

  /* ---- LINK STATES ---- */

  /* Blue 100: #0054e4 */
  --link-color: var(--sds-semantic-color-action-background-primary-default);

  /* Blue 200: #0014ac */
  --link-color-hover: var(--sds-semantic-color-action-background-primary-hover);

  /* Blue 300: #000068 */
  --link-color-active: var(--sds-semantic-color-action-background-primary-active);

  /* Purple 200: # */
  --link-color-visited: var(--sds-semantic-color-action-background-primary-visited);

  /* Neutral 40: # */
  --link-color-disabled: var(--sds-semantic-color-action-background-primary-disabled);

  /* Neutral 0: #fff */
  --link-color-inverse: var(--sds-semantic-color-action-background-inverse-default);

  /* Blue 40: #1ac9ff */
  --link-color-inverse-hover: var(--sds-semantic-color-action-background-inverse-hover);

  /* Blue 50: #0098fe */
  --link-color-inverse-active: var(--sds-semantic-color-action-background-inverse-active);

  /* Neutral 30: #d6d6d6. No SDS semantic token for this state exists yet
     (the inverse family above stops at active) - literal alias to the
     closest global palette swatch, same treatment as other not-a-token-yet
     values already flagged in this file. Needed because the global
     a:not(...):visited rule below repaints visited links purple
     (--link-color-visited) regardless of background - unreadable on a dark
     footer (Kelly, 2026-09-11: "purple on the BG is baaad"). */
  --link-color-inverse-visited: var(--sds-global-color-palette-neutral-30);

  /* role-named UI neutrals (values coincide with the pairs above by design —
     text-on-dark == the light surface, dark fill == the ink — the names stay
     honest to the role). SDS publishes no semantic token for the inverse
     roles or the overlay, so those cite the global primitive / are literal. */

  /* #949494 · inactive control fills. Named --muted-fill (not --muted-color)
     specifically to disambiguate from --ink-muted below - that one's a text
     color, this one's a fill/background; both are genuinely different roles
     with different correct values, not duplicates of each other, but
     "--muted-color" alone didn't say which role it was. */
  --muted-fill: var(--sds-semantic-color-border-secondary);

  /* #fff · text/icons on dark */
  --inverse-text-color: var(--sds-global-color-palette-neutral-0);

  /* #080808 · dark emphasis fill */
  --inverse-surface-color: var(--sds-global-color-palette-neutral-500);

  /* mask/overlay base; opacity via color-mix (no SDS token) */
  --overlay-color: rgb(19 19 19);

  /* hr separators (footer) */
  --footer-hr-color: rgb(128 128 128 / 20%);

  /* fonts — Skyway (SDS) families. NB: the webfont files must come from Mayo;
     until they're installed these fall back to the system stack. */
  --font-body: var(--sds-global-typography-font-family-mayo-clinic-sans), roboto, -apple-system, sans-serif;
  --font-display: var(--sds-global-typography-font-family-mayo-clinic-serif-display), georgia, serif;
  --font-heading: var(--sds-global-typography-font-family-mayo-clinic-sans), georgia, 'Times New Roman', serif;

  /* Distinct from --font-heading above despite the name overlap in prose
     elsewhere (blocks/footer/footer.css's own top comment calls this one
     "font-heading" when describing the real Mayo site's usage — a
     different, sans, token here). This is Mayo's actual serif (non-display)
     family, used today only for the footer's section headings. */
  --font-serif: var(--sds-global-typography-font-family-mayo-clinic-serif), georgia, serif;

  /* body sizes — aliased to closest SDS global font-size tokens */

  /* 16px */
  --body-font-size-xs: var(--sds-global-typography-font-size-100);

  /* 18px */
  --body-font-size-s: var(--sds-global-typography-font-size-112);

  /* 20px */
  --body-font-size-m: var(--sds-global-typography-font-size-125);

  /* 24px */
  --body-font-size-l: var(--sds-global-typography-font-size-150);

  /* heading sizes — aliased to closest SDS global font-size tokens */

  /* 76px */
  --heading-font-size-h1: var(--sds-global-typography-font-size-475);

  /* 40px */
  --heading-font-size-h2: var(--sds-global-typography-font-size-250);

  /* 32px */
  --heading-font-size-h3: var(--sds-global-typography-font-size-200);

  /* 28px */
  --heading-font-size-h4: var(--sds-global-typography-font-size-175);

  /* 24px */
  --heading-font-size-h5: var(--sds-global-typography-font-size-150);

  /* 20px */
  --heading-font-size-h6: var(--sds-global-typography-font-size-125);

  /* nav height */
  --nav-height: 105px;
  --nav-height-mobile: 72px;

  /* =====================================================================
     DESIGN SYSTEM FOUNDATION tokens (additive; PLACEHOLDER values).
     Replace VALUES with Skyway Design System (SDS) tokens — the target, per
     NFR-11 + Mayo UX. Docs: skyway.supernova-docs.io (Mayo SSO); export from
     Supernova. SDS = Skyway; MDS = Mayo DS (unused). Take SDS TOKENS only —
     its components are Lit Web Components, not for use in blocks. Layout
     tokens (spacing/scale/radii) are keepers regardless of SDS.
     ===================================================================== */

  /* spacing scale — aliased to SDS global dimension tokens */

  /* 2px */
  --space-4xs: var(--sds-global-dimension-space-25);

  /* 4px */
  --space-3xs: var(--sds-global-dimension-space-50);

  /* 8px */
  --space-2xs: var(--sds-global-dimension-space-100);

  /* 12px */
  --space-xs: var(--sds-global-dimension-space-150);

  /* 16px */
  --space-s: var(--sds-global-dimension-space-200);

  /* 24px */
  --space-m: var(--sds-global-dimension-space-300);

  /* 32px */
  --space-l: var(--sds-global-dimension-space-400);

  /* 40px */
  --space-xl: var(--sds-global-dimension-space-500);

  /* 48px */
  --space-2xl: var(--sds-global-dimension-space-600);

  /* 50px */
  --space-3xl: var(--sds-global-dimension-space-700);

  /* 60px */
  --space-4xl: var(--sds-global-dimension-space-750);

  /* 64px */
  --space-5xl: var(--sds-global-dimension-space-800);

  /* 68px */
  --space-6xl: var(--sds-global-dimension-space-850);

  /* 72px */
  --space-7xl: var(--sds-global-dimension-space-900);

  /* 76px */
  --space-8xl: var(--sds-global-dimension-space-950);

  /* 80px */
  --space-9xl: var(--sds-global-dimension-space-1000);

  /* layout

     Matches mayoclinic.org's own real contained width (mc-grid-max-width),
     not an arbitrary choice - CARES is folding into the live site, and
     minimizing jarring between old/new experiences means matching its
     layout math, not just the header block that happened to surface the
     mismatch first. 2026-08-27, per Kelly. */

  /* default contained content column */
  --content-max: 1320px;

  /* Named gutter role, not a raw --space-* reference (same reasoning as
     --content-max/--box-* above: a real, repeated, cross-cutting concept
     earns its own name instead of borrowing a generic scale value that
     happens to match). 24px is the site's real mobile page-margin value,
     confirmed against the live header (Kelly, 2026-09-04, correcting an
     initial 32px/--space-l guess) - aliased to --space-m since that token
     already carries exactly that value, rather than a second hardcoded
     24px literal. */
  --gutter-mobile: var(--space-m);

  /* box-* : small reusable component/region widths, a different scale of
     thing than the page-level content widths above. Grouped and named as
     one family for easy scan - until now every block needing a fixed box
     width just picked its own one-off literal (accordion 526px, carousel
     488px, quote 826px, styles.css:1354 900px - none shared, none
     discoverable as a set). Starting narrow with the roles this page
     actually needed; add more as real, repeated needs surface rather than
     guessing ahead. Named --box-body, not --box-content - "content" is
     already --content-max above at a wildly different scale (468px vs
     1320px), and that exact kind of same-word-different-scale collision is
     what --muted-fill/--ink-muted just got split apart to avoid.

     --box-main (960px) and --box-body (468px) are two DIFFERENT boxes on
     the same page, nested: --box-main caps the whole main.error section
     (narrower than the site-wide --content-max, matching the live page's
     own narrower main-column measure), --box-body separately caps just the
     text column inside it. Capping only --box-body, without --box-main,
     left the rest of the section at the full 1320px --content-max width -
     visually reading as "everything shrank" once the text column narrowed
     on its own inside all that extra unused space. */
  --box-aside: 140px;
  --box-body: 468px;
  --box-main: 960px;
  --box-full-width: var(--content-max);

  /* Real captured live-site value (header search appliance cap width at
     desktop), not a guess - added 2026-09-04 once a second real, repeated
     need for this family surfaced outside the 404 page it was seeded from. */
  --box-search: 856px;

  /* icon-* : glyph box sizes. xs/s/m naming (not box-*'s role-based naming)
     to match this file's own scale conventions (--space-*, --*-font-size-*)
     since icon size is a plain linear progression, not distinct roles like
     the box-* widths above. Seeded from what's already real, not invented:
     16px already recurs across the codebase's own glyphs (rail/header
     chevrons, 4 separate 16x16 viewBoxes); 24px is .icon's own existing
     hardcoded size below, just never named. Not attempting to fold in every
     other one-off icon size already in the codebase (carousel/video/
     accordion controls run 22-36px, each its own thing) - starting narrow
     with what this page needs, same as --box-* above. */
  --icon-s: 16px;
  --icon-m: 24px;

  /* wide sections */
  --content-wide: 1440px;
  --content-centered-max: 746px;
  --gutter: clamp(16px, 4vw, 40px);
  --grid-cols: 12;
  --grid-gap: var(--space-m);

  /* radii / borders / elevation */

  /* 4px */
  --radius-s: var(--sds-global-shape-border-radius-50);

  /* 8px */
  --radius-m: var(--sds-global-shape-border-radius-100);

  /* 16px */
  --radius-l: var(--sds-global-shape-border-radius-200);
  --elevation-1: 0 1px 2px rgb(16 32 46 / 8%);
  --elevation-2: 0 6px 24px rgb(16 32 46 / 12%);

  /* semantic color roles — now Skyway (SDS); most inherit via the base vars above */

  /* page background */
  --surface: var(--background-color);

  /* subtle raised / section fill */
  --surface-2: var(--light-color);

  /* primary text */
  --ink: var(--text-color);

  /* secondary text. Not --muted-fill above - that's a fill/background
     token (#949494), this is text (#686868); genuinely different roles. */
  --ink-muted: var(--dark-color);

  /* brand action */
  --accent: var(--link-color);

  /* accent hover / pressed */
  --accent-ink: var(--link-color-hover);

  /* #d6d6d6 · neutral-84 */
  --line: var(--sds-semantic-color-border-tertiary);

  /* reading measure */
  --measure: 65ch;

  /* Global opt-in for animating to/from a keyword size (`auto`, in
     practice) - e.g. accordion.css's ::details-content block-size
     transition. Must live on :root: scoping it to a descendant class
     (where it previously lived, on .accordion) doesn't reliably reach a
     pseudo-element's used-value resolution the way ordinary inheritance
     would suggest - confirmed empirically, not just per the spec's own
     recommendation to set this globally. */
  interpolate-size: allow-keywords;
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (width <=900px) {
  :root {
    /* body sizes — aliased to closest SDS global font-size tokens */

    /* 18px */
    --body-font-size-m: var(--sds-global-typography-font-size-112);

    /* 16px */
    --body-font-size-s: var(--sds-global-typography-font-size-100);

    /* 14px */
    --body-font-size-xs: var(--sds-global-typography-font-size-88);

    /* heading sizes — aliased to closest SDS global font-size tokens */

    /* 48px */
    --heading-font-size-h1: var(--sds-global-typography-font-size-300);

    /* 40px */
    --heading-font-size-h2: var(--sds-global-typography-font-size-250);

    /* 28px */
    --heading-font-size-h3: var(--sds-global-typography-font-size-175);

    /* 24px */
    --heading-font-size-h4: var(--sds-global-typography-font-size-150);

    /* 20px */
    --heading-font-size-h5: var(--sds-global-typography-font-size-125);

    /* 18px */
    --heading-font-size-h6: var(--sds-global-typography-font-size-112);
  }
}

body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-body);
  font-size: var(--sds-global-typography-font-size-125);
  line-height: var(--sds-global-typography-line-height-150);
}

body.appear {
  display: block;
}

/* min-height, not height - the header block's own mobile drawer (see
   header.css) grows taller than this when the hamburger menu opens. A hard
   `height` here doesn't clip that growth (default overflow: visible), but
   it also doesn't reserve room for it either, so the drawer visually
   overlapped whatever follows <header> in the document instead of pushing
   it down - the same root cause already fixed once on .mc-header-inner
   inside header.css, just missed one level further out here (review round
   7, 1a: "header bar content gets kicked up slightly" once the drawer's
   real height exceeded this fixed box). */
header {
  height: auto;
  min-height: var(--nav-height-mobile);
}

/* REMOVED (review round 11 bug report): a mobile-scoped `max-height: 100vh;
   overflow-y: auto;` lived here (review round 9), meant to let the drawer's
   own overflowing content scroll rather than get silently chopped off with
   body scroll locked. Scoping it to mobile-only (round 10) fixed the
   desktop regression it had caused, but the SAME clipping mechanism was
   still live on mobile against a DIFFERENT descendant: .mc-search-results
   (the search suggestion dropdown, also inside <header>) is just as
   subject to overflow-clipping as the desktop mega-menu panel was -
   overflow other than visible clips ANY descendant that geometrically
   extends past its own box, positioned or not, REGARDLESS of z-index
   (search-results' own z-index: 20 is irrelevant to a hard geometric clip,
   which is exactly what made this so confusing to spot by eye). The real
   fix is scoping the scroll container to the thing that actually needs
   it - see header.css's #mc-nav.is-open, which now carries this instead.
   .mc-search-overlay is a SEPARATE sibling, never nested inside #mc-nav,
   so it can't be clipped by a scroll box that only wraps the drawer. */

@media (width >=900px) {
  header {
    min-height: var(--nav-height);
  }
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

body main {
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
  margin: auto;
  padding: 0 var(--space-m);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 var(--space-s);
  font-family: var(--font-heading);
  font-weight: var(--sds-global-typography-font-weight-700);
  line-height: 1.25;
  scroll-margin: 40px;
}

/* h1 is specifically styled as eyebrow element in heroes, this enables semantics
   to be used on pages that may not use hero in future.

   The `.hero h1` exclusion is for the PRE-DECORATION state. The eyebrow is now
   authored as a real `<h1>` so it reaches crawlers in the initial HTML, but at
   that point `eyebrow-element` has not been added yet - hero.js adds it during
   decoration. Without this, the bare `<h1>` matches the rule below and renders
   at full display size for the split second before JavaScript runs, then snaps
   down to the kicker size. Excluding any h1 inside .hero closes that gap; the
   real sizing still comes from `.hero h1.eyebrow-element` in hero.css. */
h1:not(.eyebrow-element, .hero h1) {
  font-size: var(--heading-font-size-h1);
  line-height: var(--sds-global-typography-line-height-450);
}

h2 {
  font-size: var(--heading-font-size-h2);
  line-height: var(--sds-global-typography-line-height-300);
}

h3 {
  font-size: var(--heading-font-size-h3);
  line-height: var(--sds-global-typography-line-height-275);
}

h4 {
  font-size: var(--heading-font-size-h4);
  line-height: var(--sds-global-typography-line-height-225);
}

h5 {
  font-size: var(--heading-font-size-h5);
  line-height: var(--sds-global-typography-line-height-200);
}

h6 {
  font-size: var(--heading-font-size-h6);
  line-height: var(--sds-global-typography-line-height-175);
}

/* Visual heading sizes, decoupled from tag semantics — e.g. Configurable
   Title's Title Style lets an h4 render at H1 size, or vice versa. */
.h1 {
  font-size: var(--heading-font-size-h1);
  line-height: var(--sds-global-typography-line-height-450);
}

.h2 {
  font-size: var(--heading-font-size-h2);
  line-height: var(--sds-global-typography-line-height-300);
}

.h3 {
  font-size: var(--heading-font-size-h3);
  line-height: var(--sds-global-typography-line-height-275);
}

.h4 {
  font-size: var(--heading-font-size-h4);
  line-height: var(--sds-global-typography-line-height-225);
}

.h5 {
  font-size: var(--heading-font-size-h5);
  line-height: var(--sds-global-typography-line-height-200);
}

.h6 {
  font-size: var(--heading-font-size-h6);
  line-height: var(--sds-global-typography-line-height-175);
}

dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

p {
  margin-bottom: var(--space-s);
  margin-top: 0;
  line-height: var(--sds-global-typography-line-height-150);
}

li {
  line-height: var(--sds-global-typography-line-height-150);
  margin-bottom: var(--space-xs);
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main>div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-underline-offset: 30%;
}

a:hover {
  color: var(--link-color-hover);
  text-decoration-color: transparent;
}

a:not(.button.primary, .button.secondary, .rail-link, .hero-breadcrumb a, .rail-drawer-section-label, .rail-drawer-title, .mc-snav a):visited {
  color: var(--link-color-visited);
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--sds-global-shape-border-radius-400);
  padding: var(--space-xs) var(--space-m);
  font: inherit;
  font-size: var(--sds-global-typography-font-size-100);
  font-weight: var(--sds-global-typography-font-weight-400);
  line-height: 1.25;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
}

a.button.link,
button.button.link {
  border-color: transparent;
  border-radius: var(--sds-global-shape-border-radius-50);
  background-color: transparent;
  color: var(--link-color);
  font-size: var(--sds-global-typography-font-size-125);
  padding: 0 var(--space-s) 0 0;
  position: relative;
  text-decoration: underline;
  text-underline-offset: 30%;
}

a.button.link:hover,
button.button.link:hover {
  color: var(--link-color-hover);

  /* `text-decoration-color` merged in from an identical selector ~20 lines
     below. Nothing between the two blocks targets these elements, so the
     computed result is the same. */
  text-decoration-color: transparent;
}

a.button.link:active,
button.button.link:active {
  color: var(--link-color-active);
}

a.button.link::after,
button.button.link::after {
  content: ' ›';
  display: inline-block;
  font-size: 1.5em;
  position: relative;
  right: -6px;
  bottom: -1.5px;
  line-height: 1;
}

.theme-primary-gradient a.button.link,
.theme-primary-gradient button.button.link {
  border-color: transparent;
  background-color: transparent;
  color: var(--sds-global-color-palette-neutral-0);
}

.theme-primary-gradient a.button.link::after,
.theme-primary-gradient button.button.link::after {
  color: var(--sds-global-color-palette-neutral-0);
}

/* stylelint-disable no-descending-specificity -- The generic
   a:not(...):visited rule earlier is (0,6,1); the title/slide selectors here are
   (0,2,1). The generic rule already wins wherever both match, so source order is
   not what decides this. Hoisting these above the global link block would
   separate them from the heading styles they belong with. */
a.button:focus-visible,
button.button:focus-visible,
.title-element a:focus-visible,
.slide-title a:focus-visible,
.slide-prev:focus-visible,
.slide-next:focus-visible,
.slide-play:focus-visible,
.video-play:focus-visible,
.rail-link:focus-visible {
  outline: 2px dashed var(--sds-global-color-palette-blue-100);
  outline-offset: 2px;
}

/* stylelint-enable no-descending-specificity */

.slide-play:focus-visible,
.video-play:focus-visible {
  outline-color: var(--sds-global-color-palette-pink-200);
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* buttons */
p.button-wrapper a.button {
  display: block;
  text-align: center;
  margin-bottom: var(--space-s);
}

p.button-wrapper a.button.link {
  max-width: 100%;
  text-wrap: wrap;
  margin-inline: auto;
}

p.button-wrapper {
  margin: var(--space-s) 0;
}

@media (width >=900px) {
  p.button-wrapper a.button {
    margin-bottom: 0;
  }

  p.button-wrapper a.button.link {
    margin-inline: unset;
  }

  p.button-wrapper {
    display: flex;
    gap: var(--space-s);
  }
}

a.button.primary,
button.button.primary {
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--link-color-inverse);
}

.theme-primary-gradient a.button.primary,
.theme-primary-gradient button.button.primary {
  border-color: var(--link-color-inverse);
  background-color: var(--link-color-inverse);
  color: var(--link-color);
}

a.button.secondary,
button.button.secondary {
  border-color: var(--link-color);
  background-color: transparent;
  color: var(--link-color);
}

a.button.primary:hover,
button.button.primary:hover,
a.button.secondary:hover,
button.button.secondary:hover {
  border-color: var(--link-color-hover);
  background-color: var(--link-color-hover);
  color: var(--link-color-inverse);
}

a.button.primary:active,
button.button.primary:active,
a.button.secondary:active,
button.button.secondary:active {
  border-color: var(--link-color-active);
  background-color: var(--link-color-active);
  color: var(--link-color-inverse);
}

a.button.primary:focus-visible,
button.button.primary:focus-visible,
a.button.secondary:focus-visible,
button.button.secondary:focus-visible {
  outline: 2px dashed var(--link-color);
  outline-offset: 2px;
}

/* stylelint no-descending-specificity: this :disabled rule (3 selectors) must
   precede the .theme-primary-gradient :hover rule below (4 selectors) even
   though :disabled logically reads as the "final" state - reordered, not
   rewritten; same effect either way since specificity (not source order)
   decides which wins. */
a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  background-color: var(--link-color-disabled);
  border-color: var(--link-color-disabled);
  color: var(--link-color-inverse);
}

/* Base (unstated) appearance, placed before the state rules for
   no-descending-specificity. Presentation is unchanged: every rule between here
   and its previous position is :hover, :active or :disabled, all of which are
   strictly more specific and therefore already won regardless of source order. */
.theme-primary-gradient a.button.secondary,
.theme-primary-gradient button.button.secondary {
  border-color: var(--link-color-inverse);
  background-color: transparent;
  color: var(--link-color-inverse);
}

.theme-primary-gradient a.button.primary:hover,
.theme-primary-gradient button.button.primary:hover,
.theme-primary-gradient a.button.secondary:hover,
.theme-primary-gradient button.button.secondary:hover {
  border-color: var(--link-color-inverse-hover);
  background-color: var(--link-color-inverse-hover);
  color: var(--sds-global-color-palette-neutral-500);
}

.theme-primary-gradient a.button.primary:active,
.theme-primary-gradient button.button.primary:active,
.theme-primary-gradient a.button.secondary:active,
.theme-primary-gradient button.button.secondary:active {
  border-color: var(--link-color-inverse-active);
  background-color: var(--link-color-inverse-active);
  color: var(--sds-global-color-palette-neutral-500);
}

.theme-primary-gradient a.button.primary[aria-disabled="true"],
.theme-primary-gradient a.button.primary[aria-disabled="true"]:hover,
.theme-primary-gradient a.button.primary[aria-disabled="true"]:focus-visible,
.theme-primary-gradient button.button.primary:disabled,
.theme-primary-gradient button.button.primary:disabled:hover,
.theme-primary-gradient button.button.primary:disabled:focus-visible {
  background-color: var(--link-color-inverse);
  border-color: var(--link-color-inverse);
  color: var(--link-color-disabled);
}

/* stylelint no-descending-specificity: same reordering reason as the primary
   button's :disabled rule above. */
/* stylelint-disable no-descending-specificity -- (0,3,1) against the themed
   :hover at (0,4,1), which wins on specificity regardless of order. This rule
   belongs with the other disabled-state rules. */
a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  background-color: transparent;
  border-color: var(--link-color-disabled);
  color: var(--link-color-disabled);
}

/* stylelint-enable no-descending-specificity */

/* stylelint no-descending-specificity: this .theme-primary-gradient
   :focus-visible group covers plain, .primary and .secondary buttons alike,
   so it must come after all of those variants above (and their own
   :disabled/:hover overrides) even though it reads more naturally next to
   the plain :focus-visible rule earlier in the file - reordered, not
   rewritten. */
/* stylelint-disable no-descending-specificity -- (0,4,1) against a
   :disabled:hover at (0,5,1). A focus ring and a disabled-hover state do not
   apply to the same element in practice, and the more specific rule wins. */
.theme-primary-gradient a.button:focus-visible,
.theme-primary-gradient button.button:focus-visible,
.theme-primary-gradient a.button.primary:focus-visible,
.theme-primary-gradient button.button.primary:focus-visible,
.theme-primary-gradient a.button.secondary:focus-visible,
.theme-primary-gradient button.button.secondary:focus-visible,
.theme-primary-gradient .title-element a:focus-visible,
.theme-primary-gradient .slide-title a:focus-visible,
.theme-primary-gradient .slide-prev:focus-visible,
.theme-primary-gradient .slide-next:focus-visible {
  outline-color: var(--link-color-inverse);
}

/* stylelint-enable no-descending-specificity */

/* high-impact call-to-action */
a.button.accent,
button.button.accent {
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--background-color);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  border-color: var(--link-color-hover);
  background-color: var(--link-color-hover);
}

a.button.accent[aria-disabled="true"],
a.button.accent[aria-disabled="true"]:hover,
a.button.accent[aria-disabled="true"]:focus-visible,
button.button.accent:disabled,
button.button.accent:disabled:hover,
button.button.accent:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

.button-wrapper a.button.icon-docs,
.button-wrapper a.button.icon-pin,
.button-wrapper a.button.icon-phone,
.button-wrapper a.button.icon-mail,
.button-wrapper button.button.icon-docs,
.button-wrapper button.button.icon-pin,
.button-wrapper button.button.icon-phone,
.button-wrapper button.button.icon-mail {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: var(--sds-global-shape-border-radius-50);
  padding: 0;
  background: none;
  color: var(--accent);
  font-size: var(--body-font-size-m);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 30%;
}

.button-wrapper a.button.icon-docs:hover,
.button-wrapper a.button.icon-pin:hover,
.button-wrapper a.button.icon-phone:hover,
.button-wrapper a.button.icon-mail:hover,
.button-wrapper button.button.icon-docs:hover,
.button-wrapper button.button.icon-pin:hover,
.button-wrapper button.button.icon-phone:hover,
.button-wrapper button.button.icon-mail:hover {
  text-decoration-color: transparent;
  color: var(--link-color-hover);
}

.button-wrapper a.button.icon-docs:active,
.button-wrapper a.button.icon-pin:active,
.button-wrapper a.button.icon-phone:active,
.button-wrapper a.button.icon-mail:active,
.button-wrapper button.button.icon-docs:active,
.button-wrapper button.button.icon-pin:active,
.button-wrapper button.button.icon-phone:active,
.button-wrapper button.button.icon-mail:active {
  text-decoration-color: transparent;
  color: var(--link-color-active);
}

.button-wrapper a.button.icon-docs:focus-visible,
.button-wrapper a.button.icon-pin:focus-visible,
.button-wrapper a.button.icon-phone:focus-visible,
.button-wrapper a.button.icon-mail:focus-visible,
.button-wrapper button.button.icon-docs:focus-visible,
.button-wrapper button.button.icon-pin:focus-visible,
.button-wrapper button.button.icon-phone:focus-visible,
.button-wrapper button.button.icon-mail:focus-visible {
  outline-offset: 4px;
}

a.button.icon-docs::before,
button.button.icon-docs::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.25 22.5H3.75V1.5H16.0605L20.25 5.68946V22.5ZM5.25 21H18.75V6.31054L15.4395 3H5.25V21Z' fill='%230057B8'/%3E%3Cpath d='M15.75 18H7.5V16.5H15.75V18ZM12.75 12.75H7.5V14.25H12.75V12.75ZM14.25 9H7.5V10.5H14.25V9Z' fill='%230057B8'/%3E%3C/svg%3E");
}

a.button.icon-phone::before,
button.button.icon-phone::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1793 11.8875L13.5843 14.49L9.51175 10.425L12.1068 7.8225L5.78425 1.5L2.56675 4.7175C0.189251 7.095 1.86175 11.8425 6.82675 16.815L7.04425 17.025L7.19425 17.175C12.1668 22.1475 16.9443 23.82 19.2843 21.4425L22.5018 18.2175L16.1793 11.8875ZM18.2568 20.34C16.5993 21.99 12.3768 20.25 8.25175 16.11L8.04175 15.8925L7.89175 15.7425C3.75175 11.625 2.01175 7.4025 3.66175 5.7525L5.78425 3.6225L9.98425 7.8225L8.44675 9.36L7.38925 10.425L8.44675 11.4825L12.5193 15.5475L13.5843 16.6125L14.6418 15.5475L16.1793 14.01L20.3793 18.2175L18.2568 20.34Z' fill='%230057B8'/%3E%3C/svg%3E");
}

a.button.icon-pin::before,
button.button.icon-pin::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0007 0C9.98302 0.0296267 8.05963 0.859168 6.65327 2.30631C5.24692 3.75345 4.47269 5.69976 4.50074 7.7175C4.49992 8.77872 4.71158 9.82937 5.12324 10.8075L12.0007 24L18.9082 10.725C19.3012 9.77372 19.5025 8.75424 19.5007 7.725C19.5156 6.72528 19.3334 5.73243 18.9645 4.80313C18.5957 3.87384 18.0473 3.02631 17.3509 2.30896C16.6544 1.5916 15.8235 1.01847 14.9055 0.622298C13.9875 0.226123 13.0005 0.014665 12.0007 0ZM17.5507 10.095L12.0007 20.7525L6.48074 10.17C6.16275 9.3915 5.99971 8.55844 6.00074 7.7175C5.97463 6.09815 6.59147 4.53447 7.71611 3.36906C8.84075 2.20365 10.3815 1.53155 12.0007 1.5C13.62 1.53155 15.1607 2.20365 16.2854 3.36906C17.41 4.53447 18.0268 6.09815 18.0007 7.7175C18.0037 8.53144 17.851 9.33844 17.5507 10.095Z' fill='%230057B8'/%3E%3Cpath d='M12.0015 4.5C11.4081 4.5 10.8281 4.67595 10.3348 5.00559C9.84141 5.33524 9.45689 5.80377 9.22983 6.35195C9.00276 6.90013 8.94335 7.50333 9.05911 8.08527C9.17486 8.66721 9.46059 9.20176 9.88014 9.62132C10.2997 10.0409 10.8343 10.3266 11.4162 10.4424C11.9981 10.5581 12.6013 10.4987 13.1495 10.2716C13.6977 10.0446 14.1662 9.66006 14.4959 9.16671C14.8255 8.67336 15.0015 8.09334 15.0015 7.5C15.0015 6.70435 14.6854 5.94129 14.1228 5.37868C13.5602 4.81607 12.7971 4.5 12.0015 4.5ZM12.0015 9C11.7048 9 11.4148 8.91203 11.1681 8.7472C10.9214 8.58238 10.7292 8.34811 10.6156 8.07403C10.5021 7.79994 10.4724 7.49834 10.5303 7.20736C10.5882 6.91639 10.731 6.64912 10.9408 6.43934C11.1506 6.22956 11.4179 6.0867 11.7088 6.02882C11.9998 5.97094 12.3014 6.00065 12.5755 6.11418C12.8496 6.22771 13.0838 6.41997 13.2487 6.66665C13.4135 6.91332 13.5015 7.20333 13.5015 7.5C13.5015 7.89782 13.3434 8.27936 13.0621 8.56066C12.7808 8.84196 12.3993 9 12.0015 9Z' fill='%230057B8'/%3E%3C/svg%3E");
}

a.button.icon-mail::before,
button.button.icon-mail::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,6V26H30V6ZM28,24H4V9.89l10.84,7.74,1.16.83,1.16-.83L28,9.89ZM16,16,4.8,8H27.2Z' fill='%230057B8'/%3E%3C/svg%3E");
}

.button-wrapper a.button.icon-docs::before,
.button-wrapper a.button.icon-pin::before,
.button-wrapper a.button.icon-phone::before,
.button-wrapper a.button.icon-mail::before,
.button-wrapper button.button.icon-docs::before,
.button-wrapper button.button.icon-pin::before,
.button-wrapper button.button.icon-phone::before,
.button-wrapper button.button.icon-mail::before {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: var(--icon-m);
  width: var(--icon-m);
}

.icon img {
  height: 100%;
  width: 100%;
}

.default-content-wrapper p:has(picture) {
  margin-bottom: 0;
}

.default-content-wrapper picture img {
  border-radius: var(--sds-global-shape-border-radius-400);
}

/* sections */
main>.section {
  margin: var(--space-m) 0;
}

main>.section>div {
  max-width: var(--content-max);
  margin: auto;
}

main>.section:first-of-type {
  margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--sds-global-color-palette-blue-10);
  margin: 0;
  margin-left: calc(var(--space-m) * -1);
  padding-top: var(--space-2xl);
  width: 100vw;
}

@media (width >=900px) {
  main .section.light,
  main .section.highlight {
    border-radius: var(--sds-global-shape-border-radius-400);
    margin-left: unset;
    padding-inline: 0;
    width: 100%;
  }
}

/* =========================================================================
   DESIGN SYSTEM FOUNDATION — additive layer over the boilerplate.
   Design TOKENS live in the main :root above (merged there so there's a
   single canonical :root — stylelint `no-duplicate-selectors`). This section
   holds the layout utilities + block variants that build on those tokens.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SECTION WIDTH SYSTEM
   The base `main > .section > div` (up top, boilerplate) already centers a
   --content-max column. Expand/opt-out per section with a Section-Metadata
   Style: "wide" (wider column) or "full-width" (edge-to-edge).
   ------------------------------------------------------------------------- */
main>.section.wide>div {
  max-width: var(--content-wide);
}

main>.section.full-width>div {
  max-width: none;
}

main>.section.full-width {
  margin-inline: 0;
}

/* Centered intro — Section Style: "centered" (legacy Section Metadata value)
   or "Centered text" (models/_section.json's Style multiselect). Centers a
   plain text section's default content (heading + paragraph), used ahead of
   card rows whose Figma frame centers the intro copy above the grid (e.g.
   "Support services", node 1565:9917). Generic to any section, not
   mediacard-specific. */

main>.section.center-text>div:not(.accordion-wrapper, .carousel-wrapper) {
  text-align: center;
  max-width: var(--content-centered-max);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* Narrow Margin styles */
@media (width >=900px) {
  main>.section.narrow-margin {
    margin-inline: var(--space-xl);
  }

  main>.section.narrow-margin.split-start {
    margin-inline: var(--space-xl) 0;
  }

  main>.section.narrow-margin.split-end {
    margin-inline: 0 var(--space-xl);
  }
}

/* -------------------------------------------------------------------------
   SPLIT SECTIONS — Section-Metadata Style "split-start" on one section,
   "split-end" on the very next one, lays the pair side by side. Each side
   stays a normal, independently-authored section — any default content or
   blocks, any count — because neither is nested inside the other. That's
   the point: EDS has no support for nesting one block inside another (see
   aem.live/docs/faq), which is exactly what breaks if you instead try to
   put varied content into a Columns block's own cells. Pairing sibling
   SECTIONS never hits that limit, since section > block is the one level
   of nesting that's always supported, no matter how many blocks a section
   holds side by side.

   `main:has(...)` scopes the grid to only the row(s) that actually contain
   a matched pair — every other section on the page (unpaired, or no split
   present at all) stays full-width and stacked exactly as before. A lone
   "split-start" with no "split-end" right after it (or vice versa) simply
   doesn't match, so it renders normally too — no way to half-break this by
   forgetting the partner.

   Mobile: no grid — both sections stack normally, in document order, same
   as the care-journey template's rail (`body.care-journey main` above)
   collapses on narrow screens. Desktop only, same breakpoint convention.

   Scoped to `body:not(.care-journey)` — the care-journey page shell defines
   its own split-start/split-end columns (below) nested inside its content
   column. Without this scope, both rules set conflicting
   `grid-template-columns` on the same `main` and this one wins on
   specificity (four classes in its `:has()` argument beat the page shell's
   one), silently blowing away the rail's narrow/wide column split. */

.section.split-start:has(.default-content-wrapper) {
  margin-bottom: 0;
}

/* Mobile-only: when both halves of a split pair wrap nothing but a single
   UL (e.g. two checkmark-list sections), collapse the gap between them so
   the pair reads as one continuous list once they stack. Desktop leaves
   them alone — the grid above already sits them side by side. */
@media (width < 900px) {
  .section.split-start:has(> .default-content-wrapper:only-child > ul:only-child) {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .section.split-end:has(> .default-content-wrapper:only-child > ul:only-child) {
    margin-top: 0;
    padding-top: 0;
  }

  .section.split-start:has(> .default-content-wrapper:only-child > ul:only-child) ul,
  .section.split-end:has(> .default-content-wrapper:only-child > ul:only-child) ul {
    margin: 0;
  }
}

@media (width >=900px) {
  body:not(.care-journey) main:has(> .section.split-start + .section.split-end) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-xl);
    align-items: start;
  }

  body:not(.care-journey) main:has(> .section.split-start + .section.split-end)>.section {
    grid-column: 1 / -1;
  }

  body:not(.care-journey) main:has(> .section.split-start + .section.split-end)>.section.split-start {
    grid-column: 1;
  }

  body:not(.care-journey) main:has(> .section.split-start + .section.split-end)>.section.split-end {
    grid-column: 2;
  }
}

/* When a split-start or split-end section leads with a Configurable
   Title, nudge it down so it lines up with the other side rather than
   hugging the top of the grid row. */
.section.split-start>.configurable-title-wrapper:first-child,
.section.split-end>.configurable-title-wrapper:first-child {
  margin-top: var(--space-m);
}

.section.split-end.mediacard-container>.mediacard-wrapper:first-child:has(~ .mediacard-wrapper) .mediacard {
  margin-top: 0;
}

/* Mobile stacking order — Section-Metadata Style "reverse-mobile" on
   split-start moves it after its split-end partner once the pair collapses
   to a single column below 900px. This is handled in JS (decorateSplitSections
   in scripts.js), not CSS: flex/grid `order` is a single ranking across every
   child of `main`, so a rule that pushes one pair's sections around also
   catches any later, unrelated split pair's sections — it doesn't compose
   across multiple reversed pairs on the same page. Moving the actual DOM
   node sidesteps that; a resize listener there restores natural order above
   900px, since desktop's `grid-column` assignment above is class-based (not
   order-based) but reading/tab order should still follow the visual
   left-to-right layout at that breakpoint. */

/* -------------------------------------------------------------------------
   12-COLUMN GRID — opt-in utility for sections/blocks that want it.
   ------------------------------------------------------------------------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* -------------------------------------------------------------------------
   CARE-JOURNEY TEMPLATE — page-shell layout with a sticky step rail (narrow
   column 1) and a wide content column (columns 2–3) to its right. Content
   column is itself split into two sub-tracks so a split-start/split-end pair
   can sit side by side WITHIN the content column's own margins, instead of
   spanning the full main (see split-start/split-end override below). Triggered
   by body.care-journey (from `template: care-journey` metadata in
   preview/prod; set defensively by the care-journey-rail block in the local
   dev loop — see blocks/care-journey-rail/care-journey-rail.js). This is a
   page-template concern, NOT a block concern, so it lives here (eager) rather
   than in care-journey-rail.css (lazy) — the grid is ready the moment the body
   class lands, minimizing layout shift.

   Mobile: no grid — see the `@media (width < 900px)` block below instead,
   which hoists the rail's own section to the top via flex `order` (same
   "same data, very different layout" idea as the header's mobile drawer
   regroup — see memory eds-display-contents-breakpoint-unwrap — just via
   `order` here rather than `display:contents`, since the rail's section is
   already a direct child of `main`, not nested behind an extra wrapper).
   Desktop only: ------------------------------------------------------------- */
@media (width >=900px) {
  body.care-journey main {
    display: grid;

    /* Named tracks instead of column-gap: grid only supports ONE gap value
       across an entire axis, but the design wants two different gaps
       (72px rail↔content, 40px between the split-start/split-end pair)
       on the SAME axis. Modeling each gap as its own fixed-width, unnamed-
       content track — instead of relying on `column-gap` — gets both
       values without a filler div (the "filler" is just an empty grid
       track, not a DOM element). column-gap stays 0; every gap in this
       layout is now an explicit track. */
    grid-template-columns:
      [rail-start] minmax(240px, 18rem) [rail-end]
      var(--space-7xl)
      [content-start split-start-start] minmax(0, 1fr) [split-start-end]
      var(--space-xl)
      [split-end-start] minmax(0, 1fr) [split-end-end content-end]
      var(--space-7xl) [end];
    column-gap: 0;

    /* Explicit auto rows so the rail's `grid-row: 1 / -1` spans the whole
       stack. `-1` only counts to the last EXPLICIT line, and empty auto rows
       collapse to 0 — so this reserves full height with no blank space.
       50 is a safe upper bound on bands per journey page (~10 in practice). */
    grid-template-rows: repeat(50, auto);
    align-items: start;
    margin-inline: auto;
    padding-inline: 32px;
  }

  /* content bands span the full content width (both split sub-tracks plus
     the 40px track between them); the grid owns the width now, so drop the
     inner div's self-centering/padding (rail gap + page padding handle it) */
  body.care-journey main>.section {
    grid-column: content-start / content-end;

    /* margin block sets bottom to default equivalent of large spacing, which can be adjusted at the section level to achieve dividers and larger spacing */
    margin-block: 0 var(--sds-global-dimension-space-1000);
  }

  body.care-journey main>.section:first-of-type {
    margin-top: 0;
  }

  body.care-journey main>.section>div {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Hero: if a page opens with one, it runs full-bleed across every
     column — the rail + content split only starts on the row below it.
     Targets `.hero-container`, not `.hero` — the "hero" class lives on the
     BLOCK (one level inside the section, per decorateBlock()'s
     `${shortBlockName}-container` convention in aem.js); the section itself
     only ever gets `hero-container` (see blocks/hero/hero.css, which relies
     on the same convention). `.section.hero` never matches anything. */
  body.care-journey main>.section.hero-container {
    grid-column: rail-start / end;
    margin: 0;
  }

  /* Split-start/split-end pair: each takes one content sub-track instead of
     spanning both, laying them side by side but confined to the content
     column's own width/margins (not the rail column, not the full main). */
  body.care-journey main>.section.split-start {
    grid-column: split-start-start / split-start-end;
  }

  body.care-journey main>.section.split-end {
    grid-column: split-end-start / split-end-end;
  }

  /* the rail section: column 1, spans every row, sticky within.
     align-self: stretch overrides the grid's `align-items: start` for THIS
     item only — the section must fill its full spanned height so the sticky
     .care-journey-rail child has room to travel (without it the section is
     only as tall as the rail and sticky has nowhere to stick). */
  body.care-journey main>.section:has(.care-journey-rail) {
    grid-column: rail-start / rail-end;
    grid-row: 1 / -1;
    margin: 0;
    align-self: stretch;

    /* Insets the rail's own text/links 24px from the column's right edge —
       narrower than the 72px gutter track to its right, so the visual
       divider between rail and content sits closer to the rail than to the
       body copy. Ordinary padding on the rail's own track, not a grid gap. */
    padding-right: var(--space-m);
  }

  body.care-journey main>.section.care-journey-rail-container + .section,
  body.care-journey main>.section.fragment-container:has(.care-journey-rail-container) + .section {
    padding-top: var(--space-8xl);
  }

  /* ...unless a hero precedes it — then the rail spans from row 2 down, so it
     doesn't run alongside the full-width hero in row 1. */
  body.care-journey main>.section.hero-container~.section:has(.care-journey-rail) {
    grid-row: 2 / -1;
  }

  /* Stick the section's block-wrapper (EDS's .care-journey-rail-wrapper), a
     short child of the full-height section, so it has room to travel.
     Sticking the inner .care-journey-rail instead fails: its containing block
     is this wrapper, which is only as tall as the rail itself (no travel
     room).

     `top` is just breathing room from the viewport edge, not the header's
     own height — confirmed the global header (.mc-header) is
     `position: relative`, not sticky/fixed, so it scrolls away like any
     other content instead of staying pinned. The old
     `calc(var(--nav-height) + var(--space-l))` assumed a pinned header
     still occupying that space once scrolled past, which left the rail
     sticking ~137px down with a dead gap above it (Kelly, 2026-09-10). */
  body.care-journey main>.section:has(.care-journey-rail)>div {
    padding: 0;
    position: sticky;
    top: var(--space-l);
  }
}

/* MOBILE: hoist the rail's own section above everything else — including a
   hero, if the page has one — so it sits right under the global header like
   a secondary nav (Kelly, 2026-09-10). Rail vs. hero authoring order isn't
   consistent across real pages (the desktop rule above already has to
   handle both, via `~`), so this can't assume DOM order either: `order: -1`
   sorts the rail's section first regardless of where it's actually authored,
   without moving it in the DOM (every other section keeps its default
   `order: 0`, so nothing else needs touching). `.rail-mobile-bar` already
   looks like a secondary nav bar (pale-blue full-width row) — this only
   repositions it, no visual changes needed there. */
@media (width < 900px) {
  /* No display:flex needed here — `body main` (boilerplate, unscoped,
     line ~409) already sets flex/column at every breakpoint, so `order`
     below already has a flex context to work in. */

  /* Full-bleed too (Kelly, 2026-09-10), and flush against the header above
     (no standing top/bottom margin like a normal section gets from the
     boilerplate's `main>.section { margin: var(--space-m) 0 }`). `body main`
     itself carries real horizontal padding (`padding: 0 var(--space-m)`,
     line ~414) — first pass here wrongly assumed it didn't, so max-width/
     margin-inline on the section's own inner div wasn't enough; the
     SECTION's own box still sat inside that padding. Same negative-margin +
     100vw trick already established by .section.light/.highlight above
     (which exists for the same reason: bleeding past a padded ancestor) —
     width:100vw takes over the box's own width outright, so only the LEFT
     margin needs canceling to anchor it at the viewport edge. */
  body.care-journey main>.section:has(.care-journey-rail) {
    order: -1;
    margin: 0;
    margin-left: calc(var(--space-m) * -1);
    width: 100vw;
  }

  body.care-journey main>.section:has(.care-journey-rail)>div {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ------- SECTION STYLE DECORATORS --------
  These are added to section level blocks to acheive certain styles on the section itself or elements within the section.
*/

.section.full-image img {
  width: 100%;
}

/* list variants */

.section.checkmark-list ul,
.section.dot-list ul {
  list-style: none;
  padding-left: 0;
}

.section.checkmark-list ul li {
  position: relative;
  padding-left: var(--space-l);
  line-height: var(--sds-global-typography-line-height-150);
  margin-bottom: var(--space-xs);
}

.section.dot-list ul li {
  position: relative;
  padding-left: var(--space-xl);
}

.section.checkmark-list ul li::before {
  content: "";
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--sds-global-color-palette-red-50);
  transform: rotate(-45deg);
  top: var(--space-2xs);
  left: 0;
  width: 16px;
  height: 6px;
  position: absolute;
  margin-right: var(--space-xs);
}

.section.dot-list ul li::before {
  content: "";
  background-color: var(--sds-global-color-palette-red-50);
  border-radius: 50%;
  top: var(--space-2xs);
  left: var(--space-xs);
  width: 10px;
  height: 10px;
  position: absolute;
  margin-right: var(--space-xs);
}

/* spacing */

body main>.section.top-spacing-s,
body.care-journey main>.section.top-spacing-s {
  margin-top: var(--sds-global-dimension-space-300);
}

body main>.section.bottom-spacing-s,
body.care-journey main>.section.bottom-spacing-s {
  margin-bottom: var(--sds-global-dimension-space-300);
}

body main>.section.top-spacing-l,
body.care-journey main>.section.top-spacing-l {
  margin-top: var(--sds-global-dimension-space-600);
}

@media (width >=900px) {
  body main>.section.top-spacing-none,
  body.care-journey main>.section.top-spacing-none {
    margin-top: 0;
  }

  body main>.section.bottom-spacing-none,
  body.care-journey main>.section.bottom-spacing-none {
    margin-bottom: 0;
  }

  body main>.section.top-spacing-s,
  body.care-journey main>.section.top-spacing-s {
    margin-top: var(--sds-global-dimension-space-500);
  }

  body main>.section.bottom-spacing-s,
  body.care-journey main>.section.bottom-spacing-s {
    margin-bottom: var(--sds-global-dimension-space-500);
  }

  body main>.section.top-spacing-l,
  body.care-journey main>.section.top-spacing-l {
    margin-top: var(--sds-global-dimension-space-1000);
  }

  body main>.section.vertically-centered,
  body.care-journey main>.section.vertically-centered {
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* dividers */

.section.divider-top,
.section.divider-bottom {
  position: relative;
}

.section.divider-top::before,
.section.divider-bottom::after {
  content: '';
  height: 1px;
  border-top: 1px dashed var(--line);
  position: absolute;
  left: 0;
  width: 100%;
}

.section.divider-top::before {
  top: 0;
}

.section.bottom-spacing-none.divider-bottom::after {
  bottom: 0;
}

.section.top-spacing-s.divider-top::before {
  top: calc(var(--sds-global-dimension-space-300) * -1);
}

.section.top-spacing-l.divider-top::before {
  top: calc(var(--sds-global-dimension-space-600) * -1);
}

/* default bottom margin is equal to large */
.section.divider-bottom::after {
  bottom: calc(var(--sds-global-dimension-space-600) * -1);
}


.section.bottom-spacing-s.divider-bottom::after {
  bottom: calc(var(--sds-global-dimension-space-300) * -1);
}

@media (width >=900px) {
  .section.top-spacing-s.divider-top::before {
    top: calc(var(--sds-global-dimension-space-500) * -1);
  }

  .section.top-spacing-l.divider-top::before {
    top: calc(var(--sds-global-dimension-space-1000) * -1);
  }

  /* default bottom margin is equal to large */
  .section.divider-bottom::after {
    bottom: calc(var(--sds-global-dimension-space-1000) * -1);
  }


  .section.bottom-spacing-s.divider-bottom::after {
    bottom: calc(var(--sds-global-dimension-space-500) * -1);
  }
}

/* -------------------------------------------------------------------------
   VIDEO MODAL — dialog built by createModal() (scripts.js) for any
   `data-video-modal` trigger (see initVideoModals). Formerly lived in
   blocks/modal/modal.css alongside an author-facing Modal block that has
   since been removed; only the video-embed use remains.
   ------------------------------------------------------------------------- */
body.modal-open {
  overflow: hidden;
}

.modal dialog::backdrop {
  background-color: color-mix(in srgb, var(--overlay-color) 75%, transparent);
}

.modal dialog {
  overscroll-behavior: none;
  overflow-y: hidden;
  width: calc(100vw - 48px);
  max-width: 900px;
  max-height: calc(100dvh - (2 * var(--header-height)));
  padding: 0;
  border: 1px solid var(--dark-color);
  border-radius: var(--sds-global-shape-border-radius-400);
}

.modal dialog .modal-content {
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: none;
  width: 100%;
  max-height: 90vh;
  padding: var(--space-xl);
  padding-top: 0;
  margin-top: var(--space-xl);
}

@media (width >=900px) {
  .modal dialog {
    width: calc(100vw - 64px);
  }

  .modal dialog .modal-content {
    max-height: 90vh;
  }
}

.modal .close-button {
  position: absolute;
  top: 0;
  cursor: pointer;
  right: 0;
  width: var(--space-m);
  height: var(--space-m);
  margin: 0;
  border: none;
  border-radius: 0;
  padding: var(--space-m);
  background-color: transparent;
  line-height: 0;
}

.modal .close-button .icon.icon-close {
  content: '';
  width: var(--space-s);
  height: var(--space-s);
}

.modal .close-button .icon.icon-close::before,
.modal .close-button .icon.icon-close::after {
  content: '';
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: var(--space-s);
  height: 2px;
  border-radius: 2px;
  background-color: var(--sds-global-color-palette-blue-100);
}

.modal .close-button .icon.icon-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal dialog .section {
  padding: 0;
}

.modal .video-modal-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.modal .video-modal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Skip link — WCAG 2.4.1 Bypass Blocks. Off-canvas until focused, matching how
   mayoclinic.org hides its own (`.cmp-skip-to-main__link`). Deliberately NOT
   `display: none` or `visibility: hidden`: either would take it out of the
   focus order, which is the one thing it exists to be in. */
.skip-to-main {
  position: absolute;
  z-index: 999;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-main:focus {
  left: var(--space-s, 1rem);
  top: var(--space-s, 1rem);
  width: auto;
  height: auto;
  padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
  background: var(--background-color, #fff);
  color: var(--link-color, #0057b8);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--body-font-size-m, 1rem);
  border: 2px solid currentcolor;
  border-radius: 4px;
  overflow: visible;
}

/* <main> takes tabindex="-1" so the skip link can move focus there. Suppress
   the outline it would otherwise draw on that programmatic focus - the link's
   own focus ring already showed the user where they were. */
main:focus {
  outline: none;
}