/* =====================================================================
   Jila Cricket Association Janjgir Champa — Site Styles
   Theme: green / dark blue / gold, professional sports-association look
   ===================================================================== */

:root{
  --jca-green: #0f6b3f;
  --jca-green-dark: #0a4a2b;
  --jca-blue: #0b2545;
  --jca-blue-light: #13366b;
  --jca-gold: #d4a72c;
  --jca-gold-light: #f0cd6b;
  --jca-bg: #ffffff;
  --jca-bg-soft: #f6f8f7;
  --jca-text: #1c2a24;
  --jca-text-muted: #5b6b64;
  --jca-radius: 14px;
  --jca-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  --jca-shadow-hover: 0 16px 40px rgba(11, 37, 69, 0.14);
  --transition-fast: 0.25s ease;
  --transition-med: 0.6s ease;
}

*{ box-sizing: border-box; }

body{
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--jca-text);
  background: var(--jca-bg);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--jca-blue);
}

a{ text-decoration:none; }

.section-heading{ text-align:center; max-width:720px; margin:0 auto 3rem; }
.section-heading .eyebrow{
  color: var(--jca-gold); text-transform: uppercase; letter-spacing: 2px;
  font-size: .8rem; font-weight: 700;
}
.section-heading h2{ margin: .3rem 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.section-heading p{ color: var(--jca-text-muted); }

.section{ padding: 5rem 0; }
.section-soft{ background: var(--jca-bg-soft); }

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.navbar-main{
  background: rgba(11, 37, 69, 0.0);
  padding: 1.1rem 0;
  transition: background var(--transition-med), padding var(--transition-med), box-shadow var(--transition-med);
  z-index: 1050;
}
.navbar-main.scrolled{
  background: rgba(11, 37, 69, 0.97);
  padding: .6rem 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  backdrop-filter: blur(6px);
}
.navbar-main .nav-link{
  color: #eef2f0 !important;
  font-weight: 600;
  position: relative;
  margin: 0 .3rem;
  padding: .4rem .2rem !important;
  transition: color var(--transition-fast);
}
.navbar-main .nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--jca-gold); transition: width var(--transition-fast);
}
.navbar-main .nav-link:hover::after,
.navbar-main .nav-link.active::after{ width:100%; }
.navbar-main .nav-link:hover{ color: var(--jca-gold-light) !important; }
.nav-cta{
  background: var(--jca-gold); color: var(--jca-blue) !important;
  border-radius: 30px; padding: .5rem 1.1rem !important; margin-left:.5rem;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--jca-gold-light); }

