/* =========================================================
   FVT • Light Mode Design System • WOW Overhaul
   ========================================================= */

/* ---------- Brand & System Tokens ---------- */
:root{
  /* Brand colors */
  --brand-primary: #001328;         /* deep collegiate navy */
  --brand-accent:  #F5C94A;         /* varsity gold */
  --brand-teal:    #0DA8B3;         /* teal accent highlight */
  --brand-teal-dk: #096b73;

  /* Surface / Ink */
  --ink-1000:#0e1a2a;
  --ink-900:#13253a;
  --ink-800:#18314b;
  --ink-700:#1f3d5c;

  --page-bg-top:   #F6F9FC;         /* top gradient */
  --page-bg-bot:   #ECF1F7;         /* bottom gradient */
  --text-ink:      #102034;         /* primary text */
  --text-muted:    #5e7283;         /* secondary text */
  --text-soft:     #7e8fa1;

  /* Glass + Borders + Shadows */
  --glass: rgba(255,255,255,.95);
  --glass-soft: rgba(255,255,255,.86);
  --border: rgba(16,24,40,.12);
  --border-strong: rgba(16,24,40,.18);
  --shadow-3d: 0 18px 50px rgba(0,0,0,.22);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.16);

  /* Links */
  --link: #0b4b67;
  --link-hover: #073a4f;
  --link-active: #052a3a;

  /* Accent button (dark text on gold for a11y) */
  --btn-accent-bg: var(--brand-accent);
  --btn-accent-fg: #15120e;
  --btn-accent-bg-hover: #e2b73b;
  --btn-accent-border: #c59b1e;

  /* Outline buttons */
  --btn-outline-fg: #102034;
  --btn-outline-border: #8aa0ac;
  --btn-outline-bg-hover: rgba(16,24,40,.08);
  --btn-outline-fg-hover: #0a1622;

  /* Focus */
  --focus: #16b5c6;

  /* Success / Info / Warn accents */
  --success: #22a36e;
  --info:    #0da8b3;
  --warn:    #f6b221;
}

/* =========================================================
   Base
   ========================================================= */
html, body{ height:100%; }
body.fvt-body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-ink);
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(13,168,179,.12), transparent 55%),
    linear-gradient(180deg, var(--page-bg-top), var(--page-bg-bot));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links + Focus */
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }
a:active{ color: var(--link-active); }
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px; border-radius: 6px;
}

/* Small helpers */
.text-muted{ color: var(--text-muted) !important; }
.small-help{ color: var(--text-soft); }

/* =========================================================
   Skip Link (a11y)
   ========================================================= */
.skiplink{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; z-index:1100;
  background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* =========================================================
   Navbar (Light Glass + Readable Links)
   ========================================================= */
.fvt-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:1000;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.fvt-nav.is-stuck{ box-shadow: var(--shadow-soft); }

.fvt-brand-stripe{
  position:absolute; inset:auto auto 0 0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal) 40%, var(--brand-accent) 80%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  border-radius: 2px 2px 0 0; pointer-events:none;
}

.navbar-brand .brand-wordmark{
  font-family: "Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.3px; text-transform:uppercase; font-weight:600; font-size:1.05rem;
}
.logo-3d{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); transform: translateZ(0); }

/* Nav links: deep ink + hover chip */
.navbar .nav-link{
  position:relative; color:#0e2133; opacity:1;
  padding:.5rem .75rem; border-radius:.5rem;
  transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}
.navbar .nav-link:hover{
  color:#0a1622; background-color: rgba(16,24,40,.06);
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color:#0a1622; background-color: rgba(16,24,40,.10);
}
.navbar .nav-link::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.25rem; height:2px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal));
  opacity:0; transform: translateY(3px) scaleX(.5); transition: all .2s ease; border-radius:2px;
}
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after,
.navbar .nav-link:hover::after{
  opacity:1; transform: translateY(0) scaleX(1);
}

/* =========================================================
   Buttons (Accent + Outline + 3D CTA)
   ========================================================= */
