/* -----------------------------
       Design System
    ------------------------------*/
    :root {
      --blue:#183066;      /* brand blue */
      --maroon:#800000;    /* brand maroon */
      --orange:#ff9c00;    /* accent */
      --bg:#f6f7fb;        /* page background */
      --card:#ffffff;      /* card background */
      --text:#1e2a44;      /* main text */
      --muted:#5b6a8a;     /* muted text */
      --shadow:0 8px 24px rgba(0,0,0,.12);
      --radius:14px;
      --max:1200px;

      /* Fluid type scale */
      --step--1: clamp(.88rem, .85rem + .1vw, 1rem);
      --step-0: clamp(1rem, .95rem + .3vw, 1.125rem);
      --step-1: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
      --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
      --step-3: clamp(2rem, 1.6rem + 1.8vw, 2.6rem);
      --step-4: clamp(2.6rem, 2rem + 2.4vw, 3.4rem);
    }

    /* Dark theme */
    [data-theme="dark"] {
      --bg:#0f1424;
      --card:#121a30;
      --text:#e7eefc;
      --muted:#9ab0d9;
      --shadow:0 12px 30px rgba(0,0,0,.45);
    }

    /* Base */
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:var(--bg); color:var(--text); line-height:1.55;
      text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%; height:auto; display:block}
    a{color:inherit}
    .container{max-width:var(--max); margin-inline:auto; padding-inline: clamp(16px, 2vw, 32px);}    

/* -----------------------------
   Header & Navigation (Final)
------------------------------*/
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(6px);
}

/* When the mobile drawer is open, remove header glass */
body.mobile-drawer-open .site-header{
  backdrop-filter: none !important;
}

/* Full-width bar strip */
.site-header__bar{
  background: color-mix(in oklab, var(--blue) 88%, #000 0%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Inner row */
.header-inner{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  min-height: 72px;
}

/* Brand (logo only now) */
.brand{ display: flex; align-items: center; margin-right: 8px; }
.brand img{ height: 64px }

/* Desktop nav */
.nav{
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 0;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:var(--step-0);
  position:relative;
  text-align:center;
  padding-block: 12px;
  padding-inline: 10px;
}
.nav a::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px; bottom:6px;
  height:2px; background:transparent;
  transition:.2s ease; transform:scaleX(.4);
  transform-origin:center;
}
.nav a:hover::after{
  background:var(--orange);
  transform:scaleX(1);
}
.nav .cta{
  background:var(--orange);
  color:#1b1200;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow);
  align-self:center;
}

/* Right-side controls */
.header-actions{ display:flex; align-items:center; gap:14px; }

/* Mobile */
.menu-btn{ display:none; background:none; border:0; color:#fff; font-size:1.8rem; cursor:pointer }

/* ================================
   MOBILE MENU — UPDATED
   ================================ */
@media (max-width: 880px){
  .nav{ display:none; }
  .menu-btn{ display:block; }

  .drawer{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(92vw, 360px);
    background: var(--orange) !important;
    color: #000 !important;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -16px 0 32px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    backdrop-filter: none !important;
    z-index: 10000; /* above header */
  }
  .drawer.open{ transform: translateX(0); }

  .drawer__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px;
    background: color-mix(in oklab, var(--orange) 90%, #fff 10%);
    color:#000; border-bottom:1px solid rgba(0,0,0,.2);
  }
  .drawer a{
    padding:16px 22px; text-decoration:none; color:#000 !important; font-weight:700;
    background:transparent; border-bottom:1px solid rgba(0,0,0,.12);
  }
  .drawer a:hover, .drawer a:focus, .drawer a:active{
    background: rgba(0,0,0,.08);
  }

  /* Fix for mobile hero overlap */
  .hero__content {
    position: absolute;
    top: 80px !important;
    bottom: auto !important;
    left: 0; right: 0;
    inset: unset !important;
    padding-inline: 18px;
  }
  .slides { height: 80vh !important; }
  .quick { margin-top: clamp(20px, 14vw, 150px) !important; }
}

/* -----------------------------
   Hero (Carousel)
------------------------------*/
.hero{ position:relative; isolation:isolate; }
.slides{ position:relative; height: clamp(60vh, 68vh, 78vh); overflow:hidden; }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); opacity:0; transition: opacity .8s ease, transform 8s ease }
.slide.active{ opacity:1; transform:scale(1) }
.slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)); }

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;        /* desktop positioning */
  color: #fff;
  text-align: center;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* mobile fix */
