/* ==========================================================================
   FOR A BETTER CAUSE (FABC) — Design System
   Palette: Battle Violet + Ember Coral on white, esports-charity hybrid
   Type: Rajdhani (display) / Inter (body) / JetBrains Mono (data & scores)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* --- color: pulled from the FABC brand mark (charcoal + brand blue on faceted light grey) --- */
  --ink: #2A2A2E;
  --ink-soft: #55545C;
  --ink-faint: #918F98;
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --bg-sunk: #ECEBEF;
  --border: #E3E2E7;
  --border-strong: #D2D0D8;

  --primary: #2166C6;      /* brand blue */
  --primary-600: #1A54A3;
  --primary-700: #154385;
  --primary-tint: #E8F0FC;

  --accent: #1B84E7;       /* bright secondary blue — pairs with the deeper brand blue */
  --accent-600: #1569BE;
  --accent-tint: #E6F1FD;

  --teal: #12B8A6;         /* live / success */
  --teal-tint: #E3FBF7;
  --gold: #154385;         /* pending / highlight — deep blue instead of gold */
  --gold-tint: #E8F0FC;

  --danger: #E5484D;

  /* --- type --- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- shape / motion --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,18,31,0.06), 0 1px 1px rgba(20,18,31,0.04);
  --shadow-md: 0 8px 24px rgba(20,18,31,0.08);
  --shadow-lg: 0 20px 48px rgba(20,18,31,0.14);
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{ overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  position: relative;
}

/* faded geometric backdrop — visible only in the gutters either side of the
   centered content column, fading to transparent (revealing plain white)
   toward the middle. This is the one and only background pattern on the
   site now — the hero no longer has its own separate copy, so every
   section, all the way down to the footer, renders this exact same look. */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../assets/facets-light.svg');
  background-repeat: repeat;
  background-size: 460px 460px;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 110px, transparent 480px, transparent calc(100% - 480px), #000 calc(100% - 110px), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 110px, transparent 480px, transparent calc(100% - 480px), #000 calc(100% - 110px), #000 100%);
}
@media (max-width: 1400px){
  body::before{ display: none; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; font-size: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); text-transform: uppercase; letter-spacing: 0; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-transform: uppercase; letter-spacing: 0; }
h3{ font-size: 1.3rem; font-weight: 700; }
p{ margin: 0 0 1em; color: var(--ink-soft); }

.mono{ font-family: var(--font-mono); }

:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- layout --- */
.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--bg-alt); }

.page-intro{ text-align:center; max-width: 640px; margin: 0 auto; }
.page-intro p{ margin-left:auto; margin-right:auto; }
.page-intro .eyebrow::before{ display:none; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: '';
  width: 18px; height: 2px;
  background: var(--accent);
  display: inline-block;
}

