/* =====================================================================
   HSR-Header — Variant A, "Calm bar" (Brand Kit V3.0)
   =====================================================================
   Chosen by Mark 2026-07-31.

   🔴 THIS STYLESHEET IS SAFE TO SHIP BEFORE THE HEADER RENDERS. Every
      selector is scoped to `.hsr-hdr` or `.hsr-drawer`, neither of which
      exists in the DOM until WS3 adds 'header' to hsr_owned_locations().
      There is not one bare-element rule in this file, on purpose — see
      hsr-globals.css for why that matters.

   ⚠️ NEVER reuse an `.elementor-*` class name here. That rule exists so
      `grep -r "elementor"` on a rendered page is a meaningful test at WS13.

   THE DESIGN, IN ONE LINE
   One 76px white row. Content starts higher, which matters most on a phone.
   Pill hovers echo the 16px card radius. Exactly one blue button — coral is
   reserved for the single most important action on the page below, so the
   header never competes with it.
   ===================================================================== */

/* ---- The bar --------------------------------------------------------- */
.hsr-hdr {
  position: relative;
  z-index: 100;
  background: var(--hsr-white);
  border-bottom: 1px solid var(--hsr-line);
}

/* Inner width. The generic .hsr-container rule was removed from
   hsr-globals.css (see the note there) and hsr-globals is OFF, so the bar
   needs its own width or it renders edge-to-edge.

   🔴 THIS LIVES ON .hsr-hdr__in, NOT ON `.hsr-hdr .hsr-container`, AND THAT
      MATTERS. It was written as a descendant selector first and WP Rocket's
      Remove-Unused-CSS silently dropped it from the logged-out page: the
      Used-CSS was generated while `.hsr-hdr` was still absent from the DOM
      (the rule shipped one deploy before the header flip), so Rocket judged it
      unused and stripped it. Result: correct logged in, full-bleed logged out.
      Both classes sit on the SAME element, so targeting the modifier alone is
      equivalent, survives RUCSS, and cannot be beaten by the kit. */
.hsr-hdr__in {
  width: 100%;
  max-width: var(--hsr-width);
  margin-inline: auto;
  padding-inline: var(--hsr-s-5);
  display: flex;
  align-items: center;
  gap: var(--hsr-s-6);
  height: 76px;
}

.hsr-hdr__brand { flex: 0 0 auto; }
.hsr-hdr__spacer { flex: 1 1 auto; }

/* Logo. Minimum width ~140px, per the Brand Kit. Never stretched. */
.hsr-logo,
.hsr-logo img {
  display: block;
  max-height: 44px;
  width: auto;
}
.hsr-logo--text {
  font-family: var(--hsr-font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hsr-blue-800);
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Navigation ------------------------------------------------------
   wp_nav_menu output, so the selectors have to survive whatever core and
   any plugin add to the <li>. Everything is scoped through .hsr-hdr__list. */
.hsr-hdr__nav { flex: 0 1 auto; min-width: 0; }

.hsr-hdr__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsr-hdr__list li { position: relative; }

.hsr-hdr__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--hsr-r-pill);
  font-family: var(--hsr-font-head);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hsr-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hsr-dur) var(--hsr-ease),
              color var(--hsr-dur) var(--hsr-ease);
}
.hsr-hdr__list a:hover { background: var(--hsr-cream-100); color: var(--hsr-blue-800); }

/* Current page. Not colour-only — it also carries more weight. */
.hsr-hdr__list .current-menu-item > a,
.hsr-hdr__list .current_page_item > a {
  background: var(--hsr-blue-100);
  color: var(--hsr-blue-800);
  font-weight: 600;
}

/* ---- Sub-menus -------------------------------------------------------
   Opened on hover AND on focus-within, so a keyboard user can reach them.
   Hover-only submenus are the single most common keyboard trap in a nav. */
.hsr-hdr__list .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: var(--hsr-s-2);
  list-style: none;
  background: var(--hsr-white);
  border-radius: var(--hsr-r-lg);
  box-shadow: var(--hsr-sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--hsr-dur) var(--hsr-ease),
              transform var(--hsr-dur) var(--hsr-ease),
              visibility var(--hsr-dur);
}
.hsr-hdr__list li:hover > .sub-menu,
.hsr-hdr__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hsr-hdr__list .sub-menu a {
  display: flex;
  width: 100%;
  border-radius: var(--hsr-r-sm);
  white-space: normal;
}

/* ---- Actions ---------------------------------------------------------- */
.hsr-hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--hsr-s-3);
  flex: 0 0 auto;
}