/* Accent (gold) */
.btn-accent{
  --bs-btn-bg: var(--btn-accent-bg);
  --bs-btn-color: var(--btn-accent-fg);
  --bs-btn-border-color: var(--btn-accent-border);
  --bs-btn-hover-bg: var(--btn-accent-bg-hover);
  --bs-btn-hover-color: var(--btn-accent-fg);
  --bs-btn-hover-border-color: var(--btn-accent-border);
  --bs-btn-active-bg: #d1a72f;
  --bs-btn-active-border-color: #a78614;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-accent:hover{ transform: translateY(1px); box-shadow: 0 6px 12px rgba(0,0,0,.10); filter: none; }
.btn-accent:active{ transform: translateY(2px); box-shadow: 0 4px 8px rgba(0,0,0,.08); }

/* Outline */
.btn-outline-dark, .btn-outline-light{
  color: var(--btn-outline-fg);
  border-color: var(--btn-outline-border);
  transition: background-color .12s ease, color .12s ease, transform .06s ease;
}
.btn-outline-dark:hover, .btn-outline-light:hover{
  background: var(--btn-outline-bg-hover);
  color: var(--btn-outline-fg-hover);
  transform: translateY(1px);
}

/* 3D CTA (optional glam) */
.btn-3d-accent{
  --face: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 90%, #fff 10%), var(--brand-accent));
  --edge: color-mix(in srgb, var(--brand-accent) 78%, #000 22%);
  --shine: color-mix(in srgb, var(--brand-accent) 60%, #fff 40%);
  display:inline-grid; place-items:center; padding:0; border:0; background:transparent;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22)); text-decoration:none;
}
.btn-3d-accent .btn-face{
  display:block; padding:.55rem 1rem; color:#0e0e0e; font-weight:700;
  background: var(--face); border:1px solid var(--edge); border-radius:.6rem;
  box-shadow: inset 0 1px 0 var(--shine), 0 3px 0 var(--edge), 0 10px 20px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-3d-accent:hover .btn-face{
  transform: translateY(1px); box-shadow: inset 0 1px 0 var(--shine), 0 1px 0 var(--edge), 0 8px 16px rgba(0,0,0,.16);
}
.btn-3d-accent:active .btn-face{
  transform: translateY(2px); box-shadow: inset 0 1px 0 var(--shine), 0 0 0 var(--edge), 0 4px 8px rgba(0,0,0,.12);
}

/* Disabled buttons */
.btn:disabled, .btn.disabled{ opacity:.55 !important; color:#66717a !important; }

/* =========================================================
   Hero • WOW Glass
   ========================================================= */
.hero3d-wrap,
.hero{
  position:relative; border-radius:1.5rem; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(13,168,179,.18), transparent 55%),
    linear-gradient(180deg, #103152, #0a1d34);
  box-shadow: var(--shadow-3d);
  color:#f6fbff;
}
.hero3d-bg{ position:absolute; inset:0; opacity:.25;
  background: url('/assets/img/hero-fvt.jpg') center/cover no-repeat; }
.hero3d-fade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,28,48,.18), rgba(12,28,48,.60)); }
.badge-soft{
  background: rgba(13,168,179,.14); color:#0b2a3e; border:1px solid var(--border);
}

/* =========================================================
   Cards • Glass • Hover
   ========================================================= */
.card-glass{
  background: var(--glass);
  color: var(--text-ink);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}
.card-hover{ transition: transform .15s ease, box-shadow .2s ease; }
.card-hover:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.16); }

/* KPI */
.kpi{
  border-left: 4px solid var(--brand-accent);
  background: #ffffff;
  color: var(--text-ink);
  border-radius: .9rem;
}

/* =========================================================
   Tables
   ========================================================= */
