/* ============================================================
   HEADER — floating white pill
   ============================================================ */

.sh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  pointer-events: none;
}

/* The WP admin bar is also fixed-position, so it doesn't push a fixed
   header down the way it does normal in-flow content — needs its own
   explicit offset. Heights/breakpoint match WordPress core's own
   admin-bar CSS: 32px at ≥783px wide, 46px below that. */
body.admin-bar .sh-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .sh-header {
    top: 46px;
  }
}

.sh-header__inner {
  pointer-events: auto;
  /* Deliberately not capped to --container. The bar spans the viewport
     (less.sh-header's own 1.5rem inset) rather than tracking the
     body's content column. */
  margin: 0 auto;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 3.125rem;
  transition: var(--transition-slow);
}

/* Scrolled state —.is-scrolled is toggled by navigation.js past 60px of scroll. */
.sh-header.is-scrolled .sh-header__inner,
.sh-header:hover .sh-header__inner {
  padding: 0.75rem 0.75rem 0.75rem 1.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.sh-header.is-scrolled .sh-header__logo img,
.sh-header.is-scrolled .sh-header__logo .custom-logo,
.sh-header:hover .sh-header__logo img,
.sh-header:hover .sh-header__logo .custom-logo {
  width: 6.5rem;
}

/* On-hero state — set by navigation.js when a.sh-hero-side with header_sync is at the top of the page and the page hasn't scrolled past it yet. */
.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__inner {
  background: var(--hero-header-bg, var(--color-surface));
  border-color: transparent;
}

/* Direct child (> a) throughout — the mega panel is a sibling of the
   trigger link but still a descendant of the same <li>/<ul>, so a
   plain descendant selector here would recolour every link inside
   the open dropdown to match the header's on-hero/active state. */
.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__nav-list > li > a,
.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__logo-text {
  color: var(--hero-header-fg, var(--color-navy));
}

/* Scoped to.sh-header__logo--has-white, which header.php only adds
   once a white logo is actually uploaded — without it, this pair
   would hide the color logo on-hero and show nothing in its place. */
.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__logo--has-white .sh-header__logo-img--color {
  display: none;
}

.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__logo--has-white .sh-header__logo-img--white {
  display: block;
}

.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__nav-item.is-active > a,
.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__nav-list > .current-menu-item > a {
  color: var(--hero-header-fg, var(--color-primary));
}

.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__nav-dot {
  background: var(--hero-header-fg, var(--color-primary));
}

.sh-header.is-on-hero:not(.is-scrolled):not(:hover) .sh-header__hamburger span {
  background: var(--hero-header-fg, var(--color-navy));
}

/* Nav + CTA share one flex row, rather than being spaced apart as
   two of.sh-header__inner's own direct children. */
.sh-header__nav-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.sh-header__logo { display: flex; align-items: center; flex-shrink: 0; }

.sh-header__logo img,
.sh-header__logo .custom-logo {
  width: 7.75rem;
  height: auto;
  transition: var(--transition-slow);
}

/* Two logo images share one slot —.is-on-hero below swaps which one
   is display:none, rather than crossfading, since the color logo
   disappearing into a dark hero isn't a transition worth showing. */
.sh-header__logo-img--white {
  display: none;
}

.sh-header__logo-text {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Nav */
.sh-header__nav-list {
  display: flex;
  align-items: center;
}

.sh-header__nav-list > li > :first-child {
  margin-right: 1.25rem;
}

.sh-header__nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  transition: var(--transition-base);
}

.sh-header__nav-list a:hover { color: var(--color-primary); }

/* Active item: blue text + 0.6875rem dot. Direct child only — a
   descendant selector here would also match every link inside the
   mega panel nested in the same <li>, colouring the whole dropdown
   "active" just because the top-level Services item is. */
.sh-header__nav-item.is-active > a,
.sh-header__nav-list > .current-menu-item > a {
  color: var(--color-primary);
}

.sh-header__nav-dot {
  display: inline-block;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Services dropdown — built from starfish_service_menu_tree(), never
   hand-maintained. Desktop only for now: the mobile drawer still
   links Services straight to the Overview page, where the same list
   renders as cards; it does not yet show this panel inline. */
.sh-header__nav-item.has-dropdown {
  position: relative;
}

.sh-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: var(--transition-base);
  z-index: var(--z-dropdown, 20);
}

.sh-header__nav-item.has-dropdown:hover .sh-header__dropdown,
.sh-header__nav-item.has-dropdown:focus-within .sh-header__dropdown,
.sh-header__nav-item.has-dropdown.is-open .sh-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sh-header__dropdown-item a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-navy);
  white-space: nowrap;
  transition: var(--transition-base);
}

