/* Theme */
:root{
  --cysa-navy:#1c4267;
  --cysa-teal:#3b7e99;
  --cysa-gold:#EDA541;
  --cysa-yellow:#FABF01;
  --ink:#0f2a3f;
  --bg:#ffffff;
  --radius-lg:1rem;
  --shadow-lg:0 10px 30px rgba(0,0,0,.15);
}

html{ scroll-behavior:smooth; }
body{ font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;} 

/* Helpers */
.text-navy{ color:var(--cysa-navy)!important; }
.text-gold{ color:var(--cysa-gold)!important; }
.bg-navy{ background:var(--cysa-navy)!important; }
.bg-teal{ background:var(--cysa-teal)!important; }
.bg-gradient-navy-teal{
  background: linear-gradient(135deg, var(--cysa-navy) 0%, var(--cysa-teal) 100%) !important;
}
.btn-navy{ background:var(--cysa-navy); color:#fff; border:0; }
.btn-navy:hover{ filter:brightness(1.05); }
.btn-gold{ background:var(--cysa-gold); color:#1b1b1b; border:0; }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-yellow{ background:var(--cysa-yellow); color:#1b1b1b; border:0; }
.btn-outline-navy{ border:2px solid var(--cysa-navy); color:var(--cysa-navy); }
.btn-outline-navy:hover{ background:var(--cysa-navy); color:#fff; }
.link-gold{ color:var(--cysa-gold); text-decoration:underline; }
.link-gold:hover{ opacity:.9; }

.rounded-4{ border-radius: var(--radius-lg)!important; }
.shadow-xl{ box-shadow: var(--shadow-lg); }
.object-cover{ object-fit: cover; }

/* Hero */
/* ---------- HERO (image background) ---------- */
#hero{
  /* height & layout */
  min-height: clamp(420px, 72vh, 760px);
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate; /* ensure overlay stacks correctly */
}

/* Background image + gradient overlay */
#hero::before{
  content:"";
  position:absolute; inset:0;
  z-index: -1;
  background-image:
    linear-gradient( to bottom right, rgba(28,66,103,.72), rgba(59,126,153,.55) ),
    var(--hero-bg);
  background-size: cover;
  background-position: center calc(50% + var(--hero-y, 0px));
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.02);
}

/* Use tighter mobile crop if provided */
@media (max-width: 767.98px){
  #hero::before{
    background-image:
      linear-gradient( to bottom right, rgba(28,66,103,.75), rgba(59,126,153,.55) ),
      var(--hero-bg-mobile, var(--hero-bg));
  }
}

/* Keep your existing decorative wave looking nice on top of image */
.shape-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:60px; pointer-events:none;
  background: radial-gradient(150% 100% at 50% 0%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%);
}

/* Optional: subtle drop-shadow under header text for readability on bright photos */
#hero h1, #hero .lead{ text-shadow: 0 2px 20px rgba(0,0,0,.25); }

#hero { justify-items: center; }

/* Carousel */
#announcements .carousel-caption{
  bottom: 1.25rem; left:0; right:0;
}
.bg-blur{
  backdrop-filter: blur(6px) saturate(120%);
  background-color: rgba(0,0,0,.35);
  padding: 1rem 1.5rem; border-radius: .75rem;
}

