/* 00 header — the one public menu (2026-09-25 redesign, levels swapped 2026-09-27).
   Bar: Clubs · Players · Tournaments · Find Near You v · More v. "More" is one single-level panel whose
   groups (For Players / Club Starter, Tools, Resources) are headings in a two-column card, never nested menus.
   Dark glass bar, single-level dropdowns (hover + click), purple active pill, lime Register.
   Mobile (<=1024px): full-height drawer with pinned Register/Log in and single-level accordions.
   Every rule is scoped to .hdr-* classes; no underline pseudo-elements, no body-class theming.
   Same file in: p2e-pages/shared/css/header.css, p2e-arena/dist/assets/css/00-header.css and, in the app repo,
   public/watch-studio-app/assets/shared/css/header.css + public/arena/assets/css/00-header.css. */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 120; font-family: var(--f-ui, 'Barlow', Arial, sans-serif); }
.hdr *, .hdr *::before, .hdr *::after { box-sizing: border-box; }
.hdr ul { list-style: none; margin: 0; padding: 0; }
.hdr-skip { position: absolute; left: 16px; top: -60px; z-index: 5; background: #d0fa00; color: #0a1001; font: 800 13px/1 'Barlow', Arial, sans-serif; padding: 12px 16px; border-radius: 6px; text-decoration: none; }
.hdr-skip:focus { top: 12px; }

.hdr-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; height: 76px; padding: 0 clamp(16px, 2.6vw, 40px);
  background: linear-gradient(180deg, rgba(6,9,20,.78), rgba(6,9,20,.62));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,.08); transition: height .35s cubic-bezier(.16,1,.3,1), background .35s; }
.hdr.is-scrolled .hdr-bar { height: 64px; background: rgba(6,9,20,.9); }

.hdr-logo { flex: 0 0 auto; display: block; width: 58px; height: 58px; transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1); }
.hdr-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hdr.is-scrolled .hdr-logo { width: 48px; height: 48px; }

