/* ==========================================================================
   Menus: the header menu, its dropdowns, the phone menu and the footer menu.
   Loaded on every front-end page, after style.css (it depends on that handle,
   so equal-weight rules here win on source order).

   GROUNDWORK (4 Oct 2026). Everything in this first section applies to every
   site, Style 1 included, and changes nothing anyone can see: it makes the
   menus work with a keyboard and a screen reader, and stops the page moving
   behind the phone menu. Proof: every menu state on four sites screenshotted
   before and after, pixel-identical (e2e/menu-1004/visual-states.js).
   The behaviour lives in js/menus.js.
   ========================================================================== */

/* The phone menu's close X and its sub-menu arrows are real buttons now. They
   were a <div> and a <span>: nothing could reach them with Tab and screen
   readers had no name for them (WCAG 2.1.1, 4.1.2). style.css gives every
   button a grey fill, a border and padding, so all of that comes off here and
   they draw exactly as the old elements did. */
.mobile-menu-wrapper button.mobile-menu-close,
.mobile-menu-wrapper button.icon {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.mobile-menu-wrapper button.mobile-menu-close {
  display: block;
  /* Round, so the keyboard focus ring is a circle round the X instead of a
     square box (Brian, 14 Oct 2026). Nothing else about it shows. */
  border-radius: 50%;
}
/* A block, so the button is exactly the X's square (an inline svg left a
   line's gap below it, and the round ring came out an oval). */
.mobile-menu-wrapper button.mobile-menu-close svg {
  display: block;
}
.mobile-menu-wrapper button.icon {
  cursor: pointer;
}

/* The page behind the open phone menu stays put.
   - <html> carries the lock, with scrollbar-gutter, so a desktop-width window
     keeps the scrollbar's space and nothing shifts sideways when it goes.
   - <body> is set too because that is what smooth scrolling (js/smooth-scroll.js)
     watches to pause itself (it accepts hidden or clip). clip, not hidden: with
     <html> no longer visible, body:hidden would become a scroll container of its
     own and the sticky header behind the menu would come unstuck. */
html.sue-menu-locked {
  overflow: hidden;
}
/* Only on a page that had a scrollbar (js/menus.js checks): on a short page
   the reserved gutter itself moved everything sideways. */
html.sue-menu-locked.sue-menu-gutter {
  scrollbar-gutter: stable;
}
body.sue-menu-locked {
  overflow: clip;
}

/* Escape closed this dropdown while the pointer or focus is still on its item
   (WCAG 1.4.13: content shown on hover or focus can be dismissed without moving
   either). !important because it has to beat every :hover and :focus-within rule
   that shows a sub-menu, at any depth and in every dropdown style. js/menus.js
   clears it as soon as both the pointer and focus have left the item.
   The links inside are hidden too, and nothing transitions: style.css animates
   `all` over 0.3s on the list AND on each link, so a link inherits "hidden" only
   after both have run (0.6s). Until then it stays focusable, and a quick Tab
   after Escape landed inside the closing dropdown and then lost focus to the page
   when the link finished hiding. */
header.site-header .menu-wrapper li.sue-sub-dismissed > ul,
header.site-header .menu-wrapper li.sue-sub-dismissed > ul * {
  visibility: hidden !important;
  transition: none !important;
}
header.site-header .menu-wrapper li.sue-sub-dismissed > ul {
  opacity: 0 !important;
}

/* The header menu ran out of room (js/menus.js measures it). Rather than wrap
   onto a second line, the menu hands over to the hamburger, exactly as it does
   below 1280px. Only happens when a menu really does not fit; none of the menus
   measured for the audit (4-8 items) wraps at 1280px. style.css lets the phone
   menu open at desktop widths while this class is on. */
header.site-header.sue-menu-overflowing .main-header .menu-wrapper {
  display: none;
}
header.site-header.sue-menu-overflowing button.mobile-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The header row on a phone (or wherever the hamburger shows) must fit the
   screen. With both header buttons, login, search and cart all switched on it
   ran past the edge and the page scrolled sideways. js/menus.js sets
   data-sue-squeeze only while the row does not fit, as a list of what has given
   way, in this order: label (the Menu Style's word MENU), b2-icon (Button 2
   shows only its icon), b2-hide (Button 2 leaves the bar), b1-icon, b1-hide,
   logo (the logo may shrink). Both buttons are in the phone menu too.
   !important: style.css shows and hides these buttons per breakpoint with
   !important rules of its own. The icon-only look is in the Style 1 refresh
   section below. */
header.site-header[data-sue-squeeze~='b2-hide'] .main-header .btn-wrap .contact_button,
header.site-header[data-sue-squeeze~='b1-hide'] .main-header .btn-wrap .register_button {
  display: none !important;
}
/* No hamburger to hold them (a page with Hide Menu Wrap on), so nothing may
   leave the bar: the logo gets a row of its own, centred, and the buttons and
   icons are centred on the row below (stack); then the buttons show only their
   icons (b2-icon, b1-icon); only then does that row wrap (Brian, 21 Oct 2026:
   it wrapped raggedly under a logo on the left, three lines on a 360px phone). */
header.site-header[data-sue-squeeze~='stack'] .main-header .container {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  padding-block: 8px;
}
header.site-header[data-sue-squeeze~='stack'] .main-header .logo {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}
header.site-header[data-sue-squeeze~='stack'] .main-header .btn-wrap {
  justify-content: center;
  margin-inline: auto;
}
header.site-header[data-sue-squeeze~='wrap'] .main-header .btn-wrap {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ---------- Fluid menu (15 Oct 2026, every style) ------------------------ */
/* The top-level links fit the room the menu has instead of stepping down at
   1660, 1540 and 1399px, and the Theme Options size slider is retired (Brian,
   15 Oct 2026). When the room runs short the gaps between the links close up
   first (60 to 22px), then the text gets smaller (20 to 15px) while the gaps
   close the last bit (22 to 16px); only when even that cannot fit on one line
   does the menu hand over to the menu button. js/menus.js measures and writes
   one number, --sue-nav-s: 0 is the full size, 0.5 the gaps closed, 1 the
   floor. Each marker keeps its own ranges here (the Pill's spacing is its gap
   and its padding).
   Before the script has measured (and without it) the text is 20px and the gap
   follows the window: 22px at 1280px to 60px at 1660px. */
header.site-header {
  --sue-nav-font-max: 20px;
  --sue-nav-font-min: 15px;
  --sue-nav-gap-max: 60px;
  --sue-nav-gap-mid: 22px;
  --sue-nav-gap-min: 16px;
  --sue-nav-pad-max: 0px;
  --sue-nav-pad-min: 0px;
  --sue-nav-end-max: 40px;
}
body.sue-mk-pill header.site-header {
  --sue-nav-gap-max: 24px;
  --sue-nav-gap-mid: 8px;
  --sue-nav-gap-min: 4px;
  --sue-nav-pad-max: 16px;
  --sue-nav-pad-min: 10px;
}
header.site-header[data-sue-nav] {
  --sue-nav-k1: min(var(--sue-nav-s, 0) * 2, 1);
  --sue-nav-k2: max(var(--sue-nav-s, 0) * 2 - 1, 0);
  --sue-nav-font: calc(var(--sue-nav-font-max) - var(--sue-nav-k2) * (var(--sue-nav-font-max) - var(--sue-nav-font-min)));
  --sue-nav-gap: calc(var(--sue-nav-gap-max) - var(--sue-nav-k1) * (var(--sue-nav-gap-max) - var(--sue-nav-gap-mid)) - var(--sue-nav-k2) * (var(--sue-nav-gap-mid) - var(--sue-nav-gap-min)));
  --sue-nav-pad: calc(var(--sue-nav-pad-max) - var(--sue-nav-k2) * (var(--sue-nav-pad-max) - var(--sue-nav-pad-min)));
  --sue-nav-end: calc(var(--sue-nav-end-max) * (1 - var(--sue-nav-k1)));
}
/* The top-level list and links only (the fallback page list has no id). One
   line per link; a <br> in a title still makes two. Only the colour eases: a
   size that animated was measured half-way (the JTCC lesson). */
header.site-header .main-header .menu-wrapper ul:not(.sub-menu, .children) {
  column-gap: var(--sue-nav-gap, clamp(22px, 10vw - 106px, 60px));
}
header.site-header .main-header .menu-wrapper ul:not(.sub-menu, .children) > li > a {
  font-size: var(--sue-nav-font, 20px);
  white-space: nowrap;
  transition: color 0.3s var(--sue-ease);
}
/* Until the script has fitted it, one row: at full size a long menu took two,
   and the page jumped up by a row when it was fitted (or handed over). What is
   left is a few pixels in Two-tier and Centred, whose menu row follows the
   text size. Clipped sideways only, so the dropdowns still hang below. Only
   while scripts run (functions.php, sue_js_mark): without them it wraps, and
   every link stays reachable. */
html.sue-js header.site-header:not([data-sue-nav]):not(.sue-menu-overflowing) .main-header .menu-wrapper ul:not(.sub-menu, .children) {
  flex-wrap: nowrap;
  overflow-x: clip;
}

/* ==========================================================================
   STYLE 1 REFRESH (13 Oct 2026). Brian's audit of Style 1 ("the actual
   checkbox is a tick but there are pre-existing bugs, glitches, and
   refinements needed") and his answers D1-D8, all as recommended:
   https://claude.ai/artifact/FPncDiUMQkt8Vf156tD9Fw

   - Every style: dropdowns fade out where they are (they slid onto a pointer
     resting under them and reopened, on a loop), header buttons never wrap,
     button icons, header icons with real tap areas.
   - The Classic dropdown (Style 1, and any Custom mix that keeps it): hovered
     rows light up as a soft pill, the third level opens as its own panel
     beside the row, arrows on items that open something.
   - The Split phone menu (Style 1): below 768px one wide panel whose sections
     open underneath their item; the third level indented everywhere.

   The Classic rules repeat style.css's selector after a prefix that adds weight,
   so each always outweighs the rule it replaces:
     body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) = the Classic dropdown
     body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) = the Split phone menu
   Colours: --submenu-* (header.php; the hovered row and the flyout are worked
   out from the Sub Menu colour fields, or the preset, by
   SUE_Menu_Styles::classic_layers(), each text colour checked against what it
   sits on).
   ========================================================================== */

/* ---------- Dropdowns that never chase the pointer (every style) ---------- */
/* style.css slid a closing Classic dropdown from 46px to 80px below its item
   while it was still visible and could still be hovered: with the pointer
   resting just under it, it slid onto the pointer, reopened, slid back off and
   closed - 9 to 13 times in 3 seconds (Chrome, Safari), or stuck open. Now a
   dropdown moves only while it opens; closing, it fades out where it is and
   moves back only once it is invisible. The Card did the same by 10px. */
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu {
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s,
    top 0s linear 0.2s;
}
body.sue-dd-card header.site-header .menu-wrapper ul li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  transition:
    opacity 0.2s ease,
    top 0.2s ease,
    visibility 0s;
}

/* ---------- The Classic dropdown --------------------------------------- */
/* The box: a tighter panel with rounded corners and a soft shadow, the colour
   laid over white (the field may be see-through), 8px under its item at every
   font size (it sat 46px from the item's top, so a large menu font put the box
   over its own link). */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu {
  width: 300px;
  padding: 12px;
  top: calc(100% + 8px);
  background-color: var(--submenu-bg-solid, var(--submenu-bg-color, var(--secondary-color, #6aa308)));
  border-radius: 12px;
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.08);
  text-align: left;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s,
    transform 0s linear 0.2s;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  top: calc(100% + 8px);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s;
}
/* The pointer's way down from the item to its box (the 8px gap closed it):
   hung from the item, as wide as the item, so it never lies over a neighbour. */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
/* A long box scrolls inside itself rather than running off the bottom of the
   window (a sticky header cannot be scrolled past). Not one with a third
   level: scrolling would cut its flyouts off. */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu:not(:has(ul.sub-menu)) {
  max-height: calc(100vh - var(--header-height, 120px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Rows: the whole width is the link, and the hovered one lights up (D1). */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li {
  position: relative;
  margin: 0;
  padding: 0;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.3;
  color: var(--submenu-text-color, #000);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li a:hover,
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li:focus-within > a {
  background-color: var(--submenu-row-bg, rgba(0, 0, 0, 0.12));
  color: var(--submenu-row-text, var(--submenu-hover-text-color, #000));
  text-decoration: none;
}
/* A row that opens a third level says so (D2). */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: 34px;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip.menu-item-has-children > a::after {
  transform: translateY(-50%) rotate(-135deg);
}
/* The third level and below: its own panel beside the row it came from, lined
   up with it, a shade deeper, 8px away (D2). It used to touch the box in the
   same colour, lined up with the box's top: one L-shaped block. */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu {
  left: calc(100% + 20px);
  right: auto;
  top: -12px;
  background-color: var(--submenu-flyout-bg, var(--submenu-bg-solid, var(--submenu-bg-color, #6aa308)));
  transform: translateX(-6px);
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  top: -12px;
  transform: none;
}
/* The way across the 20px between the row and its panel (the box's own 12px
   padding, then the 8px gap). */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 20px;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu li a {
  color: var(--submenu-flyout-text, var(--submenu-text-color, #000));
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu li a:hover,
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu li:focus-within > a {
  background-color: var(--submenu-flyout-row-bg, rgba(0, 0, 0, 0.12));
  color: var(--submenu-flyout-row-text, var(--submenu-hover-text-color, #000));
}
/* js/menus.js opens a panel leftwards when it would run off the right edge. */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip > ul.sub-menu {
  left: auto;
  right: calc(100% + 20px);
  transform: translateX(6px);
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  transform: none;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip > ul.sub-menu::before {
  left: auto;
  right: -20px;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.sue-flip > ul.sub-menu {
  left: auto;
  right: 0;
}
/* Top-level items that open a dropdown say so (D3). The arrow hangs half into
   the gap after its item (22-60px wide), so a menu that only just fitted on
   one line still does. */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 -0.55em 0.25em 0.45em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.6;
  vertical-align: middle;
}
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children:not(.sue-sub-dismissed):is(:hover, :focus-within, .sue-tap-open) > a::after {
  transform: translateY(3px) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu,
  body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu,
  body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper ul li ul.sub-menu li a {
    transition: none;
    transform: none;
  }
}

/* ---------- Header Button 1 and 2 (every style) ------------------------- */
/* One line, always: a long text made a tall oval ("Register for Summer Camp"
   became four lines on a phone). A button that does not fit gives way instead
   (data-sue-squeeze, above). */
header.site-header .main-header .btn-wrap .animated-button {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Icons: sized to the text, drawn in the button's text colour. A pasted SVG
   is resized and recoloured too (it rendered 51px with no size of its own, and
   one drawn in black stayed black on a dark button). */
header.site-header .main-header .btn-wrap .animated-button.sue-hb svg.sue-hb-icon,
.mobile-menu-wrapper .btn-wrap .animated-button.sue-hb svg.sue-hb-icon {
  width: var(--sue-hb-icon, 1.05em);
  height: var(--sue-hb-icon, 1.05em);
  flex: none;
  /* Centred on the line, an icon spans exactly the capitals' height, so beside
     mostly lower-case text it read as sitting high (Brian, 14 Oct 2026). It
     sits half-way down to the lower case's middle. Not when it is alone in the
     button (Icon only), where it is centred in the circle. */
  position: relative;
  top: 0.07em;
}
/* A button whose link has no text: the icon is alone, so it stays centred. */
header.site-header .main-header .btn-wrap .animated-button.sue-hb svg.sue-hb-icon:has(+ span.desktop:empty),
.mobile-menu-wrapper .btn-wrap .animated-button.sue-hb svg.sue-hb-icon:has(+ span.desktop:empty) {
  top: 0;
}
.animated-button.sue-hb svg.sue-hb-custom:not([fill='none' i]),
.animated-button.sue-hb svg.sue-hb-custom [fill]:not([fill='none' i]) {
  fill: currentColor !important;
}
.animated-button.sue-hb svg.sue-hb-custom [stroke]:not([stroke='none' i]) {
  stroke: currentColor !important;
}
/* Outline and Solid belong to the style now, not to which button it is:
   style.css took the hover border off Register's sliding layer by name, which
   would have left a Solid Button 1 borderless (white on the white header). */
header.site-header .main-header .btn-wrap .animated-button.sue-hb-outline .center-to-left {
  border: none;
}
header.site-header .main-header .btn-wrap .animated-button.sue-hb-solid .center-to-left {
  border: 3px solid var(--secondary-color, #6aa308);
}
/* Icon only: the button's "On phones" choice, or the header running out of
   room. The text stays for screen readers. */
@media screen and (max-width: 767px) {
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon :is(.center-to-left, .invisible-text) span,
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon .left-to-center span.mobile {
    display: none !important;
  }
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon .left-to-center span.desktop {
    display: inline !important;
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon :is(.center-to-left, .left-to-center, .invisible-text) {
    padding: 0 !important;
    justify-content: center;
  }
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon .invisible-text {
    width: var(--sue-hb-round, 2.9em);
  }
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-phone-icon svg.sue-hb-icon {
    top: 0;
  }
}
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon :is(.center-to-left, .invisible-text) span,
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon .left-to-center span.mobile,
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon :is(.center-to-left, .invisible-text) span,
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon .left-to-center span.mobile {
  display: none !important;
}
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon .left-to-center span.desktop,
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon .left-to-center span.desktop {
  display: inline !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon :is(.center-to-left, .left-to-center, .invisible-text),
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon :is(.center-to-left, .left-to-center, .invisible-text) {
  padding: 0 !important;
  justify-content: center;
}
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon .invisible-text,
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon .invisible-text {
  width: var(--sue-hb-round, 2.9em);
}
header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .contact_button.sue-hb-has-icon svg.sue-hb-icon,
header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .register_button.sue-hb-has-icon svg.sue-hb-icon {
  top: 0;
}
/* Size (15 Oct 2026; SUE_Header_Buttons::size()). Beside the cart, account and
   search icons (22-26px at every width) a Large button was 57px tall with a 3px
   border and a 21px icon - 18px once scrolled, 16px on tablets (Brian: "the CTA
   button feels too big but then the icon on the inside feels too small").
   Compact sits level with them: a thinner border, the icon at their size,
   tablets and phones 40px (the icons' own tap boxes are 40px). It keeps its
   size when the header shrinks on scroll. The visible layers' side padding plus
   their 2px border equals the sizing layer's, and the sizing layer's text has
   the weight the visible text is drawn in (style.css draws it 500 under 768px
   but sizes it 400; Large's 2px slack hid that, Compact has none), so a long
   text fits exactly. */
header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact {
  --sue-hb-icon: 22px;
  --sue-hb-round: 44px;
  font-size: 18px;
}
header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact .invisible-text {
  min-height: 44px;
  padding: 6px 22px;
  font-weight: inherit;
}
header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact :is(.left-to-center, .center-to-left) {
  padding: 6px 20px;
  border-width: 2px;
}
@media screen and (max-width: 1023px) {
  header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact {
    --sue-hb-icon: 20px;
    --sue-hb-round: 40px;
    font-size: 15px;
    min-height: 40px;
  }
  /* 2px narrower each side than Large here, to pay for the 4px larger icon: a
     button with an icon keeps Large's width (one without is 4px narrower), so
     the buttons give way to the row (data-sue-squeeze) where they did before,
     or later. Under 768px a long text can add a few px: it is sized at the
     weight it is drawn in (above), where Large sizes it lighter. */
  header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact .invisible-text {
    min-height: 40px;
    padding: 6px 13px;
  }
  header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-compact :is(.left-to-center, .center-to-left) {
    padding: 6px 11px;
  }
  /* Solid's hover layer (white, bordered) kept a 3px border here, where
     Outline's border is 2px. */
  header.site-header .main-header .btn-wrap .animated-button.sue-hb-solid .center-to-left {
    border-width: 2px;
  }
}
/* Large, scrolled: the logo shrinks to 50-80px and the text to 17px, but the
   button stayed 57px tall - taller than a 50px logo. */
@media screen and (min-width: 1024px) {
  header.site-header:is(.fixed, .sue-bar-steady) .main-header .btn-wrap .animated-button.sue-hb:not(.sue-hb-compact) {
    --sue-hb-round: 48px;
  }
  header.site-header:is(.fixed, .sue-bar-steady) .main-header .btn-wrap .animated-button.sue-hb:not(.sue-hb-compact) .invisible-text {
    min-height: 48px;
  }
}
/* The logo keeps its size wherever the menu button shows; it shrinks only as
   the last thing to give way (it used to be the first, down to 45px wide).
   Until js/menus.js has measured the row once (data-sue-fit), nothing has
   given way yet, so the row is clipped: a full-size logo pushed it past the
   window on a phone (staging's 390px header made a 404px page at load, and
   Safari kept that width after the buttons gave way). What the clip hides for
   that moment is the menu button, which needs the script anyway. Letting the
   logo shrink until then instead made a text logo wrap and the page jump. */
@media screen and (max-width: 1279px) {
  header.site-header .main-header .logo {
    flex-shrink: 0;
  }
  header.site-header:not([data-sue-fit]) .main-header .container {
    overflow-x: clip;
  }
}
/* While js/menus.js measures the row (see fitHeaderRow there). */
header.site-header[data-sue-fitting] .main-header .container {
  overflow-x: clip;
}
header.site-header.sue-menu-overflowing .main-header .logo {
  flex-shrink: 0;
}
header.site-header[data-sue-squeeze~='logo'] .main-header .logo {
  flex-shrink: 1;
  min-width: 0;
}
/* The phone menu's copies: the panel's width at most; a long text wraps there.
   The hidden layer that sizes the button gets exactly the visible layers' room
   (12px 24px padding + their 3px border) and line height. With style.css's 30px
   sides it wrapped a text that still fitted on one line in sight (the button
   grew a line), and with its 1.0 line height a two-line text was sized for 34px
   but drawn 48px tall, touching the border. */
.mobile-menu-wrapper .inner .btn-wrap .animated-button {
  max-width: 100%;
}
.mobile-menu-wrapper .inner .btn-wrap .animated-button .invisible-text {
  white-space: normal;
  padding: 15px 27px;
}
.mobile-menu-wrapper .inner .btn-wrap .animated-button :is(.center-to-left, .left-to-center, .invisible-text) span {
  line-height: 1.2;
}

/* ---------- Cart, account and search (every style) --------------------- */
/* 40px to tap (the cart was 26x23), the icons where they were: the boxes
   take back the extra room with negative margins. The search icon is a button
   now; style.css gives every button a grey fill, a border and padding. The
   Centred layout's top-left corner has a second search button (header.php). */
header.site-header .main-header .btn-wrap :is(.cart-icon-wrapper > a.cart-contents, .login-icon > a, button.search-icon),
header.site-header .main-header .sue-hl-left button.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
header.site-header .main-header .btn-wrap :is(.cart-icon-wrapper, .login-icon, button.search-icon),
header.site-header .main-header .sue-hl-left button.search-icon {
  margin-inline: -5px;
}
/* Their links sat on a line of text inside a plain block: from 1440px, where
   the header's text is 21px, that line is taller than the 40px box and the
   cart and account sat 2px above the search icon and the buttons beside them
   (Style 4 round 2, 16 Oct 2026). */
header.site-header .main-header .btn-wrap :is(.cart-icon-wrapper, .login-icon) {
  display: flex;
  align-items: center;
}
/* Their colour changes; their keyboard ring never fades (every link transitions
   `all` over 0.3s, so the white layer faded out after Tab had moved on: Style 4
   round 2, 16 Oct 2026). */
header.site-header .main-header :is(.btn-wrap .cart-icon-wrapper > a.cart-contents, .btn-wrap .login-icon > a, .sue-hl-left .sue-hb-link) {
  transition:
    color 0.2s ease-out,
    background-color 0.2s ease-out;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) button.search-icon {
  margin-block: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) button.search-icon:hover {
  background: none;
}
/* The count sits where it did on the icon (left:20px, top:-12px of a 26x23 icon). */
header.site-header .main-header .btn-wrap .cart-icon-wrapper .cart-count {
  left: 27px;
  top: -4px;
}

/* ---------- The Split phone menu (Style 1) ----------------------------- */
/* The panel itself takes focus when the menu is opened by a tap (js/menus.js). */
.mobile-menu-wrapper:focus {
  outline: none;
}
/* A third level, at every width: a box of its own inside the section, a shade
   off it away from the text (as the desktop flyout is; header.php works the
   colour out), smaller and not in capitals. It looked exactly like the second
   level; then (13 Oct) it hung off a thin rule on its right, which beside one
   item looked like a scroll bar (Brian, 14 Oct 2026). */
body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu {
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 8px;
  background-color: var(--mobile-submenu-inset-bg, rgba(0, 0, 0, 0.2));
}
body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu li {
  margin-bottom: 2px;
}
body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu li:last-child {
  margin-bottom: 0;
}
body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu li a {
  color: var(--mobile-submenu-inset-text, var(--mobile-submenu-text-color, #fff));
  font-size: 0.88em;
  text-transform: none;
  letter-spacing: 0;
}
/* The section arrows: a rounded keyboard focus ring, not a square one. */
body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper ul.menu > li.menu-item-has-children > button.icon {
  border-radius: 8px;
}
/* Below 768px: one wide panel (D4). It was 173px on every phone, and even at
   767px: labels wrapped and both header buttons hung off it onto the page. A
   48px strip of the page stays, to tap the menu shut. A section opens
   underneath its item, in the phone sub-menu colour, one at a time; its arrow
   sits by its name and turns. Tablets keep the two panels side by side. */
@media screen and (max-width: 767px) {
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper {
    padding: 0;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper::before {
    max-width: none;
    width: calc(100% - 48px);
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner {
    width: calc(100% - 48px);
    margin-left: auto;
    padding: 76px 24px 32px;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu {
    width: auto;
    margin: 0;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children {
    padding-left: 0;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li > a {
    min-width: 0;
    padding: 13px 0;
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper ul.menu > li.menu-item-has-children > button.icon {
    position: static;
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    margin-right: 2px;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper ul.menu > li.menu-item-has-children > button.icon svg {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper ul.menu > li.menu-item-has-children > button.icon[aria-expanded='true'] svg {
    transform: rotate(-90deg);
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu {
    position: static;
    display: none;
    flex-basis: 100%;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 8px 16px;
    border-radius: 10px;
    overflow: visible;
    opacity: 1;
    visibility: inherit;
    transition: none;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children ul.sub-menu.active {
    display: block;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li {
    margin: 0;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu {
    display: block;
    margin: 0 0 8px;
    padding: 2px 12px;
    border-radius: 8px;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner ul.menu > li ul.sub-menu li ul.sub-menu li a {
    padding: 7px 0;
    font-size: 14px;
  }
  /* The buttons: the panel's full width, with their full text. */
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner .btn-wrap {
    width: auto;
    margin-top: 28px;
    justify-content: stretch;
    gap: 12px;
  }
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .inner .btn-wrap .animated-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.sue-pm-drawer, .sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper ul.menu > li.menu-item-has-children > button.icon svg {
    transition: none;
  }
}

/* ==========================================================================
   MENU STYLES (step 2, 4 Oct 2026). Everything below is scoped to a body class
   printed by inc/menu-styles.php, and that file prints none for Style 1, so
   none of this can reach a site that has not picked another style.

   Colours: the accent is --sue-nav-accent (header.php), the site's Primary
   darkened in its own hue until it reads on white and on the hover tint. The
   Items Hover Color field still colours the hover marker. The Sub Menu colour
   fields belong to the Classic box; the Card is a white surface by design.
   ========================================================================== */

/* Menu item descriptions are printed only when the site turns them on; only
   the dropdown and phone styles that have room for them show them. */
.sue-menu-item-desc {
  display: none;
}

/* ---------- Dropdown: Card ---------------------------------------------- */
/* Each rule repeats style.css's selector with `body.sue-dd-card` in front, so it
   always outweighs the rule it replaces. */
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu {
  width: max-content;
  min-width: 230px;
  max-width: 320px;
  left: -16px;
  top: calc(100% + 22px);
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 14px;
  box-shadow:
    0 20px 40px -14px rgba(16, 24, 40, 0.28),
    0 2px 6px rgba(16, 24, 40, 0.06);
  text-align: left;
  /* No transition here: "Dropdowns that never chase the pointer" above sets it
     (this rule comes later with the same selector, so one here would win and
     slide a closing card back onto the pointer). */
  z-index: 10;
}
/* The gap between the item and its card belongs to the card, so the pointer
   crossing it never leaves the item. */
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
/* For the top level the bridge hangs from the ITEM, as wide as the item: one
   as wide as the card lay over the neighbouring items' links and ate their
   clicks, and one inside the card would be cut off when a long card scrolls. */
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu::before {
  content: none;
}
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}
/* A long card scrolls inside itself instead of running off the bottom of the
   window, where its last links could not be reached (a sticky header cannot
   be scrolled past). Not a card with a third level: a scrolling box would cut
   its flyouts off. Browsers without :has() keep the full-length card. */
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu:not(:has(ul.sub-menu)) {
  max-height: calc(100vh - var(--header-height, 120px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.sue-dd-card header.site-header .menu-wrapper ul li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  top: calc(100% + 12px);
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li {
  position: relative;
  padding: 0;
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #17212b;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere; /* one unbreakable word ran 147px past the card */
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li a:hover,
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li:focus-within > a {
  background: #f1f4f8;
  background: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 9%, #ffffff);
  color: #17212b;
  text-decoration: none;
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu .sue-menu-item-desc {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #5a6470;
}
/* An item that opens a third level: an arrow, and its card flies out beside. */
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children > a {
  padding-right: 36px;
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.55;
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu,
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  left: calc(100% + 6px);
  right: auto;
  top: -9px;
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu ul.sub-menu::before {
  left: -6px;
  right: auto;
  top: 0;
  width: 6px;
  height: 100%;
}
/* js/menus.js flips a card that would run off the right edge of the window. */
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip > ul.sub-menu,
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  left: auto;
  right: calc(100% + 6px);
}
body.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li.sue-flip > ul.sub-menu::before {
  left: auto;
  right: -6px;
}
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li.sue-flip > ul.sub-menu {
  left: auto;
  right: -16px;
}
/* Top-level items that open a dropdown say so. */
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 0 0.25em 0.55em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.65;
  vertical-align: middle;
}
body.sue-dd-card header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children:not(.sue-sub-dismissed):is(:hover, :focus-within, .sue-tap-open) > a::after {
  transform: translateY(3px) rotate(-135deg);
}

/* ---------- Hover marker: Underline ------------------------------------- */
/* A bar, not text-decoration: it grows from the centre and sits clear of the
   descenders. Drawn as a background so the dropdown arrow keeps ::after. Its
   colour is the Items Hover Color (already darkened to read on white). */
body.sue-mk-underline header.site-header .menu-wrapper #primary-menu > li > a {
  background-image: linear-gradient(
    var(--menu_items_hover_color, var(--sue-nav-accent, #1b4ea0)),
    var(--menu_items_hover_color, var(--sue-nav-accent, #1b4ea0))
  );
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 2px);
  background-size: 0% 3px;
  transition:
    color 0.3s var(--sue-ease),
    background-size 0.25s ease;
}
body.sue-mk-underline header.site-header .menu-wrapper #primary-menu > li > a:hover {
  color: #000000;
}
body.sue-mk-underline header.site-header .menu-wrapper #primary-menu > li:not(.sue-sub-dismissed):is(:hover, :focus-within, .sue-tap-open) > a,
body.sue-mk-underline.sue-menu-current header.site-header .menu-wrapper #primary-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
  background-size: 100% 3px;
}

/* ---------- Hover marker: Pill ------------------------------------------ */
/* Its gap and side padding close up as the menu runs short of room (Fluid
   menu, above). */
body.sue-mk-pill header.site-header .menu-wrapper #primary-menu {
  column-gap: var(--sue-nav-gap, clamp(4px, 1.1vw, 24px));
}
body.sue-mk-pill header.site-header .menu-wrapper #primary-menu > li > a {
  padding: 8px var(--sue-nav-pad, 16px);
  border-radius: 999px;
  transition:
    color 0.3s var(--sue-ease),
    background-color 0.25s ease;
}
body.sue-mk-pill header.site-header .menu-wrapper #primary-menu > li > a:hover,
body.sue-mk-pill header.site-header .menu-wrapper #primary-menu > li:not(.sue-sub-dismissed):is(:hover, :focus-within, .sue-tap-open) > a {
  color: #000000;
  background-color: #eef2f7;
  background-color: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 10%, #ffffff);
}
body.sue-mk-pill.sue-menu-current header.site-header .menu-wrapper #primary-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
  color: var(--sue-nav-accent, #1b4ea0);
  background-color: #e6ecf4;
  background-color: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 16%, #ffffff);
}

/* ---------- Current page, with the Colour marker ------------------------ */
body.sue-menu-current:not(.sue-mk-underline):not(.sue-mk-pill) header.site-header .menu-wrapper #primary-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
  color: var(--menu_items_hover_color, var(--secondary-ink-color, #6aa308));
  font-weight: 700;
}
/* ... and inside the dropdowns. */
body.sue-menu-current header.site-header .menu-wrapper ul.sub-menu li:is(.current-menu-item, .current_page_item) > a {
  font-weight: 700;
}
/* A tint, not a bar: an inset bar on the card's rounded rows drew a bracket. */
body.sue-menu-current.sue-dd-card header.site-header .menu-wrapper ul li ul.sub-menu li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sue-nav-accent, #1b4ea0);
  background: #f4f6f9;
  background: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 6%, #ffffff);
}

/* ---------- Sticky header: Not sticky ----------------------------------- */
body.sue-st-static header.site-header .main-header,
body.sue-st-static header.site-header.sticky-banner {
  position: relative;
  top: auto;
}
/* Sticky columns elsewhere (the registration cart, checkout, My Account) sit
   below the header; with nothing pinned at the top, they sit at the top. */
body.sue-st-static {
  --sue-header-offset: 0px;
}

/* ---------- Sticky header: Tuck away ------------------------------------ */
/* js/menus.js adds .sue-tucked while scrolling down and takes it off on the
   first scroll up, with --sue-tuck-h = the sticky part's height. It slides by
   moving its sticky top, NOT with a transform: a transform turns the header
   into the containing block of anything position:fixed inside it, and the
   registration plugin's cart drawer (fixed, parked at right:-758px inside the
   cart icon) then widened the page, which scrolled sideways while tucked.
   .main-header already transitions `all` (style.css). */
body.sue-st-smart header.site-header.sue-tucked:not(.sticky-banner) .main-header {
  top: calc(-1 * var(--sue-tuck-h, 200px));
  box-shadow: none;
}
body.sue-st-smart header.site-header.sticky-banner {
  transition: top 0.3s ease;
}
body.sue-st-smart header.site-header.sticky-banner.sue-tucked {
  top: calc(-1 * var(--sue-tuck-h, 300px));
}
/* Sticky columns elsewhere glide with it rather than jump. */
body.sue-st-smart :is(.registration-cart .cart-left, .registration-cart .cart-right, .checkout-left-col, .checkout-right-col, .woocommerce-MyAccount-navigation) {
  transition: top 0.3s ease;
}
body.sue-st-smart.sue-header-tucked {
  --sue-header-offset: 0px;
}

/* ---------- Pinned on their own: banner, Utility bar (16 Oct 2026) ------ */
/* header.php's sue-pin-stack: the announcement banner (.sue-pin-banner) and/or
   the Utility bar (.sue-pin-utility) stay at the top on their own, each under
   the one above, and the bar sticks under them (Always), tucks away under them
   (Tuck away) or scrolls off (Not sticky: the rule above keeps it relative).
   The header element stays display:inline, so each child sticks to the page,
   not to the header. js/menus.js publishes what is pinned above the bar
   (--sue-pin-banner-h, --sue-pin-above, on <html>). The banner and the
   Utility bar sit above the bar so it can tuck away under them; while the
   registration cart drawer (inside the bar) is open, the bar comes first. */
header.site-header.sue-pin-stack.sue-pin-banner > .header-notice-wrapper {
  position: sticky;
  top: var(--sue-adminbar, 0px);
  z-index: 10001;
}
header.site-header.sue-pin-stack.sue-pin-utility > .sue-utility-bar {
  position: sticky;
  top: calc(var(--sue-adminbar, 0px) + var(--sue-pin-banner-h, 0px));
  z-index: 10000;
}
header.site-header.sue-pin-stack .main-header {
  top: calc(var(--sue-adminbar, 0px) + var(--sue-pin-above, 0px));
}
body.sue-st-smart header.site-header.sue-pin-stack.sue-tucked .main-header {
  top: calc(var(--sue-adminbar, 0px) + var(--sue-pin-above, 0px) - var(--sue-tuck-h, 200px));
}
body.wc-reg-cart-open header.site-header.sue-pin-stack .main-header {
  z-index: 10002;
}
/* The registration plugin's cart drawer under the toolbar: it kept a fixed
   32px, which is 46px from 782px down and nothing from 600px down (or for a
   signed-in customer without the toolbar). */
body.logged-in .cart-hover-popup {
  top: var(--sue-adminbar, 0px);
  height: calc(100vh - var(--sue-adminbar, 0px));
}
/* The screen as it is now: a phone's 100vh counts the browser's bars as
   screen, so Checkout at the drawer's bottom went behind Safari's toolbar
   (31 Oct 2026; the plugin's own rule has the same fix). */
@supports (height: 100dvh) {
  body.logged-in .cart-hover-popup {
    height: calc(100dvh - var(--sue-adminbar, 0px));
  }
}

/* ---------- #links and focus land below the header (16 Oct 2026) -------- */
/* --sue-scroll-pad = what is pinned at the top + the toolbar + 16px (js/menus.js,
   initPinned). #links (js/main.js), a page opened at a #, and an element that
   takes keyboard focus behind the header (WCAG 2.4.11 Focus Not Obscured) are
   brought below it by js/menus.js; the three scripted jumps below land there by
   their scroll margin. There was nothing: on every site a #link's heading and a
   focused field could sit behind the header.
   ⚠ NOT html's scroll-padding-top: with it, focus on anything INSIDE a sticky
   part (the menu, a pinned banner's button, a sticky cart column) counts as
   hidden in the padded band, so Chromium scrolled the page half a screen on
   every Shift+Tab into the header, and WebKit by the padding (review, 16 Oct). */
/* They jump back UP the page, so the bar is showing when they land (Tuck away
   brings it back on the way up): its shown height, not the tucked one. */
html.sue-scroll-padded :is(.blogs-filter, .sue-shop-page, .sue-reviews-list-wrap) {
  scroll-margin-top: var(--sue-scroll-pad-shown, var(--sue-scroll-pad, 0px));
}
/* Sticky columns elsewhere (registration cart, checkout, My Account) sit under
   what is pinned, as measured, in place of the whole header's height, which
   counted a banner that scrolls away, the header's unscrolled size, and no
   toolbar. While the header is tucked away, only a banner or Utility bar pinned
   on its own is left. */
html.sue-scroll-padded body {
  --sue-header-offset: calc(var(--sue-adminbar, 0px) + var(--sue-pinned-h, 0px));
}
html.sue-scroll-padded body.sue-header-tucked {
  --sue-header-offset: calc(var(--sue-adminbar, 0px) + var(--sue-pin-above, 0px));
}
/* A #link's target takes focus (js/main.js), so the keyboard carries on from
   there; it is not a control, so no ring (the site's ring is !important, and
   its white halo a box-shadow on :focus-visible). A card's own shadow stays
   for a mouse click. */
html .sue-jump-target[tabindex='-1']:focus {
  outline: none !important;
}
html .sue-jump-target[tabindex='-1']:focus-visible {
  outline: none !important;
  box-shadow: none;
}

/* ---------- "Menu" beside the phone menu button -------------------------- */
.sue-burger-label {
  display: none;
}
body.sue-menu-label button.mobile-menu-trigger {
  width: auto;
  gap: 8px;
  padding: 0 6px;
}
/* style.css draws every span in this button as an absolutely placed bar (the
   old three-span hamburger), so the label undoes that. */
body.sue-menu-label button.mobile-menu-trigger span.sue-burger-label {
  position: static;
  width: auto;
  height: auto;
  background: none;
  transition: none;
  transform: none;
  opacity: 1;
}
/* js/menus.js takes the word away first when the header row has no room
   (data-sue-squeeze, see "The header row on a phone" in the groundwork above). */
body.sue-menu-label header.site-header[data-sue-squeeze] .sue-burger-label {
  display: none;
}
body.sue-menu-label header.site-header[data-sue-squeeze] button.mobile-menu-trigger {
  width: 52px;
  padding: 0;
}
body.sue-menu-label .sue-burger-label {
  display: inline;
  font: 700 13px/1 'Lato', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c1c1c;
}

/* ---------- Phone menu: Drawer ------------------------------------------ */
/* A wide panel that slides in from the right. Sub-menus open underneath their
   parent instead of in a second panel. js/menus.js adds .sue-pm-in to slide it. */
.sue-pm-title {
  display: none;
}
body.sue-pm-drawer .mobile-menu-wrapper {
  padding: 0;
}
body.sue-pm-drawer .mobile-menu-wrapper::before {
  content: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(88vw, 400px);
  height: auto;
  padding: 72px 0 24px;
  background: #ffffff;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.sue-pm-drawer .mobile-menu-wrapper.sue-pm-in .inner {
  transform: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .mobile-menu-close {
  top: 12px;
  right: 12px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease 0.12s;
}
body.sue-pm-drawer .mobile-menu-wrapper.sue-pm-in .mobile-menu-close {
  opacity: 1;
}
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-title {
  display: block;
  position: absolute;
  top: 30px;
  left: 24px;
  margin: 0;
  font: 700 12px/1 'Lato', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6570;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu {
  width: auto;
  margin: 0;
  border-top: 1px solid #eceff2;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li,
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #eceff2;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 8px 64px 8px 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: #16202a;
  overflow-wrap: anywhere; /* one unbreakable word panned the whole drawer sideways */
}
/* Every level's arrow sits at the right of its row (style.css positions only
   the top level's, so a third level's arrow fell below its link). */
body.sue-pm-drawer .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: auto;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-left: 1px solid #f0f2f4;
  color: #5b6570;
}
/* The keyboard focus ring inside the arrow's box, rounded: drawn round the box
   it was a square, cut off by the panel's right edge (Brian's screenshot, 14 Oct
   2026). The theme's ring is !important, so this has to be too. */
body.sue-pm-drawer .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon:focus-visible {
  border-radius: 0 10px 10px 0; /* the divider on its left stays straight */
  outline-offset: -6px !important;
  box-shadow: none;
}
/* The same for the rows themselves, and the Drill-down's arrows (each covers its
   whole row): they run the full width of a panel that scrolls, so a ring drawn
   outside them lost its sides. The Drill-down's Back button too: it sits at
   the top of its panel and lost three sides (14 Oct 2026). */
body:is(.sue-pm-drawer, .sue-pm-drill) .mobile-menu-wrapper ul.menu li > a:focus-visible,
body.sue-pm-drill .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon:focus-visible,
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-back:focus-visible {
  outline-offset: -2px !important;
  box-shadow: none;
}
body.sue-pm-drawer .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
body.sue-pm-drawer .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon[aria-expanded='true'] svg {
  transform: rotate(-90deg);
}
body.sue-pm-drawer .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg path {
  stroke: currentColor;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu {
  position: static;
  display: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 4px 0 10px;
  right: auto;
  top: auto;
  background: #f6f8fa;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  transition: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu.active {
  display: block;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li {
  margin: 0; /* style.css gives Split's sub-menu items 20px below each */
  border-bottom: 0;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li a {
  min-height: 46px;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 600;
  color: #26303b;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li.menu-item-has-children > button.icon {
  width: 46px;
  height: 46px;
  border-left: 0;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu ul.sub-menu {
  padding: 0 0 6px;
  background: transparent;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner ul.menu li ul.sub-menu ul.sub-menu li a {
  padding-left: 56px;
  font-size: 15.5px;
  font-weight: 400;
}
/* The header buttons sit right under the last menu item, as in Style 1; only My
   account and Cart wait at the foot (Brian, 14 Oct 2026: down beside them, the
   buttons looked out of place). */
body.sue-pm-drawer .mobile-menu-wrapper .inner .btn-wrap {
  width: auto;
  margin: 0;
  padding: 24px 24px 0;
  text-align: left;
  justify-content: start;
}
body.sue-pm-drawer .mobile-menu-wrapper .inner .btn-wrap .header-events-btn {
  margin-left: 0;
}
body.sue-menu-current.sue-pm-drawer .mobile-menu-wrapper ul.menu li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sue-nav-accent, #1b4ea0);
  box-shadow: inset 4px 0 0 var(--sue-nav-accent, #1b4ea0);
}
body.sue-menu-current.sue-pm-drawer .mobile-menu-wrapper ul.menu li:is(.current-menu-ancestor, .current-menu-parent, .current_page_ancestor, .current_page_parent) > a {
  color: var(--sue-nav-accent, #1b4ea0);
}
/* The dimmed page behind fades in and out with the drawer (style.css draws it
   only while .active, which would make it vanish the instant the drawer starts
   to leave). Under the drawer: .inner sits above it at z-index 3. */
body.sue-pm-drawer .mobile-menu-wrapper::after {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.32s ease;
}
body.sue-pm-drawer .mobile-menu-wrapper.sue-pm-in::after {
  opacity: 1;
}
/* My account / Cart at the foot (header.php prints them only when they are
   switched on in Header Details, and Cart only on a site that runs the shop). */
.sue-pm-links {
  display: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 0;
  padding: 18px 24px 0;
  list-style: none;
}
/* Not a content list: none of style.css's list dash or indent. */
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-links li::before {
  content: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d9dee4;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #16202a;
  text-decoration: none;
}
body.sue-pm-drawer .mobile-menu-wrapper .sue-pm-links a:hover {
  border-color: var(--sue-nav-accent, #1b4ea0);
  color: var(--sue-nav-accent, #1b4ea0);
}
@media (prefers-reduced-motion: reduce) {
  body.sue-pm-drawer .mobile-menu-wrapper .inner,
  body.sue-pm-drawer .mobile-menu-wrapper::after,
  body.sue-pm-drawer .mobile-menu-wrapper .mobile-menu-close,
  body.sue-st-smart header.site-header .main-header,
  body.sue-st-smart header.site-header.sticky-banner,
  body.sue-st-smart :is(.registration-cart .cart-left, .registration-cart .cart-right, .checkout-left-col, .checkout-right-col, .woocommerce-MyAccount-navigation) {
    transition: none;
  }
}

/* ---------- Footer menu: Fold on phones --------------------------------- */
/* Lighter columns: the top items become small headings over their links. On a
   phone each column folds behind its heading (js/menus.js adds the buttons). */
.sue-fm-toggle {
  display: none;
}
.footer-menu-wrap.sue-fm-fold .footer-menu > li > a {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4d5662;
}
.footer-menu-wrap.sue-fm-fold .footer-menu li ul a {
  font-size: 16px;
  line-height: 1.7;
}
/* A flat menu, and a top-level item with nothing under it (Privacy, Terms):
   plain links, not empty headings. */
.footer-menu-wrap.sue-fm-fold.is-flat .footer-menu > li > a,
.footer-menu-wrap.sue-fm-fold .footer-menu > li:not(.menu-item-has-children) > a {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #000000;
}
@media screen and (max-width: 767px) {
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu > li {
    position: relative;
    padding: 0;
    border-bottom: 1px solid #dde2e8;
  }
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 54px;
    margin: 0;
    padding-right: 56px;
    font-size: 14px;
    color: #26303b;
  }
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu > li > ul {
    padding: 0 0 14px;
  }
  /* Folded only once js/menus.js has added the buttons that open them
     (sue-fm-ready): if the script never runs, every link stays reachable. The
     single links' column without a heading has no button and stays open. */
  .footer-menu-wrap.sue-fm-fold.sue-fm-ready:not(.is-flat) .footer-menu > li:not(.is-open, .sue-fm-quick-bare) > ul {
    display: none;
  }
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .sue-fm-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #26303b;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .footer-menu-wrap.sue-fm-fold .sue-fm-toggle svg {
    transition: transform 0.2s ease;
  }
  .footer-menu-wrap.sue-fm-fold .sue-fm-toggle[aria-expanded='true'] svg {
    transform: rotate(45deg);
  }
  .footer-menu-wrap.sue-fm-fold.is-flat .footer-menu {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Footer menu: the single links' column ------------------------ */
/* Columns and Fold: the top-level links with nothing under them share one
   column, first, under the heading from Theme Options → Footer Menu ("Quick
   links"), so it is styled as every other column's heading (inc/menu-styles.php,
   footer_quick_links(); Brian, 15 Oct 2026). The heading links nowhere, so it
   takes no hover colour or pointer; on a phone in Fold a tap on it still opens
   its column. Left empty, it keeps a heading's room unseen, so the links line
   up with the sections' links; on a phone it takes no room and the links stay
   open. */
.footer-menu-wrap .footer-menu > li.sue-fm-quick > a {
  pointer-events: none;
}
.footer-menu-wrap .footer-menu > li.sue-fm-quick-bare > a {
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .footer-menu-wrap.sue-fm-fold .footer-menu > li.sue-fm-quick > a {
    pointer-events: auto;
    cursor: pointer;
  }
  /* Fold's phone rule draws every heading as a 54px row (display: flex). */
  .footer-menu-wrap .footer-menu > li.sue-fm-quick-bare > a,
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu > li.sue-fm-quick-bare > a {
    display: none;
  }
  .footer-menu-wrap.sue-fm-fold:not(.is-flat) .footer-menu > li.sue-fm-quick-bare > ul {
    padding-top: 14px;
  }
}

/* ---------- Footer menu: Single row ------------------------------------- */
footer.site-footer .footer-menu-wrap.sue-fm-inline {
  padding: 36px 0;
}
.footer-menu-wrap.sue-fm-inline .footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
}
/* Every link on the row: a nested menu's sub-links join it after their
   heading (hiding them dropped 9 of 12 links), and a heading that links
   nowhere ("#") is left out. */
.footer-menu-wrap.sue-fm-inline .footer-menu li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  padding: 0;
  margin: 0;
}
.footer-menu-wrap.sue-fm-inline .footer-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-menu-wrap.sue-fm-inline .footer-menu a {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.footer-menu-wrap.sue-fm-inline .footer-menu a:is([href='#'], [href='']) {
  display: none;
}
@media screen and (max-width: 767px) {
  footer.site-footer .footer-menu-wrap.sue-fm-inline {
    padding: 28px 0;
  }
  .footer-menu-wrap.sue-fm-inline .footer-menu,
  .footer-menu-wrap.sue-fm-inline .footer-menu li,
  .footer-menu-wrap.sue-fm-inline .footer-menu ul {
    gap: 8px 22px;
  }
  .footer-menu-wrap.sue-fm-inline .footer-menu a {
    font-size: 15px;
  }
}

/* ==========================================================================
   MENU STYLES, STEP 3 (5 Oct 2026): header layouts, the Utility bar, the Band
   and Mega panel dropdowns, the Drill-down and Full screen phone menus, and the
   header over the hero. Scoped to body classes from inc/menu-styles.php, like
   step 2; none of it reaches Style 1.
   ========================================================================== */

/* ---------- Header layout: Two-tier and Centered ------------------------- */
/* Desktop only (below 1280px, and whenever the menu has handed over to the
   hamburger, every layout is the phone header). The menu moves to its own row
   under the logo and buttons; nothing in the markup changes. */
@media screen and (min-width: 1280px) {
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .container {
    flex-wrap: wrap;
    row-gap: 0;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .logo {
    order: 1;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .btn-wrap {
    order: 2;
    margin-left: auto;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper {
    order: 3;
    flex: 0 0 100%;
    margin-top: 10px;
    border-top: 1px solid #edf0f3;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper #primary-menu {
    justify-content: flex-start;
    margin-right: 0;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper.center-align #primary-menu {
    justify-content: center;
  }
  body.sue-hl-twotier header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper.right-align #primary-menu {
    justify-content: flex-end;
  }

  /* The left of the logo holds Button 2 as a link (or its icon) and the search
     button (header.php prints them there; Style 4 notes, 16 Oct 2026). */
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      'left logo actions'
      'menu menu menu';
    row-gap: 6px;
  }
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .sue-hl-left {
    grid-area: left;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 18px; /* as in the approved mockup */
  }
  /* Button 2 as its icon (Header buttons: Icons) sits as close to the search
     icon as the cart and account do on the right (Style 4 round 2): their 40px
     boxes touch (the search button has margin-inline -5px), leaving 16-18px
     between the shapes (17 Oct 2026: it was 23px; the right side's are 15-16). */
  body.sue-hl-centered.sue-hb-icons header.site-header:not(.sue-menu-overflowing) .main-header .sue-hl-left:has(> .sue-hb-iconlink) {
    gap: 5px;
  }
  /* Their copies in the bar, meanwhile. !important: style.css shows and hides
     the header buttons per breakpoint with !important rules of its own. */
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header.sue-hl-has-b2 .btn-wrap > .contact_button,
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header.sue-hl-has-search .btn-wrap > .search-icon {
    display: none !important;
  }
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .logo {
    grid-area: logo;
    justify-content: center;
  }
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .btn-wrap {
    grid-area: actions;
    justify-self: end;
  }
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper {
    grid-area: menu;
  }
  body.sue-hl-centered header.site-header:not(.sue-menu-overflowing) .main-header .menu-wrapper #primary-menu {
    justify-content: center;
    margin-right: 0;
  }
}

/* ---------- Utility bar --------------------------------------------------- */
.sue-utility-bar {
  background: var(--sue-primary-solid, var(--primary-color, #1b4ea0));
  color: var(--primary-text-color, #ffffff);
  font-size: 14px;
  line-height: 1.2;
}
/* Right under a banner of the same color it takes a shade of its own, so the
   two strips do not read as one block (Brian, 21 Oct 2026; header.php works
   the shade out, sue_utility_bar_shade()). Only while the banner shows: a
   banner dismissed earlier or scheduled off (html.sue-notice-hidden), or closed
   just now (its close button adds #page.hide-notice), gives the Primary back. */
html:not(.sue-notice-hidden) #page:not(.hide-notice) header.site-header .sue-utility-bar.sue-utility-shaded {
  background: var(--sue-utility-shade);
  color: var(--sue-utility-shade-text);
}
/* Some room above and below, so two rows (a long list on a laptop) are not
   pressed against the bar's edges (Brian, 14 Oct 2026). One row is still 38px. */
.sue-utility-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Not content lists: none of style.css's list dash or indent. */
:is(.sue-utility-bar, .mobile-menu-wrapper) :is(.sue-utility-menu, .sue-utility-mobile) li {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.sue-utility-bar, .mobile-menu-wrapper) :is(.sue-utility-menu, .sue-utility-mobile) li::before {
  content: none;
}
/* Right-aligned on every row: a list long enough to wrap filled the width and
   its rows started at the left. */
.sue-utility-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sue-utility-bar a {
  color: inherit;
  text-decoration: none;
}
.sue-utility-bar a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media screen and (max-width: 1279px) {
  .sue-utility-bar {
    display: none;
  }
}
.mobile-menu-wrapper .sue-utility-mobile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.mobile-menu-wrapper .sue-utility-mobile a {
  color: #3d4752;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Dropdown: Band ------------------------------------------------ */
/* One row of links on a full-width band under the header (JTCC's dropdown).
   The top items stop being the dropdown's anchor so it can span the header. */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li {
  position: static;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu,
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  left: 0;
  right: 0;
  top: 100%;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 52px;
  padding: 20px 40px;
  background: var(--sue-light-bg, #f4f5f7);
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 12px 20px -14px rgba(16, 24, 40, 0.25);
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}
/* The pointer's bridge down to the band hangs from the hovered LINK, only while
   it is hovered: one across the band's full width lay over the other items'
   links (the Card's lesson). */
body:is(.sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children > a {
  position: relative;
}
body:is(.sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 72px; /* the gap from link to panel reaches 60px under a 130px logo */
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu li a {
  padding: 6px 0;
  font-size: 16px;
  color: #3f4853;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu li a:hover {
  color: var(--sue-nav-accent, #1b4ea0);
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul {
  display: none;
}
body.sue-menu-current.sue-dd-band header.site-header .menu-wrapper ul.sub-menu li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sue-nav-accent, #1b4ea0);
}

/* ---------- Dropdown: Mega panel ----------------------------------------- */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li {
  position: static;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu,
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  left: 0;
  right: 0;
  top: 100%;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* A row that is not full sits in the middle, card and all: with two columns
     and the card, the columns sat on the left and the card on the far right
     with a gap between (Brian, 15 Oct 2026). A full row looks the same. */
  justify-content: center;
  gap: 28px 44px;
  padding: 32px max(40px, calc((100% - 1240px) / 2)) 36px;
  background: #ffffff;
  border-top: 1px solid #edf0f3;
  box-shadow: 0 30px 40px -24px rgba(16, 24, 40, 0.3);
  text-align: left;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li {
  flex: 1 1 180px;
  max-width: 280px;
  padding: 0;
}
/* A child with its own links is a column: its name is the heading. */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li > a {
  display: block;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: #121a24;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > a {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf0f3;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li > a:hover {
  color: var(--sue-nav-accent, #1b4ea0);
  text-decoration: none;
}
/* Its links are listed, always visible inside the open panel. */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu,
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  display: block;
  padding: 0;
  background: none;
  opacity: 1;
  visibility: inherit;
  transition: none;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu li a {
  padding: 5px 0;
  font-size: 15.5px;
  font-weight: 400;
  color: #36404b;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu li a:hover {
  color: var(--sue-nav-accent, #1b4ea0);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.sue-dd-mega header.site-header .menu-wrapper ul.sub-menu .sue-menu-item-desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #5d6876;
}
body.sue-menu-current.sue-dd-mega header.site-header .menu-wrapper ul.sub-menu li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sue-nav-accent, #1b4ea0);
}
/* The featured card (a top-level menu item's "Mega panel card" fields). */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature {
  order: 99;
  flex: 0 0 300px;
  max-width: 300px;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 210px;
  padding: 20px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  color: #ffffff;
  background: var(--sue-primary-solid, var(--primary-color, #1b4ea0));
  isolation: isolate;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature .sue-mf-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature > a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 65%);
}
/* The text has its own shade, as tall as the text is: 0.62 black or more behind
   every line, however many lines (white on a pure white photo: 6.2:1 or
   better), fading out 32px above the small heading, so the photo above stays
   bright. A fade over the whole card left the small heading over the bright
   part once the title or text took two lines (Brian, 15 Oct 2026). */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature .sue-mf-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature.has-image .sue-mf-body {
  margin: 0 -20px -20px;
  padding: 40px 20px 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature .sue-mf-btn {
  text-shadow: none;
}
.sue-mf-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sue-mf-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}
.sue-mf-text {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
}
.sue-mf-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Phone menu: Drill-down --------------------------------------- */
/* Full screen. A parent's sub-menu slides in over it, with Back. js/menus.js
   adds the Back row and the section heading to each sub-menu. */
body.sue-pm-drill .mobile-menu-wrapper {
  padding: 0;
}
body.sue-pm-drill .mobile-menu-wrapper::before,
body.sue-pm-drill .mobile-menu-wrapper.active::after {
  content: none;
}
body.sue-pm-drill .mobile-menu-wrapper .inner {
  position: absolute;
  inset: 0;
  height: auto;
  padding: 72px 0 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  /* Scrolls as a whole when the foot (buttons, account/cart, utility links)
     and the menu cannot both fit: on a landscape phone the menu area was 1px. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.sue-pm-drill .mobile-menu-wrapper.sue-pm-in .inner {
  transform: none;
}
body.sue-pm-drill .mobile-menu-wrapper .mobile-menu-close {
  top: 12px;
  right: 12px;
  z-index: 5;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-title {
  display: block;
  position: absolute;
  top: 30px;
  left: 24px;
  margin: 0;
  font: 700 12px/1 'Lato', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6570;
}
body.sue-pm-drill .mobile-menu-wrapper .inner > :is(div, nav):not(.btn-wrap):not(.sue-utility-nav) {
  position: relative;
  flex: 1 0 auto;
  min-height: max(62%, 260px);
  overflow: hidden;
  border-top: 1px solid #eceff2;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu,
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu {
  right: 0;
  top: 0;
  z-index: 2;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.32s;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-drilled > ul.sub-menu {
  visibility: visible;
  transform: none;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
/* What a drilled-in panel covers drops out of the Tab order. */
body.sue-pm-drill .mobile-menu-wrapper .sue-drill-covered > li:not(.sue-drilled),
body.sue-pm-drill .mobile-menu-wrapper .sue-drill-covered > li.sue-drilled > :not(ul) {
  visibility: hidden;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li,
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children {
  position: static;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li:not(.sue-pm-back-row):not(.sue-pm-heading) {
  position: relative;
  border-bottom: 1px solid #eceff2;
}
/* Static, so its section panel fills the menu rather than its own 58px row.
   The two :not()s match the weight of the rule above, which made every row
   relative and, at first, won. */
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-drilled:not(.sue-pm-back-row):not(.sue-pm-heading) {
  position: static;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  padding: 8px 64px 8px 24px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: #16202a;
  overflow-wrap: anywhere;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li a {
  color: #16202a;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-menu-item-desc {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 400;
  color: #66707b;
}
/* Every level's arrow covers its whole row (style.css positions only the top
   level's, so a deeper one fell below its link and stretched the row). */
body.sue-pm-drill .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  left: auto;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  padding-right: 24px;
  color: #5b6570;
}
body.sue-pm-drill .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg {
  transform: none;
}
body.sue-pm-drill .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg path {
  stroke: currentColor;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 700 15px/1 'Lato', sans-serif;
  color: var(--sue-nav-accent, #1b4ea0);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-back svg {
  transform: rotate(180deg);
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-back svg path {
  stroke: currentColor;
}
/* .inner ul.menu li (margin and padding 0, above) outweighed a plain .sue-pm-heading. */
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-pm-heading {
  padding: 4px 24px 14px;
  font: 800 28px/1.1 'Kumbh Sans', 'Lato', sans-serif;
  color: #121a24;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-pm-all > a {
  min-height: 0;
  margin: 0 24px 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #eef2f7;
  background: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 9%, #ffffff);
  color: var(--sue-nav-accent, #1b4ea0);
  font-size: 15px;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-pm-all {
  border-bottom: 0;
}
/* "Go to Programs", with an arrow at the end of the row: it leaves the menu. */
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-pm-all > a {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-all svg {
  flex: none;
  width: 8px;
  height: 14px;
}
body.sue-pm-drill .mobile-menu-wrapper .sue-pm-all svg path {
  stroke: currentColor;
}
body.sue-pm-drill .mobile-menu-wrapper .inner .btn-wrap {
  flex: none;
  width: auto;
  margin: 0;
  padding: 16px 24px 24px;
  border-top: 1px solid #eceff2;
  text-align: left;
  justify-content: start;
}
/* The header buttons right under the last row of whatever is showing (js/menus.js
   moves them into the menu's box), as on the other phone menus; My account /
   Cart and the utility links stay at the foot (Brian, 14 Oct 2026). The list
   is in the flow of its box, so the buttons follow it; a section's panel is
   laid over the list, and fitDrill() gives the list that section's height, so
   the buttons follow the section too and a long one scrolls with the menu. */
body.sue-pm-drill .mobile-menu-wrapper .inner .sue-pm-menubox > ul.menu {
  position: relative;
  overflow: visible;
  padding: 0;
}
/* Under an open section the list is that section's height: its own (hidden)
   rows must not hang out below it, over the buttons. */
body.sue-pm-drill .mobile-menu-wrapper .inner .sue-pm-menubox > ul.menu.sue-drill-covered {
  overflow: hidden;
}
/* A section is exactly as tall as its rows now, and the menu scrolls as a
   whole: no scrolling of its own (Firefox makes a box that can scroll, even by
   a pixel, a Tab stop), and no gap under its last row that the top level does
   not have. */
body.sue-pm-drill .mobile-menu-wrapper .inner .sue-pm-menubox > ul.menu li ul.sub-menu,
body.sue-pm-drill .mobile-menu-wrapper .inner .sue-pm-menubox > ul.menu li ul.sub-menu li ul.sub-menu {
  padding-bottom: 0;
  overflow: hidden;
}
body.sue-pm-drill .mobile-menu-wrapper .inner .sue-pm-menubox > .btn-wrap {
  padding: 20px 24px 24px;
  border-top: 0;
}
body.sue-pm-drill .mobile-menu-wrapper .inner > .sue-pm-menubox:not(:last-child) {
  border-bottom: 1px solid #eceff2;
}
body.sue-menu-current.sue-pm-drill .mobile-menu-wrapper ul.menu li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sue-nav-accent, #1b4ea0);
  box-shadow: inset 4px 0 0 var(--sue-nav-accent, #1b4ea0);
}

/* ---------- Phone menu: Full screen -------------------------------------- */
body.sue-pm-full .mobile-menu-wrapper {
  padding: 0;
}
body.sue-pm-full .mobile-menu-wrapper::before,
body.sue-pm-full .mobile-menu-wrapper.active::after {
  content: none;
}
body.sue-pm-full .mobile-menu-wrapper .inner {
  position: absolute;
  inset: 0;
  height: auto;
  padding: 84px 24px 32px;
  background: var(--sue-primary-solid, var(--primary-color, #1b4ea0));
  color: var(--primary-text-color, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner {
  opacity: 1;
}
body.sue-pm-full .mobile-menu-wrapper .mobile-menu-close {
  top: 12px;
  right: 12px;
  z-index: 5;
}
body.sue-pm-full .mobile-menu-wrapper .mobile-menu-close rect {
  fill: var(--primary-text-color, #ffffff);
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu {
  width: 100%;
  margin: auto 0;
  text-align: center;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li,
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu > li > a {
  display: inline-block;
  padding: 6px 0;
  font: 800 30px/1.15 'Kumbh Sans', 'Lato', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary-text-color, #ffffff);
  overflow-wrap: anywhere;
}
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon {
  position: relative;
  left: auto;
  top: auto;
  display: inline-flex;
  width: 44px; /* a 44px tap target */
  height: 44px;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--primary-text-color, #ffffff);
}
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon[aria-expanded='true'] svg {
  transform: rotate(-90deg);
}
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon svg path {
  stroke: currentColor;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu {
  position: static;
  display: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 2px 0 12px;
  background: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  transition: none;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu.active {
  display: block;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li a {
  display: inline-block;
  padding: 5px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary-text-color, #ffffff);
}
body.sue-pm-full .mobile-menu-wrapper .inner .btn-wrap {
  width: auto;
  margin: 28px auto 0;
  text-align: center;
  justify-content: center;
}
body.sue-pm-full .mobile-menu-wrapper .inner .btn-wrap .header-events-btn {
  margin: 0 auto;
}
body.sue-pm-full .mobile-menu-wrapper .sue-utility-mobile {
  justify-content: center;
}
body.sue-pm-full .mobile-menu-wrapper .sue-utility-mobile a {
  color: var(--primary-text-color, #ffffff);
}
body.sue-menu-current.sue-pm-full .mobile-menu-wrapper ul.menu li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li {
  animation: sue-pm-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li:nth-child(2) { animation-delay: 0.05s; }
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li:nth-child(3) { animation-delay: 0.1s; }
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li:nth-child(4) { animation-delay: 0.15s; }
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li:nth-child(5) { animation-delay: 0.2s; }
body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li:nth-child(n + 6) { animation-delay: 0.25s; }
@keyframes sue-pm-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Sticky header: Over the hero --------------------------------- */
/* Only on pages whose first module is the hero (inc/menu-styles.php prints
   .sue-over-hero there); everywhere else the header is solid and always sticky.
   The header sits transparent on the photo until main.js marks it .sue-solid
   (120px of scroll), and is back on the photo 30px from the top, or as soon as
   a smooth scroll near the top is headed there (16 Oct 2026; it used to wait
   for .fixed to come off at exactly 0). --sue-main-header-h is published by
   js/menus.js.
   The page is pulled up 4px further than the bar is tall: a photo with a light
   top edge (JTCC's has two white rows) showed a hairline above the hero
   wherever "cover" scales it by height (Brian, 15 Oct 2026). The hero's own
   padding and height rules below add the same 4px back. */
body.sue-over-hero header.site-header .main-header {
  margin-bottom: calc(-1 * var(--sue-main-header-h, 100px) - 4px);
}
/* Those 4px reach above the bar: an announcement banner that does not stick, or
   a Utility bar, stays on top of the photo there (the hero comes later in the
   page and would paint over their bottom edge). */
body.sue-over-hero header.site-header :is(.header-notice-wrapper, .sue-utility-bar) {
  position: relative;
  z-index: 1;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header {
  background-color: transparent;
  box-shadow: none;
}
/* Always drawn, and faded: it used to appear and vanish at once, a grey flash
   under the header while everything else was still changing colour. */
body.sue-over-hero header.site-header .main-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -30px;
  z-index: -1;
  /* Strong to the bottom of the header (in the two-tier and centred layouts the
     menu row is down there; at 10% a light photo left links at 2:1), then fading. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.45) calc(100% - 30px), rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header::before {
  opacity: 1;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header :is(.menu-wrapper #primary-menu > li > a, .site-title, .sue-burger-label) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .menu-wrapper #primary-menu > li > a,
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .site-title,
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .sue-burger-label {
  color: #ffffff;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header {
  --cart-icon-color: #ffffff;
  --cart-icon-hover-color: #ffffff;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .login-icon path {
  stroke: #ffffff;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .search-icon path,
body.sue-over-hero header.site-header:not(.sue-solid) .main-header button.mobile-menu-trigger rect {
  fill: #ffffff;
}
body.sue-mk-pill.sue-over-hero header.site-header:not(.sue-solid) .menu-wrapper #primary-menu > li > a:hover,
body.sue-mk-pill.sue-over-hero header.site-header:not(.sue-solid) .menu-wrapper #primary-menu > li:is(:hover, :focus-within, .sue-tap-open) > a,
body.sue-mk-pill.sue-menu-current.sue-over-hero header.site-header:not(.sue-solid) .menu-wrapper #primary-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}
body.sue-mk-underline.sue-over-hero header.site-header:not(.sue-solid) .menu-wrapper #primary-menu > li > a {
  background-image: linear-gradient(#ffffff, #ffffff);
}
body.sue-over-hero.sue-hl-twotier header.site-header:not(.sue-solid) .main-header .menu-wrapper {
  border-top-color: rgba(255, 255, 255, 0.25);
}
/* The light logo, when the site gave one, while the header is on the photo. */
.sue-logo-over-hero {
  display: none;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .logo.has-over-hero-logo img:not(.sue-logo-over-hero) {
  display: none;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .logo.has-over-hero-logo .sue-logo-over-hero {
  display: block;
}
/* The hero's content starts below the header it now runs under, and "Fit
   screen" counts only the space above the header (banner, admin bar). */
/* Its own top padding (160 / 120 / 80px, Components/hero_section.css) below the
   header, not instead of it: top-aligned text sat right under the header. Every
   padding and height here carries the extra 4px the page is pulled up by. */
body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
  padding-top: calc(var(--sue-main-header-h, 100px) + 164px);
}
@media screen and (max-width: 1750px) {
  body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
    padding-top: calc(var(--sue-main-header-h, 100px) + 124px);
  }
}
@media screen and (max-width: 767px) {
  body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
    padding-top: calc(var(--sue-main-header-h, 80px) + 84px);
  }
}
body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-fit:first-child .slide-item {
  min-height: clamp(
    640px,
    calc(100svh - var(--sue-chrome, 120px) + var(--sue-main-header-h, 0px) + 4px - var(--sue-hero-peek, 56px)),
    calc(986px + var(--sue-main-header-h, 0px) + 4px)
  );
}
@media screen and (max-width: 1750px) {
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-fit:first-child .slide-item {
    min-height: clamp(
      480px,
      calc(100svh - var(--sue-chrome, 100px) + var(--sue-main-header-h, 0px) + 4px - var(--sue-hero-peek, 56px)),
      calc(750px + var(--sue-main-header-h, 0px) + 4px)
    );
  }
}
@media screen and (max-width: 767px) {
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-fit:first-child .slide-item {
    min-height: clamp(
      400px,
      calc(100svh - var(--sue-chrome, 80px) + var(--sue-main-header-h, 0px) + 4px - var(--sue-hero-peek, 56px)),
      calc(590px + var(--sue-main-header-h, 0px) + 4px)
    );
  }
}

/* ---------- Shared by the step 3 panels ---------------------------------- */
/* My account / Cart at the foot of the Drill-down and Full screen menus too. */
body:is(.sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .sue-pm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 14px 24px 0;
  list-style: none;
}
body.sue-pm-full .mobile-menu-wrapper .sue-pm-links {
  justify-content: center;
}
body:is(.sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .sue-pm-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}
body:is(.sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .sue-pm-links li::before {
  content: none;
}
body:is(.sue-pm-drill, .sue-pm-full) .mobile-menu-wrapper .sue-pm-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d9dee4;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #16202a;
  text-decoration: none;
}
body.sue-pm-full .mobile-menu-wrapper .sue-pm-links a {
  border-color: currentColor;
  color: var(--primary-text-color, #ffffff);
}
body.sue-pm-drill .mobile-menu-wrapper .inner > .sue-pm-links {
  flex: none;
  padding-bottom: 16px;
}
/* The Utility bar scrolls away while the bar under it sticks: sticky columns
   sit under the sticking bar only (not tucked away, not "Not sticky"). Only
   until js/menus.js has measured what is pinned (16 Oct 2026: html.sue-scroll-
   padded, which also counts a Utility bar pinned on its own). */
html:not(.sue-scroll-padded) body.sue-has-utility:not(.sue-header-tucked):not(.sue-st-static):has(header.site-header:not(.sticky-banner)) {
  --sue-header-offset: var(--sue-main-header-h, var(--header-height));
}
@media (prefers-reduced-motion: reduce) {
  body.sue-pm-drill .mobile-menu-wrapper .inner,
  body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu,
  body.sue-pm-full .mobile-menu-wrapper .inner {
    transition: none;
  }
  body.sue-pm-full .mobile-menu-wrapper.sue-pm-in .inner ul.menu > li {
    animation: none;
  }
}

/* The Utility links in the phone menu sit inside its padding. */
body:is(.sue-pm-drawer, .sue-pm-drill) .mobile-menu-wrapper .sue-utility-nav {
  padding: 4px 24px 20px;
}
body.sue-pm-drill .mobile-menu-wrapper .inner > .sue-utility-nav {
  flex: none;
}
/* A section inside a section (third level and down): style.css's Split rule
   for that level (position: initial, (0,5,5)) outweighed the panel rules above,
   so it sat in its row and stretched it. The same panel, one level heavier. */
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li ul.sub-menu {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  z-index: 2;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.32s;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li.sue-drilled > ul.sub-menu {
  visibility: visible;
  transform: none;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li ul.sub-menu {
    transition: none;
  }
}
/* style.css gives Split's sub-menu items 20px below each (0,4,4). */
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li {
  margin: 0;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li {
  margin: 0;
}

/* Firefox makes a scroll container a Tab stop; the list under a drilled
   section is hidden, so it must not scroll (or be focusable) meanwhile. */
body.sue-pm-drill .mobile-menu-wrapper .sue-drill-covered {
  overflow: hidden;
}

/* One bar height (.sue-bar-steady, the header over the photo switched on: every
   page of the site, with a photo under it or not): it never changes size, so nothing
   animates one (style.css transitions `all` on .main-header, and the page under
   the header is pulled up by its height). Between the photo and solid the
   colours change in 0.2s easing out (16 Oct 2026; they took 0.3s easing in,
   slowest at the start); Tuck away still slides by `top` (Style 4 round 2). */
body header.site-header.sue-bar-steady .main-header {
  transition:
    background-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    top 0.25s ease-out,
    margin 0s,
    z-index 0s;
}
body header.site-header.sue-bar-steady .main-header .logo img {
  transition: none;
}
body.sue-over-hero header.site-header .main-header .menu-wrapper #primary-menu > li > a {
  transition:
    color 0.2s ease-out,
    background-color 0.2s ease-out,
    background-size 0.25s ease,
    text-shadow 0.2s ease-out;
}
body.sue-over-hero header.site-header .main-header :is(.login-icon path, .search-icon path, button.mobile-menu-trigger rect) {
  transition:
    fill 0.2s ease-out,
    stroke 0.2s ease-out;
}
body.sue-over-hero header.site-header .main-header .sue-hl-left .sue-hb-link {
  transition:
    color 0.2s ease-out,
    text-shadow 0.2s ease-out;
}
/* The buttons' own fill (see-through on the photo). */
body.sue-over-hero header.site-header .main-header .btn-wrap .animated-button.sue-hb {
  transition:
    all 0.3s var(--sue-ease),
    color 0.2s ease-out,
    background-color 0.2s ease-out;
}
body.sue-over-hero header.site-header .main-header .btn-wrap .animated-button.sue-hb :is(.left-to-center, .center-to-left) {
  transition-property: left, right, background-color, border-color, color;
  transition-duration: 0.4s, 0.4s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55), cubic-bezier(0.68, -0.55, 0.265, 1.55), ease-out, ease-out, ease-out;
}

/* A page reloaded scrolled down starts on the solid look, set by header.php
   before the header is drawn: no fade into it (it showed as a see-through
   header over the page for 0.2-0.4s, Brian 21 Oct 2026). js/main.js takes the
   class off two frames after the page has loaded. */
header.site-header.sue-instant,
header.site-header.sue-instant *,
header.site-header.sue-instant *::before,
header.site-header.sue-instant *::after {
  transition: none !important;
}

/* With the announcement banner set to stick, the whole header sticks, Utility
   bar included (a third of a laptop screen). Once scrolled (.fixed) it folds
   away, as the logo shrinks; it is back at the top of the page. Not under the
   one-height bar (the header over the photo): there the header never changes
   size, so the page under it never moves (Brian, Style 4 round 2, 17 Oct 2026). */
.sue-utility-bar {
  max-height: 120px;
  transition: max-height 0.3s var(--sue-ease);
}
header.site-header.sticky-banner.fixed:not(.sue-bar-steady) .sue-utility-bar {
  max-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .sue-utility-bar {
    transition: none;
  }
}

/* ---------- Step 3, review fixes (5 Oct) -------------------------------- */
/* A Mega panel taller than the window (6 columns of 12 links) put its last
   column and the featured card where nothing could reach them: the sticky
   header cannot be scrolled past. It scrolls inside itself instead (no
   flyouts in a Mega panel, so nothing is cut off). */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu {
  max-height: calc(100vh - var(--sue-chrome, 120px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Two-tier and Centred put the last item at the edge of the window: a closed
   Classic or Card dropdown (laid out, only transparent) and its flyouts
   reached past the edge and the page scrolled sideways. Clipped sideways only,
   so dropdowns still hang below.
   ⚠ Never under the Band or Mega (Styles 3 and 4): Safari cuts off whatever
   hangs below a sticky box clipped on one axis, as soon as its fade-in ends
   (WebKit bugs 271457 and 291895, open in Nov 2026). On a large iPad those
   dropdowns showed for a moment and were gone (Brian, 21 Oct and 11 Nov 2026).
   Their panels span the header, so they never reached past the edge anyway. */
body:is(.sue-hl-twotier, .sue-hl-centered):not(.sue-dd-band, .sue-dd-mega) header.site-header .main-header {
  overflow-x: clip;
}
/* Band: a parent's own sub-items follow it in the band (they were hidden: 5 of
   a typical club menu's 8 links could not be reached on a desktop). Since 16
   Oct 2026 the third level has a strip of its own (STYLE 4 NOTES, below), so
   this inline treatment is the fourth level's, inside that strip. */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu ul.sub-menu,
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu li.menu-item-has-children:is(:hover, :focus-within, .sue-tap-open) > ul.sub-menu {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  width: auto;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid #d5dae0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: inherit;
  transition: none;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu ul.sub-menu ul.sub-menu li a {
  font-size: 15px;
  color: #4d5662;
}
/* One unbreakable word (a URL, a German compound, CJK) widened the Full screen
   column past the window and the Drill-down heading past its panel. */
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li a,
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li.sue-pm-heading {
  overflow-wrap: anywhere;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu {
  min-width: 0;
  max-width: 100%;
}
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu,
body.sue-pm-drill .mobile-menu-wrapper .inner ul.menu li ul.sub-menu {
  overflow-x: hidden;
}
/* A Primary with transparency (the field allows it) let the page show through
   the Full screen menu: it is filled with --sue-primary-solid (header.php). */
body.sue-pm-full .mobile-menu-wrapper .inner {
  background: var(--sue-primary-solid, var(--primary-color, #1b4ea0));
}
/* A Mega card with no photo: text in the colour chosen for Primary, no scrim
   (white on a light Primary read 1.1-2.4:1). */
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature.no-image > a {
  color: var(--primary-text-color, #ffffff);
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.sue-mega-feature.no-image > a::before {
  content: none;
}
/* Two-tier and Centred: long button texts squeezed into tall blocks instead of
   handing the menu to the hamburger. One line each, so the fit check sees it. */
body:is(.sue-hl-twotier, .sue-hl-centered) header.site-header .main-header .btn-wrap > * {
  flex-shrink: 0;
}
body:is(.sue-hl-twotier, .sue-hl-centered) header.site-header .main-header .btn-wrap .animated-button {
  white-space: nowrap;
}
/* Over the hero, the photo runs up under the header: every hero height gains
   the header's, so the part below the header is the height the editor chose
   (the default 986/750/590px hero lost 100px of it). */
body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
  min-height: calc(986px + var(--sue-main-header-h, 0px) + 4px);
}
body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-compact:first-child .slide-item {
  min-height: calc(740px + var(--sue-main-header-h, 0px) + 4px);
}
body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-tall:first-child .slide-item {
  min-height: calc(1180px + var(--sue-main-header-h, 0px) + 4px);
}
@media screen and (max-width: 1750px) {
  body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
    min-height: calc(750px + var(--sue-main-header-h, 0px) + 4px);
  }
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-compact:first-child .slide-item {
    min-height: calc(560px + var(--sue-main-header-h, 0px) + 4px);
  }
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-tall:first-child .slide-item {
    min-height: calc(900px + var(--sue-main-header-h, 0px) + 4px);
  }
}
@media screen and (max-width: 767px) {
  body.sue-over-hero main.page-container > section.home-hero-section:first-child .slide-item {
    min-height: calc(590px + var(--sue-main-header-h, 0px) + 4px);
  }
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-compact:first-child .slide-item {
    min-height: calc(440px + var(--sue-main-header-h, 0px) + 4px);
  }
  body.sue-over-hero main.page-container > section.home-hero-section.sue-hero-h-tall:first-child .slide-item {
    min-height: calc(700px + var(--sue-main-header-h, 0px) + 4px);
  }
}

/* ==========================================================================
   STYLE 4 NOTES (Brian, 15 Oct 2026; built 16 Oct). The Centred layout's
   corners, the buttons as ghosts over the photo, the Band's third level on a
   strip of its own and the Full screen phone menu. The prompt return to the
   photo and the 4px pull are in the "Over the hero" section above.
   ========================================================================== */

/* ---------- Centred layout: the top-left corner ---------------------------- */
/* header.php prints it for the Centred layout only. Shown at 1280px and up
   while the menu fits (the grid rules in "Header layout" above); everywhere
   else the bar's own Button 2 and search do the job. */
header.site-header .main-header .sue-hl-left {
  display: none;
}
/* Button 2 as a link: its icon and text, no pill (18px regular, as in the
   mockup Brian approved). */
header.site-header .main-header .sue-hl-left .sue-hb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: #1c1c1c;
  text-decoration: none;
}
/* Its icon as big as the search icon beside it (it was 20px, its shape 17px
   against the search's 22: Brian, 17 Oct 2026), as in Header buttons: Icons. */
header.site-header .main-header .sue-hl-left .sue-hb-link svg.sue-hb-icon {
  flex: none;
  width: calc(24px * var(--sue-hb-k, 1));
  height: calc(24px * var(--sue-hb-k, 1));
}
header.site-header .main-header .sue-hl-left .sue-hb-link svg.sue-hb-icon:not(.sue-hb-custom) {
  stroke-width: var(--sue-hb-sw, 2.2);
}
header.site-header .main-header .sue-hl-left .sue-hb-link svg.sue-hb-custom:not([fill='none' i]),
header.site-header .main-header .sue-hl-left .sue-hb-link svg.sue-hb-custom [fill]:not([fill='none' i]) {
  fill: currentColor !important;
}
header.site-header .main-header .sue-hl-left .sue-hb-link svg.sue-hb-custom [stroke]:not([stroke='none' i]) {
  stroke: currentColor !important;
}
header.site-header .main-header .sue-hl-left .sue-hb-link:hover span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .sue-hl-left .sue-hb-link {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---------- Header buttons as icons (Menu Style › Header buttons) ---------- */
/* Brian, Style 4 round 2 (16 Oct 2026): the buttons as icons, the same size as
   the search, cart and account icons beside them. inc/header-buttons.php
   render_icon(): a 40px box like theirs, the icon sized so its shape matches
   the search icon's, with their 2.2px line (below), the button's text in a
   tooltip (and as the link's name). */
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  color: #1c1c1c;
  text-decoration: none;
  transition: color 0.2s ease-out;
}
header.site-header .main-header .btn-wrap .sue-hb-iconlink {
  margin-inline: -5px;
}
/* --sue-hb-k: the icon's own factor (SUE_Header_Buttons::SCALE), so its shape
   draws as big as the search icon's (17 Oct 2026); --sue-hb-sw keeps its line
   2.2px at that size. */
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink svg.sue-hb-icon {
  flex: none;
  width: calc(24px * var(--sue-hb-k, 1));
  height: calc(24px * var(--sue-hb-k, 1));
  stroke-width: var(--sue-hb-sw, 2.2);
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink svg.sue-hb-custom:not([fill='none' i]),
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink svg.sue-hb-custom [fill]:not([fill='none' i]) {
  fill: currentColor !important;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink svg.sue-hb-custom [stroke]:not([stroke='none' i]) {
  stroke: currentColor !important;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink:hover {
  color: var(--secondary-ink-color, #1c1c1c);
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink {
  color: #ffffff;
}
/* The tooltip: under the icon, on hover (where there is one: no tooltip left
   stuck after a tap) and on keyboard focus. Anchored to the side nearest the
   screen's edge, so it can never push the page wider; a long title wraps. The
   pointer can move onto it (to read or magnify it) without losing it: it is
   part of the link, and its ::before bridges the gap. Esc hides it until the
   pointer or focus leaves (js/menus.js; WCAG 1.4.13, review 17 Oct 2026). */
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink .sue-hb-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 5;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 6px 10px;
  border-radius: 6px;
  background: #1c1c1c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
  text-align: start;
  text-shadow: none;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink .sue-hb-tip::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 6px;
}
header.site-header .main-header .sue-hl-left .sue-hb-iconlink .sue-hb-tip {
  inset-inline-end: auto;
  inset-inline-start: 0;
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink:focus-visible .sue-hb-tip {
  display: block;
}
@media (hover: hover) {
  header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink:hover .sue-hb-tip {
    display: block;
  }
}
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink.sue-hb-tip-off .sue-hb-tip {
  display: none;
}
/* Shown by keyboard focus alone, it must not take a click meant for what lies
   under it; under the pointer it is the icon's, so the pointer can reach it. */
header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink:not(:hover) .sue-hb-tip {
  pointer-events: none;
}
/* On a phone the icon sits well in from the edge it hangs from: a narrower
   tooltip, so a long title cannot run off the other side. */
@media (max-width: 767px) {
  header.site-header .main-header :is(.btn-wrap, .sue-hl-left) .sue-hb-iconlink .sue-hb-tip {
    max-width: min(170px, calc(100vw - 32px));
  }
}

/* ---------- Centred layout: a button down to its icon is a plain icon ----- */
/* A header button that runs out of room shows only its icon (data-sue-squeeze
   b1-icon / b2-icon), and so does one set to "Icon only" on phones. Elsewhere
   that is the icon in a round outline; in the Centred layout (Style 4, or
   Custom with Centered) it sat in a circle beside the plain cart, account and
   search icons and looked out of place (Brian, 21 Oct 2026: "I don't think we
   should have this anymore"). Here it is drawn as Header buttons: Icons draws
   it: no outline, the icon as big as the search icon with its 2.2px line, in
   the header's icon colour. Its text stays for screen readers (above).
   style.css animates `all` on Button 2's icon, which here would grow and
   shrink it while js/menus.js measures whether the row fits, and the row
   flipped between fitting and not: no transition on these icons. */
body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb svg.sue-hb-icon {
  transition: none;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon {
  min-width: 40px;
  min-height: 40px;
  margin-inline: -5px;
  border-radius: 0;
  background: none !important;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon .invisible-text,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon .invisible-text {
  width: 40px;
  min-height: 40px;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon .center-to-left,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon .center-to-left {
  display: none !important;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon .left-to-center,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon .left-to-center {
  right: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: #1c1c1c !important;
  text-shadow: none;
  transition: color 0.2s ease-out;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon:hover .left-to-center,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon:hover .left-to-center {
  color: var(--secondary-ink-color, #1c1c1c) !important;
}
body.sue-hl-centered.sue-over-hero header.site-header[data-sue-squeeze~='b2-icon']:not(.sue-solid) .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon .left-to-center,
body.sue-hl-centered.sue-over-hero header.site-header[data-sue-squeeze~='b1-icon']:not(.sue-solid) .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon .left-to-center {
  color: #ffffff !important;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon svg.sue-hb-icon,
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon svg.sue-hb-icon {
  width: calc(24px * var(--sue-hb-k, 1));
  height: calc(24px * var(--sue-hb-k, 1));
  top: 0;
}
body.sue-hl-centered header.site-header[data-sue-squeeze~='b2-icon'] .main-header .btn-wrap .animated-button.contact_button.sue-hb-has-icon svg.sue-hb-icon:not(.sue-hb-custom),
body.sue-hl-centered header.site-header[data-sue-squeeze~='b1-icon'] .main-header .btn-wrap .animated-button.register_button.sue-hb-has-icon svg.sue-hb-icon:not(.sue-hb-custom) {
  stroke-width: var(--sue-hb-sw, 2.2);
}
/* The same for a button set to "Icon only" on phones. */
@media screen and (max-width: 767px) {
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon {
    min-width: 40px;
    min-height: 40px;
    margin-inline: -5px;
    border-radius: 0;
    background: none !important;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon .invisible-text {
    width: 40px;
    min-height: 40px;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon .center-to-left {
    display: none !important;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon .left-to-center {
    right: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: #1c1c1c !important;
    text-shadow: none;
    transition: color 0.2s ease-out;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon:hover .left-to-center {
    color: var(--secondary-ink-color, #1c1c1c) !important;
  }
  body.sue-hl-centered.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon .left-to-center {
    color: #ffffff !important;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon svg.sue-hb-icon {
    width: calc(24px * var(--sue-hb-k, 1));
    height: calc(24px * var(--sue-hb-k, 1));
    top: 0;
  }
  body.sue-hl-centered header.site-header .main-header .btn-wrap .animated-button.sue-hb.sue-hb-phone-icon.sue-hb-has-icon svg.sue-hb-icon:not(.sue-hb-custom) {
    stroke-width: var(--sue-hb-sw, 2.2);
  }
}

/* ---------- Over the hero: the buttons as ghosts --------------------------- */
/* A white pill was the loudest thing on the photo. While the header sits on
   it, both buttons are a white outline over a light shade (white text on a
   white patch of photo still reads about 5.5:1 through the 15% shade), and fill
   white on hover; solid again with the header. Wherever the buttons show, the
   phone header included. !important against the layers' inline text colour. */
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb {
  background-color: transparent;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb .left-to-center {
  background-color: rgba(0, 0, 0, 0.15);
  border-color: #ffffff;
  color: #ffffff !important;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb .center-to-left {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1c1c1c !important;
}
/* Solid's layer at rest had no border of its own (it is the fill): one now, as
   wide as Outline's, so both buttons draw the same outline. */
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb-solid .left-to-center {
  border: 3px solid #ffffff;
}
body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb-solid.sue-hb-compact .left-to-center {
  border-width: 2px;
}
/* Below 1024px every button's border is 2px (style.css). */
@media screen and (max-width: 1023px) {
  body.sue-over-hero header.site-header:not(.sue-solid) .main-header .btn-wrap .animated-button.sue-hb-solid .left-to-center {
    border-width: 2px;
  }
}

/* ---------- Keyboard ring in the dropdowns -------------------------------- */
/* The theme's ring is a black outline with a white band between it and the
   link (style.css), so it shows on a dark section as well as a light one. On a
   dropdown panel the black outline already stands out from, the white band read
   as a thin white border inside the black one: on Style 4's darker third-level
   strip, and on a mid-tone Card or Classic panel (Brian, 21 Oct 2026). There
   the band is left out; on a dark panel it stays (header.php works out
   --sue-sub-halo from the panel's colour). The Band's two strips are always
   light (the Light colour, the third a shade darker). Mega keeps it: its card
   can carry a photo. */
header.site-header .menu-wrapper #primary-menu ul.sub-menu :is(a, button):focus-visible {
  box-shadow: 0 0 0 2px var(--sue-sub-halo, #ffffff);
}
/* Classic's third-level flyout has a shade of its own (--submenu-flyout-bg),
   so its own halo (--sue-fly-halo, header.php). */
body:not(.sue-dd-card, .sue-dd-band, .sue-dd-mega) header.site-header .menu-wrapper #primary-menu ul.sub-menu ul.sub-menu :is(a, button):focus-visible {
  box-shadow: 0 0 0 2px var(--sue-fly-halo, var(--sue-sub-halo, #ffffff));
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu ul.sub-menu :is(a, button):focus-visible {
  box-shadow: none;
}
body.sue-dd-mega header.site-header .menu-wrapper #primary-menu ul.sub-menu :is(a, button):focus-visible {
  box-shadow: 0 0 0 2px #ffffff;
}

/* ---------- Band: the third level on a strip of its own -------------------- */
/* Brian: "the brain doesn't interpret sub menus from left to right very
   easily". A second-level item with links under it says so (an arrow) and
   opens them on a strip right under the band: on hover, on keyboard focus, and
   on a touch screen with a first tap (js/menus.js, which also keeps
   aria-expanded and Escape working). A fourth level stays inline in the strip,
   as the third used to sit in the band (the "Band" review fixes above). */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children {
  display: block;
  position: static;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > a {
  position: relative;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px 3px 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-strip-open):not(.sue-sub-dismissed) > a,
body.sue-menu-current.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current_page_ancestor) > a {
  /* ... and the current page's own second-level item, or the one holding it on
     its strip: the band's rule for that lost to the colour above it, which
     carries an ID, so it never showed (5 Oct; review, 16 Oct). */
  color: var(--sue-nav-accent, #1b4ea0);
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-strip-open):not(.sue-sub-dismissed) > a::after {
  transform: translateY(3px) rotate(225deg);
}
/* The pointer's way down to the strip: hung from the hovered link only, down to
   the band's bottom edge (js/menus.js measures it; in a band of two rows an item
   on the first has the whole second row in between), and above that row's
   items, which would otherwise take the pointer on its way down. A way that
   is not straight down is covered by the strip closing 0.3s late (below). */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children:hover > a::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -12px;
  right: -12px;
  top: 100%;
  height: var(--sue-strip-bridge, 28px);
}
/* The strip: across the band's width (the band is its containing block, the
   item being static), a shade darker than the band. Always laid out, shown by
   visibility, so it can close 0.3s late: a pointer aimed straight at a far link
   on the strip leaves its item at once, over the band's other items (skeptical
   review, 16 Oct 2026), and reaches the strip before it goes. It opens at once,
   and closes at once on Escape, when another strip opens, and when the pointer
   leaves the whole dropdown (the rules below). */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 52px;
  width: auto;
  margin: 0;
  padding: 14px 40px;
  border: 0;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  background: #e8eaee;
  background: color-mix(in srgb, var(--sue-light-bg, #f4f5f7) 90%, #000000);
  box-shadow: 0 12px 20px -14px rgba(16, 24, 40, 0.25);
  opacity: 1;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children:is(:hover, :focus-within, .sue-strip-open):not(.sue-sub-dismissed) > ul.sub-menu {
  visibility: inherit;
  transition: none;
}
/* At once: Escape; another strip opening (one held open by keyboard focus gives
   way to the one under the pointer: both sit in the same place); the pointer
   leaving the whole dropdown. */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children.sue-sub-dismissed > ul.sub-menu,
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu:has(> li.menu-item-has-children:hover) > li.menu-item-has-children:not(:hover) > ul.sub-menu,
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li:not(:hover, :focus-within, .sue-tap-open) > ul.sub-menu > li.menu-item-has-children:not(.sue-strip-open) > ul.sub-menu {
  visibility: hidden;
  transition: none;
}
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a {
  font-size: 16px;
  color: #3f4853;
}
/* On the darker strip the accent is darkened a step further, so hover and the
   current page still read (the accent is fitted to white and its own tints). */
body.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > ul.sub-menu li a:hover,
body.sue-menu-current.sue-dd-band header.site-header .menu-wrapper #primary-menu > li > ul.sub-menu > li.menu-item-has-children > ul.sub-menu li:is(.current-menu-item, .current_page_item) > a {
  color: color-mix(in srgb, var(--sue-nav-accent, #1b4ea0) 78%, #000000);
}

/* ---------- Full screen phone menu ----------------------------------------- */
/* Brian's notes: arrows not level with their text, a focus box drawn beside
   its arrow, the list pinned near the top with the screen's lower half empty.
   - The list and the buttons under it sit in the middle of the screen: the
     auto margins act on WP's own wrapper div (the flex item, not the list
     inside it) and under the buttons, so My account / Cart and the Utility
     links go to the foot, and without them the middle is still the middle.
   - An item with a section is a three-column row: equal side columns, so its
     text stays centred on the screen like every other item, and its arrow sits
     in the right-hand column, level with the middle of the text's first line.
   - Every level's arrow is centred in its 44px box, and the keyboard ring is
     drawn round that box. */
body.sue-pm-full .mobile-menu-wrapper .inner > div[class$='-container'] {
  width: 100%;
  margin-top: auto;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu {
  margin: 0;
}
body.sue-pm-full .mobile-menu-wrapper .inner .btn-wrap {
  margin-top: 28px;
  margin-bottom: auto;
}
body.sue-pm-full .mobile-menu-wrapper .inner .sue-pm-links {
  padding-top: 24px;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li.menu-item-has-children {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
  align-items: start;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li.menu-item-has-children > a {
  grid-column: 2;
  min-width: 0;
}
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon {
  grid-column: 3;
  justify-self: start;
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: calc(var(--sue-pm-line, 44px) / 2 - 22px + var(--sue-pm-drop, 0px)) 0 0 8px;
  padding: 0;
  border-radius: 10px;
}
/* The height of the text's first line, padding included: the arrow's box is
   centred on it. Each level's line height is set here, so the sum holds in any
   body font (the second level's was "normal", which is the font's own).
   The middle of a line box is the capitals' middle; mixed-case text reads
   lower, so the arrow drops 0.055em of the label's size, to half-way between
   the capitals' middle and the lower case's middle, the header button icons'
   rule. Measured in three engines in Kumbh Sans, Lato and Georgia: within 1px
   (it sat 0.7-1.8px high; Brian, Style 4 round 2, 16 Oct 2026). */
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu > li.menu-item-has-children {
  --sue-pm-line: calc(12px + 30px * 1.15);
  --sue-pm-drop: calc(30px * 0.055);
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li a {
  line-height: 1.25;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li.menu-item-has-children {
  --sue-pm-line: calc(10px + 18px * 1.25);
  --sue-pm-drop: calc(18px * 0.055);
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu ul.sub-menu li.menu-item-has-children {
  --sue-pm-line: calc(10px + 16px * 1.25);
  --sue-pm-drop: calc(16px * 0.055);
}
/* In the menu's own text colour, inside the box: the theme's ring (near-black,
   outside, !important, so this has to be too) sat beside the arrow on the
   coloured panel. */
body.sue-pm-full .mobile-menu-wrapper ul.menu li.menu-item-has-children > button.icon:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: -2px !important;
  box-shadow: none;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li.menu-item-has-children > ul.sub-menu {
  grid-column: 1 / -1;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu li a {
  padding-left: 0;
  padding-right: 0;
}
/* The third level: no indent (it pushed the text off the centre line), a
   little lighter than the second. */
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu ul.sub-menu {
  margin: 0;
  padding: 0 0 8px;
}
body.sue-pm-full .mobile-menu-wrapper .inner ul.menu li ul.sub-menu ul.sub-menu li a {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
}