.brand-logo{ height: 44px; width:44px; object-fit:contain; border-radius:50%; background:#fff; padding:3px; }
.brand-logo-fallback{
  height:44px;width:44px;display:flex;align-items:center;justify-content:center;
  background: var(--jca-gold); color: var(--jca-blue); border-radius:50%; font-size:1.3rem;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ color:#fff; font-weight:700; font-size:1rem; }
.brand-sub{ color: var(--jca-gold-light); font-size:.7rem; font-weight:500; }

.dropdown-menu{ border:none; box-shadow: var(--jca-shadow); border-radius:10px; overflow:hidden; }
.dropdown-item:hover{ background: var(--jca-bg-soft); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(9,25,48,.86), rgba(10,36,26,.9)),
              url('https://images.unsplash.com/photo-1531415074968-036ba1b575da?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero::before{ /* subtle decorative pattern */
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(212,167,44,.12), transparent 40%),
              radial-gradient(circle at 85% 75%, rgba(15,107,63,.25), transparent 45%);
  pointer-events:none;
}
.hero-particle{
  position:absolute; border-radius:50%; background: rgba(212,167,44,.35);
  pointer-events:none; animation: floatY 8s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-30px) translateX(10px); }
}
.hero-content{ position:relative; z-index:2; text-align:center; margin:0 auto; }
.hero-logo{
  width:96px; height:96px; border-radius:50%; background:#fff; padding:8px; object-fit:contain;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity:0; transform: scale(.6);
  animation: heroLogoIn .8s ease forwards .1s;
}
.hero-eyebrow{
  opacity:0; transform: translateY(14px);
  animation: heroUp .7s ease forwards .35s;
  color: var(--jca-gold-light); letter-spacing:3px; text-transform:uppercase; font-weight:700; font-size:.85rem;
}
.hero-title{
  opacity:0; transform: translateY(24px);
  animation: heroUp .8s ease forwards .55s;
  font-size: clamp(2rem, 5vw, 3.6rem); font-weight:800; color:#fff; margin:.5rem 0;
}
.hero-subtitle{
  opacity:0; transform: translateY(16px);
  animation: heroUp .8s ease forwards .8s;
  max-width:650px; margin:0 auto 1.8rem; color:#e7ede9; font-size:1.05rem;
}
.hero-actions{
  opacity:0; transform: translateY(12px);
  animation: heroUp .7s ease forwards 1.05s;
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
@keyframes heroUp{ to{ opacity:1; transform:none; } }
@keyframes heroLogoIn{ to{ opacity:1; transform:scale(1); } }

.btn-jca-primary{
  background: var(--jca-gold); color: var(--jca-blue); font-weight:700; border:none;
  padding:.8rem 1.8rem; border-radius:30px; transition: all var(--transition-fast);
}
.btn-jca-primary:hover{ background:#fff; transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.25); color: var(--jca-blue-dark); }
.btn-jca-outline{
  background: transparent; color:#fff; border:2px solid rgba(255,255,255,.6); font-weight:600;
  padding:.75rem 1.7rem; border-radius:30px; transition: all var(--transition-fast);
}
.btn-jca-outline:hover{ background:#fff; color:var(--jca-blue); border-color:#fff; transform: translateY(-3px); }

.hero-scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.8; animation: bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ---------------------------------------------------------------------
   Stats counters
   --------------------------------------------------------------------- */
.stats-section{ background: linear-gradient(120deg, var(--jca-blue), var(--jca-blue-light)); color:#fff; }
.stat-card{ text-align:center; padding: 1.5rem; }
.stat-number{ font-size: 2.6rem; font-weight:800; color: var(--jca-gold-light); }
.stat-label{ color:#dbe4de; font-weight:500; margin-top:.3rem; }

/* ---------------------------------------------------------------------
   Cards: notices, matches, members, gallery, links, forms
   --------------------------------------------------------------------- */
.jca-card{
  background:#fff; border-radius: var(--jca-radius); box-shadow: var(--jca-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  height:100%; overflow:hidden; border: 1px solid rgba(11,37,69,.05);
}
.jca-card:hover{ transform: translateY(-6px); box-shadow: var(--jca-shadow-hover); }

.notice-card{ padding:1.4rem; position:relative; }
.notice-card.featured{ border-left:4px solid var(--jca-gold); }
.notice-badge{ font-size:.7rem; padding:.25rem .6rem; border-radius:20px; font-weight:700; }
.badge-category{ background: rgba(15,107,63,.1); color: var(--jca-green); }

.match-card{ padding:1.3rem; }
.live-badge{
  background:#e0342c; color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .6rem;
  border-radius:20px; display:inline-flex; align-items:center; gap:.4rem;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation: pulse 1.4s infinite; }
@keyframes pulse{ 0%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.4);} 100%{opacity:1; transform:scale(1);} }
.team-row{ display:flex; align-items:center; justify-content:space-between; margin:.6rem 0; }
.team-logo{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--jca-bg-soft); transition: transform var(--transition-fast); }
.match-card:hover .team-logo{ transform: scale(1.08); }

.member-card{ text-align:center; padding: 1.6rem 1.2rem; }
.member-photo-wrap{ width:110px; height:110px; margin:0 auto 1rem; border-radius:50%; overflow:hidden; border:4px solid var(--jca-bg-soft); }
.member-photo-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.member-card:hover .member-photo-wrap img{ transform: scale(1.12); }
.member-name{ font-size:1.05rem; margin-bottom:.1rem; }
.member-role{ color: var(--jca-gold); font-weight:600; font-size:.85rem; }

.gallery-item{ position:relative; border-radius: var(--jca-radius); overflow:hidden; aspect-ratio: 4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.gallery-item:hover img{ transform: scale(1.15); }
.gallery-overlay{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(11,37,69,.85), transparent 60%);
  display:flex; align-items:flex-end; padding:1rem; opacity:0; transition: opacity var(--transition-fast);
  color:#fff; font-weight:600;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; color: var(--jca-green);
  font-size:1.4rem; transition: transform var(--transition-fast);
}
.gallery-item:hover .play-badge{ transform: translate(-50%,-50%) scale(1.15); }

.link-card{ padding:1.2rem; display:flex; align-items:center; gap:1rem; }
.link-icon{
  width:48px; height:48px; border-radius:12px; background: rgba(15,107,63,.1); color: var(--jca-green);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
  transition: transform var(--transition-fast);
}
.link-card:hover .link-icon{ transform: rotate(-8deg) scale(1.1); }

.form-card{ padding:1.4rem; }
.status-badge-open{ background: rgba(15,107,63,.12); color: var(--jca-green); }
.status-badge-closed{ background: rgba(224,52,44,.12); color:#e0342c; }

/* ---------------------------------------------------------------------
   Back to top
   --------------------------------------------------------------------- */
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%;
  background: var(--jca-green); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--jca-shadow); opacity:0; visibility:hidden; transform: translateY(20px);
  transition: all var(--transition-fast); z-index:1000;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--jca-green-dark); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{ background: var(--jca-blue); color:#dbe4de; padding: 4rem 0 1.5rem; }
.site-footer h5, .site-footer h6{ color:#fff; }
.footer-affiliated{ color: var(--jca-gold-light); font-size:.9rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.5rem; }
.footer-links a{ color:#c6d2cc; transition: color var(--transition-fast); }
.footer-links a:hover{ color: var(--jca-gold-light); padding-left:4px; }
.footer-contact{ list-style:none; padding:0; }
.footer-contact li{ margin-bottom:.6rem; color:#c6d2cc; }
.social-icons{ display:flex; gap:.7rem; margin-top:1rem; }
.social-icons a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; transition: all var(--transition-fast);
}
.social-icons a:hover{ background: var(--jca-gold); color: var(--jca-blue); transform: translateY(-3px); }
.site-footer hr{ border-color: rgba(255,255,255,.1); margin: 2rem 0 1rem; }
.copyright{ text-align:center; font-size:.85rem; color:#a9b7b0; }

/* ---------------------------------------------------------------------
   Misc components
   --------------------------------------------------------------------- */
.page-hero{
  background: linear-gradient(120deg, var(--jca-blue), var(--jca-green-dark));
  color:#fff; padding: 7rem 0 3.5rem; text-align:center;
}
.page-hero h1{ color:#fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-hero p{ color:#dbe4de; }

.empty-state{ text-align:center; padding:3rem 1rem; color: var(--jca-text-muted); }
.empty-state i{ font-size:2.4rem; color: var(--jca-gold); margin-bottom:.8rem; display:block; }

/* ---------------------------------------------------------------------
   Accessibility: respect reduced-motion preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-particle{ display:none; }
}

/* When animations are disabled from the admin settings panel */
body[data-animations="0"] [data-aos]{
  opacity:1 !important; transform:none !important; transition:none !important;
}
body[data-animations="0"] .hero-logo,
body[data-animations="0"] .hero-eyebrow,
body[data-animations="0"] .hero-title,
body[data-animations="0"] .hero-subtitle,
body[data-animations="0"] .hero-actions{
  animation:none !important; opacity:1 !important; transform:none !important;
}

@media (max-width: 991px){
  .navbar-main{ background: rgba(11,37,69,.97); }
  .hero{ min-height: 80vh; }
}