/* ==========================================================================
   20-header: interaction layer for header.php (topbar, brandbar, pinned nav,
   mega menus, mobile drawer). Builds on 10-header.css. Transform/opacity only.
   ========================================================================== */

/* ---------- topbar: facts rotate on narrow screens (JS adds .tb-rot) ---------- */
.tb-facts.tb-rot { position: relative; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-facts.tb-rot .tb-fact { display: inline-block; }
/* Inactive facts stay readable to screen readers, hidden on screen. */
.tb-facts.tb-rot .tb-fact:not(.is-on) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb-facts.tb-rot .tb-fact.is-on { display: inline-block; overflow: hidden; text-overflow: ellipsis; min-width: 0; animation: efTbIn .42s var(--ease, ease) both; }
.tb-facts.tb-rot .tb-fact::before { display: none; }
@keyframes efTbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Small phones: nothing in the line drops below 12.8px. 30-header sets .topbar
   to .72rem under 400px; :root outranks it. The tag turns sentence case so it
   costs less width, and under 360px the longest fact wraps to two short lines
   inside a fixed-height bar instead of being cut off. */
@media (max-width: 400px) {
  :root .topbar { font-size: .8rem; }
  .topbar .tb-tag { margin-right: 8px; padding: 3px 6px; font: 600 .8rem/1.1 var(--f-body); letter-spacing: 0; text-transform: none; }
}
@media (max-width: 359px) {
  .topbar .topbar-inner { min-height: 38px; }
  .tb-facts.tb-rot .tb-fact.is-on { white-space: normal; line-height: 1.2; text-align: left; }
}

/* ---------- brandbar: 44px hit areas without bigger visuals ---------- */
.brand-social .social a, .brand-line { position: relative; }
.brand-social .social a { transition: border-color .2s, color .2s, background-color .2s, transform .15s var(--ease, ease); }
@media (hover: hover) {
  .brand-social .social a:hover { transform: translateY(-2px); }
}
@media (pointer: coarse) {
  .brand-social .social { gap: 8px; }
  .brand-social .social a::after, .brand-line::after { content: ""; position: absolute; inset: -7px; }
  .brand-social .social a:active, .brand-line:active { transform: scale(.92); background: var(--accent-soft); }
}

/* ---------- tactile press + ripple ----------
   Button and menu-toggle press scales live in 20-system.css (site-wide); this
   file adds only the ripple and the mega tile sink. */
.ef-rip-host { position: relative; overflow: hidden; isolation: isolate; }
.ef-ripple {
  position: absolute; left: 0; top: 0; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: currentColor; opacity: .18; pointer-events: none;
  transform: translate(var(--rx, 0), var(--ry, 0)) scale(0);
  animation: efRipple .55s cubic-bezier(.2, .7, .2, 1) forwards;
}
.btn-primary .ef-ripple { background: #fff; opacity: .32; }
@keyframes efRipple { to { transform: translate(var(--rx, 0), var(--ry, 0)) scale(var(--rs, 30)); opacity: 0; } }
.mega-sport, .mega-link { transition: background-color .15s, transform .15s var(--ease, ease); }
.mega-sport:active, .mega-link:active { transform: scale(.98); }
@media (hover: hover) {
  .mega-sport img { transition: transform .25s var(--ease, ease); }
  .mega-sport:hover img { transform: scale(1.06); }
  .mega-link b { transition: transform .2s var(--ease, ease); display: inline-block; }
  .mega-link:hover b { transform: translateX(3px); }
}

/* ---------- desktop: sliding ink under nav labels, hover intent ---------- */
@media (min-width: 961px) {
  .ef-hdr-js .nav { position: relative; }
  .nav-ink {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--accent);
    transform-origin: 0 50%; transform: translateX(var(--ink-x, 0)) scaleX(var(--ink-w, 0));
    opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.3, .7, .2, 1), opacity .2s;
  }
  .nav.ink-on .nav-ink { opacity: 1; }
  .ef-hdr-js .has-mega.is-hover:not(.is-closed) .mega { opacity: 1; visibility: visible; transform: none; }
  .ef-hdr-js .has-mega.is-hover:not(.is-closed) > a .nav-caret { transform: translateY(2px) rotate(225deg); opacity: 1; }
}
@media (min-width: 961px) and (hover: none) { .nav-ink { display: none; } }

