/* =============================================================================
   ELEMENTOR BRIDGE — design-system buttons on editor-built pages
   =============================================================================
   STATUS: TEST / integration layer. NOT part of the design-system bundle
   (the bundle is a copy of design-system/ output; this file exists only to
   translate a third party's markup, so it lives in the theme on purpose).

   WHY THIS FILE EXISTS
   Elementor renders its own button markup — `.elementor-button` — with its own
   stock styling (grey #69727d fill, 3px radius, 15px Roboto). This file maps
   that markup onto the Shine Bright design system, so a page built in the
   editor looks like /find-a-centre/ and /centre/<slug>/ without the editor
   touching a single style control.

   TWO LAYERS — and the first one is the one that actually matters:

   1. GLOBAL TOKEN REMAP (below). Elementor does not style a fresh Button
      widget with its `.elementor-button` fallback — it emits a per-page rule
      into uploads/elementor/css/post-<id>.css:

         .elementor-widget-button .elementor-button {      -- specificity 0,2,0
           background-color: var(--e-global-color-accent);
           font-family: var(--e-global-typography-accent-font-family), Sans-serif;
           font-weight: var(--e-global-typography-accent-font-weight);
         }

      That is specificity 0,2,0, so it beats any single-class rule here, and
      the stock Elementor kit defines those globals as green (#61CE70) Roboto
      500. Pointing the globals at the brand tokens fixes the default AT THE
      SOURCE: Elementor's own rule then resolves to brand yellow + Tondo, with
      no !important and — crucially — Elementor's own precedence untouched, so
      a colour an editor sets explicitly in the Style tab still wins.

   2. COMPONENT MAPPING (below). The rest of the `.sb-btn` look — pill radius,
      padding, hover, focus ring, sizes, variants — which Elementor has no
      global for.

   DEFAULT = the primary button (.sb-btn--primary): yellow fill, navy label.
   That is the primary CTA on both the find-a-centre page and the centre detail
   page (single-centre.php, page-find-a-centre.php).

   VARIANTS — opt in per element, Elementor: Advanced → CSS Classes
     sb-btn--secondary     navy outline
     sb-btn--ghost         tertiary, no border
     sb-btn--navy          navy fill (high-contrast call-out)
     sb-btn--sm / --lg     size
     sb-btn--icon          circular icon-only (set a matching Width/Height)

   VALUES are mirrored 1:1 from the design system's `.sb-btn` rules
   (design-system/css/components.css). Tokens only — nothing invented here.
   DRIFT WARNING: if `.sb-btn` changes in the design system, re-mirror this
   file, or better, promote the base rules into the design system itself as
   `.sb-btn, .elementor-button { … }`. Do not let the two versions diverge.

   NOT A MANDATE — a DEFAULT layer. Elementor writes per-widget rules into
   uploads/elementor/css/post-<id>.css, and anything the editor sets explicitly
   there is still more specific than layer 2 and still wins. Deliberately no
   `!important` anywhere in this file. If a button looks unstyled, it is layer 1
   that is missing, not layer 2.
   ============================================================================= */


/* ----- 1. ELEMENTOR GLOBAL TOKENS → BRAND TOKENS --------------------------
   Elementor's kit declares its globals on the element carrying the kit class
   (`.elementor-kit-31{--e-global-color-accent:#61CE70;…}`, in post-<kit>.css).
   Matching on the kit class rather than the id keeps this working if the kit is
   ever recreated; :root covers the case where the kit element is not an
   ancestor. Both are 0,1,0 and this file loads after the kit CSS, so it wins.

   SCOPE: `accent` only — that is the single global the Button widget's default
   rule consumes, and today the Sample Page is the only Elementor content on the
   site that references any global at all. Changing accent also changes any
   other widget that inherits the accent global, which is the intent (green is
   not a Shine Bright colour).
   ------------------------------------------------------------------------- */
