/* ═══════════════════════════════════════════════════════════════════════
   Public Kit — utility classes for public-site surfaces.

   Source of truth: docs/BRAND-KIT-PUBLIC.md § 6.2 (Button + badge class
   families) and § 1.4 (game-state tokens).

   Scope: consumed only by public Razor (Components/Pages/*.razor outside
   admin/ and scoring/, Components/Layout/MainLayout/NavMenu/Footer/
   LeagueBrand, Components/Shared/AlertsBanner, and public widgets).

   These classes replace Bootstrap semantic classes (.btn-primary,
   .bg-danger, .alert-warning, etc.) on public markup so:
   1. Every color routes through --league-* / --pub-* tokens, so
      LeagueConfig overrides apply on non-PBHL deploys.
   2. The T2 grep in scripts/design-lint.sh --scope=public can
      find Bootstrap drift at the call site.

   DO NOT consume on admin / scoring / superadmin surfaces.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────── Buttons ─────────────── */

.btn-lh-pub-primary,
.btn-lh-pub-outline-primary,
.btn-lh-pub-secondary,
.btn-lh-pub-outline-secondary,
.btn-lh-pub-outline-danger,
.btn-lh-pub-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--pub-text-meta);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Amber primary — main CTA on public */
.btn-lh-pub-primary {
  background: var(--league-secondary);
  color: var(--pub-text-on-amber);
  border-color: var(--league-secondary);
}
.btn-lh-pub-primary:hover,
.btn-lh-pub-primary:focus-visible {
  background: var(--league-secondary-dark);
  border-color: var(--league-secondary-dark);
  color: var(--pub-text-on-amber);
}
/* Amber outline */
.btn-lh-pub-outline-primary {
  background: transparent;
  color: var(--league-secondary);
  border-color: var(--league-secondary);
}
.btn-lh-pub-outline-primary:hover,
.btn-lh-pub-outline-primary:focus-visible {
  background: var(--league-secondary);
  color: var(--pub-text-on-amber);
}

/* Neutral/surface — secondary action like "Clear filters" */
.btn-lh-pub-secondary {
  background: var(--pub-surface);
  color: var(--pub-text);
  border-color: var(--pub-border);
}
.btn-lh-pub-secondary:hover,
.btn-lh-pub-secondary:focus-visible {
  background: var(--pub-surface-alt);
  border-color: var(--league-secondary);
}

/* Neutral outline */
.btn-lh-pub-outline-secondary {
  background: transparent;
  color: var(--pub-text);
  border-color: var(--pub-border);
}
.btn-lh-pub-outline-secondary:hover,
.btn-lh-pub-outline-secondary:focus-visible {
  background: var(--pub-surface-alt);
  border-color: var(--league-secondary);
  color: var(--pub-text);
}

/* Red outline — Retry / Delete / destructive secondary */
.btn-lh-pub-outline-danger {
  background: transparent;
  color: var(--pub-live);
  border-color: var(--pub-live);
}
.btn-lh-pub-outline-danger:hover,
.btn-lh-pub-outline-danger:focus-visible {
  background: var(--pub-live);
  color: var(--pub-text-on-navy);
}

/* Navy CTA — hero/large-action button that sits on white */
.btn-lh-pub-navy {
  background: var(--league-primary);
  color: var(--pub-text-on-navy);
  border-color: var(--league-primary);
}
.btn-lh-pub-navy:hover,
.btn-lh-pub-navy:focus-visible {
  background: var(--league-primary-light);
  border-color: var(--league-primary-light);
  color: var(--pub-text-on-navy);
}

/* Unified disabled state for all button variants. pointer-events:none
   is intentional so anchor-as-button (<a class="btn-lh-pub-*">) can't be
   activated when marked .disabled. */
.btn-lh-pub-primary:disabled,          .btn-lh-pub-primary.disabled,
.btn-lh-pub-outline-primary:disabled,  .btn-lh-pub-outline-primary.disabled,
.btn-lh-pub-secondary:disabled,        .btn-lh-pub-secondary.disabled,
.btn-lh-pub-outline-secondary:disabled,.btn-lh-pub-outline-secondary.disabled,
.btn-lh-pub-outline-danger:disabled,   .btn-lh-pub-outline-danger.disabled,
.btn-lh-pub-navy:disabled,             .btn-lh-pub-navy.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small modifier — aligns with Bootstrap's .btn-sm sizing so migrations
   from .btn-sm.btn-outline-primary stay visually consistent. */
