/* base.css: reset, tokens, typography (dark theme) */
:root{
  --bg: #0b0b0e;
  --bg-elev: #121218;
  --text: #e6e6ea;
  --muted: #a1a1aa;
  --brand: #e11d48;
  --brand-2: #f97316; /* warm orange for CTAs */
  --link: #38bdf8;
  --surface: #1a1a22;
  --border: #262634;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
}

*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  background:var(--bg);
  color:var(--text);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--link);outline-offset:2px}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;}

h1,h2,h3{line-height:1.2;margin:1.2rem 0 .6rem}
p{margin:.6rem 0 1rem}

button,.btn{font:inherit;background:var(--brand-2);color:#fff;border:0;border-radius:12px;padding:.6rem 1rem;cursor:pointer;display:inline-block}
.btn:hover,button:hover{filter:brightness(1.05)}
.btn.secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.8rem}
.badge.brand{background:var(--brand);border-color:transparent}
.badge.mono{background:#0f0f14;color:#a1a1aa}

.container{max-width:1200px;margin:0 auto;padding:0 var(--space-5)}
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0b0b0e,rgba(11,11,14,.9));border-bottom:1px solid var(--border);backdrop-filter:saturate(120%) blur(6px)}
.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:44px;height:44px}
.brand .title{font-weight:700;letter-spacing:.06em}
.brand .title span{color:var(--brand)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.nav a{padding:.5rem .75rem;border-radius:10px;display:inline-block;color:var(--text)}
.nav a[aria-current="page"], .nav a:hover{background:var(--surface)}

.hero{padding:3.5rem 0;background:radial-gradient(1200px 400px at 20% -10%, rgba(225,29,72,.15), transparent 60%);border-bottom:1px solid var(--border);text-align:center}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 .5rem}
.hero p{max-width:68ch;margin-inline:auto;color:var(--muted)}

.grid{display:grid;gap:1rem}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:.2rem}

.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.gallery .ph{background:#0f0f14;border:1px dashed #2a2a3a;border-radius:10px;aspect-ratio:16/10;display:grid;place-items:center;color:#6b7280}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.kpi .item{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.kpi .item .label{color:var(--muted);font-size:.9rem}
.kpi .item .value{font-size:1.6rem;font-weight:700}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:.75rem 1rem;border-bottom:1px solid var(--border);text-align:left}
th{position:sticky;top:0;background:var(--surface);font-weight:600}
tbody tr:hover{background:#16161e}

.footer{margin-top:3rem;border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem}
.newsletter{display:flex;gap:.5rem;margin-top:.5rem}
.newsletter input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.6rem  .8rem;border-radius:10px}