/* "Sign in" is a text link, not a button. Two buttons side by side is two
   primary actions, and the Brand Kit allows one. */
.hsr-hdr__signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--hsr-tap);
  padding: 10px 8px;
  font-family: var(--hsr-font-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--hsr-slate);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--hsr-dur) var(--hsr-ease);
}
/* =====================================================================
   🔴 ELEMENTOR KIT SPECIFICITY GUARD — see the matching block in
   hsr-tokens.css. `.elementor-kit-9 a` / `... button` are (0,1,1) and beat
   ANY single-class rule (0,1,0) here, so the theme's intended colour loses.
   Measured live: this link resolved to #0757A0, not --hsr-slate.
   Doubling the class is (0,2,0) — wins now, harmless after WS12, and stays a
   simple compound selector so RUCSS keeps it.
   ===================================================================== */
.hsr-hdr__signin.hsr-hdr__signin { color: var(--hsr-slate); }
.hsr-hdr__signin.hsr-hdr__signin:hover { color: var(--hsr-blue-700); }
.hsr-drawer__x.hsr-drawer__x { color: var(--hsr-ink); }
.hsr-skip-link.hsr-skip-link { color: var(--hsr-white); }

/* ---- Burger -----------------------------------------------------------
   44x44, per the Brand Kit. Hidden above the breakpoint. */
.hsr-hdr__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--hsr-r-md);
  cursor: pointer;
}
.hsr-hdr__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--hsr-blue-800);
  transition: transform var(--hsr-dur) var(--hsr-ease),
              opacity var(--hsr-dur) var(--hsr-ease);
}
.hsr-hdr__burger:hover { background: var(--hsr-cream-100); }
.hsr-hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hsr-hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hsr-hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Breakpoint -------------------------------------------------------
   1024px, not 768px. The nav has five items plus two actions; below ~1024
   they start colliding, and a cramped nav reads as broken rather than dense. */
@media (max-width: 1023px) {
  .hsr-hdr__in { height: 66px; gap: var(--hsr-s-4); }
  .hsr-hdr__nav { display: none; }
  .hsr-hdr__burger { display: flex; }
  .hsr-hdr__signin { display: none; }
}

@media (max-width: 480px) {
  /* Keep ONE action visible on the smallest screens. The rest is in the
     drawer. Two buttons plus a burger on a 360px screen is a scrum. */
  .hsr-hdr__actions .hsr-btn { display: none; }
}


/* =====================================================================
   MOBILE DRAWER
   ---------------------------------------------------------------------
   Same contract as the modals: `hidden` ATTRIBUTE is the resting state,
   `.is-open` is the visible one. The attribute is what assistive tech reads
   AND what still hides the drawer if this stylesheet fails to load.
   ===================================================================== */
.hsr-drawer[hidden] { display: none; }

.hsr-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  transition: opacity var(--hsr-dur) var(--hsr-ease);
}
.hsr-drawer.is-open { opacity: 1; }

.hsr-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 78, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hsr-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  padding: var(--hsr-s-16) var(--hsr-s-5) var(--hsr-s-8);
  overflow-y: auto;
  background: var(--hsr-cream-50);
  box-shadow: var(--hsr-sh-lg);
  transform: translateX(16px);
  transition: transform var(--hsr-dur) var(--hsr-ease);
}
.hsr-drawer.is-open .hsr-drawer__panel { transform: translateX(0); }

.hsr-drawer__x {
  position: absolute;
  top: var(--hsr-s-3);
  right: var(--hsr-s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--hsr-r-pill);
  color: var(--hsr-slate);
  cursor: pointer;
}
.hsr-drawer__x svg { width: 20px; height: 20px; }
.hsr-drawer__x:hover { background: var(--hsr-cream-100); color: var(--hsr-ink); }

