/**
 * MOD-014: Dental Compass UI Foundation - core components.
 *
 * Every rule here is either a standalone component class (.dc-btn,
 * .dc-badge, .dc-card, .dc-icon, .dc-trust-strip, .dc-journey) that is
 * opt-in wherever a template adds the class, or explicitly scoped to
 * one of the four pilot surfaces' existing container/ID selectors -
 * nothing here changes the visual appearance of pages outside the
 * pilot surfaces. The one deliberate exception is the shared
 * :focus-visible ring at the bottom of this file: a genuine
 * accessibility requirement (visible keyboard focus), applied
 * uniformly rather than inconsistently across only four pages - see
 * implementation/Implementation-Tracker.md MOD-014 Architectural
 * Health for the reasoning.
 *
 * Depends on dc-tokens.css (loaded first via the library definition) -
 * every colour/spacing/radius/shadow value below is a var(--dc-*)
 * reference, never a hard-coded value, so the palette can be adjusted
 * in exactly one place.
 */

/* =========================================================
   Buttons
   ========================================================= */

.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-2);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
  line-height: var(--dc-line-height-tight);
  padding: var(--dc-space-3) var(--dc-space-5);
  border-radius: var(--dc-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dc-transition-fast),
    border-color var(--dc-transition-fast), color var(--dc-transition-fast),
    transform var(--dc-transition-fast);
}

/* Brand Experience Polish: a small lift on every real button site-wide
   - skipped for disabled/aria-disabled so an inert control (e.g. "Become
   a Dental Compass Clinic") never appears interactive. */
.dc-btn:not(:disabled):not([aria-disabled="true"]):hover,
.dc-btn:not(:disabled):not([aria-disabled="true"]):focus-visible {
  transform: translateY(-1px);
}

.dc-btn--primary {
  background-color: var(--dc-color-teal-600);
  color: var(--dc-color-white);
}

.dc-btn--primary:hover,
.dc-btn--primary:focus-visible {
  background-color: var(--dc-color-teal-700);
}

.dc-btn--secondary {
  background-color: var(--dc-color-white);
  border-color: var(--dc-color-navy-500);
  color: var(--dc-color-navy-700);
}

.dc-btn--secondary:hover,
.dc-btn--secondary:focus-visible {
  background-color: var(--dc-color-blue-100);
}

.dc-btn--tertiary {
  background-color: transparent;
  border-color: transparent;
  color: var(--dc-color-teal-700);
  padding-inline: var(--dc-space-1);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dc-btn--tertiary:hover,
.dc-btn--tertiary:focus-visible {
  color: var(--dc-color-teal-600);
}

.dc-btn--destructive {
  background-color: var(--dc-color-white);
  border-color: var(--dc-color-danger-600);
  color: var(--dc-color-danger-600);
}

.dc-btn--destructive:hover,
.dc-btn--destructive:focus-visible {
  background-color: var(--dc-color-danger-100);
}

.dc-btn:disabled,
.dc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================
   Status badges
   ========================================================= */

.dc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-1);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-xs);
  font-weight: var(--dc-font-weight-semibold);
  line-height: 1;
  padding: var(--dc-space-1) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  white-space: nowrap;
}

.dc-badge--verified {
  background-color: var(--dc-color-teal-100);
  color: var(--dc-color-teal-700);
}

.dc-badge--saved {
  /* stone-500 on stone-100 measures ~2.8:1 - fails WCAG AA (found by
     checking contrast ratios during Stage 1 manual verification; this
     badge is actually live on the Patient Account pilot page). Added
     --dc-color-stone-700 for ~6.6:1 instead of reusing stone-500
     anywhere text needs to sit on the pale stone-100 background. */
  background-color: var(--dc-color-stone-100);
  color: var(--dc-color-stone-700);
}

.dc-badge--registered {
  background-color: var(--dc-color-navy-500);
  color: var(--dc-color-white);
}

.dc-badge--new {
  /* gold-600 text on gold-100 measures ~3.2:1 - below WCAG AA's 4.5:1
     for normal-size text (found by checking contrast ratios during
     Stage 1 manual verification, not assumed) - navy-700 keeps the
     pale gold background (gold "used sparingly" as an accent) while
     giving ~11:1 contrast. */
  background-color: var(--dc-color-gold-100);
  color: var(--dc-color-navy-700);
}

