/* ================================================================
   SDPT SHARED STYLES
   Extracted from: index.html, results.html, rules.html,
                   schedule.html, wsop.html, rsvp.html
   ================================================================ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  --white:    #ffffff;
  --off:      #f7f5f0;
  --paper:    #f0ece3;
  --ink:      #1a1814;
  --ink2:     #3a3630;
  --muted:    #8c8880;
  --rule:     #ddd9d0;
  --gold:     #b8902a;
  --gold2:    #d4a83a;
  --gold3:    #e8c060;
  --charcoal: #2a2825;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BASE BODY ──────────────────────────────────────────────────── */
body {
  background: var(--white);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
}

/* ── NAV ────────────────────────────────────────────────────────── */
body > nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4rem;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}

.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
  padding: 0.4rem 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 0;
}

.nav-links a {
  display: block;
  padding: 1.35rem 1.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.22s, opacity 0.22s;
}

/* Hamburger open state */
.nav-mobile-open .nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-mobile-open .nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── LOGO SWAP (light/dark images) ──────────────────────────────── */
.nav-logo .logo-dark,
.hero-logo-panel .logo-dark { display: none; }
.nav-logo .logo-light,
.hero-logo-panel .logo-light { display: block; }

/* ── PAGE HERO (inner pages) ────────────────────────────────────── */
.page-hero {
  background: var(--off);
  border-bottom: 1px solid var(--rule);
  padding: 4rem 4rem 3.5rem;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  position: absolute;
  bottom: -2rem;
  right: 2rem;
  font-size: 18rem;
  color: rgba(0,0,0,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: Arial, sans-serif;
  font-style: normal;
}

.page-kicker {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.page-kicker::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.page-title span { color: var(--gold); }

.page-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink2);
  max-width: 55ch;
  font-weight: 300;
}

/* ── BAND ───────────────────────────────────────────────────────── */
.band {
  background: var(--ink);
  padding: 1.1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
}
.band-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--gold2);
  white-space: nowrap;
}
.band-suits {
  display: flex;
  gap: 1.5rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.12);
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  font-style: normal;
}

/* ── SHARED SECTION LABELS ──────────────────────────────────────── */
.section-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--charcoal); }
.btn-outline { background: transparent; color: var(--ink2); border: 1px solid var(--rule); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }

/* ── FOOTER ─────────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  padding: 3rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 3px solid var(--gold);
}
.footer-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: transparent;
  border: none;
  outline: none;
  transition: opacity 0.2s;
}
.footer-logo:hover { opacity: 0.75; }
.footer-logo-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--white);
  line-height: 1;
}
.footer-logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 500;
}
.footer-copy { text-align: center; }
.footer-copy p {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.footer-copy strong { color: rgba(255,255,255,0.6); font-weight: 500; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.footer-nav a {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--gold2); }

/* ── RESPONSIVE — 960px ─────────────────────────────────────────── */
@media (max-width: 960px) {
  body > nav       { padding: 0 2rem; }
  .page-hero       { padding: 3rem 2rem 2.5rem; }
  .band            { padding: 1rem 2rem; }
  footer           { flex-direction: column; text-align: center; padding: 2.5rem 2rem; }
  .footer-nav      { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ── RESPONSIVE — 600px ─────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Show hamburger, hide nav links */
  .nav-links    { display: none; }
  .nav-hamburger { display: flex; }
  body > nav    { padding: 0 1.25rem; }

  /* Mobile dropdown */
  body > nav.nav-mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--rule);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 300;
    padding: 0.5rem 0;
  }
  body > nav.nav-mobile-open .nav-links a { padding: 1rem 2rem; border-bottom: none; }

  /* Page hero */
  .page-hero  { height: auto !important; min-height: 0 !important; padding: 2.5rem 1.25rem 2rem; }
  .page-title { font-size: 3rem; }

  /* Band */
  .band-text  { white-space: normal; font-size: 0.85rem; }
  .band       { padding: 0.85rem 1.25rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .band-suits { display: none; }
}

/* ================================================================
   DARK MODE
   Strategy:
   • Flip page-level backgrounds and body text via :root overrides.
   • Sections that are "always dark" in light mode (footer, band,
     table headers, championship block) are kept explicitly dark
     and do NOT rely on --ink flipping — so they stay legible.
   • --white is NOT flipped (it's used as text on dark surfaces);
     instead body/page BG is set directly via body { background }.
   ================================================================ */