/* ════════════════════════════════════════════════════════════════════════════
 * KIT OVERRIDE — the drawer close button and the burger.
 * MEASURED 2026-08-03 at 390px with the drawer actually OPEN (a closed drawer
 * reports 0x0 and proves nothing, so it was opened via a real burger click):
 *
 *     .hsr-drawer__x   box 52x44   padding 13px/26px   bg rgb(7,87,160)
 *                      SVG 0.0 x 20.0   <-- ZERO WIDTH
 *
 * `.elementor-kit-9 button` (0,1,1) beat the (0,1,0) rules above and put its
 * background, padding 13px 26px and radius back on. A 44px border-box button
 * with 26px of side padding has a ZERO-WIDTH content box, and the svg — a flex
 * item at default flex-shrink:1 — collapses to width 0 while keeping height 20.
 * The mobile nav drawer had NO VISIBLE CLOSE CONTROL, on every page.
 *
 * Identical to the .hsr-modal__x defect fixed in session 10 — that rule was
 * doubled, this one was not. Line 183 doubled COLOUR only, which is exactly why
 * the glyph was the right colour and still invisible.
 * 🔴 DOUBLING ONE PROPERTY IS NOT DOUBLING THE RULE.
 *
 * Found by tools/hsr-kit-collision-check.py, not by eye.
 * NOTE: `display` is deliberately NOT set here — the burger's show/hide lives in
 * the breakpoint below and must keep winning.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-drawer__x.hsr-drawer__x,
.hsr-hdr__burger.hsr-hdr__burger {
  box-sizing: border-box;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.hsr-drawer__x.hsr-drawer__x   { border-radius: var(--hsr-r-pill); }
.hsr-hdr__burger.hsr-hdr__burger { border-radius: var(--hsr-r-md); }

/* flex: 0 0 auto is what stops the glyph being squeezed away again if a future
   rule ever puts padding back on the button. */
.hsr-drawer__x.hsr-drawer__x svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* 🔴 MEASURED 2026-08-04 (Mark, real iPhone): after tapping the burger the
 * close X showed a filled cream circle, and after closing the drawer the burger
 * rendered as a SOLID navy square. Neither reproduces in desktop Chrome at
 * 390px — which is exactly why it was missed.
 *
 * Two causes, both touch-only:
 *   · iOS leaves `:hover` STUCK on the last element tapped, so a hover
 *     background never clears;
 *   · hsr-header.js deliberately calls `burger.focus()` when the drawer closes
 *     (so a keyboard user is not dumped at the top of the page), and Safari
 *     matches `:focus-visible` for that programmatic focus.
 *
 * So the fill is gated to devices that genuinely hover, and the keyboard
 * affordance becomes an OUTLINE, which cannot be mistaken for a filled button.
 * ⚠️ Do not "simplify" this back to a bare `:hover` — it looks correct on a
 * desktop and wrong on every phone. */
@media (hover: hover) and (pointer: fine) {
  .hsr-drawer__x.hsr-drawer__x:hover,
  .hsr-hdr__burger.hsr-hdr__burger:hover {
    background-color: var(--hsr-cream-100);
  }
}
.hsr-drawer__x.hsr-drawer__x:focus-visible,
.hsr-hdr__burger.hsr-hdr__burger:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--hsr-blue-800);
  outline-offset: 2px;
}

/* The glyph colour, doubled, so no generic `button` rule can repaint it white
 * on a transparent background — which is invisible on the cream drawer. */
.hsr-drawer__x.hsr-drawer__x { color: var(--hsr-ink); }
.hsr-drawer__x.hsr-drawer__x svg { color: var(--hsr-ink); }
.hsr-hdr__burger.hsr-hdr__burger span { background-color: var(--hsr-blue-800); }

.hsr-drawer__list {
  margin: 0 0 var(--hsr-s-6);
  padding: 0;
  list-style: none;
}
.hsr-drawer__list a {
  display: flex;
  align-items: center;
  min-height: var(--hsr-tap);
  padding: 11px var(--hsr-s-3);
  border-radius: var(--hsr-r-md);
  font-family: var(--hsr-font-head);
  font-size: 17px;
  font-weight: 500;
  color: var(--hsr-ink);
  text-decoration: none;
}
.hsr-drawer__list a:hover { background: var(--hsr-cream-100); color: var(--hsr-blue-800); }

.hsr-drawer__list .sub-menu {
  margin: 0 0 0 var(--hsr-s-3);
  padding: 0;
  list-style: none;
}
.hsr-drawer__list .sub-menu a { font-size: 15px; color: var(--hsr-slate); }