@media (max-width: 600px) {
  .hero__content {
    bottom: 3%;      /* move content LOWER so the top gap is smaller */
    padding: 0 14px;
  }

  .hero__kicker {
    margin-top: 0;   /* remove default margin */
    margin-bottom: 6px;
    letter-spacing: .1em;
  }

  h1 {
    margin-top: 8px; /* prevent excessive gap above kicker */
  }
}
.hero__kicker{ letter-spacing:.15em; text-transform:uppercase; opacity:.9; font-size:var(--step--1) }
.hero h1{ font-size:var(--step-4); margin:.4rem 0 .8rem; line-height:1.05; text-shadow:0 6px 28px rgba(0,0,0,.35) }
.hero p{ font-size:var(--step-1); max-width: 850px; margin-inline:auto; opacity:.95 }
.hero .actions{ margin-top:1.2rem; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:.8rem 1.2rem; border-radius:12px; text-decoration:none; font-weight:700 }
.btn--primary{ background:var(--orange); color:#1b1200 }
.btn--ghost{ border:2px solid #fff; color:#fff }

.dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; gap:10px; justify-content:center; z-index:2 }
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer; border:0 }
.dot.active{ background:var(--orange) }

/* -----------------------------
   Quick Info
------------------------------*/
.quick{ margin-top:-32px; position:relative; z-index:3 }
.quick__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px }
.quick__card{ background:var(--card); border-radius:var(--radius); padding:18px 18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; transition: transform .2s ease, box-shadow .2s ease }
.quick__card:hover{ transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,0,0,.18) }
.quick__icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: color-mix(in oklab, var(--orange) 85%, #fff 15%) }
.quick__title{ font-weight:800 }
.quick__desc{ color:var(--muted); font-size:var(--step--1) }

/* -----------------------------
   Sections / Cards Grid
------------------------------*/
.section{ padding-block: clamp(40px, 6vw, 80px) }
.section__head{ text-align:center; margin-bottom: clamp(20px, 3vw, 36px) }
.section__kicker{ color:var(--maroon); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size: var(--step--1) }
.section h2{ font-size: var(--step-3); margin:.2rem 0 }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px) }
.card{ background:var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column }
.card__media {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card__body{ padding: 18px 18px 22px }
.card h3{ margin:.2rem 0 .4rem; color: var(--blue) }
.card p{ color: var(--muted); font-size: var(--step-0) }
.card a.btn{ align-self:flex-start; margin-top:auto }

/* Facebook plugin centred, but NOT full width on desktop */
.card--facebook {
  box-sizing: border-box;
  max-width: 580px;
  width: 100%;
  margin-inline: auto;
}

.card--facebook .fb-page {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 420px;
}



#news.section {
  padding-top: clamp(5px, 2vw, 10px);
}



/* -----------------------------
   Footer
------------------------------*/
footer {
  background: color-mix(in oklab, #183066 92%, #000 8%);
  color: #fff;
  padding: 40px 0 28px;
  margin-top: 40px;
}
.footer__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px }
.footer__col h4{ margin:0 0 10px; font-size: var(--step-1) }
.legal{ margin-top:24px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; font-size: var(--step--1); opacity:.85 }
.social a{ display:inline-grid; place-items:center; width:40px; height:40px; margin-right:8px; background:#ffffff14; border-radius:10px; color:#fff; text-decoration:none }

/* Brand & toggle misc */
.brand img{ height: 64px; }
.brand{ display:flex; align-items:center; margin-right:24px; }

.theme-toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; color:#fff; font-weight:600; }
.theme-toggle input{ display:none; }
.theme-toggle .slider{
  width:46px; height:24px; background:#fff; border-radius:999px; position:relative; transition: background .25s ease; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
}
.theme-toggle .slider::after{
  content:""; width:18px; height:18px; background:var(--orange); border-radius:50%; position:absolute; top:3px; left:4px; transition:left .25s ease;
}
.theme-toggle input:checked + .slider::after{ left: calc(100% - 22px); }

/* 🔶 Dark mode heading color */
[data-theme="dark"] .card h3{
  color: var(--text);
}

.logo {
  width: 100%;
  height: auto;
  max-width: 300px;   /* optional: limits how large it gets on desktop */
  display: block;
  margin: 0 auto;      /* centers it */
}

/* Center the facebook block inside the card */
.facebook-wrap {
  align-items: flex-start; /* left-align text inside the wrapper */
}

/* Prevent Facebook iframe from stretching oddly */
.fb-page {
  margin: 0 auto;
}

.card.card--facebook .card__body {
  text-align: left;
}

#female-hub.section {
  padding-top: clamp(5px, 2vw, 10px);
}