:root,
[class*="elementor-kit-"] {
  --e-global-color-accent: var(--sb-color-yellow);
  --e-global-typography-accent-font-family: var(--sb-font-heading);
  --e-global-typography-accent-font-weight: 700;

  /* NOT remapped — these drive text/heading widgets too, so enabling them
     changes existing Elementor content rather than just new buttons. Uncomment
     deliberately, together with the Type overrides in the kit UI:
     --e-global-color-primary:   var(--sb-color-navy);
     --e-global-color-secondary: var(--sb-color-navy-700);
     --e-global-color-text:      var(--sb-color-navy);
     --e-global-typography-primary-font-family:   var(--sb-font-heading);
     --e-global-typography-primary-font-weight:   700;
     --e-global-typography-secondary-font-family: var(--sb-font-body);
     --e-global-typography-text-font-family:      var(--sb-font-body);
     --e-global-typography-text-font-weight:      400;
  */
}


/* ----- BASE ---------------------------------------------------------------
   Mirrors .sb-btn. Overrides Elementor's own .elementor-button rule
   (grey fill, 3px radius, inline-block, 15px, padding 12px 24px) — this
   stylesheet is enqueued after elementor-frontend, so equal-specificity
   rules here win.
   ------------------------------------------------------------------------- */
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: var(--sb-text-base);
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--sb-radius-pill);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--sb-duration-base) var(--sb-ease-out),
    color var(--sb-duration-base) var(--sb-ease-out),
    border-color var(--sb-duration-base) var(--sb-ease-out),
    transform var(--sb-duration-fast) var(--sb-ease-out);
  white-space: nowrap;
  position: relative;
}

/* Elementor sets `fill: #fff` on the button itself — wrong the moment the fill
   is yellow, so icons inherit the label colour instead. */
.elementor-button,
.elementor-button-icon svg {
  fill: currentColor;
}

.elementor-button:active { transform: translateY(1px); }

.elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--sb-shadow-focus);
}

.elementor-button-content-wrapper { gap: var(--sb-space-2); }

/* Arrow nudge on hover — the .sb-icon-arrow behaviour, for Elementor's
   Button widget with an icon set. */
.elementor-button-icon {
  transition: transform var(--sb-duration-base) var(--sb-ease-out);
}
.elementor-button:hover .elementor-button-icon { transform: translateX(3px); }


/* ----- DEFAULT VARIANT: PRIMARY (yellow) ----------------------------------
   .sb-btn--primary. The :hover/:focus/:visited rules are needed because
   Elementor forces `color: #fff` on those states at the same specificity —
   later in the cascade wins, and this file loads after elementor-frontend.
   ------------------------------------------------------------------------- */
.elementor-button,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:visited {
  background: var(--sb-color-yellow);
  color: var(--sb-color-navy);
  border-color: var(--sb-color-yellow);
}
.elementor-button:hover {
  background: var(--sb-color-yellow-700);
  border-color: var(--sb-color-yellow-700);
  color: var(--sb-color-navy);
}


/* ----- VARIANT: SECONDARY (navy outline) ---------------------------------- */
.elementor-button.sb-btn--secondary {
  background: transparent;
  color: var(--sb-color-navy);
  border-color: var(--sb-color-navy);
}
.elementor-button.sb-btn--secondary:hover {
  background: var(--sb-color-navy);
  border-color: var(--sb-color-navy);
  color: var(--sb-color-white);
}


/* ----- VARIANT: NAVY FILL ------------------------------------------------- */
.elementor-button.sb-btn--navy {
  background: var(--sb-color-navy);
  color: var(--sb-color-white);
  border-color: var(--sb-color-navy);
}
.elementor-button.sb-btn--navy:hover {
  background: var(--sb-color-navy-700);
  border-color: var(--sb-color-navy-700);
  color: var(--sb-color-white);
}


/* ----- VARIANT: GHOST ----------------------------------------------------- */
.elementor-button.sb-btn--ghost {
  background: transparent;
  color: var(--sb-color-navy);
  border-color: transparent;
  padding-inline: 0.75rem;
}
.elementor-button.sb-btn--ghost:hover {
  background: var(--sb-color-navy-50);
  color: var(--sb-color-navy);
}