.table thead th{
  background:#f8fafc; color:#0f172a; border-bottom:1px solid #e6edf3;
}
.table-hover tbody tr:hover{ background-color: #f7fbff; }

/* =========================================================
   Gauges (Home WOW)
   ========================================================= */
.gauges-wrap{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
@media (max-width: 991.98px){ .gauges-wrap{ grid-template-columns:1fr; } }

.gauge{ padding:1rem; }
.gauge-header{ font-weight:800; letter-spacing:.2px; margin-bottom:.25rem; color:#ffffff; }
.gauge .gauge-svg{ position:relative; }
.gauge .gauge-svg svg{ width:100%; height:auto; display:block; }
.g-arc{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:10; stroke-linecap:round; }
.g-fill{
  stroke: linear-gradient(90deg, var(--brand-accent), var(--brand-teal));
  stroke-width:10; stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:157;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.g-ticks line{ stroke:rgba(255,255,255,.46); stroke-width:2; }
.g-needle{ transform-origin:60px 60px; transform: rotate(-120deg); transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.g-needle-bar{ fill:#fff; }
.g-cap{ fill:#000; opacity:.6; }
.g-value{ position:absolute; left:0; right:0; bottom:-.25rem; text-align:center; font-weight:800; color:#ffffff; }
.g-value .num{ font-size:1.25rem; }
.g-value .unit{ opacity:.9; }

/* =========================================================
   Stats Ribbon / Chips
   ========================================================= */
.stat-chip{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
  background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius:.8rem;
  color:#0e2234;
}
.stat-chip .n{ font-weight:800; font-size:1.05rem; }
.stat-chip .l{ font-size:.86rem; opacity:.9; }

/* =========================================================
   Metric Mini Bars (featured players)
   ========================================================= */
.metric-mini{
  display:flex; gap:.6rem; align-items:center; font-size:.92rem; color:#0f2236;
}
.metric-mini .bar{ width:110px; height:8px; border-radius:999px; position:relative; background:rgba(16,24,40,.10); overflow:hidden; }
.metric-mini .fill{ position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal)); }

/* =========================================================
   Badges / Status
   ========================================================= */
.badge-success{ background: linear-gradient(180deg, #2ea36f, #1e724d); color:#f2fffa; border:1px solid #195f40; }
.badge-info{ background: linear-gradient(180deg, #16b5c6, #0b7a87); color:#042329; border:1px solid #0a6c78; }
.badge-warn{ background: linear-gradient(180deg, #ffd35c, #f6b221); color:#1b1404; border:1px solid #d79a00; }

/* =========================================================
   Forms
   ========================================================= */
.form-control, .form-select{
  border-color: var(--border); color: var(--text-ink);
}
.form-control::placeholder{ color:#9fb0c2; }
.form-label{ color:#22364b; font-weight:600; }

/* =========================================================
   Utility
   ========================================================= */
.brand-mark{
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-teal));
  display: inline-block;
}

/* Legacy class compatibility (safe) */
.fvt-nav{ background: linear-gradient(90deg, var(--brand-primary), var(--bg-ink)); } /* gradient bar seen behind glass */
.link-accent{ color: var(--brand-accent); }
.link-accent:hover{ color:#e5b62e; }

/* =========================================================
   Responsive polish
   ========================================================= */
@media (max-width: 991.98px){
  .navbar .nav-link{ padding:.5rem .6rem; }
}
@media (max-width: 575.98px){
  .stat-chip{ flex: 1 1 auto; min-width: 46%; }
  .metric-mini .bar{ width: 88px; }
  .btn-3d-accent .btn-face{ padding:.5rem .9rem; }
}
/* ===========================
   Footer (Light Mode WOW)
   =========================== */
.fvt-footer{
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(13,168,179,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f9fc);
  border-top: 1px solid var(--border);
  color: var(--text-ink);
  position: relative;
  overflow: hidden;
}
.fvt-footer::before{
  content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal) 40%, var(--brand-accent) 80%);
  opacity:.8;
}
.footer-logo{
  display:block; border-radius:.4rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  background: #fff;
}
.footer-title{
  font-weight:800; letter-spacing:.1px; color: var(--text-ink);
}
.footer-sub{
  color: var(--text-muted);
}
.footer-head{
  font-weight:800; text-transform:uppercase; letter-spacing:.4px; font-size:.78rem;
  color:#0e2133; margin-bottom:.35rem;
}
.footer-links{
  margin:0; padding:0; list-style:none;
}
.footer-links li{ margin:.2rem 0; }
.footer-links a{
  color:#0b4b67; text-decoration:none;
}
.footer-links a:hover{
  color:#08364b; text-decoration:underline;
}
.footer-sep{
  border-color: var(--border);
}

/* Compact on small screens */
@media (max-width: 575.98px){
  .footer-title{ font-size:1rem; }
  .footer-sub{ font-size:.86rem; }
}
/* ===========================
   Responsive WOW Footer
   =========================== */
.fvt-footer{
  background:
    radial-gradient(1200px 400px at 90% 0%, rgba(13,168,179,.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f9fc);
  border-top: 1px solid var(--border);
  color: var(--text-ink);
  position: relative;
  overflow: hidden;
}

.fvt-footer::before{
  content:""; position:absolute; inset:0 auto auto 0;
  height:4px; width:100%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal), var(--brand-accent));
  opacity:.9;
}

.footer-logo{
  border-radius:.5rem;
  background:#fff;
  padding:.3rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

.footer-title{
  font-weight:800; font-size:1.2rem;
}
.footer-sub{
  color: var(--text-muted); font-size:.9rem;
}

.footer-head{
  font-weight:700; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.4px;
  color:#0e2133; margin-bottom:.35rem;
}

.footer-links{
  list-style:none; padding:0; margin:0;
}
.footer-links li{ margin:.2rem 0; }
.footer-links a{
  color:#0b4b67; text-decoration:none;
  transition:color .15s ease;
}
.footer-links a:hover{ color:#08364b; text-decoration:underline; }

.footer-sep{
  border-color:var(--border);
}

/* --- Mobile layout --- */
.footer-columns{
  flex-direction: row;
  flex-wrap: wrap;
}
.footer-col{
  min-width:140px;
}

/* Stacked for narrow screens */
@media (max-width: 575.98px){
  .fvt-footer{
    text-align:center;
  }
  .footer-top{
    align-items:center !important;
  }
  .footer-columns{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .footer-col{
    min-width:unset;
  }
  .footer-links{
    text-align:center;
  }
  .footer-title{
    font-size:1.05rem;
  }
  .footer-sub{
    font-size:.85rem;
  }
}
/* ===========================
   Footer WOW + Responsive + Themed
   =========================== */
.fvt-footer{
  background:
    radial-gradient(1200px 420px at 92% 0%, rgba(13,168,179,.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f9fc);
  border-top: 1px solid var(--border);
  color: var(--text-ink);
  position: relative;
  overflow: hidden;
}
.fvt-footer::before{
  content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-teal) 40%, var(--brand-accent) 80%);
  opacity:.9;
}
.footer-logo{
  border-radius:.55rem; background:#fff; padding:.25rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.footer-title{ font-weight:800; color:#0f2437; }
.footer-sub{ color: var(--text-muted); }

.footer-head{
  font-weight:800; text-transform:uppercase; letter-spacing:.4px; font-size:.78rem;
  color:#0e2133; margin-bottom:.4rem;
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:.22rem 0; }
.footer-links a{ color:#0b4b67; text-decoration:none; }
.footer-links a:hover{ color:#08364b; text-decoration:underline; }

.footer-sep{ border-color: var(--border); }

/* Social icons */
.footer-social .social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  color:#0e2133; background: rgba(16,24,40,.06);
  border:1px solid var(--border);
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.footer-social .social:hover{
  background: rgba(16,24,40,.10); color:#08364b; transform: translateY(-1px);
}

/* NCAA/NFHS guideline pills */
.pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem;
  border-radius:999px; font-size:.78rem; font-weight:700;
  border:1px solid var(--border); background: rgba(16,24,40,.06); color:#0e2133;
}
.pill-navy{
  background: linear-gradient(180deg, #103152, #0a1d34);
  color:#ffffff; border-color: rgba(255,255,255,.18);
}
.pill-teal{
  background: linear-gradient(180deg, var(--brand-teal), #0b7a87);
  color:#042329; border-color: #0a6c78;
}

/* Columns responsive */
.footer-columns{ display:flex; flex-wrap:wrap; }
.footer-col{ min-width: 180px; }

/* ===========================
   Floating Mobile CTA (<= 576px)
   =========================== */
.mobile-cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:1050;
  display:none; gap:.5rem; padding:.5rem .75rem;
  background: rgba(255,255,255,.96);
  border-top:1px solid var(--border);
  box-shadow: 0 -8px 20px rgba(0,0,0,.06);
}
.mobile-cta-bar .cta{
  flex:1 1 0; display:inline-flex; justify-content:center; align-items:center;
  height:42px; border-radius:.6rem; font-weight:800; text-decoration:none;
  color:#0b4b67; background: rgba(16,24,40,.06); border:1px solid var(--border);
}
.mobile-cta-bar .cta:hover{
  background: rgba(16,24,40,.10); color:#08364b;
}
.mobile-cta-bar .cta-primary{
  color:#15120e; background: var(--brand-accent); border:1px solid #c59b1e;
}
.mobile-cta-bar .cta-primary:hover{
  background:#e2b73b; color:#15120e;
}

/* Prevent content from hiding behind mobile CTA */
@media (max-width: 575.98px){
  .mobile-cta-bar{ display:flex; }
  main { padding-bottom: 76px; } /* breathing room for the bar */
}

/* Compact tweaks */
@media (max-width: 575.98px){
  .fvt-footer{ text-align:center; }
  .footer-columns{ flex-direction:column; align-items:center; }
  .footer-col{ min-width:unset; }
  .footer-title{ font-size:1.05rem; }
  .footer-sub{ font-size:.86rem; }
}
/* Scrollable legal panels (keeps pages short) */
.legal-scroll{
  max-height: 65vh; /* ~65% of viewport height */
  overflow: auto;
  scroll-behavior: smooth;
}
.legal-scroll::-webkit-scrollbar{ width: 10px; }
.legal-scroll::-webkit-scrollbar-track{ background: #eef3f7; border-radius: 8px; }
.legal-scroll::-webkit-scrollbar-thumb{ background: rgba(16,24,40,.25); border-radius: 8px; }
.legal-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(16,24,40,.35); }
/* Adjust selectors to your actual hero container */
.hub-hero, .faq-hero, .contact-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  /* existing gradient stays */
  background:
    radial-gradient(900px 360px at 92% -10%, rgba(13,168,179,.18), transparent 55%),
    linear-gradient(180deg, #103152, #0a1d34);
}

/* add a photo layer under the gradient */
.hub-hero::before,
.faq-hero::before,
.contact-hero::before{
  content:"";
  position:absolute; inset:0;
  background: url('/assets/img/fvt/hero-bg.webp') center/cover no-repeat;
  opacity:.28;                 /* keep the text readable */
  filter:saturate(1.1) contrast(1.05);
  z-index:0;
}

/* gradient veil on top of the photo for extra contrast */
.hub-hero::after,
.faq-hero::after,
.contact-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,23,52,.10), rgba(10,23,52,.42));
  z-index:1;
}

/* make textual content sit above the layers */
.hub-hero .hub-hero-content,
.faq-hero .faq-hero-content,
.contact-hero .contact-hero-content{ position:relative; z-index:2; }
/* positioning context for both sides */
.page-decor{
  position: relative;          /* stays with the page */
}

/* base style for both decorative <picture> */
.page-decor .decor{
  position: fixed;             /* stick to viewport sides while scrolling */
  top: 120px;                  /* lower/raise relative to your header height */
  width: min(28vw, 520px);     /* scale nicely with viewport */
  opacity: .18;                /* subtle by default */
  z-index: 0;                  /* behind content */
  pointer-events: none;        /* don't block clicks */
  filter: blur(0px) saturate(1.05);
}

.page-decor .decor img{
  display:block; width:100%; height:auto;
}

/* left art */
.page-decor .decor-left{ left: max(0px, (100vw - 1400px)/2 - 380px); }
/* right art */
.page-decor .decor-right{ right: max(0px, (100vw - 1400px)/2 - 380px); }

/* fade them on smaller screens to avoid crowding */
@media (max-width: 1200px){
  .page-decor .decor{ opacity:.12; width: min(32vw, 420px); }
}
@media (max-width: 992px){
  .page-decor .decor{ display:none; } /* hide on tablets/phones */
}

/* optional: brighten on hover sections */
.section-highlight:hover ~ .page-decor .decor{ opacity:.22; }
/* ===========================
   FIXES: Nav + Click Safety
   =========================== */

/* 1) Remove/override the bad legacy nav override that uses undefined --bg-ink */
.fvt-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1000;
}

/* 2) Make sure decorative layers NEVER block clicks */
.hero3d-bg,
.hero3d-fade,
.hero-bg,
.hero-fade,
.fvt-brand-stripe,
.page-decor .decor,
.hub-hero::before,
.hub-hero::after,
.faq-hero::before,
.faq-hero::after,
.contact-hero::before,
.contact-hero::after{
  pointer-events: none !important;
}

/* 3) Ensure stretched-link works predictably (Bootstrap expects positioned parent) */
.player-card,
.event-card,
.card-feature,
.panel-ink{
  position: relative;
}
/* === Fix: keep Bootstrap stretched-link inside its card only === */
.player-card,
.event-card {
  position: relative;   /* REQUIRED for stretched-link */
  overflow: hidden;     /* extra safety: prevents overlay bleed */
}

/* Optional: ensure the stretched overlay never exceeds the card */
.player-card .stretched-link::after,
.event-card .stretched-link::after {
  inset: 0;
}
/* ===== CRITICAL FIX: contain stretched-link overlays ===== */

/* Make cards proper positioning context */
.player-card,
.event-card,
.card-feature,
.panel-ink {
  position: relative !important;
  overflow: hidden; /* prevents overlay escape */
}

/* Ensure hero section sits above lower content */
.hero-wrap {
  position: relative;
  z-index: 10;
}

/* Make hero buttons highest click priority */
.hero-wrap .btn {
  position: relative;
  z-index: 20;
}