/* -----------------------------
   Vertical Rhythm & Spacing Fixes
------------------------------*/

/* 1) Reset inner element margins for consistent rhythm */
:where(h1, h2, h3, h4, p){ 
  margin-block: 0; 
}
:where(.section__head > * + *){
  margin-top: clamp(6px, 1.2vw, 12px);
}
:where(.card__body > * + *){
  margin-top: clamp(6px, 1.4vw, 14px);
}

/* Replace <br> gaps: give logos and media controlled spacing */
.logo { 
  margin-block: 8px 12px; 
}
audio, iframe, .fb-page { 
  display: block; 
  margin-top: clamp(8px, 1.6vw, 16px);
}

/* 2) Section spacing that is consistent but adaptable */
.section{ 
  padding-block: clamp(36px, 5.5vw, 80px); 
}

/* Reduce top padding for specific sections (same intent as #news earlier) */
#news.section,
#social.section {
  padding-top: clamp(8px, 2vw, 16px);
}

/* If a section follows another section, reduce the top padding slightly
   so we avoid compounding whitespace on long pages */
.section + .section{
  padding-top: clamp(24px, 4vw, 56px);
}

/* 3) “Quick” pull-up only on wider screens; neutral on mobile */
.quick{ 
  margin-top: 0;
}
@media (min-width: 900px){
  .quick{ margin-top: -22px; }
}

/* 4) Card media: prevent accidental extra space and ensure crisp top radii */
.card__media{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* 5) Facebook card sizing: keep centred but avoid oversized heights */
.card--facebook{
  max-width: 580px;
  width: 100%;
  margin-inline: auto;
}
.card--facebook .fb-page{
  max-width: 420px;
  margin-inline: auto;
}

/* 6) YouTube container ensures consistent aspect and no overflow */
.embed-16x9{
  position: relative;
  padding-top: 56.25%;
}
.embed-16x9 > iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* 7) Mobile hero text nudge — prevent unexpected big gap on small screens */
@media (max-width: 880px){
  .hero__content {
    top: 72px !important;
  }
  .slides { height: 80vh !important; }
}

/* 8) Footer tweaks: avoid cramped feel with consistent spacing */
.footer__col p + .social{ 
  margin-top: 10px; 
}
.legal{ 
  margin-top: 20px; 
}

/* Match Facebook & Twitter card widths */
.card--facebook,
.card--twitter {
  max-width: 580px;
  width: 100%;
  margin-inline: auto;
}

/* Optional: match inner content width too */
.card--facebook .fb-page,
.card--twitter iframe {
  max-width: 420px;
  margin-inline: auto;
}

/* -----------------------------------------
   SOCIAL SECTION — PERFECT WIDTH + HEIGHT
------------------------------------------*/

/* Ensure both social cards are identical */
.social-card {
  max-width: 580px;
  width: 100%;
  margin-inline: auto;
}

/* Inner embed content width */
.social-card .fb-page,
.social-card iframe {
  width: 100% !important;
  max-width: 420px;
  margin-inline: auto;
  display: block;
  border: 0;
}

/* Default desktop height */
.social-card .fb-page,
.twitter-embed {
  height: 900px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .social-card .fb-page,
  .twitter-embed {
    height: 720px !important;
  }
}

/* Medium mobile */
@media (max-width: 768px) {
  .social-card .fb-page,
  .twitter-embed {
    height: 540px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .social-card .fb-page,
  .twitter-embed {
    height: 400px !important;
  }
}

/* Match vertical rhythm with rest of site */
.social-card .card__body > * + * {
  margin-top: clamp(10px, 2vw, 16px);
}

/* Improve grid spacing for this section */
.social-grid {
  gap: clamp(20px, 3vw, 32px);
}


/* REAL mobile fix — forces hero text near the top on all phones */
@media (max-width: 880px) {
  .hero__content {
    position: absolute;
    top: 20px !important;   /* was 72px — now much higher */
    bottom: auto !important;
    left: 0;
    right: 0;
    inset: unset !important;
    padding-inline: 16px;
  }

  .hero h1 {
    margin-top: 6px;
  }

  .hero__kicker {
    margin-bottom: 4px;
  }
}

/* ============================================================
   HERO — CLEAN, MODERN, CONFLICT‑FREE VERSION
   ============================================================ */

/* ----- Container ----- */
.hero {
  position: relative;
  isolation: isolate;
}

.slides {
  position: relative;
  height: clamp(60vh, 72vh, 78vh);
  overflow: hidden;
}

/* ----- Slides ----- */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  opacity: 0;
  transition: opacity .8s ease, transform 10s ease;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.30),
    rgba(0,0,0,.55)
  );
}