/* ---- Drawer sub-menus: collapsed by default (session 17) --------------
 * 🔴 WHY. "Reports" has SEVEN children. Expanded, the drawer is 793px of
 *    content in a 660px phone viewport, and the last item — "Sign in" —
 *    ends up UNDER the landing pages' fixed `.lp-sticky` bar (74px tall,
 *    z-index 9999, while the drawer panel is z-index auto). Measured: after
 *    scrolling the drawer as far as it goes, Sign in overlapped the bar by
 *    42px and `elementFromPoint` returned `.lp-sticky` — so it was not just
 *    hidden, it was NOT CLICKABLE.
 *
 * ⚠️ The collapse is applied ONLY under `--collapsible`, a class hsr-header.js
 *    adds. With JS off nothing collapses and every sub-item stays reachable —
 *    the parent link goes to a real page (/software/), and its seven children
 *    are the money pages.
 * ⚠️ This does NOT fix the underlying overlay: a page-level CTA still paints
 *    over site navigation. If a bottom bar is ever added to a page with a
 *    longer menu, or a visitor expands Reports on a short viewport, the last
 *    item goes back under it. The durable fix is hiding any fixed bottom bar
 *    while `body.hsr-drawer-open` is set. Deliberately not done — Mark's call,
 *    2026-08-04. */
.hsr-drawer__row { display: flex; align-items: center; gap: 4px; }
.hsr-drawer__row > a { flex: 1 1 auto; }
/* 🔴 DOUBLED. Shipped once un-doubled and `.elementor-kit-9 button` (0,1,1)
 * beat it (0,1,0): the toggle rendered as a SOLID BLUE ROUNDED BUTTON with a
 * white glyph — measured bg rgb(7,87,160), radius 12px. This is the same trap
 * that has now bitten this project six times. It is a disclosure arrow, not a
 * button, and must look like one. */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hsr-tap);
  height: var(--hsr-tap);
  min-height: var(--hsr-tap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--hsr-ink);
  cursor: pointer;
}
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:focus-visible {
  outline: 2px solid var(--hsr-blue-800);
  outline-offset: 2px;
}
/* A bare chevron: two borders on an empty box, rotated. Points DOWN when
 * collapsed, UP when expanded. Colour is stated, not inherited — inheriting is
 * how it ended up white on the blue button. */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle .hsr-drawer__chev {
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--hsr-ink);
  border-bottom: 2px solid var(--hsr-ink);
  border-top: 0;
  border-left: 0;
  background: transparent;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle[aria-expanded="true"] .hsr-drawer__chev {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.hsr-drawer__list--collapsible .sub-menu { display: none; }
.hsr-drawer__list--collapsible .menu-item-has-children.is-open > .sub-menu { display: block; }

.hsr-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--hsr-s-3);
  padding-top: var(--hsr-s-5);
  border-top: 1px solid var(--hsr-line);
}