/* Action cards */
.card-action{
  border:0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-action:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.card-action .card-img-top{ height: 200px; object-fit: cover; }

/* Stats */
.stat{ background:#fff; border-radius: 14px; padding: 1rem; box-shadow: var(--shadow-lg); }
.stat-number{ font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--cysa-navy); line-height:1; }
.stat-label{ font-weight: 600; color:#333; opacity:.85; }

/* Notices */
.notice-title{ font-weight:700; color:var(--cysa-navy); margin-bottom:.5rem; }

/* Events */
.event-card{ border:2px solid rgba(28,66,103,.1); border-radius: var(--radius-lg); overflow:hidden; }
.event-card .card-img{ border-right: 0; }
.icon-list{ list-style:none; padding-left:0; margin:0 0 1rem; }
.icon-list li{ margin:.25rem 0; }
.icon-list i{ width:1.25rem; text-align:center; color:var(--cysa-gold); }

/* Club tiles (modal) */
.club-tile{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:2px solid rgba(28,66,103,.15); border-radius: .9rem;
  padding:.9rem 1rem; text-decoration:none; color:var(--ink);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.club-tile:hover{ transform: translateY(-2px); border-color: var(--cysa-gold); background: #fff7e9; }
.club-name{ font-weight:700; }
.club-cta{ background:var(--cysa-gold); color:#1b1b1b; padding:.25rem .6rem; border-radius: 999px; font-weight:700; font-size:.9rem; }

/* Sticky CTA */
.sticky-cta{
  position: fixed; left:50%; transform:translateX(-50%);
  bottom: 14px; z-index: 1040; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  width: min(720px, 92%);
}
.sticky-cta.show{ opacity:1; pointer-events:auto; transform: translate(-50%, 0); }
.sticky-cta .rounded-pill{ border-radius: 999px!important; }

/* Animations (with reduced motion respect) */
@media (prefers-reduced-motion: no-preference){
  .animate-in{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .animate-in.show{ opacity:1; transform:none; }
  .delay-1{ transition-delay: .08s; }
  .delay-2{ transition-delay: .16s; }
  .delay-3{ transition-delay: .24s; }
}

/* Accessibility tweaks */
.carousel-control-prev, .carousel-control-next { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.btn:focus-visible, .club-tile:focus-visible { outline: 3px solid var(--cysa-yellow); outline-offset: 2px; }


/* ---------- STATS / IMPACT SECTION ---------- */
.stats-section{
  background: linear-gradient(135deg, var(--cysa-navy) 0%, var(--cysa-teal) 100%);
  position: relative;
  isolation: isolate;
}

/* Soccer field lines pattern */
.stats-field-pattern{
  position: absolute; inset: 0; z-index: -1; opacity: .16;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 88px,
      rgba(255,255,255,.5) 88px, rgba(255,255,255,.5) 90px
    ),
    radial-gradient(1200px 300px at 50% 120%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* Cards */
.stat-card{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1rem;
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.stat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  background: rgba(255,255,255,.12);
}

/* Icon circle */
.stat-icon{
  width: 52px; height: 52px; margin: 0 auto .5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cysa-gold);
  color: #1b1b1b;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  font-size: 1.2rem;
}

/* Numbers & labels */
.stat-number{
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-size: clamp(28px, 6vw, 44px);
}
.stat-label{
  margin-top: .25rem;
  color: #f3f7fb;
  font-weight: 600;
  font-size: clamp(13px, 2.2vw, 16px);
  opacity: .95;
}

/* Section note */
.stats-note{ text-align:center; }

/* Spacing tweaks on very small screens */
@media (max-width: 575.98px){
  .stat-card{ padding: .9rem .75rem; }
  .stat-icon{ width: 46px; height: 46px; font-size: 1.05rem; }
}


/* Pin CTA to bottom & polish cards */
.card-action{
  display: grid;                  /* header image, body grows, footer fixed */
  grid-template-rows: auto 1fr auto;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-action:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }

.card-action .card-img-top{ height: 200px; object-fit: cover; }
@media (min-width: 768px){ .card-action .card-img-top{ height: 220px; } }

.card-action .card-body{ padding: 1rem 1rem 0; display: flex; flex-direction: column; gap: .25rem; }
.card-action .card-title{ margin-bottom: .25rem; }

.card-cta{
  background: linear-gradient(180deg, rgba(28,66,103,.04), rgba(28,66,103,.08));
  border-top: 1px solid rgba(28,66,103,.12);
  padding: 0.9rem 1rem 1.15rem;
}

/* Gorgeous, tappable buttons */
.btn-cta{
  border-radius: 999px;
  padding: .75rem 1rem;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn-cta .icon{ transition: transform .12s ease; }
.btn-cta:hover .icon{ transform: translateX(3px); }

.btn-cta--navy{ background: var(--cysa-navy); color: #fff; border: 0; }
.btn-cta--navy:hover{ filter: brightness(1.05); }

.btn-cta--outline{
  border: 2px solid var(--cysa-navy);
  color: var(--cysa-navy);
  background: #fff;
}
.btn-cta--outline:hover{ background: var(--cysa-navy); color: #fff; }