/* ═════════════════════════════════════════════════════════════════
   KL TOP STRIP — bulletproof, render-blocking, first-paint styles
   for the site-wide sticky black bar (marquee · Sign In · cart).

   Why this file exists (June 1, 2026 PM hotfix):
   These same rules used to live ONLY inside kl-cart-widget.js as a
   runtime style-tag injection. That worked on most pages but failed
   when the script was deferred, slow, blocked by an ad-blocker, or
   crashed before injection. The result: pages like /studio rendered
   the raw fallback HTML — blue-underlined Sign In, default white
   cart button, broken marquee — until JS caught up (and sometimes
   never).

   Solution: bake the SAME rules into a static <link>-loaded stylesheet
   so the strip looks correct on first paint, every page, every time.
   The JS still runs (it owns the dynamic bits — sign-in state,
   cart drawer, count badge), but visually we no longer depend on it.

   Load order: this file must be linked in <head> as a render-blocking
   stylesheet, BEFORE any page-specific <style> blocks, so per-page
   tweaks can still override if needed.
   ═════════════════════════════════════════════════════════════════ */

/* ═════════ KILL THE SECONDARY NAV ROW SITE-WIDE ═════════
   Forum + every other page kept showing a white box BELOW the black
   bar containing: Kumite Lifestyle wordmark + "Media Brand &
   Community", Jump to section, Search the site, LISTEN NOW, SHOP.
   These rules nuke that whole row on every page at first paint —
   no JS required. Elements stay in the DOM so legacy JS bindings
   don't error; they're just visually + spatially gone.

   Selector specificity (body header .class = 0,1,2) beats the per-
   page mobile @media re-show rules (0,1,0) that previously kept the
   row visible on phones. !important locks it down. */