.btn-lh-pub-primary.btn-lh-pub-sm,
.btn-lh-pub-outline-primary.btn-lh-pub-sm,
.btn-lh-pub-secondary.btn-lh-pub-sm,
.btn-lh-pub-outline-secondary.btn-lh-pub-sm,
.btn-lh-pub-outline-danger.btn-lh-pub-sm,
.btn-lh-pub-navy.btn-lh-pub-sm {
  padding: 4px 10px;
  font-size: var(--pub-text-micro);
}


/* ─────────────── Badges ─────────────── */

.badge-lh-pub-live,
.badge-lh-pub-final,
.badge-lh-pub-scheduled,
.badge-lh-pub-postponed,
.badge-lh-pub-cancelled,
.badge-lh-pub-success,
.badge-lh-pub-danger,
.badge-lh-pub-warning,
.badge-lh-pub-info,
.badge-lh-pub-neutral {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: var(--pub-text-micro);
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
  white-space: nowrap;
}

/* Game-status badges (map 1:1 to ADR-006 GameStatus enum) */
.badge-lh-pub-live       { background: var(--pub-live-bg);      color: var(--pub-live); }
.badge-lh-pub-final      { background: var(--pub-final-bg);     color: var(--pub-final); }
.badge-lh-pub-scheduled  { background: var(--pub-scheduled-bg); color: var(--pub-scheduled); }
.badge-lh-pub-postponed  { background: var(--pub-postponed-bg); color: var(--pub-postponed); }
.badge-lh-pub-cancelled  { background: var(--pub-cancelled-bg); color: var(--pub-cancelled); }

/* Generic state badges — use when a page needs a red/green/orange/blue
   indicator that isn't one of the five game statuses. Reuse the game-
   state token pairs so the palette stays consistent. */
.badge-lh-pub-success    { background: var(--pub-final-bg);     color: var(--pub-final); }
.badge-lh-pub-danger     { background: var(--pub-live-bg);      color: var(--pub-live); }
.badge-lh-pub-warning    { background: var(--pub-postponed-bg); color: var(--pub-postponed); }
.badge-lh-pub-info       { background: var(--pub-scheduled-bg); color: var(--pub-scheduled); }
.badge-lh-pub-neutral    { background: var(--pub-cancelled-bg); color: var(--pub-cancelled); }


/* ─────────────── Alerts ─────────────── */

/* Call sites apply Bootstrap spacing utilities (mb-0, mb-3, my-4, etc.)
   to control vertical rhythm — matches how admin .lh-alert is used and
   keeps alert utilities Bootstrap-compatible. */
.alert-lh-pub-danger,
.alert-lh-pub-info,
.alert-lh-pub-warning,
.alert-lh-pub-secondary {
  position: relative;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: var(--pub-text-body);
  line-height: var(--pub-text-body-lh);
}

.alert-lh-pub-danger {
  background: var(--pub-live-bg);
  color: var(--pub-live);
  border-color: var(--pub-live);
}
.alert-lh-pub-info {
  background: var(--pub-scheduled-bg);
  color: var(--pub-scheduled);
  border-color: var(--pub-border);
}
.alert-lh-pub-warning {
  background: var(--pub-postponed-bg);
  color: var(--pub-postponed);
  border-color: var(--pub-postponed);
}
.alert-lh-pub-secondary {
  background: var(--pub-surface-alt);
  color: var(--pub-text-secondary);
  border-color: var(--pub-border);
}


/* ─────────────── Spinner ─────────────── */

/* Replaces .spinner-border.text-primary on public loading states.
   Uses league-secondary (amber) so runtime overrides apply. */
.spinner-lh-pub {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--league-secondary);
  animation: spinner-lh-pub-rotate 0.75s linear infinite;
}
.spinner-lh-pub.spinner-lh-pub-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-lh-pub-rotate {
  to { transform: rotate(360deg); }
}