.sh-header__dropdown-item a:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
}

/* ── Services mega panel ──────────────────────────────────────
   Level 1 (categories + uncategorised services) with each
   category's own services revealed in the adjacent column, not a
   detached flyout — nothing to cross diagonally, and the whole
   panel is one continuous focus order. Contents are generated from
   the Service/Service Category content (starfish_service_menu_tree),
   so the markup here never hard-codes a service name. */
.sh-header__caret {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  transition: transform var(--transition-base);
}

/* The nav link sits vertically centred inside the header pill, so its
   own bottom edge is short of the pill's actual bottom edge by
   whatever padding-bottom the pill currently has (1rem normally,
   0.75rem once compact/scrolled)..sh-mega positions off the pill
   itself (.sh-header__inner), not the link, so it always clears the
   full pill regardless of which padding is active — the link stays
   position:relative only so navigation.js has a stable element to
   measure for horizontal placement. */
.sh-header__inner { position: relative; }

.sh-header__nav-item.has-mega:hover .sh-header__caret,
.sh-header__nav-item.has-mega:focus-within .sh-header__caret {
  transform: rotate(180deg);
}

.sh-mega {
  position: absolute;
  top: 100%;
  left: var(--mega-left, 0);
  margin-top: 0;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface);
  /* Square where it meets the pill it drops from, rounded everywhere
     else — matches the reference design. */
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 36px rgba(13, 38, 51, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: var(--transition-base);
  z-index: var(--z-dropdown, 20);
}

.sh-header__nav-item.has-mega:hover .sh-mega,
.sh-header__nav-item.has-mega:focus-within .sh-mega,
.sh-header__nav-item.has-mega.is-open .sh-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sh-mega__col { display: flex; flex-direction: column; width: 264px; }
.sh-mega__col--l2 {
  /* Hidden until navigation.js explicitly opens it (inline
     display:flex) — no category is active on first render, so there
     is nothing to show yet. */
  display: none;
  /* Sizes to its longest label on desktop instead of wrapping it: 252px
     is the floor (what a short list still gets), 22rem is a ceiling so
     one extreme label cannot stretch the panel arbitrarily wide — past
     that, the label itself ellipsizes rather than the column growing
     further (see.sh-mega__panel a). This column is a flex child of
.sh-mega, and a flex item's default min-width: auto would otherwise
     override max-width entirely once content is wider than it, which
     is what actually caused the original overflow — any explicit
     min-width (this 252px included) replaces that default and lets
     max-width apply as a real ceiling. */
  width: max-content;
  min-width: 252px;
  max-width: 22rem;
  padding: 12px 10px;
  border-radius: 14px;
  background: #f7fafb;
}

.sh-mega__l1 { display: flex; flex-direction: column; gap: 2px; }

.sh-mega__item { display: flex; }

.sh-mega__item > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 1;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  font-family: var(--font-nav);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy);
  transition: var(--transition-base);
}

/* In normal flow, right beside the label — not absolutely positioned against the row's edge, which is what stranded it far from long labels ("Substance Use Treatment") in the first place. */
.sh-mega__chev {
  display: inline-flex;
  flex-shrink: 0;
  color: #000;
  pointer-events: none;
  transition: var(--transition-base);
}