body header .nav-logo-textwrap,
body header .quick-jump,
body header nav.quick-jump,
body header #quickJump,
body header .quick-search,
body header .nav-cta-row,
body .nav-logo-sub,
body .nav-logo-textwrap,
body .quick-jump,
body nav.quick-jump,
body #quickJump,
body .quick-search,
body .nav-cta-row {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* MOBILE-ONLY (≤900px): also hide the round logo image so the whole
   white secondary-nav row collapses entirely on phones. Desktop keeps
   the logo as the brand mark in the header. */
@media (max-width: 900px) {
  body header .nav-logo,
  body .nav-logo {
    display: none !important;
  }
}

/* ─── STICKY BLACK BAR ─── */
.nav-top-strip.kl-top-strip-active {
  display: block !important;
  background: #0a0a0a !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.nav-top-strip.kl-top-strip-active .nav-top-strip-inner {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 5px 1.25rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
}
@media (max-width: 600px) {
  .nav-top-strip.kl-top-strip-active .nav-top-strip-inner {
    padding: 4px 0.75rem !important;
    gap: 0.55rem !important;
  }
}

/* ─── MARQUEE (desktop: centered, no dup spans; mobile: scrolls) ─── */
.nav-top-strip.kl-top-strip-active .kl-strip-marquee {
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.nav-top-strip.kl-top-strip-active .kl-strip-marquee-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  animation: klStripMarqueeScroll 28s linear infinite;
  will-change: transform;
}
.nav-top-strip.kl-top-strip-active .kl-strip-marquee span {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
.nav-top-strip.kl-top-strip-active .kl-strip-marquee span::before {
  content: "◈  ";
  color: #cc0000;
}
@keyframes klStripMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* DESKTOP: absolute-center the marquee on the bar — single span, no animation. */
@media (min-width: 901px) {
  .nav-top-strip.kl-top-strip-active .kl-strip-marquee {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex: none !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    pointer-events: none !important;
    z-index: 1;
  }
  .nav-top-strip.kl-top-strip-active .kl-strip-marquee-track {
    display: inline-flex;
    animation: none !important;
    transform: none !important;
    gap: 0 !important;
    white-space: nowrap;
  }
  /* Desktop only shows the FIRST span — extra spans (used for the
     infinite mobile loop) get hidden so the marquee isn't doubled. */
  .nav-top-strip.kl-top-strip-active .kl-strip-marquee span ~ span {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-top-strip.kl-top-strip-active .kl-strip-marquee-track {
    animation: none !important;
  }
}

/* ─── HOME LINK SUPPRESSION ON HOME PAGE ───
   Per Nicholas (June 1, 2026 PM): on the home page itself the strip's
   Home link overlaps the Kumite Lifestyle logo on mobile. Hide it
   specifically on index.html (body#home) so visitors who are ALREADY
   home don't see a redundant link, and the logo gets its space back.
   Every other page in the site still shows the Home link. */
body#home .kl-cwg-home,
body#home a.kl-cwg-home {
  display: none !important;
}

/* ─── HOME LINK (house icon + label, WHITE on black, far LEFT) ───
   Added June 1, 2026 PM per Nicholas — every page now has an explicit
   Home button in the sticky top bar so visitors can always get back to
   the brand index without hunting for the logo. Sits at the leftmost
   slot of the strip, mirroring the Sign In styling on the right. */
.nav-top-strip.kl-top-strip-active .kl-cwg-home,
a.kl-cwg-home {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 5px 4px !important;
  transition: color 0.15s ease;
  position: relative;
  z-index: 2;
  /* Push everything else (marquee, Sign In, cart) to the right. */
  margin-right: auto !important;
}
.nav-top-strip.kl-top-strip-active .kl-cwg-home:hover,
a.kl-cwg-home:hover { color: #fff !important; }
.nav-top-strip.kl-top-strip-active .kl-cwg-home svg,
a.kl-cwg-home svg { flex-shrink: 0; }
@media (max-width: 380px) {
  .nav-top-strip.kl-top-strip-active .kl-cwg-home,
  a.kl-cwg-home {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    gap: 4px !important;
  }
  .nav-top-strip.kl-top-strip-active .kl-cwg-home svg,
  a.kl-cwg-home svg { width: 11px; height: 11px; }
}

/* ─── SIGN IN LINK (Person icon + label, WHITE on black) ─── */
.nav-top-strip.kl-top-strip-active .kl-cwg-auth,
a.kl-cwg-auth {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 5px 4px !important;
  transition: color 0.15s ease;
  position: relative;
  z-index: 2;
}
.nav-top-strip.kl-top-strip-active .kl-cwg-auth:hover,
a.kl-cwg-auth:hover { color: #fff !important; }
.nav-top-strip.kl-top-strip-active .kl-cwg-auth svg,
a.kl-cwg-auth svg { flex-shrink: 0; }
@media (max-width: 380px) {
  .nav-top-strip.kl-top-strip-active .kl-cwg-auth,
  a.kl-cwg-auth {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    gap: 4px !important;
  }
  .nav-top-strip.kl-top-strip-active .kl-cwg-auth svg,
  a.kl-cwg-auth svg { width: 11px; height: 11px; }
}

/* ─── CART BUTTON (icon-only, white-on-black, no white background) ─── */
.nav-top-strip.kl-top-strip-active .kl-cwg-btn,
button.kl-cwg-btn {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  padding: 4px 6px !important;
  color: rgba(255,255,255,0.92) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease;
  z-index: 2;
}
.nav-top-strip.kl-top-strip-active .kl-cwg-btn:hover,
button.kl-cwg-btn:hover { color: #fff !important; }

/* ─── CART COUNT BADGE (red pill, top-right of cart icon) ─── */
.nav-top-strip.kl-top-strip-active .kl-cwg-count,
.kl-cwg-count {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  background: #cc0000 !important;
  color: #fff !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Starts hidden until kl-cart-widget.js confirms there are items. */
  transform: scale(0);
  transition: transform 0.18s ease-out;
}
.nav-top-strip.kl-top-strip-active .kl-cwg-btn.has-items .kl-cwg-count,
.kl-cwg-btn.has-items .kl-cwg-count { transform: scale(1) !important; }