.dc-badge--informational {
  background-color: var(--dc-color-info-100);
  color: var(--dc-color-info-600);
}

/* =========================================================
   Cards
   ========================================================= */

.dc-card {
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  padding: var(--dc-space-6);
  height: 100%;
  box-sizing: border-box;
}

.dc-card__title {
  font-size: var(--dc-font-size-md);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-ink-900);
  margin: 0 0 var(--dc-space-2);
}

.dc-card__meta {
  font-size: var(--dc-font-size-sm);
  color: var(--dc-color-ink-600);
  margin: 0 0 var(--dc-space-2);
}

.dc-card__footer {
  display: flex;
  align-items: center;
  gap: var(--dc-space-3);
  margin-top: var(--dc-space-4);
  flex-wrap: wrap;
}

/* Clinic card shell - a clinic identity + verification state. */
.dc-card--clinic {
  border-top: 3px solid var(--dc-color-teal-600);
}

/* Saved-item card - a patient's own saved clinic/comparison. */
.dc-card--saved {
  background-color: var(--dc-color-blue-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-4);
  flex-wrap: wrap;
}

/* Event card - a consultation event summary. */
.dc-card--event {
  border-top: 3px solid var(--dc-color-stone-500);
}

/* =========================================================
   Icon wrapper
   ========================================================= */

.dc-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}

.dc-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dc-icon--sm {
  width: 1em;
  height: 1em;
}

.dc-icon--lg {
  width: 1.75em;
  height: 1.75em;
}

/* =========================================================
   Illustrations (EXPERIENCE-001) - bespoke, larger, decorative
   graphics, distinct from .dc-icon (small inline glyphs next to
   text). Each illustration's own <svg> carries its own viewBox and
   fixed internal proportions; this wrapper only makes it scale
   responsively to its container's width.
   ========================================================= */

.dc-illustration {
  display: block;
  width: 100%;
  /* Brand Experience Polish: one shared clip radius for every
     illustration rather than each SVG baking in its own corner radius
     (the two disagreed in practice - the wrapper's clip and the SVG's
     own <rect rx> never lined up at the same rendered size, producing
     a visible seam). The homepage's illustration markup no longer sets
     its own background-rect rx; this is the single source of it. */
  border-radius: var(--dc-radius-md);
  overflow: hidden;
}

.dc-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dc-transition-base);
}

/* The hero illustration is large enough to read better with a more
   generous radius than a small card thumbnail - still drawn from the
   same token scale, not a new hard-coded value. Reuses the existing
   per-name modifier class dc-illustration.html.twig already emits
   (dc-illustration--{name}), not a new one invented for this. */
.dc-illustration--hero {
  border-radius: var(--dc-radius-lg);
}

/* =========================================================
   Trust strip
   ========================================================= */

.dc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-5);
  list-style: none;
  margin: 0;
  padding: var(--dc-space-4) 0;
  border-block: 1px solid var(--dc-color-border);
}

.dc-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-medium);
  color: var(--dc-color-navy-700);
  flex: 1 1 10rem;
}

.dc-trust-strip__item .dc-icon {
  color: var(--dc-color-teal-600);
}

/* =========================================================
   Journey indicator
   ========================================================= */

.dc-journey {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-journey__step {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-font-size-xs);
  font-weight: var(--dc-font-weight-medium);
  /* ink-400 on blue-50 measures ~3.3:1 - below WCAG AA for this
     small (font-size-xs) text (found by checking contrast ratios
     during Stage 1 manual verification; this is the default/upcoming
     step style, live on the Patient Account page for every step after
     "current"). ink-600 gives ~6.6:1 against the same background. */
  color: var(--dc-color-ink-600);
  padding: var(--dc-space-2) var(--dc-space-3);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-color-blue-50);
}

.dc-journey__step--complete {
  color: var(--dc-color-teal-700);
  background-color: var(--dc-color-teal-100);
}

.dc-journey__step--current {
  color: var(--dc-color-white);
  background-color: var(--dc-color-teal-600);
  font-weight: var(--dc-font-weight-semibold);
}

/* =========================================================
   Form controls - .dc-form-controls is the reusable component class
   (used by the /design-system showcase and available to any future
   surface); the ID-scoped selectors below are the same rules applied
   to the three pilot forms without requiring a wrapper markup change
   to each one - nothing outside these opts in, so nothing outside
   them (admin forms, other content forms) changes appearance.
   ========================================================= */

.dc-form-controls input[type="text"],
.dc-form-controls input[type="checkbox"],
.dc-form-controls select,
.dc-form-controls textarea,
#dc-saved-clinics-form input[type="text"],
#dc-saved-clinics-form input[type="checkbox"],
#dc-saved-comparisons-list-form input[type="text"],
#dc-consultation-events-register-form input[type="text"],
.dc-patient-account input[type="text"],
.dc-patient-account select,
.dc-patient-account textarea {
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-base);
}

.dc-form-controls input[type="text"]:not([type="checkbox"]),
.dc-form-controls select,
.dc-form-controls textarea,
#dc-saved-clinics-form input[type="text"]:not([type="checkbox"]),
#dc-consultation-events-register-form input[type="text"] {
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-sm);
  padding: var(--dc-space-2) var(--dc-space-3);
}

.dc-form-controls .form-item,
#dc-saved-clinics-form .form-item,
#dc-consultation-events-register-form .form-item {
  margin-block: var(--dc-space-3);
}

/* =========================================================
   Focus states - a single, consistent, always-visible focus ring for
   every interactive element on the site (buttons, links, form
   controls), not just the four pilot surfaces. This is the one
   intentional exception to "pilot surfaces only" in this file - see
   the file header comment.
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.dc-btn:focus-visible {
  outline: 2px solid var(--dc-color-teal-600);
  outline-offset: 2px;
  box-shadow: var(--dc-focus-ring);
}

/* =========================================================
   Responsive behaviour
   ========================================================= */

@media (max-width: 40rem) {
  .dc-card--saved {
    flex-direction: column;
    align-items: stretch;
  }

  .dc-trust-strip {
    gap: var(--dc-space-3);
  }

  .dc-journey {
    gap: var(--dc-space-1);
  }
}

/* =========================================================
   Site header (DESIGN-HEADER-001) - the one shared, full-width header
   every patient-facing page renders through core's own <header> region
   wrapper (see region--header.html.twig). Navy/gold/teal/white only -
   every colour below is an existing, already-approved token, none new.
   Mobile-first: the nav+actions group is a JS-toggled disclosure below
   40rem, and unconditionally visible as a row from 48rem up - see the
   Stage 1 report for why the toggle is required rather than optional
   at the in-between breakpoint (site has no existing mobile-nav
   pattern to build on).
   ========================================================= */

.layout-container > header {
  background-color: var(--dc-color-navy-900);
  /* Positioning/clipping context for the decorative watermark below -
     it is absolutely positioned against this element and must never
     be allowed to bleed past the header's own edge. */
  position: relative;
  overflow: hidden;
  z-index: 20;
}

.dc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dc-space-4);
  max-width: 84rem;
  margin-inline: auto;
  padding: var(--dc-space-4);
  box-sizing: border-box;
  /* Stacks above the watermark, which sits at the header's own root
     with no explicit z-index (initial value 0 in the same stacking
     context) - real content must always win. */
  position: relative;
  z-index: 1;
}

.dc-header__brand-slot {
  flex: 0 0 auto;
}

.dc-header__brand {
  display: inline-flex;
  align-items: center;
}

.dc-header__brand-logo {
  /* The approved lockup is a fixed-aspect horizontal image (icon +
     wordmark already combined) - constrain height only and let width
     follow, so it can never be stretched/distorted per the brand
     guidelines' own "do not distort" rule. 2.5rem (not smaller) is
     deliberate: the wordmark is two stacked lines of text sharing the
     same height as the icon, so a smaller logo height risks a "tiny
     unreadable wordmark" on mobile - the one thing the mobile
     standard explicitly rules out.

     PRODUCTION ASSETS v1 (gold compass lockup): sized up 25% from the
     prior 3.25rem per explicit Founder request when the logo was
     swapped to the gold Founder-supplied mark, then sized up a
     further 75% from that 4.0625rem per a later explicit Founder
     request.

     SCREEN-REAL-ESTATE PASS: rolled back to that 4.0625rem
     PRODUCTION ASSETS v1 checkpoint - the header+hero combo was
     measurably pushing all real homepage content below the fold on a
     900px-tall viewport (header ~240px + hero ~865px = 1062px). */
  display: block;
  width: 12.5rem;
  max-width: 100%;
  height: auto;
}

/* BRAND INTEGRATION PASS 1: the approved one-line lockup is a 400x124
   (3.2:1) image, so width sets the size and height follows - never
   stretched. The full lockup is shown at every viewport width. */

.dc-header__watermark {
  /* Restrained decorative brand element (Final Visual Completion
     Pass): the approved compass rose alone, cropped at the header's
     right edge, low-opacity, and never intercepting interaction.
     Hidden below 48rem entirely - see the file header comment in
     region--header.html.twig for why. */
  display: none;
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 14rem;
  height: 14rem;
  transform: translateY(-50%);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.dc-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--dc-color-navy-500);
  border-radius: var(--dc-radius-md);
  color: var(--dc-color-white);
  cursor: pointer;
}

.dc-header__toggle .dc-icon {
  width: 1.5em;
  height: 1.5em;
}

.dc-header__collapsible {
  display: none;
  flex-direction: column;
  gap: var(--dc-space-4);
  width: 100%;
}

.dc-header__collapsible.dc-header__collapsible--open {
  display: flex;
}

.dc-header__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-header__nav-link {
  display: block;
  padding: var(--dc-space-3) var(--dc-space-2);
  color: var(--dc-color-white);
  text-decoration: none;
  font-weight: var(--dc-font-weight-medium);
  border-radius: var(--dc-radius-sm);
  /* HOMEPAGE POLISH: subtle tracking and a touch of restraint on the
     resting colour (full white on hover/active) - premium nav bars
     read as more considered with a little letter-spacing rather than
     tight-set default type. */
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  transition: color var(--dc-transition-fast);
}

.dc-header__nav-link:hover,
.dc-header__nav-link:focus-visible {
  color: var(--dc-color-white);
}

.dc-header__nav-link.is-active {
  /* Never colour-only: bolder weight plus a teal underline together
     signal the active page, and aria-current="page" (set in
     menu--main.html.twig) carries the same signal programmatically. */
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-white);
  box-shadow: inset 0 -2px 0 0 var(--dc-color-teal-600);
}

.dc-header__actions-slot .dc-btn {
  width: 100%;
  justify-content: center;
}

.dc-header__action {
  /* HOMEPAGE POLISH: scoped to the header's own Sign In / My Compass
     action only - not a change to .dc-btn--secondary sitewide. A
     little extra horizontal room and letter-spacing so the button
     reads as considered rather than a bare component default sitting
     on the navy bar. */
  padding-inline: var(--dc-space-6);
  letter-spacing: 0.01em;
}

/* Groups Your Compass with the Settings/Log out account utilities now
   moved into the header (Your Compass no longer has its own separate
   utility line for them). */
.dc-header__account-group {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  width: 100%;
}

@media (min-width: 48rem) {
  .dc-header__inner {
    /* HOMEPAGE POLISH: more room once the header is a single row -
       both taller (padding-block) and more air between the brand/nav/
       actions groups (gap), for the "establishes trust immediately"
       premium presence rather than a cramped default toolbar.

       SCREEN-REAL-ESTATE PASS: padding-block brought down from
       --dc-space-7 (3rem) to --dc-space-5 (1.5rem) - the header was
       contributing to header+hero pushing all homepage content below
       the fold on a 900px-tall viewport. */
    padding-block: var(--dc-space-5);
    gap: var(--dc-space-6);
  }

  .dc-header__brand-logo {
    /* 24.5rem (392px) wide from 48rem up - the 400w image at 1x, the 800w
       at 2x, never enlarged past its pixel width. The 3.2:1 image is
       1.16rem taller each side than the 17rem lockup it replaced, so the
       negative block margin hands that height back and the header keeps
       its 136px height. */
    width: 24.5rem;
    margin-block: -1.1625rem;
  }

  .dc-header__watermark {
    /* Desktop/tablet only - see the "why" note in
       region--header.html.twig and the .dc-header__watermark rule
       above. */
    display: block;
  }
}