/* ============================================================
   HERO CONTENT — DESKTOP
   ============================================================ */
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Typography */
.hero__kicker {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: .4rem;
}

.hero h1 {
  font-size: var(--step-4);
  line-height: 1.05;
  margin: .3rem 0 .7rem;
  text-shadow: 0 6px 28px rgba(0,0,0,.35);
}

.hero p {
  font-size: var(--step-1);
  max-width: 850px;
  opacity: .95;
}

/* Buttons */
.actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   DOTS
   ============================================================ */
.dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  z-index: 2;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  border: 0;
}

.dot.active {
  background: var(--orange);
}

/* ============================================================
   MOBILE — OPTION B (Comfortable gap below header)
   ============================================================ */
@media (max-width: 880px) {

  .slides {
    height: 82vh;
  }

  .hero__content {
    position: absolute;
    top: 180px;        /* ★ Option B comfortable spacing */
    bottom: auto;
    padding-inline: 16px;
  }

  .hero h1 {
    font-size: var(--step-3);
    margin-top: 8px;
  }

  .hero__kicker {
    font-size: var(--step--1);
    margin-bottom: 4px;
    letter-spacing: .12em;
  }

  .hero p {
    font-size: var(--step-0);
    margin-top: 12px;
  }

  .actions {
    margin-top: 1rem;
  }
}

/* Desktop dots spacing fix */
@media (min-width: 900px) {
  .dots {
    bottom: 32px; /* previously 18px */
  }
}

/* ============================================================
   FIX 1 — Desktop dots no longer overlap Quick Info
   ============================================================ */
@media (min-width: 900px) {
  .dots {
    bottom: 32px; /* increased from 18px */
  }
}

/* ============================================================
   FIX 2 — Mobile hero kicker lowered (Option B improved)
   ============================================================ */
@media (max-width: 880px) {
  .hero__content {
    top: 130px;   /* was 100px — now gives better spacing */
  }
}

/* -----------------------------------------
   FINAL MOBILE HERO OVERRIDE (GUARANTEED)
   ----------------------------------------- */
@media (max-width: 880px) {
  .hero .hero__content {
    position: absolute !important;
    top: 60px !important;     /* Option B final value */
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* -----------------------------------------
   FINAL MOBILE HERO OVERRIDE (single source)
   ----------------------------------------- */
:root {
  --hero-mobile-top: 60px; /* Adjust here if you change your mind later */
}

@media (max-width: 880px) {
  .hero .hero__content {
    position: absolute !important;
    top: var(--hero-mobile-top) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@supports (top: max(0px)) {
  @media (max-width: 880px) {
    .hero .hero__content {
      top: max(var(--hero-mobile-top), calc(env(safe-area-inset-top) + 16px)) !important;
    }
  }
}

@media (max-width: 600px) {
  .wildcats-logo {
    width: 80% !important;
  }
}

.wildcats-logo {
  width: 80%;          /* great for mobile */
  max-width: 280px;    /* keeps desktop under control */
  height: auto;
}

@media (min-width: 768px) {
  .wildcats-logo {
    width: 45%;        /* optional: tighter on desktop */
    max-width: 350px;  /* adjust this to taste */
  }
}

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

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.card__body {
  padding: 1.5rem;
}



.card-img {
  width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}

ul.list {
  padding-left: 1.2rem;
  margin: 0;
}

ul.list li {
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.rounded {
  border-radius: 12px;
}

.card-img {
  border-radius: 12px;
  display: block;
  width: 100%;
}

/* Make the wrapper responsive */
.sk-twitter-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Force the iframe to resize properly */
.sk-twitter-wrapper iframe {
    width: 100% !important;     /* full width on all devices */
    max-width: 100% !important;
}

/* Optional: If you ONLY want to override width on mobile */
@media (max-width: 767px) {
    .sk-twitter-wrapper iframe {
        width: 100% !important;
    }
}