/* ══════════════════════════════════════════════════════════════
   ChargerHelp — shared nav chrome + mobile drawer
   Linked by every page. Hamburger takes over at <=1024.
   ══════════════════════════════════════════════════════════════ */

/* Closed state must be explicit here — it cannot rely on the element's inline
   styles surviving a re-render, or the overlay paints over the whole page. */
#navdrawer { display: none; opacity: 0; pointer-events: none; }
#navdrawer:not([data-open="yes"]) { opacity: 0 !important; pointer-events: none !important; }
#navdrawer[data-open="yes"] { opacity: 1 !important; pointer-events: auto !important; }
#navdrawer:not([data-open="yes"]) .drawer-inner { opacity: 0 !important; transform: translateY(-12px) !important; }
#navdrawer[data-open="yes"] .drawer-inner { transform: translateY(0) !important; opacity: 1 !important; }
/* Eyebrow-to-first-link distance pinned to 12px in every group, independent of
   each group's item gap (18 primary / 12 tablet, 10 mobile secondary). */
.drawer-group-pri > div:first-child { margin-bottom: -6px; }
.drawer-link:hover { color: #FFC629 !important; }
/* Closed state: bottom bar shortened to 75%, pinned to the right edge of the
   stack. Scaling from the right origin means it grows back to full width as it
   rotates into the X, with no positional jump. */
#navburger:not([data-open="yes"]) [data-bar="bot"] { transform: scaleX(0.65); transform-origin: right center; }
/* Promoted items — hero KPI card treatment: 1px 10% white stroke, flush 5% fill */
.drawer-link-boxed { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; transition: color 140ms; }
.drawer-link-boxed .arrow { flex-shrink: 0; color: #FFFFFF; }
.drawer-link-boxed:hover { color: #FFC629 !important; }
.drawer-link-boxed:hover .arrow { color: #FFC629; }
.burger-bar { display: block; width: 22px; height: 1.5px; background: #FFFFFF; transition: transform 240ms cubic-bezier(0.2,0,0,1), opacity 160ms; }
#navburger[data-open="yes"] [data-bar="top"] { transform: translateY(7.5px) rotate(45deg); }
#navburger[data-open="yes"] [data-bar="mid"] { opacity: 0; }
#navburger[data-open="yes"] [data-bar="bot"] { transform: translateY(-7.5px) rotate(-45deg); }

/* Burger must be an explicit flex box — inline flex props alone left the bars
   stacked and off-center inside the 44px button. */
html.bp-t #navburger { display: flex !important; }
#navburger { flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; padding: 0 !important; border: 0 !important; }
.burger-bar { display: block; flex-shrink: 0; }

/* was @media (max-width: 1024px) */
  .bp-t .drawer-link { font-size: 36px !important; }
  .bp-t .drawer-link-sec { font-size: 22px !important; }
  .bp-t .drawer-group-sec { gap: 12px !important; }
  /* Whole stack centred vertically in the viewport: symmetric padding so centring
     is true, and the CTA drops its margin-top:auto (which would otherwise pin it
     to the bottom and push everything else up). `safe center` matters — a plain
     centred flex column that overflows pushes its first items above the scroll
     origin, making the top of the menu unreachable. */
  .bp-t .drawer-inner { justify-content: center !important; justify-content: safe center !important; padding-top: 48px !important; padding-bottom: 48px !important; }
  .bp-t .drawer-cta { margin-top: 0 !important; }
  /* Left edge on the logo (nav padding Left 32px); right edge on the X glyph:
     nav padding Right 21px + 6px inside the 44px button, minus the ~4px optical
     inset of the Lucide arrow inside its 20px box. */
  .bp-t .drawer-inner { padding-left: 32px !important; padding-right: 28px !important; }
    .bp-t #globalnav { z-index: 60 !important; }
  .bp-t #globalnav > div { padding: 0 32px !important; align-items: center !important; }
  .bp-t #globalnav > div { transition: none; }
  .bp-t[data-nav="compact"] #globalnav > div { align-items: center !important; }
  /* Top-aligned row: match the burger box to the 50px logo so their glyph centres
     still line up with each other. */
  .bp-t #navburger { height: 50px !important; margin-right: -6px !important; }
  /* tablet glyph: 20% up from 26.4px */
  .bp-t #navburger { gap: 9px !important; }
  .bp-t .burger-bar { width: 32px !important; height: 2px !important; }
  .bp-t #navburger[data-open="yes"] [data-bar="top"] { transform: translateY(11px) rotate(45deg) !important; }
  .bp-t #navburger[data-open="yes"] [data-bar="bot"] { transform: translateY(-11px) rotate(-45deg) !important; }

/* was @media (max-width: 640px) */
  .bp-m #globalnav > div { padding: 0 16px !important; }
  /* Symmetric gutters; the button is pulled out by its own internal slack so the
     glyph edge — not the 44px tap target — lands on the gutter. */
  .bp-m #navburger { margin-right: -9px !important; }
  .bp-m .drawer-link { font-size: 24px !important; }
  .bp-m .drawer-link-sec { font-size: 16px !important; }
  .bp-m .drawer-group-sec { gap: 14px !important; }
  .bp-m .drawer-group-sec > div:first-child { margin-bottom: -2px; }
  /* 14px on the secondary items adds ~16px overall — pull it back out of the
     section gap and bottom padding so the CTA still clears the fold. */
  /* Mobile inherits .bp-t, so it also picked up the tablet centring rule's 48px top
     padding — restore the nav clearance and top alignment here. */
  .bp-m .drawer-inner { gap: 26px !important; padding-top: 120px !important; padding-bottom: 32px !important; justify-content: flex-start !important; }
  /* Primary items tighter on mobile; eyebrow offset re-tuned so its 12px stays */
  .bp-m .drawer-group-pri { gap: 14px !important; }
  .bp-m .drawer-group-pri > div:first-child { margin-bottom: -2px; }
  /* Logo at nav padding Left 16px; X glyph edge at 15 + 9 = 24px, less the 4px arrow inset */
  .bp-m .drawer-inner { padding-left: 16px !important; padding-right: 12px !important; }
  .bp-m .drawer-inner { gap: 32px !important; }
  /* mobile glyph stays at the previous size */
  .bp-m #navburger { gap: 7px !important; }
  .bp-m .burger-bar { width: 26px !important; height: 1.5px !important; }
  .bp-m #navburger[data-open="yes"] [data-bar="top"] { transform: translateY(8.5px) rotate(45deg) !important; }
  .bp-m #navburger[data-open="yes"] [data-bar="bot"] { transform: translateY(-8.5px) rotate(-45deg) !important; }