/* ----- SIZES --------------------------------------------------------------
   .sb-btn--sm / --lg, plus Elementor's own size classes mapped onto the same
   two steps so an editor who picks a size in the Style tab lands somewhere
   that exists in the design system rather than on Elementor's 13/16/18/20px
   ladder.
   ------------------------------------------------------------------------- */
.elementor-button.sb-btn--sm,
.elementor-button.elementor-size-xs,
.elementor-button.elementor-size-sm {
  padding: 0.5rem 1rem;
  font-size: var(--sb-text-sm);
}

.elementor-button.sb-btn--lg,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl {
  padding: 1.125rem 2rem;
  font-size: var(--sb-text-lg);
}


/* ----- VARIANT: ICON-ONLY ------------------------------------------------- */
.elementor-button.sb-btn--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--sb-radius-pill);
}


/* ----- FORM SUBMIT --------------------------------------------------------
   Elementor's forms carry their own override — `.elementor-form
   .elementor-button { border: none; padding-block: 0 }` at 0,2,0 — which
   strips the outline the secondary variant needs and collapses the vertical
   padding. Re-assert the base here, at matching specificity.
   ------------------------------------------------------------------------- */
.elementor-form .elementor-button {
  padding: 0.875rem 1.5rem;
  border: 2px solid transparent;
  border-color: var(--sb-color-yellow);
}
.elementor-form .elementor-button.sb-btn--secondary { border-color: var(--sb-color-navy); }
.elementor-form .elementor-button.sb-btn--ghost { border-color: transparent; }
.elementor-form .elementor-button.sb-btn--navy { border-color: var(--sb-color-navy); }
/* =============================================================================
   ELEMENTOR BRIDGE — site chrome (header / footer)
   =============================================================================
   Theme-owned, deliberately NOT part of the design-system bundle: the bundle is
   a copy that gets re-copied from design-system/, and a re-copy must never lose
   these rules. Loaded at priority 30 (after elementor-frontend and after
   uploads/elementor/css/post-*.css), which is what makes the tie-breaks below
   land our way.

   Division of labour with sb/css/components.css:
     · components.css styles Elementor's markup where Elementor does NOT compete
       — sub-menu panel cards, the mobile drawer geometry, sub-link colours,
       utility band background. Verified live: panel radius 12px, our shadow,
       Tondo 15px navy sub-items, drawer position:fixed.
     · THIS file handles the handful of places where Elementor writes its own
       per-widget rules into uploads/elementor/css/post-<id>.css, e.g.

         .elementor-621 .elementor-element.elementor-element-f4d3158
           .elementor-nav-menu .elementor-item{font-family:"Roboto";font-size:14px}

       That is five class selectors; the design system's three-class rules lose
       on specificity alone (measured: primary nav rendered Roboto, the current
       item rendered the Global-Colors accent yellow on white). So the
       declarations below mirror Elementor's own selector chain — same class
       count, loaded later — rather than resorting to !important.

   No !important anywhere in this file, by design.
   ============================================================================= */

/* --- The header paints above page content -----------------------------------
   Elementor sections can otherwise out-paint the sub-menu panel: a hit-test at
   the panel's centre returned the page, not the panel. */
.elementor-location-header {
  position: relative;
  z-index: var(--sb-z-header);
}

/* --- Primary nav items: design-system type, not the widget's Roboto ---------- */
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: var(--sb-text-sm);
  line-height: 1;
  color: var(--sb-color-navy);
  fill: var(--sb-color-navy);
}
/* The current section stays NAVY. Elementor colours the active item with the
   Global-Colors accent (our yellow) which is unreadable on the white band; the
   yellow belongs on the pointer underneath it, which components.css draws.

   PADDING IS PINNED IN EVERY STATE ON PURPOSE. Measured live: Elementor's hover
   state re-pads the item (12px → 13px 20px), so the item grew 16px and its
   label jolted ~8px to the left on hover. The design has no hover padding
   change, so all three states get the resting padding. */
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:hover,
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:focus,
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active,
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.highlighted {
  padding: var(--sb-space-3);
  color: var(--sb-color-navy-700);
  fill: var(--sb-color-navy-700);
}
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active,
.sb-header__main .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.highlighted {
  color: var(--sb-color-navy);
  fill: var(--sb-color-navy);
}