/* ---------- scroll progress on the pinned bar ---------- */
.ef-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; pointer-events: none; transition: opacity .25s;
}
.site-head.is-scrolled .ef-progress { opacity: .9; }

/* ---------- menu toggle: bars morph to a close mark ---------- */
.nav-toggle { color: var(--ink); }
.nt-bars { position: relative; display: block; width: 20px; height: 14px; }
.nt-bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .25s var(--ease, ease), opacity .2s;
}
.nt-bars i:nth-child(1) { top: 0; }
.nt-bars i:nth-child(2) { top: 6px; transform-origin: 100% 50%; transform: scaleX(.7); }
.nt-bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] { border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- mobile drawer ---------- */
.ef-scrim {
  position: fixed; inset: 0; z-index: 49; background: rgba(14, 27, 44, .46);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; -webkit-tap-highlight-color: transparent;
}
html.ef-nav-lock .ef-scrim { opacity: 1; visibility: visible; }
html.ef-nav-lock, html.ef-nav-lock body { overflow: hidden; }

@media (max-width: 960px) {
  .nav { max-height: var(--ef-nav-max, calc(100dvh - 56px)); touch-action: pan-y; counter-reset: efnav; -webkit-overflow-scrolling: touch; }
  .nav.is-dragging { transition: none; }
  .nav > a:not(.nav-terms), .nav-item > a { counter-increment: efnav; -webkit-tap-highlight-color: transparent; }
  .nav > a::before, .nav-item > a::before {
    content: counter(efnav, decimal-leading-zero); flex: none; width: 26px;
    font: 600 .66rem/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3);
  }
  .nav > a.is-current::before, .nav-item > a.is-current::before { color: var(--accent-ink); }
  .nav > a:active, .nav-item > a:active { background: var(--surface-2); }
  .ef-hdr-js .nav-sub-toggle { -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
  .ef-hdr-js .nav-sub-toggle:active { background: var(--surface-2); }
  .ef-hdr-js .nav-item.is-sub-open .mega { animation: efSubIn .28s var(--ease, ease) both; }

  /* drag handle hint: swipe sideways to close */
  .nav-grip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; border-bottom: 1px solid var(--rule); }
  .nav-grip span { font: 600 .62rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

  /* staggered entrance */
  .nav.is-open > * { animation: efDrawerIn .32s var(--ease, ease) both; }
  .nav.is-open > *:nth-child(2) { animation-delay: .03s; }
  .nav.is-open > *:nth-child(3) { animation-delay: .06s; }
  .nav.is-open > *:nth-child(4) { animation-delay: .09s; }
  .nav.is-open > *:nth-child(5) { animation-delay: .12s; }
  .nav.is-open > *:nth-child(6) { animation-delay: .15s; }
  .nav.is-open > *:nth-child(n+7) { animation-delay: .18s; }
}
@media (min-width: 961px) { .nav-grip { display: none; } }
@media (max-width: 960px) { .nav-ink { display: none; } }
@keyframes efDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes efSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- pinned bar on phones/tablets: spec stamp fills the empty left side ---------- */
.head-moq { display: none; }
@media (max-width: 960px) {
  .head-moq {
    display: grid; flex: none; gap: 2px; margin: 0; padding: 0 0 0 8px; border-left: 2px solid var(--accent);
    font: 600 .66rem/1.15 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
    transition: opacity .25s;
  }
  .head-moq b { color: var(--ink); font-weight: 700; }
  /* The hidden sticky mark has a -28px margin; cancel only the 12px gap so the stamp keeps the 16px gutter. */
  .site-head:not(.is-scrolled) .mark-sticky { margin-right: -12px; }
}
@media (max-width: 400px) {
  .site-head.is-scrolled .head-moq { display: none; }
}
/* Phones: the Reorder button takes this space; the MOQ fact stays in the topbar rotation. */
@media (max-width: 480px) {
  .head-moq, .site-head:not(.is-scrolled) .head-moq { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-facts.tb-rot .tb-fact.is-on, .nav.is-open > *, .ef-hdr-js .nav-item.is-sub-open .mega { animation: none; }
  .ef-ripple { display: none; }
  .nav-ink, .ef-progress, .nt-bars i, .ef-scrim, .mega-sport img, .mega-link b, .brand-social .social a { transition: none; }
  .mega-sport:hover img, .mega-link:hover b, .brand-social .social a:hover { transform: none; }
}