/* ==================================================
   ELOBOOSTLEAGUE — F3 chrome re-skin (site-wide)
   The live .eb-nav header (parent boosting/nav.css) + cookie banner + footer are
   re-skinned to the "Cream compact" design: Valorant red #1659ac on cream / ink
   #1b1f2a, fonts League (wordmark) / Barlow (nav links) / Oxanium (UI labels),
   and the nav links as plain text links (not boxed tiles). Enqueued site-wide and
   depends on 'boosting-nav' so it loads AFTER nav.css (needed for the !important
   mirrors to win). eloboostleague-only — EBL/OWB never load it. Fonts must be loaded
   for live (Barlow/Oxanium/League are self-hosted in f3-fonts.css). */
   /* ================================================== */

/* --- NAV: swap the blue token set to F3 rose, scoped to the header. nav.css
   declares these on :root and reads them via var(--neon)/var(--accent-*) in
   .eb-nav rules; redeclaring them on .eb-nav (a nearer ancestor than :root for
   every nav descendant) recolors all token-driven nav chrome with no
   !important and no risk of leaking past the header. --- */
.eb-nav {
  --neon: #1659ac;
  --neon3: #1659ac;
  --accent-dk: #0e478c;
  --accent-lt: rgba(22, 89, 172, 0.06);
  --accent-glow: rgba(22, 89, 172, 0.16);
}


/* --- COOKIE CONSENT banner (#bt-cb). The plugin ships its colors as an inline
   <style> printed in the footer (later in source order than this enqueued
   sheet), so each recolor needs !important to win. The inline rules are not
   !important, so this is a clean override; ids / JS / localStorage untouched.
   Navy #071535 + yellow #fdfb62 -> F3 dark-rose + rose. --- */
#bt-cb {
  background: #1c0e12 !important;
  border-color: rgba(22, 89, 172, 0.35) !important;
  border-top-color: #1659ac !important;
}
#bt-cb .bt-cb-icon {
  background: rgba(22, 89, 172, 0.12) !important;
  border-color: rgba(22, 89, 172, 0.30) !important;
}
#bt-cb .bt-cb-icon svg { stroke: #1659ac !important; }
#bt-cb .bt-cb-icon svg circle { fill: #1659ac !important; }
#bt-cb .bt-cb-desc a { color: #ffd83f !important; }
#bt-cb-accept {
  background: #1659ac !important;
  color: #ffffff !important;
  border-bottom-color: #0e478c !important;
}
#bt-cb-accept:hover { background: #0e478c !important; }

/* ============================================================
   F3 NAV RESTYLE (site-wide) — re-skin .eb-nav to the F3 home design.
   header.php now renders a "Val·Boosting" wordmark brand whose caret reveals a
   hover dropdown holding the three cross-site foxes (Val / LoL / OW), plus a
   .drawer-services row in the mobile drawer. This styles that markup + nudges
   the WP menu links, icon buttons and login/logout to the F3 look. The F3 token
   set is .ebl-rd-scoped and does NOT reach the global header, so the rose / ink /
   line values + fonts (League / Barlow / Oxanium — enqueued site-wide in
   functions.php) are hardcoded here. Everything is scoped to .eb-nav (or
   .mobile-drawer) and !important to beat nav.css's own !important rules, since
   this sheet loads after nav.css (depends 'boosting-nav'). No JS / contract /
   menu-source change — the WP menu, login dropdown trigger, logout and
   hamburger all keep working.
   ============================================================ */

/* Align the nav content box with the PAGE content box (max-width 1584 + 28.8px
   gutters, same as .cc-inner / .calc-layout) so the brand sits directly above the
   hero text's left edge and Login above the order-panel right edge. nav.css used a
   1700px box (≈87px wider each side) → the menu didn't line up with the content. */
.eb-nav { padding: 0 max(31.68px, calc((100% - 1742.4px) / 2 + 31.68px)) !important; }

/* brand cluster replaces the old 3-fox strip → drop the divider, keep a gap */
.eb-nav .nav-left {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 19.8px !important;
  gap: 0 !important;
  z-index: 50 !important; /* lift above .nav-center (z-2) so the dropdown paints over it */
}
/* left-align the WP menu (like the F3 design) so it never centre-overflows back
   under the wide wordmark; overflow at tight widths spills toward the actions. */