.sh-mega__item > a:hover,
.sh-mega__item.is-active > a {
  background: #f0f8fb;
  color: var(--color-primary);
  font-weight: 600;
}

.sh-mega__item > a:hover .sh-mega__chev,
.sh-mega__item.is-active > a .sh-mega__chev {
  color: var(--color-primary);
}

/* Divider between the menu rows and the CTA — full column width,
   matching the reference design. */
.sh-mega__divider {
  height: 1px;
  margin-top: 10px;
  background: #e8eef0;
}

/* Plain.sh-btn--blue (see starfish_cta(), style 'solid') — no icon
   circle, stretches to the column width below the divider. */
.sh-mega__cta-wrap { padding: 10px 6px 2px; }

.sh-mega__cta.sh-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--text-sm);
  padding: 0.75rem 1.25rem;
  /*.sh-header__nav-list a / a:hover (class+type[+pseudo], up to
     0,2,1) otherwise beats.sh-btn--blue's own color (a single class,
     0,1,0 / 0,2,0) — reassert at the same two-class depth so the
     button's real colour wins in both states rather than the plain
     nav-link colour bleeding through. */
  color: #fff;
}

.sh-mega__cta.sh-btn:hover { color: #fff; }

/* Level 2 — one panel per category, swapped by navigation.js */
.sh-mega__panel { display: none; }
.sh-mega__panel.is-active { display: block; }

.sh-mega__panel-label {
  padding: 4px 12px 10px;
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7d7b;
}

.sh-mega__panel ul { display: flex; flex-direction: column; gap: 2px; }

/* The <li> is the actual flex item here (ul is display:flex), and the
   same default min-width: auto trap applies to it directly: without
   this, a long label refuses to wrap and instead pushes past the
   column's own edge, which is what was cutting off names like
   "Medication-Assisted Treatment(MAT)" rather than letting them wrap
   to a second line inside the 252px column. */
/* min-width: 0 so this li — a flex item of the ul above — can shrink
   down to.sh-mega__col--l2's 22rem ceiling instead of forcing the
   column wider once a label exceeds it (same flex default-min-width
   trap as the column itself). */
.sh-mega__panel li { min-width: 0; }

.sh-mega__panel a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--font-nav);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  transition: var(--transition-base);
  /* No wrap on desktop: the column grows to fit a label instead (see
.sh-mega__col--l2). overflow/ellipsis only matter once a label is
     long enough to hit that column's 22rem ceiling — a safety valve,
     not the normal case. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-mega__panel a:hover { background: #fff; color: var(--color-primary); }

/* CTA — blue pill w/ white icon circle (in base.css.sh-btn--pill-blue) */
.sh-header__cta { flex-shrink: 0; }

/* Hamburger */
.sh-header__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.75rem;
}

.sh-header__hamburger span {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: var(--transition-base);
}

/* Open state morphs the three bars into a cross. */
.sh-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sh-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.sh-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer — a right-anchored panel over a dimmed backdrop
   (node reference: right-anchored drawer, close outside the panel),
   not a full-bleed takeover and not a card under the header.
   --sh-mobile-panel-w drives both the panel's own width and the
   close button's position, so the two can never drift apart. */
/* Two widths, one drawer:
    - below 768px: full-bleed takeover, no backdrop (there's no page
      content left showing to dim).
    - 768px and up: a right-anchored panel over a dimmed, click-to-
      close backdrop instead — the panel stops short of the full
      width on purpose, so it reads as a drawer over the page rather
      than a second full page.
   The logo + close row lives inside the panel itself either way
   (.sh-mobile-nav__topbar below), so it's always in the same place
   regardless of which of the two modes is active. */
.sh-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown, 20);
  pointer-events: auto;
}

.sh-mobile-nav.is-open { display: block; }