/* --- Utility band items: small, light on navy ------------------------------- */
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item {
  font-family: var(--sb-font-heading);
  font-weight: 400;
  font-size: var(--sb-text-xs);
  line-height: 1;
  color: var(--sb-color-navy-100);
  fill: var(--sb-color-navy-100);
}
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:hover,
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:focus,
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--sb-color-yellow);
  fill: var(--sb-color-yellow);
}

/* --- The utility band is desktop-only ---------------------------------------
   Elementor's container class .e-con-full.e-flex sets display:flex at equal
   specificity and wins on load order, so the band stayed visible at 390px.
   Doubling our class outranks it without touching Elementor's own rule. */
@media (max-width: 1023.98px) {
  .sb-header__utility.sb-header__utility {
    display: none;
  }
}

/* --- Logo size --------------------------------------------------------------
   Matches the prototype: 44px on phones, 52px from 1024px up. Applies only once
   the header's Site Logo widget is back in the template.
   Measured 63px live: Elementor sizes the logo WIDTH per widget
   (.elementor-621 .elementor-element.elementor-element-2ba00f8 img), and a
   square logo then reports 63px of height. The selector below carries one more
   class than Elementor's, so it wins without !important. */
.sb-header__main .elementor-element.elementor-widget-theme-site-logo .elementor-widget-container img {
  width: auto;
  height: 3.25rem;
}
@media (max-width: 1023.98px) {
  .sb-header__main .elementor-element.elementor-widget-theme-site-logo .elementor-widget-container img {
    height: 2.75rem;
  }
}

/* --- Mobile: keep logo and menu button on ONE row ---------------------------
   Measured live: below Elementor's mobile breakpoint (768px) the inner row
   stacks, so the bar grew to 137px — logo on one line, burger on the next.
   The prototype's phone bar is ~73px, logo left / button right. */
@media (max-width: 767.98px) {
  .sb-header__main.sb-header__main > .e-con-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- Sub-menu panels: the prototype's card, not Elementor's 130px strip -----
   Two things clamp this panel, in this order:
     1. Elementor's per-widget rule (five classes) sets min-width — beaten by the
        five-class rule below loaded later.
     2. SmartMenus (Elementor Pro's menu lib) writes INLINE styles on the <ul>
        every time the panel opens:
          "z-index: 101; width: auto; min-width: 10em; display: block;
           max-width: 1000px; top: auto; left: 0px; ..."
        That inline `min-width: 10em` resolves against the panel's own 13px
        font-size and clamps it to 130px. Nothing but !important outranks an
        inline style, so those two declarations carry it — measured: panel width
        130px → 240px, which is the prototype's card. This is the only !important
        in this file, and it is here because the competing declaration is inline.
   Everything else stays specificity-based. */
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
  min-width: 15rem !important;
  width: max-content !important;
  /* `left: 0` is the DEFAULT alignment: the panel's left edge sits on the item's
     left edge. It carries !important because SmartMenus writes its own inline
     `left` on every open (observed as `left: 0px`, but its collision handling can
     write other values), and the design intent is that this panel aligns to its
     item — whatever SmartMenus thinks. The flipped state (`.is-flipped`, added by
     sb-header.js when the panel would cross the viewport minus its 24px gutter)
     overrides it below. */
  left: 0 !important;
  padding: var(--sb-space-2);
  background: var(--sb-color-white);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg);
  list-style: none;
}
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown .elementor-sub-item {
  /* SmartMenus also sets white-space via sm-nowrap; keep the label on one line
     and let the panel grow instead of wrapping the text. */
  white-space: nowrap;
}