/* ---------- desktop bar ---------- */
.hdr-nav { margin: 0 auto; }
.hdr-list { display: flex; align-items: center; gap: 4px; }
.hdr-item { position: relative; }
.hdr-link { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 600 15px/1 'Manrope', 'Barlow', Arial, sans-serif; color: #eef0fa; text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  transition: background .2s, color .2s; }
.hdr-link:hover, .hdr-item.is-open > .hdr-link { background: rgba(255,255,255,.07); color: #fff; }
.hdr-link.is-active { background: rgba(88,32,170,.55); box-shadow: inset 0 0 0 1px rgba(153,44,255,.45); color: #fff; }
.hdr-caret { width: 10px; height: 6px; flex: 0 0 auto; opacity: .75; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.hdr-item.is-open > .hdr-link .hdr-caret, .hdr-acc-btn[aria-expanded="true"] .hdr-caret { transform: rotate(180deg); }

/* dropdown panel: always dark, independent of the page theme */
.hdr-panel { position: absolute; top: 100%; left: 0; min-width: 260px; padding-top: 10px; z-index: 3; }
.hdr-panel-end { left: auto; right: 0; }
.hdr-panel[hidden] { display: none; }
.hdr-panel-card { padding: 8px; border-radius: 12px; background: #0d1122; border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.65); animation: hdr-drop .22s cubic-bezier(.16,1,.3,1); }
@keyframes hdr-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hdr-group { break-inside: avoid; -webkit-column-break-inside: avoid; }
.hdr-group + .hdr-group { margin-top: 6px; }
/* group headings inside the "More" panel: labels only, never links (one dropdown level) */
.hdr-heading { margin: 0; padding: 10px 12px 4px; font: 700 11.5px/1.2 'Barlow', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9aa0b8; }
/* a grouped panel lays its groups out in two columns; a group never splits across them */
.hdr-panel-groups { min-width: 540px; }
.hdr-panel-groups .hdr-panel-card { -webkit-columns: 2; columns: 2; -webkit-column-gap: 8px; column-gap: 8px; }
.hdr-panel-groups .hdr-group + .hdr-group { margin-top: 0; padding-top: 6px; }
.hdr-panel a { display: block; padding: 10px 12px; border-radius: 8px; color: #f2f3fa; text-decoration: none; font: 600 14.5px/1.25 'Manrope', 'Barlow', Arial, sans-serif; transition: background .15s, color .15s; }
.hdr-panel a small { display: block; margin-top: 3px; font: 500 12.5px/1.3 'Manrope', 'Barlow', Arial, sans-serif; color: #9aa0b8; }
.hdr-panel a:hover, .hdr-panel a:focus-visible { background: rgba(153,44,255,.18); color: #fff; }
.hdr-panel a.is-active { background: rgba(88,32,170,.45); color: #fff; }
.hdr-sep { height: 1px; margin: 6px 10px; background: rgba(255,255,255,.08); }

/* ---------- actions ---------- */
.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr-nav + .hdr-actions { margin-left: 0; }
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 6px; text-decoration: none; white-space: nowrap;
  font: 700 14px/1 'Barlow', Arial, sans-serif; letter-spacing: .04em; transition: background .2s, border-color .2s, color .2s; }
.hdr-btn[hidden] { display: none; }
.hdr-btn-lime { background: #d0fa00; color: #0a1001; border: 1.5px solid #d0fa00; }
.hdr-btn-lime:hover { background: #dcff3a; border-color: #dcff3a; }
.hdr-btn-line { border: 1.5px solid rgba(255,255,255,.45); color: #fff; background: transparent; }
.hdr-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.hdr-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); cursor: pointer; place-content: center; gap: 5px; padding: 0; }
.hdr-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; }

/* ---------- mobile drawer ---------- */
.hdr-overlay { position: fixed; inset: 0; z-index: 4; background: rgba(2,4,10,.6); opacity: 0; transition: opacity .3s; }
.hdr-overlay[hidden] { display: none; }
.hdr.is-drawer .hdr-overlay { opacity: 1; }
.hdr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 5; width: min(420px, calc(100% - 44px)); height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  background: #0b0f1d; border-left: 1px solid rgba(255,255,255,.08); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hdr-drawer[hidden] { display: none; }
.hdr.is-drawer .hdr-drawer { transform: none; }
.hdr-drawer-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #0b0f1d; border-bottom: 1px solid rgba(255,255,255,.08); }
.hdr-drawer-top .hdr-btn { flex: 1 1 0; min-height: 46px; }
.hdr-close { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hdr-close svg { width: 16px; height: 16px; }
.hdr-drawer-nav { padding: 8px 8px 32px; }
.hdr-drawer-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.06); }
.hdr-d-link { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 12px; border: 0; background: none; cursor: pointer; text-align: left;
  color: #f2f3fa; text-decoration: none; font: 700 18px/1.2 'Manrope', 'Barlow', Arial, sans-serif; border-radius: 8px; }
.hdr-d-link .hdr-caret { width: 12px; height: 7px; }
.hdr-d-link.is-active { color: #fff; background: rgba(88,32,170,.45); }
.hdr-acc-list { padding: 0 0 10px 12px; }
.hdr-acc-list[hidden] { display: none; }
.hdr-acc-list a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 8px; color: #cdd1df; text-decoration: none; font: 600 16px/1.2 'Manrope', 'Barlow', Arial, sans-serif; }
.hdr-acc-list a:hover, .hdr-acc-list a.is-active { color: #fff; background: rgba(153,44,255,.18); }
html.hdr-lock, html.hdr-lock body { overflow: hidden; }

/* visible focus everywhere in the header */
.hdr a:focus-visible, .hdr button:focus-visible { outline: 2px solid #d0fa00; outline-offset: 2px; }

@media (max-width: 1180px) and (min-width: 1025px) {
  .hdr-bar { gap: 12px; }
  .hdr-link { padding: 0 11px; font-size: 14.5px; }
  .hdr-btn { padding: 0 16px; }
  .hdr-panel-groups { min-width: 500px; }
}
@media (max-width: 1024px) {
  .hdr-nav { display: none; }
  .hdr-actions, .hdr-nav + .hdr-actions { margin-left: auto; }
  .hdr-burger { display: grid; }
  .hdr-actions > .hdr-btn-line { display: none; }
}
@media (max-width: 767px) {
  .hdr-bar { height: 64px; gap: 10px; padding: 0 16px; }
  .hdr-logo, .hdr.is-scrolled .hdr-logo { width: 46px; height: 46px; }
  .hdr.is-scrolled .hdr-bar { height: 60px; }
  .hdr-actions .hdr-btn { padding: 0 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-bar, .hdr-logo, .hdr-drawer, .hdr-overlay, .hdr-caret { transition: none !important; }
  .hdr-panel-card { animation: none; }
}
/* enter with the hero once the intro bursts (html.arena-go is set by the inline intro gate) */
.hdr-bar { transition: height .35s cubic-bezier(.16,1,.3,1), background .35s, opacity .9s cubic-bezier(.16,1,.3,1) .35s, transform .9s cubic-bezier(.16,1,.3,1) .35s; }
.arena-anim:not(.arena-go) .hdr-bar { opacity: 0; transform: translateY(-24px); }