.sh-mobile-nav__backdrop {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 30, 40, 0.4);
  border: 0;
  cursor: default;
}

.sh-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

/* Full-bleed only at 639px and below — 640px and up gets the
   right-anchored panel + backdrop instead. */
@media (min-width: 640px) {
  .sh-mobile-nav__backdrop { display: block; }
  .sh-mobile-nav__panel {
    width: 375px;
    box-shadow: -12px 0 32px rgba(13, 38, 51, 0.16);
  }
  /* No logo at this width — the topbar carries just the close
     button; only the panel's own title rows (root has none, a
     drilled screen's own "< Back  Title" row below) identify it. */
  .sh-mobile-nav__logo { display: none; }
}

/* Same height as the desktop header pill (.sh-header__inner, 4.5rem)
   so the two feel like one continuous piece of chrome rather than two
   independently-sized bars. */
.sh-mobile-nav__topbar {
  flex-shrink: 0;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--color-border-header);
}

/* A drilled screen's own back row takes over this top slot entirely
   (see.sh-mobile-nav__back below) — the close button doesn't sit
   above it as a second row, it's replaced outright. */
.sh-mobile-nav:not(.is-root) .sh-mobile-nav__topbar { display: none; }

.sh-mobile-nav__logo img { width: 7.75rem; height: auto; }

/* Independent of the topbar (see the markup) so it can be
   repositioned outright once a drilled screen replaces that row,
   rather than disappearing along with it. Default spot mirrors where
   it sat inside the topbar. */
.sh-mobile-nav__close {
  position: absolute;
  /* Centred within the 4.5rem topbar/back-row band: (4.5rem - 2.5rem
     button) / 2. */
  top: 1rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-bg-section);
  color: var(--color-navy);
}

.sh-mobile-nav__close:hover { color: var(--color-primary); }

/* Full-bleed (<640px): no room for a floating close button once the
   back row takes over — back-out-to-root or Escape closes instead. */
.sh-mobile-nav:not(.is-root) .sh-mobile-nav__close { display: none; }

/* 640px+: the close button reappears, but floats in the backdrop just
   outside the panel's left edge instead of inside it — the panel's
   own top slot belongs entirely to the back row's title at this width. */
@media (min-width: 640px) {
  .sh-mobile-nav:not(.is-root) .sh-mobile-nav__close {
    display: flex;
    /* Same 1rem vertical centering as the default position — this
       only ever changes right/background/color, not the row it
       aligns to. */
    top: 1rem;
    right: calc(375px + 1rem);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }

  .sh-mobile-nav:not(.is-root) .sh-mobile-nav__close:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
  }
}

/* Scrollable body — screens stack here; only one is ever visible. */
.sh-mobile-nav__scroll {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.sh-mobile-nav__screen { display: none; padding: 1.25rem 1.5rem; }
.sh-mobile-nav__screen.is-active { display: block; }

.sh-mobile-nav__list { display: flex; flex-direction: column; gap: 2px; }

.sh-mobile-nav__list a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
}

.sh-mobile-nav__list a:hover { background: var(--color-bg-section); color: var(--color-primary); }

/* No padding-left override here: this CTA renders with style 'solid' (.sh-btn--blue), which has no --btn-icon-reserve, and an unresolved var() with no fallback wipes the declaration out entirely — which left it with no left padding at all. */
.sh-mobile-nav__cta { width: 100%; }

/* A row that opens a screen (Services, then any category within it) —
   hugs its own content instead of spreading edge to edge, so the
   chevron sits right beside the label rather than pinned to the far
   right of the row. */
.sh-mobile-nav__drill {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: none;
  border: 0;
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  text-align: left;
}

.sh-mobile-nav__drill:hover { background: var(--color-bg-section); color: var(--color-primary); }