/* A11y motion guard — every animation wrapped per BRAND-KIT-PUBLIC §9 #9. */
@media (prefers-reduced-motion: reduce) {
  .spinner-lh-pub { animation: none; }
  .btn-lh-pub-primary,
  .btn-lh-pub-outline-primary,
  .btn-lh-pub-secondary,
  .btn-lh-pub-outline-secondary,
  .btn-lh-pub-outline-danger,
  .btn-lh-pub-navy { transition: none; }
}


/* ─────────────── Media + edge-case helpers ─────────────── */

/* Typography utility — 13px text via --pub-text-micro token. Use when
   you would have reached for inline font-size:0.8em or Bootstrap .small
   on public pages. */
.pub-text-micro {
  font-size: var(--pub-text-micro);
  line-height: var(--pub-text-micro-lh);
}

/* Captain badge — 0.55em superscript override for the tiny "C" marker
   next to player names. Documented edge-case: the spacing scale doesn't
   cover relative-em values this small. Always combine with a color-
   carrying class, chained on the same element:
   `<span class="badge-lh-pub-warning pub-captain-badge">C</span>`. */
.pub-captain-badge {
  font-size: 0.55em;
  vertical-align: middle;
}

/* Team logo — hero size, used in the sub-hero header on team pages
   (TeamSeason, etc.). Documented media-sizing exception to the
   2/4/6/8/… spacing scale since logos need to be visually weighty. */
.pub-team-logo-hero {
  max-height: 60px;
  vertical-align: middle;
}


/* ─────────────── Hero H2H pill ───────────────
   Renamed from page-scoped .lh-pub-gc-h2h-pill (GameCenter v2). Shared
   across GameCenter + GamePreview heroes so the same recipe lives in one
   place. Caller renders inside a dark navy hero — recipe assumes white
   foreground.

   Per docs/design-audit/public-gamepreview-v3.md Q1 (hero pill on
   GamePreview) + Q2 (rename to shared class). */
.lh-pub-h2h-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 14px;
  margin-top: 12px;
}