.hero-split{padding:3rem 0;display:grid;gap:2rem;grid-template-columns:1.4fr 1fr;align-items:center}
.hero-split .ph{aspect-ratio:4/3;border:1px dashed #2a2a3a;border-radius:12px;background:#0f0f14;display:grid;place-items:center;color:#6b7280}

.player-card{display:flex;gap:1rem;align-items:center}
.player-card img{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.player-card .meta{font-size:.9rem;color:var(--muted)}
.badge.rank{background:#38bdf8;color:#00111a;border-color:transparent}

@media (max-width: 900px){
  .footer .cols{grid-template-columns:1fr 1fr}
  .hero-split{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .nav ul{gap:.25rem;flex-wrap:wrap}
  .brand .title{display:none}
}


/* === Light theme support === */
body.theme-light{
  color-scheme: light;
  --bg:#f8fafc;
  --bg-elev:#ffffff;
  --text:#0b1220;
  --muted:#475569;
  --brand:#dc2626;
  --brand-2:#ea580c;
  --link:#2563eb;
  --surface:#ffffff;
  --border:#e5e7eb;
  --shadow:0 8px 30px rgba(2,8,23,.08);
}
.badge.mono{background:#0f0f14;color:#a1a1aa}
body.theme-light .badge.mono{background:#f1f5f9;color:#334155;border-color:#e5e7eb}

/* === Header: mobile nav & toggles === */
.nav-toggle, .theme-toggle{
  display:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.5rem .7rem;
  color:var(--text);
}
.nav-toggle .bars{width:20px;height:14px;position:relative;display:block}
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--text);border-radius:2px
}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars span{top:6px}
.nav-toggle .bars::after{bottom:0}

@media (max-width: 900px){
  .nav-toggle, .theme-toggle{display:inline-block}
  .nav{position:fixed;left:0;right:0;top:56px;background:var(--bg-elev);border-top:1px solid var(--border);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:.5rem}
  .nav a{padding:.8rem 1rem}
}

/* === Sections & Cards spacing tweaks === */
.section{padding:3.5rem 0}
@media (max-width: 720px){ .section{padding:2rem 0} }

.card{padding:1.25rem}

/* Welcome grid breathing room */
.welcome-equal{margin-top:1.5rem;gap:1.25rem}
.welcome-equal .card{width:320px;min-height:380px}

/* Hide hero photos rail on narrow viewports */
@media (max-width: 900px){
  .hero-photos{display:none}
}

/* Footer simplified layout */
.footer .footer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.footer .footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:1rem 0;border-top:1px solid var(--border)}
.footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--border)}
@media (max-width: 900px){
  .footer .footer-top{flex-direction:column;align-items:flex-start}
  .footer .footer-links{grid-template-columns:1fr}
  .footer .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* Header uses theme variables so it adapts instantly */
.header{background:var(--bg);background-image:radial-gradient(1200px 400px at 20% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%)}

/* Make theme toggle visible at all breakpoints; hamburger still mobile-only */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin-left:.5rem}
.theme-toggle svg{width:22px;height:22px}
.theme-toggle .icon-sun{display:none}
body.theme-light .theme-toggle .icon-sun{display:block}
body.theme-light .theme-toggle .icon-moon{display:none}
/* Default (dark): show moon */
.theme-toggle .icon-moon{display:block}

/* Global background gradient across the whole page */
body{
  background:
    radial-gradient(1200px 400px at 20% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    var(--bg);
}

/* Header adjustments */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-inner .logo img, .header-inner .logo svg {
  height: 48px;
  width: auto;
}
.header-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-toggle {
  order: 1;
}
.theme-toggle {
  order: 2;
}

/* Extend header background gradient across entire site */
body {
  background:
    radial-gradient(1200px 800px at 50% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 80%),
    var(--bg);
  background-attachment: fixed;
}

/* Unified site background gradient (single source of truth) */
body{
  background:
    radial-gradient(1600px 900px at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Header uses a neutral translucent bg that adapts to theme; no separate gradient to avoid seams */
:root{ --header-bg: rgba(8,10,16,.55); }
body.theme-light{ --header-bg: rgba(255,255,255,.55); }
.header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(120%) blur(6px);
}

/* Header layout + bigger logo + right-aligned controls */
.header-inner{display:flex;align-items:center;gap:1rem}
.header-inner .brand{display:flex;align-items:center;gap:.75rem}
.header-inner .brand img{width:56px;height:56px}
.nav{margin-left:1rem}
.header-controls{margin-left:auto;display:flex;align-items:center;gap:.5rem}

/* Mobile controls visibility */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
}

/* Ensure theme toggle always visible */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin-left:.25rem}
.theme-toggle svg{width:22px;height:22px}
.theme-toggle .icon-sun{display:none}
body.theme-light .theme-toggle .icon-sun{display:block}
body.theme-light .theme-toggle .icon-moon{display:none}
.theme-toggle .icon-moon{display:block}

/* Header controls: theme left of hamburger, with right padding */
.header-controls{margin-left:auto;display:flex;align-items:center;gap:.5rem;padding-right:var(--space-5)}
.header-controls .theme-toggle{order:1}
.header-controls .nav-toggle{order:2}

/* Smallest viewport: make logo larger for better visibility */
@media (max-width: 560px){
  .header-inner .brand img{width:64px;height:64px}
}

/* Header brand/logo sizing (standalone image block) */
.header-inner .brand{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.25rem .5rem;border-radius:12px;
}
.header-inner .brand img{
  display:block;
  max-height:72px; /* desktop legibility */
  width:auto;
}
@media (max-width: 900px){
  .header-inner .brand img{ max-height:64px; }
}
@media (max-width: 560px){
  .header-inner .brand img{ max-height:56px; }
}

/* --- Logo sizing upper bounds (best-practice max without overpowering navbar) --- */
.header-inner .brand img{ max-height:80px; width:auto }
@media (max-width: 900px){ .header-inner .brand img{ max-height:72px } }
@media (max-width: 560px){ .header-inner .brand img{ max-height:64px } }

/* --- Modern, sleek footer --- */
.footer .footer-links ul{ list-style:none; margin:0; padding:0 }
.footer a{ color: var(--text); opacity:.88 }
.footer a:hover{ opacity:1; text-decoration:underline }
.footer h4{ margin:.25rem 0 .5rem; font-size:1rem }
.footer .footer-top .brand img{ width:40px; height:40px }
@media (max-width: 560px){ .footer .footer-top .brand img{ width:36px; height:36px } }

/* --- Nav clarity & contrast --- */
.nav a{
  color: var(--text);
  opacity:.88;
  border:1px solid transparent;
  transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.nav a:hover, .nav a:focus{
  opacity:1;
  background: var(--surface);
  border-color: var(--border);
}
.nav a[aria-current="page"]{
  opacity:1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  border-color: var(--border);
  box-shadow: inset 0 -2px 0 0 var(--brand);
  font-weight:600;
}

/* Roomier sections overall */
.section{ padding:4.5rem 0 }
@media (max-width: 720px){ .section{ padding:2.5rem 0 } }

/* Larger footer logo for clarity */
.footer .footer-top .brand img{ width:64px; height:64px }
@media (max-width: 560px){ .footer .footer-top .brand img{ width:56px; height:56px } }

/* --- Footer spacing tightened --- */
.footer .footer-top,
.footer .footer-bottom{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.footer .footer-top{ gap: 1.5rem }

/* --- Navbar hover/active: text color change only, no rectangle --- */
.nav a{
  color: var(--text);
  transition: color .2s ease;
  border: none;
  background: none;
  box-shadow: none;
}
.nav a:hover,
.nav a:focus{
  color: var(--text-strong, #111);
}
.nav a[aria-current="page"]{
  color: var(--text-strong, #111);
  font-weight: 600;
}

/* --- Footer spacing tightened --- */
.footer .footer-top{ padding:.5rem 0 }
.footer .footer-links{ gap:.75rem; padding:.5rem 0; border-top:1px solid var(--border) }
.footer .footer-bottom{ padding-top:.5rem }

/* --- Nav: text-color only, no rectangles --- */
.nav a{
  color: var(--text);
  opacity: .95;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: color .15s ease, opacity .15s ease;
}
/* Dark theme: make hover/active a bit lighter for contrast */
body:not(.theme-light) .nav a:hover,
body:not(.theme-light) .nav a:focus{
  color: #ffffff;
  opacity: 1;
}
body:not(.theme-light) .nav a[aria-current="page"]{
  color: #ffffff;
  opacity: 1;
  font-weight: 700;
}
/* Light theme: make hover/active darker for contrast */
body.theme-light .nav a:hover,
body.theme-light .nav a:focus{
  color: #0b1220;
  opacity: 1;
}
body.theme-light .nav a[aria-current="page"]{
  color: #0b1220;
  opacity: 1;
  font-weight: 700;
}

/* Stronger hover color for nav links */
.nav a:hover, .nav a:focus{
  color: #111 !important;
  opacity: 1;
}
body:not(.theme-light) .nav a:hover, 
body:not(.theme-light) .nav a:focus{
  color: #ddd !important;
}

/* --- Stronger nav hover/active: darker text in both themes --- */
.nav a{
  color: var(--text);
  opacity: .95;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: color .15s ease, opacity .15s ease;
}
.nav a:hover, .nav a:focus{
  /* Darken relative to current theme text color */
  color: color-mix(in srgb, var(--text) 65%, #000);
  opacity: 1;
}
.nav a[aria-current="page"]{
  color: color-mix(in srgb, var(--text) 55%, #000);
  opacity: 1;
  font-weight: 700;
}

/* --- Nav hover fix: explicit color + remove focus rectangle (keep focus-visible) --- */
.nav a{
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.nav a:focus{ outline: none }
.nav a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Text-only hover/active contrast */
body.theme-light .nav a:hover,
body.theme-light .nav a:focus-visible,
body.theme-light .nav a[aria-current="page"]{
  color: #0b1220 !important; /* darker in light mode */
}

body:not(.theme-light) .nav a:hover,
body:not(.theme-light) .nav a:focus-visible{
  color: #b3b8c6 !important; /* darker than base text in dark mode */
}
body:not(.theme-light) .nav a[aria-current="page"]{
  color: #a6adbb !important; /* slightly more pronounced for active */
  font-weight: 700;
}

/* --- Navbar hover fix & no blue focus rectangle (accessible alternative) --- */
.nav a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  opacity: .95;
  transition: color .15s ease, opacity .15s ease, text-decoration-color .15s ease;
}

/* Remove default blue rectangle on click/focus */
.nav a:focus{ outline: none; }
.nav a::-moz-focus-inner{ border: 0; }

/* Keep an accessible focus indicator (no rectangle) */
.nav a:focus-visible{
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hover/active colors */
body.theme-light .nav a:hover,
body.theme-light .nav a:focus-visible{
  color: #0b1220; /* darker text on light theme */
  opacity: 1;
}
body.theme-light .nav a[aria-current="page"]{
  color: #0b1220;
  opacity: 1;
  font-weight: 700;
}

body:not(.theme-light) .nav a:hover,
body:not(.theme-light) .nav a:focus-visible{
  color: #d1d5db; /* lighter text for contrast on dark theme */
  opacity: 1;
}
body:not(.theme-light) .nav a[aria-current="page"]{
  color: #ffffff;
  opacity: 1;
  font-weight: 700;
}

/* --- Top navbar: ensure hover works in light mode (text-only) --- */
body.theme-light .nav a{
  color:#1f2937; /* slate-800ish */
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  transition:color .15s ease, opacity .15s ease;
}
body.theme-light .nav a:hover,
body.theme-light .nav a:focus-visible{
  color:#0b1220 !important; /* darker on hover/focus */
  opacity:1;
}
body.theme-light .nav a[aria-current="page"]{
  color:#0b1220 !important;
  font-weight:700;
}