.eb-nav .nav-center { justify-content: center !important; }

/* --- Wordmark brand --- */
.eb-nav .nav-brand-wrap { position: relative; display: inline-flex; align-items: center; }
.eb-nav .nav-brand {
  display: inline-flex; align-items: center; gap: 11.88px;
  font-family: 'League', 'Oswald', sans-serif !important;
  font-weight: 700; font-size: 26.4px; letter-spacing: -0.005em;
  color: #1b1f2a; text-decoration: none; line-height: 1;
}
.eb-nav .nav-brand-mark {
  width: 41.8px; height: 41.8px; border-radius: 6.6px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.eb-nav .nav-brand-mark.has-fox {
  background: linear-gradient(135deg, #fbf8f1 0%, #efebe1 100%);
  box-shadow: 0 3.3px 9.6px -4.8px rgba(27, 31, 42, 0.22);
  border: 1px solid #e4ded2;
  padding: 0.9px;
}
.eb-nav .nav-brand-mark .brand-mark-fox { width: 40px; height: 40px; object-fit: contain; }
.eb-nav .nav-brand .dot { color: #1659ac; margin: 0 1.32px; }
.eb-nav .nav-brand small {
  display: block;
  font-family: 'Geist Mono', sans-serif !important;
  font-size: 9.9px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a8578; margin-top: 3.3px;
}

/* --- Caret + service-switcher dropdown --- */
.eb-nav .nav-brand-caret {
  display: inline-flex; align-items: center; gap: 6.6px;
  margin-left: 10.56px; padding: 6.6px 10.56px;
  background: #efebe1; border: 1px solid #e7e1d6; border-radius: 8.8px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.eb-nav .nav-brand-caret .caret-grid { width: 17.6px; height: 17.6px; color: #1659ac; }
.eb-nav .nav-brand-caret .caret-chev { width: 14.3px; height: 14.3px; color: #8a8578; transition: transform .24s cubic-bezier(.16,1,.3,1); }
.eb-nav .nav-brand-wrap:hover .nav-brand-caret { background: #fff; border-color: #b9d4f0; box-shadow: 0 3.6px 12px -4.8px rgba(22,89,172,.3); }
.eb-nav .nav-brand-wrap:hover .nav-brand-caret .caret-chev { transform: rotate(180deg); color: #1659ac; }
.eb-nav .brand-dropdown {
  position: absolute; top: calc(100% + 13.2px); left: 0; z-index: 120;
  width: 352px; padding: 9.9px;
  background: #fff; border: 1px solid #e7e1d6; border-radius: 17.6px;
  box-shadow: 0 2.4px 4.8px rgba(27,31,42,.05), 0 28.8px 72px rgba(27,31,42,.10);
  opacity: 0; visibility: hidden; transform: translateY(-9.9px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.eb-nav .brand-dropdown::before { content: ''; position: absolute; top: -17.6px; left: 0; right: 0; height: 17.6px; }
.eb-nav .nav-brand-wrap:hover .brand-dropdown,
.eb-nav .nav-brand-wrap:focus-within .brand-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.eb-nav .brand-dropdown-label {
  display: block; font-family: 'Geist Mono', sans-serif !important;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8a8578; padding: 8.8px 13.2px 6.6px;
}
.eb-nav .brand-service { display: flex; align-items: center; gap: 14.3px; padding: 12.1px 13.2px; border-radius: 11px; text-decoration: none; transition: background .16s ease; }
.eb-nav .brand-service:hover { background: #e8f1fb; }
.eb-nav .brand-service.is-current { background: #efebe1; }
.eb-nav .brand-service-fox { width: 37.4px; height: 39.6px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2.64px 3.96px rgba(8,31,66,.18)); }
.eb-nav .brand-service-text { display: flex; flex-direction: column; gap: 1.1px; }
.eb-nav .brand-service-text b { font-family: 'League', 'Oswald', sans-serif; font-size: 18.7px; font-weight: 700; color: #1b1f2a; line-height: 1.1; }
.eb-nav .brand-service-text small { font-family: 'Geist Mono', sans-serif; font-size: 11px; letter-spacing: 0.04em; color: #8a8578; }

/* FAQ → VIP Price dropdown (desktop nav-center only; the mobile drawer keeps both
   links flat). Mirrors the .brand-dropdown reveal — a white card that fades in on
   hover/focus of the FAQ trigger. Items reuse .nav-link, so they inherit this
   site's hover colours automatically (no per-site colour duplication here). */
.eb-nav .nav-dd-wrap { position: relative; display: inline-flex; align-items: center; }
.eb-nav .nav-dd-wrap > .nav-link .nav-dd-caret { width: 13.2px; height: 13.2px; margin-left: -2.64px; transition: transform .22s ease; }
.eb-nav .nav-dd-wrap:hover > .nav-link .nav-dd-caret,
.eb-nav .nav-dd-wrap:focus-within > .nav-link .nav-dd-caret { transform: rotate(180deg); }
.eb-nav .nav-dd {
  position: absolute; top: calc(100% + 6.6px); left: 0; z-index: 120;
  min-width: 211.2px; padding: 6.6px;
  display: flex; flex-direction: column; gap: 2.64px;
  background: #fff; border: 1px solid #e7e1d6; border-radius: 13.2px;
  box-shadow: 0 2.4px 4.8px rgba(27,31,42,.05), 0 28.8px 72px rgba(27,31,42,.10);
  opacity: 0; visibility: hidden; transform: translateY(-8.8px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.eb-nav .nav-dd::before { content: ''; position: absolute; top: -11px; left: 0; right: 0; height: 11px; }
.eb-nav .nav-dd-wrap:hover .nav-dd,
.eb-nav .nav-dd-wrap:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateY(0); }
/* box-sizing:border-box so the link's 17px side padding stays INSIDE the 100%
   width (= the card's content box). Without it the content-box link is card-width
   PLUS padding, so its hover fill spills past the dropdown's right edge. */
.eb-nav .nav-dd .nav-link { box-sizing: border-box; width: 100%; white-space: nowrap; }

/* ============================================================
   F3 NAV MENU — single source (desktop bar + mobile drawer), styled like the BOOST
   PAGE PRODUCT BUTTONS (.prod-tab in boost-page.css): each link is a card with a
   rounded ICON-BOX + Barlow link label; the CURRENT page is the rose-gradient
   "active" fill (like the selected boost tab) with a white icon-box; the HOT badge
   sits at the top-right corner (like .prod-tab-hot). header.php emits the design's
   OWN .nav-links/.nav-link/.nav-hot in BOTH menus (NOT the WP-menu `.menu > li > a`)
   so nav.css's menu rules + its `.hot-badge` match nothing here — this block is the
   ONLY place the links are styled (no `!important` war). Tokens hardcoded (the
   .ebl-rd set doesn't reach the global chrome): royal #1659ac/#0e478c, royal-soft
   #b9d4f0, royal-tint #e8f1fb, line #e7e1d6, ink #1b1f2a, bg-soft #efebe1, orange
   #ff7a2a/#d65a10, Rajdhani. To restyle the bar, edit HERE — nowhere else.
   ============================================================ */
.eb-nav .nav-links { display: flex; align-items: center; }
.eb-nav .nav-center .nav-links { gap: 7.92px; height: 100%; }
.eb-nav .nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7.92px;
  padding: 11.88px 17.16px;
  border: 1.2px solid transparent;
  border-radius: 9.24px;
  background: transparent;
  font-family: 'Geist', sans-serif;
  font-weight: 600; font-size: 17.16px; letter-spacing: 0;
  color: #1b1f2a; text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background 200ms ease, color 200ms ease;
}
/* nav icons: plain inline outline SVG (the design's icon set), no boxed tile.
   currentColor drives stroke/fill; the legacy <i> fallback keeps font-size sizing. */
.eb-nav .nav-link i, .eb-nav .nav-link svg {
  flex-shrink: 0;
  width: 19.8px; height: 19.8px; font-size: 16.5px;
  color: #1b1f2a; opacity: 0.55;
  transition: color 200ms ease, opacity 200ms ease;
}
.eb-nav .nav-link:hover { background: #e8f1fb; color: #1659ac; }
.eb-nav .nav-link:hover i, .eb-nav .nav-link:hover svg { color: #1659ac; opacity: 1; }
.eb-nav .nav-link.is-current { background: #e8f1fb; color: #1659ac; }
.eb-nav .nav-link.is-current i, .eb-nav .nav-link.is-current svg { color: #1659ac; opacity: 1; }
/* Mobile drawer: the SAME buttons, full-width vertical rows. */
.eb-nav .mobile-drawer .nav-links { flex-direction: column; align-items: stretch; gap: 7.92px; width: 100%; }
.eb-nav .mobile-drawer .nav-link { font-size: 19.8px; padding: 7.92px 13.2px 7.92px 7.92px; }

/* --- Right: icon buttons / login / logout / hamburger → F3 --- */
/* drop nav.css's vertical divider before the action cluster (the design has none) */
.eb-nav .nav-right { border-left: none !important; padding-left: 0 !important; }
.eb-nav .nav-icon-btn {
  width: 47.3px !important; height: 47.3px !important;
  border-radius: 6.6px !important; border: 1px solid #e7e1d6 !important;
  background: #fff !important; color: #4a5563 !important; box-shadow: none !important;
}
.eb-nav .nav-icon-btn:hover { background: #e8f1fb !important; border-color: #b9d4f0 !important; color: #1659ac !important; transform: none !important; box-shadow: none !important; }
.eb-nav .nav-login-btn {
  background: #1659ac !important; border-radius: 3.96px !important; padding: 0 21.12px !important;
  font-family: 'Geist Mono', sans-serif !important; font-weight: 600 !important; font-size: 14.52px !important; letter-spacing: 0.09em !important;
  box-shadow: 0 4.8px 12px -4.8px rgba(22,89,172,.5) !important;
}
.eb-nav .nav-login-btn:hover { background: #1b1f2a !important; box-shadow: 0 6px 16px -4.8px rgba(27,31,42,.5) !important; }
.eb-nav .nav-logout {
  border-radius: 6.6px !important; border: 1px solid #e7e1d6 !important; box-shadow: none !important;
  font-family: 'Geist Mono', sans-serif !important; color: #4a5563 !important;
}
.eb-nav .nav-logout:hover { color: #1659ac !important; border-color: #b9d4f0 !important; background: #e8f1fb !important; transform: none !important; box-shadow: none !important; }
.eb-nav .nav-logout:hover svg { color: #1659ac !important; }
.eb-nav .hamburger {
  border-radius: 6.6px !important; background: #fff !important;
  border: 1px solid #e7e1d6 !important; color: #4a5563 !important; clip-path: none !important;
}
.eb-nav .hamburger:hover { background: #e8f1fb !important; border-color: #b9d4f0 !important; color: #1659ac !important; }

/* --- Mobile drawer: cross-site services row --- */
.mobile-drawer .drawer-services { display: flex; gap: 8.8px; padding: 13.2px 15.4px; border-top: 1px solid #eef1f4; }
.mobile-drawer .drawer-service {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6.6px;
  padding: 11px 6.6px; border: 1px solid #e7e1d6; border-radius: 11px; text-decoration: none;
  color: #4a5563; font-family: 'Geist Mono', sans-serif; font-size: 11.55px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mobile-drawer .drawer-service img { width: 30.8px; height: 30.8px; object-fit: contain; }
.mobile-drawer .drawer-service.is-current { border-color: #b9d4f0; background: #e8f1fb; color: #1659ac; }
.mobile-drawer .drawer-service:hover { border-color: #b9d4f0; color: #1659ac; }

/* --- Responsive. The wide wordmark + the full WP menu + the action cluster only
   coexist cleanly on real desktops. Below 1200px, rather than cram/overflow the
   bar (nav.css shrinks the menu font down to 620px, but a long menu still spills),
   switch to the hamburger + drawer EARLY — the drawer already carries the full
   menu plus the .drawer-services cross-site links, so nothing is lost. First drop
   the tagline ≤1300px to give the menu more room before the switch. --- */
@media (max-width: 1300px) {
  .eb-nav .nav-brand small { display: none !important; }
  .eb-nav .nav-brand { font-size: 24.2px !important; }
}
@media (max-width: 1200px) {
  .eb-nav .nav-center, .eb-nav .nav-right { display: none !important; }
  .eb-nav .hamburger { display: flex !important; }
  .eb-nav .nav-brand-caret { display: none !important; } /* cross-site → drawer-services */
  .mobile-drawer { display: flex !important; }
}
@media (max-width: 620px) {
  .eb-nav .nav-brand { font-size: 22px !important; }
  .eb-nav .nav-brand-mark { width: 37.4px !important; height: 37.4px !important; }
  .eb-nav .nav-brand-mark .brand-mark-fox { width: 35.6px; height: 35.6px; }
}

/* ============================================================
   F3 FOOTER (site-wide) — footer.php now renders <footer class="site-footer">
   with the F3 design: a Secure-payments chip row, the Val·Boosting brand block,
   four FIXED link columns and the legal bottom bar (replacing the parent
   boosting widget-grid footer + .soc-icon row). This is the site-wide port of
   home-page.css's .site-footer block, with the .ebl-rd tokens resolved to literals
   (gold #ffd83f, navy #1b1f2a, rose #1659ac; League / Barlow / Oxanium — all
   enqueued site-wide in functions.php). Loads after main.css (dep 'boosting-nav');
   !important + .site-footer scoping beat main.css's parent `.footer-col` / `footer`
   rules + f3-base's old-footer rules on every page (main.css still loads on the
   non-F3 pages), and survive LiteSpeed's CSS-combine reordering. eloboostleague-only
   — EBL/OWB never load this. */
.site-footer {
  background: #070c12 !important;
  border-top: 3.6px solid #ffd83f !important;
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Geist', system-ui, sans-serif !important;
  padding: 79.2px 31.68px 39.6px !important;
}
/* Secure-payments row */
.site-footer .footer-pay {
  max-width: 1742.4px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 31.68px; flex-wrap: wrap;
  padding: 0 0 29.04px; border-bottom: 1.2px solid rgba(255,255,255,0.1);
}
.site-footer .footer-pay-label {
  font-family: 'Geist Mono', sans-serif; font-size: 12.54px;
  letter-spacing: 0.099em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
/* white, chip-less payment marks on the near-black footer */
.site-footer .pay-chips { display: flex; align-items: center; gap: 26.4px; flex-wrap: wrap; }
.site-footer .pay-chip { display: inline-flex; align-items: center; }
.site-footer .pay-chip img {
  height: 23.76px; width: auto; max-width: 85.8px; object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: 0.9;
}
/* Brand + columns grid */
.site-footer .footer-grid {
  max-width: 1742.4px; margin: 0 auto;
  display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 47.52px; padding: 52.8px 0;
  border-bottom: 1.2px solid rgba(255,255,255,0.1);
}
/* Neutralise the parent main.css / f3-base `.footer-col` (border / padding / width
   / float) so the new grid columns stay clean on every page. */
.site-footer .footer-col {
  display: flex !important; flex-direction: column;
  width: auto !important; float: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}
/* Brand cluster (mirrors the .eb-nav wordmark, recoloured for the dark footer) */
.site-footer .footer-brand .nav-brand {
  display: inline-flex; align-items: center; gap: 11.88px;
  font-family: 'League', 'Oswald', sans-serif; font-weight: 700; font-size: 24.2px;
  letter-spacing: -0.005em; color: #fff !important; text-decoration: none; line-height: 1;
  margin-bottom: 18.48px;
}
.site-footer .nav-brand-mark {
  width: 41.8px; height: 41.8px; border-radius: 6.6px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.site-footer .nav-brand-mark.has-fox {
  background: linear-gradient(135deg, #fbf8f1 0%, #efebe1 100%);
  box-shadow: 0 4.8px 12px -4.8px rgba(0,0,0,0.35); border: 1px solid #e4ded2; padding: 0.9px;
}
.site-footer .nav-brand-mark .brand-mark-fox { width: 40px; height: 40px; object-fit: contain; }
.site-footer .nav-brand .dot { color: #1659ac; margin: 0 1.32px; }
.site-footer .nav-brand small {
  display: block; font-family: 'Geist Mono', sans-serif;
  font-size: 9.9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-top: 3.3px;
}
.site-footer .footer-brand p {
  font-size: 17.16px; line-height: 1.7; color: rgba(255,255,255,0.55);
  max-width: 369.6px; margin: 0 0 23.76px;
}
.site-footer .footer-social { display: flex; gap: 10.56px; }
.site-footer .footer-social a {
  width: 42.24px; height: 42.24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.2px solid rgba(255,255,255,0.15); border-radius: 3.96px;
  color: rgba(255,255,255,0.7); font-size: 17.6px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.site-footer .footer-social a:hover { background: #ffd83f; border-color: #ffd83f; color: #1b1f2a; }
/* Column headings + links */
.site-footer .footer-col h4 {
  font-family: 'Geist Mono', sans-serif !important; font-size: 13.2px !important; font-weight: 600 !important;
  letter-spacing: 0.111em !important; text-transform: uppercase !important; color: #ffd83f !important;
  margin: 0 0 21.12px !important;
}
.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11.88px; }
.site-footer .footer-col li { margin: 0; }
.site-footer .footer-col a { font-size: 17.16px !important; color: rgba(255,255,255,0.65) !important; text-decoration: none; transition: color .18s ease; }
.site-footer .footer-col a:hover { color: #ffffff !important; }
/* Legal bottom bar */
.site-footer .footer-bottom {
  max-width: 1742.4px; margin: 0 auto;
  /* full shorthand (not just padding-top) so main.css's `.footer-bottom{padding:20px 0}`
     can't leak a 20px bottom on non-F3 pages where main.css still loads. */
  padding: 29.04px 0 0 !important;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 21.12px; flex-wrap: wrap;
  font-size: 15.18px; color: rgba(255,255,255,0.4); line-height: 1.7;
  border-top: 0 !important; background: transparent !important;
}
.site-footer .footer-bottom p { margin: 0; color: rgba(255,255,255,0.42) !important; }
.site-footer .footer-disclaimer { max-width: 686.4px; }
@media (max-width: 1200px) { .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 672px)  { .site-footer .footer-grid { grid-template-columns: 1fr; } }

/* The brand-dropdown is a desktop hover menu kept in the DOM at full width; cap it
   so it can never widen the page (it caused a small horizontal overflow on phones
   after the global +10% scale). */
.brand-dropdown { max-width: calc(100vw - 32px); }
/* Drop the brand tagline + desktop service-switcher caret on phones — at +10% the
   wordmark + caret + hamburger no longer fit a ~390px bar (the caret alone is ~69px,
   and mobile switches service via the drawer's .drawer-services instead). */
@media (max-width: 480px) { .nav-brand-name small, .nav-brand-caret { display: none; } }
/* Final safety net: clip any residual few-px horizontal overflow the global +10%
   leaves on the densest phone layouts (a dropdown option edge, a hover menu). The
   F3 side panels are stacked (not sticky) at this width, so this can't trap them. */
@media (max-width: 480px) { html, body { overflow-x: hidden !important; } }

/* round 3 — the nav bar carried ~31.68px side padding; on a phone that squeezed
   the bar and the absolute hamburger drawer (left:0/right:0 of the bar's padding
   box) inherited it, so the drawer + its right edge sat tight. Halve the bar
   padding on phones and hard-bound the drawer to the viewport so its right side
   can never clip. */
@media (max-width: 1200px) {
  .eb-nav .mobile-drawer { left: 0 !important; right: 0 !important; max-width: 100vw !important; box-sizing: border-box !important; }
  .eb-nav .mobile-drawer .nav-link { white-space: normal; }
}
@media (max-width: 480px) {
  .eb-nav { padding-left: 15.84px !important; padding-right: 15.84px !important; }
}