.lh-pub-h2h-pill-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.lh-pub-h2h-pill-value {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════
   Public NavMenu v3 — full nav-bar styles.

   Owned here (not in NavMenu.razor.css) because Blazor's scoped CSS
   only attaches the b-{hash} attribute to direct DOM elements of the
   component. <NavLink>-rendered <a> tags are child-component output
   and don't get the hash — scoping would silently fail to style the
   nav links while the dropdown <button> triggers stay styled,
   producing a broken half-styled nav. Global rules sidestep that.

   Per docs/design-audit/public-navmenu-v3.md (Gates 1+2 signed off
   2026-05-01, PRs #531 + #532). */

/* ─── Top bar shell ───────────────────────────────────── */
.lh-pub-nav {
  background: var(--surface, #FFFFFF);
  border-bottom: 1px solid var(--border-light, #F1F3F5);
  padding: 14px 0;
}

.lh-pub-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ─── Brand cluster (LeagueBrand provides the inner markup) ─── */
.lh-pub-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

/* ─── Nav list ─────────────────────────────────────────── */
.lh-pub-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lh-pub-nav-item {
  position: relative;
}

.lh-pub-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #525866);
  background: none;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
  position: relative;
}

.lh-pub-nav-link:hover {
  color: var(--text, #111827);
}

.lh-pub-nav-link:focus-visible {
  outline: 2px solid var(--league-secondary, #E59500);
  outline-offset: 2px;
}

/* Active state — amber underline + weight bump (Q4) */
.lh-pub-nav-link.is-active {
  color: var(--text, #111827);
  font-weight: 600;
}

.lh-pub-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -4px;
  height: 2px;
  background: var(--league-secondary, #E59500);
  border-radius: 2px;
}

/* Dropdown caret */
.lh-pub-nav-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ─── Right-side cluster ─────────────────────────────── */
.lh-pub-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Live badge — small red pill on the right when 1+ games are live (Q3) */
.lh-pub-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--pub-live-bg, rgba(239, 68, 68, 0.12));
  color: var(--pub-live, #EF4444);
  border: 1px solid var(--pub-live, #EF4444);
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
}

.lh-pub-live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pub-live, #EF4444);
  animation: lh-pub-nav-pulse 1.6s ease-in-out infinite;
}

@keyframes lh-pub-nav-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-pub-live-badge::before { animation: none; }
}

/* Mobile hamburger (hidden at desktop, shown ≤ 768px) */
.lh-pub-nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--text, #111827);
  cursor: pointer;
}

.lh-pub-nav-hamburger:hover {
  background: var(--surface-2, #FAFBFC);
}

.lh-pub-nav-hamburger:focus-visible {
  outline: 2px solid var(--league-secondary, #E59500);
  outline-offset: 2px;
}

.lh-pub-nav-hamburger svg {
  width: 22px;
  height: 22px;
}

/* ─── Dropdown panel ──────────────────────────────────── */
.lh-pub-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-light, #F1F3F5);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  padding: 6px;
  z-index: 50;
  display: none;
}

/* Invisible 8px bridge above the dropdown so the cursor doesn't leave
   the hover area when crossing the visual gap between trigger and menu.
   Without this, hover-open dropdowns close as soon as the user moves to
   click a dropdown item. */
.lh-pub-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Right-anchored dropdown for "More ▾" — last nav item, avoids right-edge overflow */
.lh-pub-nav-dropdown-end {
  left: auto;
  right: 0;
}

/* Open state — pure CSS via :hover + :focus-within so NavMenu works
   under static SSR (no Blazor circuit needed for nav). :focus-within
   covers keyboard users tabbing into the trigger or any descendant. */
.lh-pub-nav-item:hover > .lh-pub-nav-dropdown,
.lh-pub-nav-item:focus-within > .lh-pub-nav-dropdown {
  display: block;
}

.lh-pub-nav-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text, #111827);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.lh-pub-nav-dropdown-item:hover {
  background: var(--surface-2, #FAFBFC);
  color: var(--league-secondary-dark, #B87700);
}

.lh-pub-nav-dropdown-item:focus-visible {
  outline: 2px solid var(--league-secondary, #E59500);
  outline-offset: 2px;
}

.lh-pub-nav-dropdown-item.is-empty {
  color: var(--text-muted, #9CA3AF);
  cursor: default;
  font-style: italic;
}

.lh-pub-nav-dropdown-item.is-empty:hover {
  background: transparent;
  color: var(--text-muted, #9CA3AF);
}

.lh-pub-nav-dropdown-divider {
  height: 1px;
  background: var(--border-light, #F1F3F5);
  margin: 4px 8px;
}

/* ─── Mobile offcanvas drawer ──────────────────────────── */
.lh-pub-nav-offcanvas-bs {
  width: 280px;
}

.lh-pub-nav-offcanvas-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: none;
  color: var(--text, #111827);
  cursor: pointer;
  margin-left: auto;
}

.lh-pub-nav-offcanvas-close:hover {
  background: var(--surface-2, #FAFBFC);
}

.lh-pub-nav-offcanvas-close:focus-visible {
  outline: 2px solid var(--league-secondary, #E59500);
  outline-offset: 2px;
}

.lh-pub-nav-offcanvas-close svg {
  width: 22px;
  height: 22px;
}

.lh-pub-nav-offcanvas-section {
  margin-bottom: 24px;
}

.lh-pub-nav-offcanvas-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 12px 8px;
}

.lh-pub-nav-offcanvas-link {
  display: block;
  padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #111827);
  border-radius: 8px;
  text-decoration: none;
}

.lh-pub-nav-offcanvas-link:hover {
  background: var(--surface-2, #FAFBFC);
}

.lh-pub-nav-offcanvas-link:focus-visible {
  outline: 2px solid var(--league-secondary, #E59500);
  outline-offset: 2px;
}

/* ─── Responsive — hide desktop nav, show hamburger ≤ 768px ─── */
@media (max-width: 768px) {
  .lh-pub-nav-list {
    display: none;
  }

  .lh-pub-nav-hamburger {
    display: inline-flex;
  }
}