/* The navigation, language selector and account buttons only sit beside the
   24.5rem logo on one row from 87rem; below that the existing menu toggle
   layout is used, so the header never wraps onto a second row. */
@media (min-width: 87rem) {
  .dc-header__toggle {
    display: none;
  }

  .dc-header__collapsible {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: var(--dc-space-7);
  }

  .dc-header__nav-list {
    flex-direction: row;
    gap: var(--dc-space-7);
  }

  .dc-header__nav-link.is-active {
    box-shadow: inset 0 -3px 0 0 var(--dc-color-teal-600);
  }

  .dc-header__actions-slot .dc-btn {
    width: auto;
  }

  .dc-header__account-group {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: var(--dc-space-3);
  }
}

/* =========================================================
   24-hour time inputs (hour and minute selects side by side)
   ========================================================= */

.dc-time-input .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-3);
}

/* =========================================================
   Quotation: possible additional treatment
   ========================================================= */

.dc-quote-extras__row {
  border-top: 1px solid var(--dc-color-stone-200, #e5e1da);
  padding: var(--dc-space-3) 0;
}

.dc-quote-extras__row h3 {
  margin: 0 0 var(--dc-space-1);
}

.dc-quote-extras__row p {
  margin: 0 0 var(--dc-space-1);
}

.dc-quote-extras__why {
  font-size: var(--dc-font-size-sm);
}

/* Clinic Dashboard: the six section links stay visible as one row beneath
   the logo from tablet width up, instead of waiting for the 87rem desktop
   layout; on phones they remain in the menu toggle. */
@media (min-width: 64rem) {
  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__toggle {
    display: none;
  }

  .layout-container > header .dc-header__inner:has(.dc-header__nav-list--sections)::before {
    display: none;
  }

  .layout-container > header .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__brand-slot {
    flex: 0 0 100%;
  }

  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__collapsible {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--dc-space-4) var(--dc-space-7);
  }

  .dc-header__nav-list--sections {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dc-space-1) var(--dc-space-5);
  }

  .dc-header__nav-list--sections .dc-header__nav-link.is-active {
    box-shadow: inset 0 -3px 0 0 var(--dc-color-teal-600);
  }

  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__actions-slot .dc-btn {
    width: auto;
  }

  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__account-group {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
}

/* Clinic Dashboard: the Patient Coordination pill's dropdown (the existing
   coordinator filter's choices). Hidden until opened; on phones it opens
   inline within the menu, from tablet width it floats beneath the pill. */
.dc-header__nav-item--menu {
  position: relative;
}

.dc-header__nav-link--menu::after {
  content: '';
  display: inline-block;
  margin-inline-start: 0.4em;
  border-inline: 0.3em solid transparent;
  border-block-start: 0.35em solid currentColor;
  vertical-align: 0.1em;
}

/* Split pill (Clinic management): the label is its own link, the arrow its own
   button. */
.dc-header__nav-item--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.dc-header__nav-toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-inline: var(--dc-space-2);
  background: none;
  border: 0;
  border-radius: var(--dc-radius-sm);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.dc-header__nav-toggle::after {
  content: '';
  border-inline: 0.3em solid transparent;
  border-block-start: 0.35em solid currentColor;
}

.dc-header__nav-toggle:hover,
.dc-header__nav-toggle:focus-visible {
  color: var(--dc-color-white);
}

.dc-header__nav-toggle:focus-visible {
  outline: 2px solid var(--dc-color-teal-600);
  outline-offset: 1px;
}

.dc-header__nav-item--split > .dc-header__submenu {
  flex-basis: 100%;
}

.dc-header__submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: var(--dc-space-1) 0 var(--dc-space-1) var(--dc-space-3);
}

.dc-header__nav-item--menu.is-open > .dc-header__submenu {
  display: block;
}

