/* ==================================================
   VALBOOSTING — F3 chrome recolor (site-wide)
   The live .eb-nav header (parent boosting/nav.css) and the cookie-consent
   banner ship a blue/navy+yellow palette that clashes with the rose F3 body.
   This recolors them to F3 rose WITHOUT touching structure / markup / JS, so
   the "current nav" stays exactly as-is — only the colors change. Enqueued
   site-wide and depends on 'boosting-nav' so it loads AFTER nav.css (needed for
   the !important mirrors to win). valboosting-only — EBL/OWB never load it.
   ================================================== */

/* --- 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: #ec5d72;
  --neon3: #ec5d72;
  --accent-dk: #c83a55;
  --accent-lt: rgba(236, 93, 114, 0.06);
  --accent-glow: rgba(236, 93, 114, 0.16);
}

/* The handful of EBL-blue values nav.css hardcodes with !important (submenu
   "regular" FontAwesome icons). The login dropdown's other #0364a9 hardcodes
   are already overridden by login-drop.css, so only the menu icons remain. */
.eb-nav .nav-center .menu i.far,
.eb-nav .mobile-drawer .menu i.far { color: #ec5d72 !important; }

/* --- 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(236, 93, 114, 0.35) !important;
  border-top-color: #ec5d72 !important;
}
#bt-cb .bt-cb-icon {
  background: rgba(236, 93, 114, 0.12) !important;
  border-color: rgba(236, 93, 114, 0.30) !important;
}
#bt-cb .bt-cb-icon svg { stroke: #ec5d72 !important; }
#bt-cb .bt-cb-icon svg circle { fill: #ec5d72 !important; }
#bt-cb .bt-cb-desc a { color: #ffbf8f !important; }
#bt-cb-accept {
  background: #ec5d72 !important;
  color: #ffffff !important;
  border-bottom-color: #c83a55 !important;
}
#bt-cb-accept:hover { background: #e0455f !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 .vb-rd-scoped and does NOT reach the global header, so the rose / ink /
   line values + fonts (Rajdhani / Geist / Geist Mono — 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.
   ============================================================ */

/* 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: 18px !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: flex-start !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: 10.8px;
  font-family: 'Rajdhani', 'Montserrat', sans-serif !important;
  font-weight: 700; font-size: 24px; letter-spacing: -0.005em;
  color: #3e1820; text-decoration: none; line-height: 1;
}
.eb-nav .nav-brand-mark {
  width: 38px; height: 38px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.eb-nav .nav-brand-mark.has-fox {
  background: linear-gradient(135deg, #ec5d72 0%, #c83a55 100%);
  box-shadow: 0 4.8px 12px -4.8px rgba(236, 93, 114, 0.45);
  padding: 3px;
}
.eb-nav .nav-brand-mark .brand-mark-fox { width: 30px; height: 30px; object-fit: contain; }
.eb-nav .nav-brand .dot { color: #ec5d72; margin: 0 1.2px; }
.eb-nav .nav-brand small {
  display: block;
  font-family: 'Geist Mono', monospace !important;
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a929c; margin-top: 3px;
}

/* --- Caret + service-switcher dropdown --- */
.eb-nav .nav-brand-caret {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 9.6px; padding: 6px 9.6px;
  background: #f7f8fa; border: 1px solid #e4e7ec; border-radius: 8px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.eb-nav .nav-brand-caret .caret-grid { width: 16px; height: 16px; color: #ec5d72; }
.eb-nav .nav-brand-caret .caret-chev { width: 13px; height: 13px; color: #8a929c; transition: transform .24s cubic-bezier(.16,1,.3,1); }
.eb-nav .nav-brand-wrap:hover .nav-brand-caret { background: #fff; border-color: #f5bcc6; box-shadow: 0 3.6px 12px -4.8px rgba(236,93,114,.3); }
.eb-nav .nav-brand-wrap:hover .nav-brand-caret .caret-chev { transform: rotate(180deg); color: #ec5d72; }
.eb-nav .brand-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 120;
  width: 320px; padding: 9px;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 16px;
  box-shadow: 0 2.4px 4.8px rgba(62,24,32,.05), 0 28.8px 72px rgba(62,24,32,.10);
  opacity: 0; visibility: hidden; transform: translateY(-9px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.eb-nav .brand-dropdown::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.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', monospace !important;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8a929c; padding: 8px 12px 6px;
}
.eb-nav .brand-service { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px; text-decoration: none; transition: background .16s ease; }
.eb-nav .brand-service:hover { background: #fde6ea; }
.eb-nav .brand-service.is-current { background: #f7f8fa; }
.eb-nav .brand-service-fox { width: 34px; height: 36px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2.4px 3.6px rgba(8,31,66,.18)); }
.eb-nav .brand-service-text { display: flex; flex-direction: column; gap: 1px; }
.eb-nav .brand-service-text b { font-family: 'Rajdhani', 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: #3e1820; line-height: 1.1; }
.eb-nav .brand-service-text small { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: #8a929c; }

/* --- Center: WP menu links → F3 pill links (sentence case, rose accent) --- */
.eb-nav .nav-center .menu > li > a {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #4a5563 !important;
  border-radius: 9px !important;
  padding: 0 14px !important;
  gap: 7px !important;
}
.eb-nav .nav-center .menu > li > a:hover { background: #fde6ea !important; color: #ec5d72 !important; }
.eb-nav .nav-center .menu > li > a::after { background: #ec5d72 !important; left: 14px !important; right: 14px !important; box-shadow: none !important; height: 2.4px !important; }
.eb-nav .nav-center .menu > li.current-menu-item > a,
.eb-nav .nav-center .menu > li.current_page_item > a { color: #ec5d72 !important; background: #fde6ea !important; }
.eb-nav .nav-center .menu > li > a i.fas,
.eb-nav .nav-center .menu > li > a i.far { color: #ec5d72 !important; opacity: 0.6 !important; }
.eb-nav .nav-center .menu > li > a:hover i.fas,
.eb-nav .nav-center .menu > li > a:hover i.far { color: #ec5d72 !important; opacity: 1 !important; }

/* --- Right: icon buttons / login / logout / hamburger → F3 --- */
.eb-nav .nav-icon-btn {
  width: 43px !important; height: 43px !important;
  border-radius: 6px !important; border: 1px solid #e4e7ec !important;
  background: #fff !important; color: #4a5563 !important; box-shadow: none !important;
}
.eb-nav .nav-icon-btn:hover { background: #fde6ea !important; border-color: #f5bcc6 !important; color: #ec5d72 !important; transform: none !important; box-shadow: none !important; }
.eb-nav .nav-login-btn {
  background: #ec5d72 !important; border-radius: 6px !important;
  font-family: 'Geist Mono', monospace !important; font-weight: 600 !important; letter-spacing: 0.12em !important;
  box-shadow: 0 4.8px 12px -4.8px rgba(236,93,114,.5) !important;
}
.eb-nav .nav-login-btn:hover { background: #3e1820 !important; box-shadow: 0 6px 16px -4.8px rgba(62,24,32,.5) !important; }
.eb-nav .nav-logout {
  border-radius: 6px !important; border: 1px solid #e4e7ec !important; box-shadow: none !important;
  font-family: 'Geist Mono', monospace !important; color: #4a5563 !important;
}
.eb-nav .nav-logout:hover { color: #ec5d72 !important; border-color: #f5bcc6 !important; background: #fde6ea !important; transform: none !important; box-shadow: none !important; }
.eb-nav .nav-logout:hover svg { color: #ec5d72 !important; }
.eb-nav .hamburger {
  border-radius: 6px !important; background: #fff !important;
  border: 1px solid #e4e7ec !important; color: #4a5563 !important; clip-path: none !important;
}
.eb-nav .hamburger:hover { background: #fde6ea !important; border-color: #f5bcc6 !important; color: #ec5d72 !important; }

/* --- Mobile drawer: cross-site services row --- */
.mobile-drawer .drawer-services { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #eef1f4; }
.mobile-drawer .drawer-service {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border: 1px solid #e4e7ec; border-radius: 10px; text-decoration: none;
  color: #4a5563; font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mobile-drawer .drawer-service img { width: 28px; height: 28px; object-fit: contain; }
.mobile-drawer .drawer-service.is-current { border-color: #f5bcc6; background: #fde6ea; color: #ec5d72; }
.mobile-drawer .drawer-service:hover { border-color: #f5bcc6; color: #ec5d72; }

/* --- 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: 22px !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: 20px !important; }
  .eb-nav .nav-brand-mark { width: 34px !important; height: 34px !important; }
}