/* --- The yellow pointer must stop at the item's own edge --------------------
   Elementor's pointer rule sets `width: 100%` on the same ::after. With `width`
   set, its over-constrained box ignores `right`, so the bar started 12px inside
   the item and ran its full width — overshooting the item by 12px. `width: auto`
   hands the geometry back to left/right. Measured after: pointer 118px inside a
   142px item (12px inset each side), as the prototype draws it. */
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item::after {
  width: auto;
  left: var(--sb-space-3);
  right: var(--sb-space-3);
  height: 0.125rem;
  bottom: 0.375rem;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-color-yellow);
}

/* --- Dropdown alignment: left by default, flipped only at the screen edge -----
   Replaces the earlier `:not(:has(~ li.menu-item-has-children))` shortcut, which
   right-aligned whichever panel happened to be last regardless of where it sat
   (and, with one panel in the menu, right-aligned everything).

   Now: a panel is left-aligned with its item, and sb-header.js adds
   `is-flipped` to an item only when its panel would cross the viewport minus a
   24px gutter. The script measures — CSS cannot compare a panel's width to the
   viewport, and SmartMenus writes `left: 0px` inline, so `left: auto` here needs
   the !important flag that inline declarations force. */
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children.is-flipped > .sub-menu.elementor-nav-menu--dropdown {
  left: auto !important;
  right: 0;
}

/* --- Mobile drawer: colour, position and the close icon ----------------------
   Three separate live findings, all fixed here:

   1. Items rendered WHITE ON WHITE — Elementor's per-widget rule at five
      classes pinned Roboto 18.36px #FFFFFF on the sheet our bundle paints, so
      the drawer opened and looked empty.
   2. A 10px gap sat between the bar and the drawer: a stylesheet rule puts
      `margin-top: 10px` on the drawer (Elementor's mobile-dropdown "distance"),
      so `top: 73px` + 10px margin rendered at y=83. Measured, then pinned to 0.
   3. The close ✕ stayed grey: the toggle's <svg> carries its OWN fill
      (#33373D) and `color` never reaches it. Both `fill` and `color` are set
      per state below, so the icon follows the button. */