/* Back row — its own screen's header, in the same top slot the topbar/close button occupies on the root screen (see the :not(.is-root) rule above that hides the topbar). */
.sh-mobile-nav__back {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Negative margins shift a width:100% box rather than stretching
     it — its right edge would land short of the panel edge by
     exactly the margin it "gained" on the left. calc() sizes it to
     the true bled-out width directly instead. */
  width: calc(100% + 3rem);
  margin: -1.25rem -1.5rem 1rem;
  padding: 0 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-header);
}

.sh-mobile-nav__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: -0.375rem;
  border-radius: 50%;
  background: none;
  border: 0;
  cursor: pointer;
}

.sh-mobile-nav__back-btn:hover { background: var(--color-bg-section); }

/* Absolutely centred against the row itself — independent of the
   chevron button's own width, rather than just sitting next to it —
   at every width, including full-bleed. */
.sh-mobile-nav__back-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
}

.sh-mobile-nav__screen > ul { display: flex; flex-direction: column; gap: 2px; }

.sh-mobile-nav__screen > ul > li > a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
}

.sh-mobile-nav__screen > ul > li > a:hover { background: var(--color-bg-section); color: var(--color-primary); }

.sh-mobile-nav__divider {
  height: 1px;
  margin: 0.75rem 0;
  background: var(--color-border-header);
}

/* Same solid pill as the desktop mega panel's "View all services" —
   see starfish_cta(), style 'solid' — so the two never drift apart. */
.sh-mobile-nav__cta-link.sh-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--text-base);
  /*.sh-mobile-nav__screen > ul > li > a doesn't match this element
     (it's not inside an <li>), but.sh-header__nav-list a's own type
     selector still would if this component is ever reused inside that
     list — reasserted here for the same reason as every other CTA in
     this file. */
  color: #fff;
}

.sh-mobile-nav__cta-link.sh-btn:hover { color: #fff; }

/* Sticky footer band — Get Started + phone + hours, shaded apart from the scrollable list above it so it always reads as the page's persistent "next step" rather than just the last item in the list. */
.sh-mobile-nav__footer { display: none; }

.sh-mobile-nav.is-root .sh-mobile-nav__footer {
  display: block;
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--color-bg-section);
  border-top: 1px solid var(--color-border-header);
}

.sh-mobile-nav__contact {
  margin-top: 0.875rem;
  text-align: center;
}

.sh-mobile-nav__contact a {
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
}

.sh-mobile-nav__hours {
  margin-top: 0.25rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Page offset for the fixed header */
#page-content { position: relative; }

/* Responsive */

/* Narrow desktop: 7 nav items + CTA don't fit at full size in this
   range — compact the pill so nothing overflows the white background.
   Upper bound was 1360px when there were 6 items; widened after
   adding Insurance & Payment pushed the real overflow point higher. */
@media (min-width: 1261px) and (max-width: 1600px) {
  .sh-header__inner { padding: 0.75rem 0.75rem 0.75rem 1.75rem; }

  .sh-header__logo img,
  .sh-header__logo .custom-logo { width: 6.5rem; }

  .sh-header__nav-list { gap: 2px; }

  .sh-header__nav-list a {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }

  /* Only the icon size changes — the pill's padding and min-height
     derive from --btn-icon-size (see base.css), so setting the box
     directly here would leave the padding sized for the full-size
     circle and knock the label off centre. */
  .sh-header__cta {
    --btn-icon-size: 2.5rem;
    font-size: 0.875rem;
  }
}

/* Below 1260px, hide navigation links and align the CTA beside the menu button. */
@media (max-width: 1260px) {
  .sh-header__nav { display: none; }
  .sh-header__hamburger { display: flex; }
  .sh-header__inner { padding: 0.75rem 1rem 0.75rem 1.75rem; gap: 1rem; }
  .sh-header__nav-group { margin-left: auto; }
}

/* Tablet and phone widths use the hamburger only. The CTA remains
   available in the drawer. */
@media (max-width: 1024px) {
  .sh-header__cta { display: none; }
}

@media (max-width: 639px) {
  .sh-header { padding-inline: 0; }
}