@media (prefers-color-scheme: dark) {

  /* ── Token overrides ──────────────────────────────────────────── */
  :root {
    --white:    #141210;
    --off:      #1c1a16;
    --paper:    #221f1a;
    --ink:      #e8e4da;
    --ink2:     #b4b0a8;
    --muted:    #6a6660;
    --rule:     #2c2924;
    --gold:     #c9a040;
    --gold2:    #d4a83a;
    --gold3:    #ddb84e;
    --charcoal: #1c1a16;
  }

  /* ── Page chrome ──────────────────────────────────────────────── */
  body {
    background: #141210;
    color: var(--ink);
  }

  body > nav {
    background: #141210;
    border-bottom-color: var(--rule);
    box-shadow: 0 1px 16px rgba(0,0,0,0.5);
  }
  .nav-hamburger span { background: var(--ink); }

  /* Mobile menu dropdown */
  body > nav.nav-mobile-open .nav-links {
    background: #141210 !important;
    border-bottom-color: var(--rule) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  }

  /* Nav link active/hover */
  .nav-links a:hover,
  .nav-links a.active { color: var(--ink); }

  /* ── Logo swap ────────────────────────────────────────────────── */
  .nav-logo .logo-light,
  .hero-logo-panel .logo-light { display: none; }
  .nav-logo .logo-dark,
  .hero-logo-panel .logo-dark  { display: block; }

  /* ── Page hero / section backgrounds ─────────────────────────── */
  .page-hero       { background: var(--off); }
  .hero-left       { background: var(--off); }
  .hero-right      { background: var(--off); }
  .hero-logo-panel {
    background: radial-gradient(ellipse 80% 70% at 50% 50%, var(--paper) 0%, var(--off) 100%);
  }

  /* Decorative oversized suit glyphs */
  .page-hero::after,
  .hero-left::after,
  .page-card::after { color: rgba(255,255,255,0.03); }
  .page-card:hover::after { color: rgba(255,255,255,0.06); }

  /* ── Band — keep very dark, not affected by --ink flip ─────────  */
  .band { background: #080706; }

  /* ── Footer — always dark, hardcoded so text stays readable ────── */
  footer {
    background: #0d0b09;
    border-top-color: var(--gold);
  }
  .footer-logo-name { color: #e8e4da; }
  .footer-logo-sub  { color: var(--gold2); }

  /* ── Table headers — keep dark, rgba text already light ──────── */
  .standings-table thead tr,
  .event-table thead tr,
  .blinds-table thead tr,
  .schedule-table thead tr,
  .points-table thead tr { background: #0d0b09 !important; }

  /* Sticky first-column header cell */
  .standings-table thead th:first-child { background: #0d0b09 !important; }

  /* Sticky first-column body cell (needs to match row bg) */
  .standings-table tbody td:first-child { background: #141210; }
  .standings-table tbody tr:nth-child(even) td:first-child { background: var(--off); }
  .standings-table tbody tr:hover td:first-child { background: var(--paper); }

  /* ── Championship block — already dark, fix var(--white) text ─── */
  .championship-block { background: #0d0b09 !important; }
  .championship-title { color: #e8e4da !important; }
  .champ-name         { color: #e8e4da !important; }

  /* ── Table bodies ─────────────────────────────────────────────── */
  .standings-table tbody tr:nth-child(even),
  .event-table tbody tr:nth-child(even),
  .blinds-table tbody tr:nth-child(even),
  .schedule-table tbody tr:nth-child(even) { background: var(--off); }

  .standings-table tbody tr:hover,
  .event-table tbody tr:hover,
  .blinds-table tbody tr:hover,
  .schedule-table tbody tr:hover { background: var(--paper); }

  .standings-table tbody td,
  .event-table tbody td,
  .blinds-table tbody td,
  .schedule-table tbody td {
    color: var(--ink2);
    border-right-color: var(--rule);
  }
  .standings-table tbody tr,
  .event-table tbody tr,
  .blinds-table tbody tr,
  .schedule-table tbody tr { border-bottom-color: var(--rule); }

  /* First (name/date) cell stays ink-colored */
  .blinds-table tbody td:first-child,
  .player-name,
  .event-date,
  .event-time,
  .points-big { color: var(--ink); }

  /* ── Tabs (results page) ──────────────────────────────────────── */
  .tab-strip  { border-bottom-color: var(--ink); }
  .tab-btn    { color: var(--muted); }
  .tab-btn:hover { color: var(--ink); background: var(--off); }
  .tab-btn.active { background: #0d0b09 !important; color: #e8e4da !important; }
  .tab-panels { border-color: var(--rule); }
  .tab-panel-meta { background: var(--off); border-bottom-color: var(--rule); color: var(--muted); }

  /* ── Event block (results page) ───────────────────────────────── */
  .event-block  { border-color: var(--rule); }
  .event-header { background: var(--off); border-bottom-color: var(--rule); }
  .wsop-badge   { background: #0d0b09; color: var(--gold2); border-color: var(--gold); }

  /* ── Rules page ───────────────────────────────────────────────── */
  .toc-label          { border-bottom-color: var(--ink); color: var(--gold); }
  .toc-links a        { border-bottom-color: var(--rule); color: var(--muted); }
  .toc-links a:hover  { color: var(--ink); }
  .section-heading    { border-bottom-color: var(--rule); color: var(--ink); }
  .detail-grid        { background: var(--rule); border-color: var(--rule); }
  .detail-box         { background: var(--off); }
  .detail-label       { color: var(--muted); }
  .detail-value       { color: var(--ink); }
  .bounty-box         { background: var(--paper); border-left-color: var(--gold); }
  .bounty-box p       { color: var(--ink2); }
  .blinds-table .break-row td { background: #0d0b09 !important; color: var(--gold2) !important; }

  /* ── Index page cards ─────────────────────────────────────────── */
  .pages-header           { border-bottom-color: var(--ink); }
  .page-card              { border-color: var(--rule); }
  .page-card:hover        { background: var(--paper); }
  .card-index             { color: var(--rule); }
  .page-card:hover .card-index { color: var(--gold3); }
  .card-go                { color: var(--ink); border-bottom-color: var(--rule); }
  .page-card:hover .card-go { border-color: var(--ink); }

  /* ── Hero stats (index) ───────────────────────────────────────── */
  .stat-label-col { background: var(--off); border-right-color: var(--rule); }
  .stat-row       { border-bottom-color: var(--rule); }
  .stat-val-col   { color: var(--ink); }

  /* ── About / pullquote ────────────────────────────────────────── */
  .pullquote        { background: var(--paper); border-left-color: var(--gold); }
  .pullquote p      { color: var(--ink2); }
  .aside-numbers    { border-top-color: var(--ink); }
  .aside-num-row    { border-bottom-color: var(--rule); }

  /* ── Next game banner ─────────────────────────────────────────── */
  .next-game { background: var(--paper); border-color: var(--rule); }

  /* ── Buttons ──────────────────────────────────────────────────── */
  .btn-dark         { background: var(--ink); color: #141210; }
  .btn-dark:hover   { background: var(--ink2); }
  .btn-outline      { color: var(--ink2); border-color: var(--rule); }
  .btn-outline:hover { border-color: var(--ink); color: var(--ink); }

  /* ── Schedule page ────────────────────────────────────────────── */
  .quarter-header                   { border-bottom-color: var(--ink); }
  .schedule-table tbody tr:hover    { background: var(--off); }
  tr.next-up                        { background: rgba(201,160,64,0.08); }
  .next-badge                       { background: var(--gold3); color: #141210; }

  /* ── WSOP page ────────────────────────────────────────────────── */
  .wsop-card    { border-color: var(--rule); }
  .seat-num     { color: var(--ink); }
  .seat-title   { color: var(--ink); }
  .seat-desc    { color: var(--ink2); }
  .info-box     { background: var(--paper); border-left-color: var(--gold); }
  .shares-table tbody tr:nth-child(even) { background: var(--off); }
  .shares-table tbody tr                 { border-bottom-color: var(--rule); }
  .shares-table thead tr                 { background: #0d0b09; }

  /* Sticky first-column body cells — must match row bg and beat page styles */
  .standings-table tbody td:first-child { background: #141210 !important; }
  .standings-table tbody tr:nth-child(even) td:first-child { background: var(--off) !important; }
  .standings-table tbody tr:hover td:first-child { background: var(--paper) !important; }

  /* Points table (WSOP page) body rows */
  .points-table tbody tr:nth-child(even) { background: var(--off); }
  .points-table tbody tr { border-bottom-color: var(--rule); }
  .points-table tbody td { color: var(--ink2); border-right-color: var(--rule); }
  .points-table tbody td:first-child { color: var(--ink); }

  /* RSVP event card header */
  .event-card-header { background: #0d0b09 !important; }

  /* Note box (WSOP page) */
  .note-box { background: var(--paper); border-left-color: var(--gold); color: var(--ink2); }
}