body.hsr-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hsr-drawer,
  .hsr-drawer__panel,
  .hsr-hdr__list .sub-menu { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * KIT OVERRIDE — INTERACTION STATES for the three header controls.
 *
 * 🔴 MEASURED 2026-08-04 (Mark, real iPhone): the disclosure arrow went back to
 *    a SOLID NAVY SQUARE the moment it was tapped. The resting state had been
 *    doubled and fixed; the STATES had not, so `.elementor-kit-9 button:hover`
 *    / `:focus` / `:active` (0,2,1) beat the single-class state rules (0,1,1)
 *    and repainted the background.
 *
 * 🔴 THE RULE THIS PROJECT KEEPS RE-LEARNING, RESTATED:
 *    DOUBLING THE RESTING RULE IS NOT DOUBLING THE CONTROL.
 *    A control has five states — rest, hover, focus, focus-visible, active —
 *    and the kit claims every one of them. Doubling only `rest` fixes the
 *    screenshot you happen to be looking at.
 *
 * Doubled class + state = (0,3,0), which beats the kit's (0,2,1).
 * These are navigation affordances, not buttons: they stay transparent in every
 * state, and the keyboard indicator is an OUTLINE so it can never read as a
 * filled brand button.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:hover,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:focus,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:focus-visible,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:active,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle[aria-expanded="true"],
.hsr-drawer__x.hsr-drawer__x:focus,
.hsr-drawer__x.hsr-drawer__x:active,
.hsr-hdr__burger.hsr-hdr__burger:focus,
.hsr-hdr__burger.hsr-hdr__burger:active,
.hsr-hdr__burger.hsr-hdr__burger[aria-expanded="true"] {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  color: var(--hsr-ink);
}

/* The chevron itself, in every state of its button. */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle .hsr-drawer__chev,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:hover .hsr-drawer__chev,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:focus .hsr-drawer__chev,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:active .hsr-drawer__chev,
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle[aria-expanded="true"] .hsr-drawer__chev {
  border-right-color: var(--hsr-ink);
  border-bottom-color: var(--hsr-ink);
  background: transparent;
}

/* Keyboard users still get a clear, brand-coloured indicator — an outline. */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:focus-visible,
.hsr-drawer__x.hsr-drawer__x:focus-visible,
.hsr-hdr__burger.hsr-hdr__burger:focus-visible {
  outline: 2px solid var(--hsr-blue-800);
  outline-offset: 2px;
}

/* The burger bars keep the brand navy in every state. */
.hsr-hdr__burger.hsr-hdr__burger span,
.hsr-hdr__burger.hsr-hdr__burger:hover span,
.hsr-hdr__burger.hsr-hdr__burger:focus span,
.hsr-hdr__burger.hsr-hdr__burger:active span {
  background-color: var(--hsr-blue-800);
}

/* iOS paints its own grey wash on tap. */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle,
.hsr-drawer__x.hsr-drawer__x,
.hsr-hdr__burger.hsr-hdr__burger {
  -webkit-tap-highlight-color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
 * 🔴 STICKY :hover ON iOS — the actual cause of the "solid blue box".
 *
 * Mark, 2026-08-04: "If I tap on the screen again, the blue box goes away and I
 * can see the 3 hamburger lines again." That is the signature of iOS keeping
 * :hover on the last element tapped until you tap somewhere else.
 *
 * The earlier fix moved OUR cream hover into `@media (hover:hover)` — but the
 * box was never ours. `.elementor-kit-9 button:hover` paints BRAND NAVY, it is
 * not gated by any media query, and on a phone it sticks. Removing our rule
 * could never have fixed a rule we did not write.
 *
 * So: hover is transparent for these three controls everywhere, and the cream
 * feedback is added back afterwards ONLY for real pointers. Order matters —
 * the media block must stay AFTER this one.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:hover,
.hsr-drawer__x.hsr-drawer__x:hover,
.hsr-hdr__burger.hsr-hdr__burger:hover {
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--hsr-ink);
}

.hsr-hdr__burger.hsr-hdr__burger:hover span {
  background-color: var(--hsr-blue-800);
}

@media (hover: hover) and (pointer: fine) {
  .hsr-drawer__x.hsr-drawer__x:hover,
  .hsr-hdr__burger.hsr-hdr__burger:hover,
  .hsr-drawer__sub-toggle.hsr-drawer__sub-toggle:hover {
    background-color: var(--hsr-cream-100);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * 🔴 LAST WORD — these three controls are never painted, in any state.
 *
 * Specificity SHOULD have been enough: the only navy source is
 * `.elementor-kit-9 button:hover, .elementor-kit-9 button:focus` at (0,2,1)
 * with NO !important, and the doubled rules above are (0,3,0). Verified in
 * Chrome: programmatic .focus() leaves every one of them transparent.
 *
 * It was still navy on a real iPhone across three deploys. Rather than keep
 * reasoning about a cascade I cannot inspect on that device, this states the
 * outcome outright. `!important` is used deliberately and narrowly — three
 * navigation affordances, background and glyph colour only. It does not touch
 * layout, and it does not touch any real button.
 *
 * ⚠️ If you are here to add a state to these controls, add it to THIS block.
 *    A control has five states and kit-9 claims all of them; fixing only the
 *    one in front of you is how this took three rounds.
 * ════════════════════════════════════════════════════════════════════════════ */
.hsr-hdr__burger,
.hsr-hdr__burger:hover,
.hsr-hdr__burger:focus,
.hsr-hdr__burger:focus-visible,
.hsr-hdr__burger:active,
.hsr-hdr__burger[aria-expanded="true"],
.hsr-drawer__x,
.hsr-drawer__x:hover,
.hsr-drawer__x:focus,
.hsr-drawer__x:focus-visible,
.hsr-drawer__x:active,
.hsr-drawer__sub-toggle,
.hsr-drawer__sub-toggle:hover,
.hsr-drawer__sub-toggle:focus,
.hsr-drawer__sub-toggle:focus-visible,
.hsr-drawer__sub-toggle:active,
.hsr-drawer__sub-toggle[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hsr-drawer__x,
.hsr-drawer__x:hover,
.hsr-drawer__x:focus,
.hsr-drawer__x:active,
.hsr-drawer__x svg,
.hsr-drawer__sub-toggle,
.hsr-drawer__sub-toggle:hover,
.hsr-drawer__sub-toggle:focus,
.hsr-drawer__sub-toggle:active {
  color: var(--hsr-ink) !important;
}

.hsr-hdr__burger span,
.hsr-hdr__burger:hover span,
.hsr-hdr__burger:focus span,
.hsr-hdr__burger:active span {
  background-color: var(--hsr-blue-800) !important;
}

.hsr-drawer__chev,
.hsr-drawer__sub-toggle:hover .hsr-drawer__chev,
.hsr-drawer__sub-toggle:focus .hsr-drawer__chev,
.hsr-drawer__sub-toggle:active .hsr-drawer__chev,
.hsr-drawer__sub-toggle[aria-expanded="true"] .hsr-drawer__chev {
  border-right-color: var(--hsr-ink) !important;
  border-bottom-color: var(--hsr-ink) !important;
  background: transparent !important;
}

/* Keyboard users keep a visible indicator — an outline, which no background
   rule can turn into a filled button. */
.hsr-hdr__burger:focus-visible,
.hsr-drawer__x:focus-visible,
.hsr-drawer__sub-toggle:focus-visible {
  outline: 2px solid var(--hsr-blue-800) !important;
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * SESSION 18 — THE DRAWER OVERLAY. Append to assets/css/hsr-header.css.
 * ═══════════════════════════════════════════════════════════════════════════
 * §6.5 carried this as "logged, not urgent" with the fix already named:
 * one rule hiding fixed bottom bars while `body.hsr-drawer-open` is set.
 * hsr-header.js already toggles that class (2 references, add + remove).
 *
 * 🔴 THERE ARE EXACTLY TWO SUCH BARS SITE-WIDE. Measured session 18 by
 *    reading every CSS rule carrying `position:fixed` together with
 *    `bottom:0` out of the SERVED inline CSS on eleven URLs, guest and
 *    owner — not by looking for class names in the markup, which is how I
 *    missed #hsr-sticky the first time (it is an id, not a class):
 *
 *      .hsr-lp .lp-sticky   z-index  9999   / · /software/ · /pricing/ · /attendance/
 *      #hsr-sticky          z-index 99990   blog single posts
 *      .hsr-drawer          z-index   200   ← loses to both
 *
 *    §6.5 guessed the blog single "probably has the same overlay". It does,
 *    and it is worse: 99990 buries a z-index-200 drawer completely, where
 *    .lp-sticky only clipped the last item by 42px.
 *
 * ⚠️ WHY NOT JUST RAISE .hsr-drawer's z-index. It would work — the drawer is
 *    a direct child of <body> with no ancestor stacking context (measured:
 *    no transform, no filter, no opacity, no isolation on the chain). But it
 *    would have to clear 99990, landing between #hsr-progress (99991) and
 *    #wpadminbar (99999). Hiding two known bars is the smaller claim.
 *
 * 🟢 NO `!important`, DELIBERATELY. Unlike the kit-9 block above, we win on
 *    specificity alone and there is no reason to spend the hammer:
 *      body.hsr-drawer-open .lp-sticky  = (0,2,1)  vs  .hsr-lp .lp-sticky = (0,2,0)
 *      body.hsr-drawer-open #hsr-sticky = (1,1,1)  vs  #hsr-sticky        = (1,0,0)
 *    If a future page ever adds `!important` to a bar, this stops working
 *    silently — verify the bar, not this rule.
 *
 * ⚠️ WP ROCKET USED CSS IS THE REAL RISK, NOT SPECIFICITY. Guest pages are
 *    served with every stylesheet inlined and ZERO <link> stylesheets, so
 *    `hsr-header.css` appears by name on only 2 of 8 URLs. A rule keyed on a
 *    class that only exists at runtime is exactly what Used CSS prunes.
 *    Checked before shipping: source holds ONE `hsr-drawer-open` rule
 *    (`body.hsr-drawer-open{overflow:hidden}`) and the served inline CSS
 *    holds ONE. Nothing pruned. Both selectors below also name .lp-sticky /
 *    #hsr-sticky, which ARE in the served markup.
 *
 * 🔴 VERIFY BY FINDING THIS RULE'S TEXT IN THE SERVED CSS — NEVER A COMMENT.
 *    Minification strips comments; that is how a correct S17 deploy read as
 *    "not shipped". Search the guest HTML for the selector, not for this note.
 *
 * ROLLBACK: delete this block. Nothing else references it.
 * ═════════════════════════════════════════════════════════════════════════ */

body.hsr-drawer-open .lp-sticky,
body.hsr-drawer-open #hsr-sticky {
  display: none;
}


/* HSR-HDR-1440-START (rollback: delete through HSR-HDR-1440-END) — header content width site-wide */
.hsr-hdr__in.hsr-hdr__in{max-width:1440px}
/* HSR-HDR-1440-END */