@media (max-width: 1023.98px) {
  /* Elementor's own rule here is only two classes
     (`.elementor-nav-menu--dropdown.elementor-nav-menu__container{margin-top:10px}`)
     — the widget's "distance from dropdown" setting — so this three-class form
     wins. The drawer is positioned from the measured header height, which
     already accounts for the bar; the extra 10px was pure gap. */
  .sb-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    margin: 0;
    background-color: var(--sb-color-white);
    border-left: 1px solid var(--sb-color-border);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item,
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item {
    font-family: var(--sb-font-heading);
    color: var(--sb-color-navy);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
    font-weight: 700;
    font-size: var(--sb-text-lg);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item {
    font-weight: 400;
    font-size: var(--sb-text-base);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:focus,
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:hover {
    color: var(--sb-color-navy-700);
  }
}

/* --- Desktop dropdown: the prototype's slide-down + fade ---------------------
   The prototype's panel goes opacity 0 → 1 and translateY(-0.25rem) → 0 over
   --sb-duration-base with --sb-ease-out. Elementor's panel has
   `transition-duration: 0s` and SmartMenus toggles `display` inline, so nothing
   animates today — measured, so this is brand motion vs a hard snap.

   How it works:
     · the resting rule holds the closed look, the :hover/:focus-within rule the
       open look — the same pairing the prototype uses;
     · `display` joins the transition with `allow-discrete`, which is what lets
       the fade-out finish before SmartMenus' inline `display: none` takes
       effect;
     · @starting-style supplies the before-change style for the frame where
       display flips none → block, without which no entrance transition runs.
   Both features are supported here (checked); a browser without them simply gets
   the panel without motion, never a stuck-hidden panel. */
@media (min-width: 1024px) {
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > .sub-menu.elementor-nav-menu--dropdown {
    /* Always rendered, hidden with visibility + opacity — the prototype's own
       pattern, and the reason the first attempt only animated on the way out.

       Traced live: SmartMenus opens by setting `display: block` inline, but our
       :hover rule matches a frame earlier, while the panel is still
       `display: none`. A non-rendered element cannot transition, so opacity
       jumped 0 → 1 unrendered and the panel appeared already-faded-in. Taking
       the hide away from SmartMenus and doing it with visibility/opacity fixes
       both directions: the panel is renderable the whole time, so the entrance
       transitions from its resting values, and the exit fades before visibility
       flips at the end. `display: block !important` is needed because the
       competing declaration is inline. */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition:
      opacity var(--sb-duration-base) var(--sb-ease-out),
      transform var(--sb-duration-base) var(--sb-ease-out),
      visibility var(--sb-duration-base) var(--sb-ease-out);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu.elementor-nav-menu--dropdown,
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu.elementor-nav-menu--dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}

/* --- Mobile: the utility menu moves to the foot of the drawer ----------------
   Elementor generates the mobile drawer itself, so a second widget cannot be
   placed INSIDE it. Instead the utility band — a sibling container in the header
   — is moved onto the bottom of the sheet while the drawer is open, which is the
   prototype's stack: nav rows, hairline, then the utility links.

   The drawer and the strip are given the same height variable, so the drawer
   stops exactly where the strip begins: no overlap, no arbitrary padding, and a
   longer utility list scrolls inside the strip instead of covering the nav. */
@media (max-width: 1023.98px) {
  /* The band is MOVED INSIDE the drawer by sb-header.js (Elementor cannot host a
     second widget there), so it is styled as the prototype's in-flow utility
     block, not as the fixed strip it was: 24px under the last nav row, hairline
     above, list at --sb-text-sm. `.e-con` on the end takes these selectors to
     four classes, which is what it takes to beat Elementor's container rules
     (`.elementor-621 .elementor-element.elementor-element-f643909:not(...)`). */
  body.sb-menu-open .sb-header__utility.sb-header__utility.e-con {
    display: block;
    position: static;
    margin-top: var(--sb-space-5);
    padding: var(--sb-space-4) var(--sb-space-5) 0;
    background: transparent;
    border-top: 1px solid var(--sb-color-border);
    border-left: 0;
    height: auto;
    overflow: visible;
  }
  /* stacked, left-aligned, navy on white — the drawer's utility block, not the
     navy band it is on desktop.
     `flex-wrap: nowrap` is pinned deliberately: Elementor puts
     `.e-con.e-flex > .e-con-inner { flex-wrap: var(--flex-wrap) }` on this inner,
     and the container's mobile value is `wrap-reverse`. In a column direction
     that reverses the CROSS axis, so the links aligned to the right on mobile
     (tablet's nowrap was fine, which is why only mobile moved them). */
  body.sb-menu-open .sb-header__utility .e-con-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main > ul.elementor-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  /* 8px of block padding per link, matching the prototype's drawer utility list
     (its items land ~32px tall, and the block ~266px over six links). */
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item,
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item:hover,
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item:focus {
    padding: var(--sb-space-2) 0;
    font-size: var(--sb-text-sm);
    line-height: var(--sb-leading-snug);
    /* No hover state on the drawer's utility links, by request: the resting look
       is the only look — same colour, no underline, no pointer, no background.
       (The desktop band keeps its yellow hover; this block is scoped to the
       drawer, which the band is moved into on mobile.) */
    color: var(--sb-color-navy);
    fill: var(--sb-color-navy);
    text-decoration: none;
    background: transparent;
    /* The band now lives INSIDE .elementor-nav-menu--dropdown, so the drawer's
       row rule (`.sb-header .elementor-nav-menu--dropdown .elementor-item {
       border-bottom: 1px solid var(--sb-color-border) }`) reaches these links and
       drew a stray rule/pill behind each one. The block is a plain list, so the
       divider is removed here — it stays on the drawer's nav rows, where the
       prototype has it. */
    border-bottom: 0;
  }
  /* ...and no pointer line on them either (desktop-only affordance). */
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item::after,
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item::before {
    content: none;
  }
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main .elementor-nav-menu .elementor-item[aria-current="page"] {
    color: var(--sb-color-navy-700);
  }
  body.sb-menu-open .sb-header__utility .sb-badge {
    border-color: var(--sb-color-border-strong);
    color: var(--sb-color-ink-muted);
  }
  /* The band's own widget also renders a mobile toggle and a dropdown copy of the
     same menu — both are suppressed here, so the block shows the plain list once.
     Without this the strip rendered twelve links. */
  body.sb-menu-open .sb-header__utility .elementor-menu-toggle {
    display: none;
  }
  body.sb-menu-open .sb-header__utility .elementor-nav-menu--main {
    display: block; /* Elementor hides the horizontal list below its breakpoint */
  }
  body.sb-menu-open .sb-header__utility nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none;
  }

  /* ---- Drawer rows: prototype spacing, no pointer -------------------------
     Two measured differences against the prototype's drawer rows (390px):
       · height 45px vs 52px — Elementor's `line-height: 20px` squeezed the row;
         the prototype inherits the body leading. Fixed with --sb-leading-normal.
       · `justify-content: space-between` on the row, which let the label drift
         right; the prototype aligns its rows to the start.
     And the yellow pointer is a DESKTOP affordance: in the drawer it drew a
     short centred line on hover, so it is switched off here. */
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item,
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item {
    justify-content: flex-start;
    line-height: var(--sb-leading-normal);
  }
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item::after,
  .sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item::after {
    content: none;
  }
}

/* --- Menu button (mobile): the ✕ follows the button, not Elementor's grey ----
   The toggle's <svg> resolves to fill #33373D from Elementor's own icon CSS,
   and `color` (which our bundle sets) never reaches it. Both properties are set
   per state so the icon is navy on the white button and white on the navy one. */
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle svg,
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle svg * {
  fill: var(--sb-color-navy);
  color: var(--sb-color-navy);
}
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle[aria-expanded="true"] svg,
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle[aria-expanded="true"] svg *,
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active svg,
.sb-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active svg * {
  fill: var(--sb-color-white);
  color: var(--sb-color-white);
}

/* =============================================================================
   STATE CONSISTENCY — nothing in the chrome changes size on hover or focus
   =============================================================================
   Elementor's Nav Menu saves the hover and active states with their own padding
   (its Hover state came through as `13px 20px` against a resting `12px`), so
   items grew and their labels jolted sideways on hover. Measured on the live
   site before this block: item x moved 16px, width +16px, label shifted ~8px.
   Every interactive item below therefore repeats its resting padding in the
   hover, focus and active states. Tokens only; no !important.
   ============================================================================= */

.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:hover,
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item:focus,
.sb-header__utility .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active {
  padding: var(--sb-space-2) 0;
}

.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus,
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active {
  padding: var(--sb-space-2) var(--sb-space-3);
}

.sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:hover,
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:focus,
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item:hover,
.sb-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item:focus {
  padding: var(--sb-space-3) var(--sb-space-5);
}

/* --- Footer columns ---------------------------------------------------------
   Same story as the header: Elementor's icon-list and heading widgets carry
   their own type and colour, so the footer variants are restated here at
   matching specificity. */
.sb-footer .elementor-widget-heading .elementor-heading-title {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: var(--sb-text-base);
  color: var(--sb-color-white);
}
.sb-footer .elementor-widget-text-editor,
.sb-footer .elementor-widget-text-editor p,
.sb-footer .elementor-icon-list-text {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-sm);
  color: var(--sb-color-navy-100);
}
.sb-footer .elementor-icon-list-item {
  padding-block: var(--sb-space-1);
}
.sb-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
.sb-footer .elementor-icon-list-item a:focus .elementor-icon-list-text {
  color: var(--sb-color-yellow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sb-footer .elementor-icon-list-item a:focus-visible,
.sb-footer .elementor-widget-text-editor a:focus-visible {
  outline: none;
  border-radius: var(--sb-radius-sm);
  box-shadow: var(--sb-shadow-focus-inverse);
}