.dc-header__submenu-link {
  display: block;
  padding: var(--dc-space-2) var(--dc-space-3);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-radius: var(--dc-radius-sm);
  white-space: nowrap;
}

.dc-header__submenu-link:hover,
.dc-header__submenu-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--dc-color-white);
}

.dc-header__submenu-link.is-selected {
  font-weight: var(--dc-font-weight-semibold);
  box-shadow: inset 3px 0 0 0 var(--dc-color-teal-600);
}

@media (min-width: 64rem) {
  .dc-header__nav-item--menu > .dc-header__submenu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 14rem;
    padding: var(--dc-space-2);
    background: var(--dc-color-navy-900, #0b1e33);
    border: 1px solid var(--dc-color-navy-500);
    border-radius: var(--dc-radius-md);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
  }
}

@media (min-width: 64rem) and (hover: hover) {
  .dc-header__nav-item--menu:not(.is-dismissed):hover > .dc-header__submenu {
    display: block;
  }
}

/* Clinic Dashboard (tablet width up): only the section-navigation row of the
   header stays in view while scrolling. The header sticks with a negative top
   equal to the part above that row (the logo), measured by dc-header.js, and
   below the support banner / toolbar. Phones keep the menu toggle layout. */
@media (min-width: 64rem) {
  .layout-container > header:has(.dc-header__nav-list--sections) {
    position: sticky;
    top: calc(var(--dc-sticky-offset, 0px) - var(--dc-header-hide, 0px));
  }

  .layout-container > header:has(.dc-header__nav-list--sections) .dc-header__inner {
    padding-block-end: var(--dc-space-3);
  }
}

/* The header clips its decorative watermark with overflow: hidden, which also
   clipped the Patient Coordination dropdown at the header's edge. On the
   Clinic Dashboard the header lets the dropdown float over the page, and the
   watermark is sized to the header's height so it still cannot spill out. */
.layout-container > header:has(.dc-header__nav-list--sections) {
  overflow: visible;
}

.layout-container > header:has(.dc-header__nav-list--sections) .dc-header__watermark {
  width: auto;
  height: 100%;
}

/* Clinic-side navigation: compact outlined pills on one row with the language
   selector, My Account and Log out, from tablet width up. Phones keep the
   menu toggle layout. Site pages (Clinic Events) stay reachable but quieter. */
@media (min-width: 48rem) {
  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__collapsible {
    gap: var(--dc-space-3) var(--dc-space-5);
  }

  .dc-header__nav-list--sections {
    gap: var(--dc-space-2);
  }

  .dc-header__nav-list--sections .dc-header__nav-link,
  .dc-header__nav-list--sections .dc-header__nav-item--split {
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
  }

  .dc-header__nav-list--sections .dc-header__nav-link {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
  }

  .dc-header__nav-list--sections .dc-header__nav-item--split > .dc-header__nav-link {
    border: 0;
    padding-inline-end: 0.25rem;
  }

  .dc-header__nav-list--sections .dc-header__nav-toggle {
    padding-inline: 0.4rem 0.7rem;
    border-radius: 999px;
  }

  .dc-header__nav-list--sections .dc-header__nav-link:hover,
  .dc-header__nav-list--sections .dc-header__nav-link:focus-visible,
  .dc-header__nav-list--sections .dc-header__nav-item--split:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
  }

  .dc-header__nav-list--sections .dc-header__nav-item--split > .dc-header__nav-link:hover,
  .dc-header__nav-list--sections .dc-header__nav-item--split > .dc-header__nav-link:focus-visible {
    background: none;
  }

  .dc-header__nav-list--sections .dc-header__nav-link.is-active {
    box-shadow: none;
    border-color: var(--dc-color-teal-600);
    background: rgba(31, 168, 168, 0.18);
  }

  .dc-header__nav-list--sections .dc-header__nav-item--quiet > .dc-header__nav-link {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    opacity: 0.75;
  }

  .dc-header__inner:has(.dc-header__nav-list--sections) .dc-header__action {
    padding-inline: var(--dc-space-3);
    font-size: 0.85rem;
    white-space: nowrap;
  }
}