.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head p{ max-width: 520px; margin: 0 auto; }
.section-head .eyebrow::before{ display: none; }
.section-head .actions{ margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* variant for utility bars (roster filters etc.) that must stay left/right, not centered */
.section-head--split{
  text-align: left;
  max-width: none;
  margin: 0 0 40px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.section-head--split p{ margin: 0; }

/* --- buttons --- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
  position: relative;
}
.btn::after{
  content:'→';
  display:inline-block;
  transition: transform .2s var(--ease);
  font-weight:600;
}
.btn-ghost::after, .btn-sm::after{ display:none; }
.btn:hover::after{ transform: translateX(3px); }
.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(20,18,31,.08); }
.btn-primary:hover{ background: var(--primary-600); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(33,102,198,.45); }

.btn-accent{ background: linear-gradient(115deg, var(--primary) 0%, var(--accent) 100%); color: #fff; box-shadow: 0 1px 2px rgba(20,18,31,.08); }
.btn-accent:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(27,132,231,.5); filter: brightness(1.04); }

.btn-ghost{ background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-tint); transform: translateY(-1px); }

.btn-sm{ padding: 10px 18px; font-size: .8rem; border-radius: var(--radius-sm); }
.btn-block{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none !important; box-shadow:none !important; }

/* --- badges / status pills --- */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge-live{ background: var(--teal-tint); color: #0A8A7C; }
.badge-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:#0A8A7C; animation: pulse 1.4s infinite; }
.badge-upcoming{ background: var(--primary-tint); color: var(--primary-700); }
.badge-completed{ background: var(--bg-sunk); color: var(--ink-faint); }
.badge-open{ background: var(--gold-tint); color: var(--gold); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* --- nav --- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  max-width: 1240px; margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.02em; text-transform:uppercase;}
.brand-mark{
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.05rem;
  box-shadow: var(--shadow-sm);
}
.nav-links{ display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:.03em; text-transform: uppercase; color: var(--ink-soft);
  position: relative; padding: 6px 0;
  transition: color .15s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--accent); transition: right .2s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-admin-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); color: var(--ink-faint);
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  flex-shrink:0;
}
.nav-admin-btn svg{ width:18px; height:18px; }
.nav-admin-btn:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.nav-toggle{
  display:none; background:none; border:none; padding:8px; color: var(--ink);
}
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 920px){
  .nav-links{
    position: fixed; inset: 72px 0 0 0; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 20px 24px; transform: translateX(100%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ width:100%; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 1.1rem; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:block; }
}

/* --- cards --- */
.card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.tag{
  display:inline-block; font-family: var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint);
  background: var(--bg-sunk); padding: 4px 10px; border-radius: var(--radius-pill);
}

/* --- grid helpers --- */
.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* --- forms --- */
.field{ margin-bottom: 22px; }
.field label{
  display:block; font-family: var(--font-display); font-weight:600; font-size:.85rem;
  letter-spacing:.03em; text-transform:uppercase; margin-bottom:8px; color: var(--ink);
}
.field .hint{ font-size:.8rem; color: var(--ink-faint); margin-top:6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea{ resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint);
}
.field.has-error input, .field.has-error select{ border-color: var(--danger); }
.field .error-msg{ display:none; color: var(--danger); font-size:.82rem; margin-top:6px; font-weight:600; }
.field.has-error .error-msg{ display:block; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-chip{
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 9px 18px; font-size:.88rem; font-weight:600; cursor:pointer;
  transition: all .15s var(--ease); background:#fff;
}
.radio-chip input{ display:none; }
.radio-chip.checked{ border-color: var(--primary); background: var(--primary-tint); color: var(--primary-700); }

/* --- notifications / toast --- */
.toast{
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  background: var(--ink); color:#fff; padding: 14px 20px; border-radius: var(--radius-md);
  display:flex; align-items:center; gap:10px; box-shadow: var(--shadow-lg);
  transform: translateY(140%); opacity:0; transition: all .3s var(--ease);
  font-size:.92rem; font-weight:600; max-width: 340px;
}
.toast.show{ transform: translateY(0); opacity:1; }
.toast.success{ background: #0F8A6A; }
.toast.error{ background: var(--danger); }

/* --- empty state --- */
.empty-state{
  text-align:center; padding: 60px 24px; border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg); color: var(--ink-faint);
}
.empty-state h3{ color: var(--ink); margin-bottom:8px; }

/* --- footer --- */
.site-footer{ background: var(--ink); color: #C9C6DA; padding: 64px 0 28px; margin-top: 40px; }
.site-footer a{ color: #C9C6DA; }
.site-footer a:hover{ color: #fff; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
.footer-grid h4{ color:#fff; font-family: var(--font-display); text-transform:uppercase; font-size:.95rem; margin-bottom:16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-bottom{ border-top: 1px solid #2B2842; padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color: #8A87A0; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* --- utility --- */
.text-center{ text-align:center; }
.muted{ color: var(--ink-faint); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.skeleton{ background: linear-gradient(90deg, var(--bg-sunk) 25%, var(--border) 37%, var(--bg-sunk) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }