/* ============================================================
   Desert Cubs Cricket Academy — Main Stylesheet
   FIX: All text readability, hero background, animations
   
   COLOUR RULES (strict — never break these):
   - Dark blue bg  (#001f66 / #003399)  → WHITE text or GOLD text
   - White/Grey bg (#ffffff / #f8fafc)  → DARK BLUE text or DARK GREY text
   - Gold bg       (#FFCC00)            → DARK BLUE text ONLY
   ============================================================ */

/* ============================================================
   1. FONTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ============================================================
   2. ROOT VARIABLES
============================================================ */
:root {
    --blue:       #003399;
    --blue-dark:  #001f66;
    --blue-mid:   #1a4db2;
    --gold:       #FFCC00;
    --gold-dark:  #e6b800;
    --white:      #ffffff;
    --gray-100:   #f8fafc;
    --gray-200:   #e2e8f0;
    --gray-600:   #475569;
    --gray-700:   #334155;
    --text-dark:  #0f172a;
}

/* ============================================================
   3. RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   4. THE HERO SECTION — THE MAIN FIX
   
   The hero MUST have a dark background so white/gold text is readable.
   We use a solid dark blue gradient — no transparent/light backgrounds.
============================================================ */
.hero-section {
    /* SOLID dark blue gradient — always dark, text always readable */
    background: linear-gradient(135deg, #001033 0%, #001f66 40%, #003399 80%, #001f66 100%);
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Subtle cricket field lines pattern — dark on dark, very subtle */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    /* SVG pattern: subtle oval cricket field lines */
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,204,0,0.04) 0%, transparent 70%),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,0.015) 40px,
            rgba(255,255,255,0.015) 41px
        );
    pointer-events: none;
    z-index: 0;
}

/* Gold glow in top right corner */
.hero-section::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,204,0,0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Everything inside hero must be above the ::before/::after */
.hero-section > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   5. REMOVE THE SPINNING CIRCLES (they look bad on mobile)
   The old code used:
   .animate-spin on border circles in the hero — REMOVED here
   We override them to be invisible
============================================================ */
.hero-section .rounded-full.border-4.border-cubs-gold\/20,
.hero-section .rounded-full.border-2.border-white\/10 {
    /* Hide the ugly spinning rings */
    display: none !important;
}

/* ============================================================
   6. HERO TEXT — forced readable
============================================================ */
.hero-section h1,
.hero-section h2,
.hero-section h3 {
    color: #ffffff;
    font-family: 'Teko', sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-section p,
.hero-section span:not(.text-cubs-gold):not(.badge-text) {
    color: #e2e8f0;
}

.hero-section .text-cubs-gold,
.hero-section .text-gold {
    color: #FFCC00 !important;
}

/* Stats numbers in hero */
.hero-section .counter,
.hero-section .stat-number {
    color: #FFCC00 !important;
    font-family: 'Teko', sans-serif;
    font-weight: 700;
}

/* Stats labels in hero */
.hero-section .stat-label {
    color: #94a3b8 !important;
}

/* ============================================================
   7. OTHER DARK SECTIONS (any section with dark blue bg)
============================================================ */
.section-dark {
    background: linear-gradient(135deg, #001f66 0%, #003399 100%);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #ffffff;
    font-family: 'Teko', sans-serif;
}

.section-dark p,
.section-dark span,
.section-dark li {
    color: #cbd5e1;
}

.section-dark .text-cubs-gold { color: #FFCC00 !important; }

/* ============================================================
   8. LIGHT SECTIONS (white / grey backgrounds)
============================================================ */
.section-light {
    background: #ffffff;
}
.section-grey {
    background: #f8fafc;
}

/* Text on light backgrounds — DARK so it's readable */
.section-light h2,
.section-light h3,
.section-grey  h2,
.section-grey  h3 {
    color: #003399;
    font-family: 'Teko', sans-serif;
}

.section-light p,
.section-grey p {
    color: #374151;
}

/* ============================================================
   9. TYPOGRAPHY GLOBAL
============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

p, li, span, a, td, th {
    font-family: 'Nunito', sans-serif;
}

/* Section tag (small caps label above headings) */
.section-tag {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* On dark bg */
.section-tag-light { color: #FFCC00; }
/* On light bg */
.section-tag-dark  { color: #003399; }

/* Gold divider bar */
.gold-bar {
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, #FFCC00, #e6b800);
    border-radius: 2px;
    display: block;
}

/* ============================================================
   10. BUTTONS — always readable
============================================================ */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFCC00 0%, #e6b800 100%);
    color: #001f66 !important;           /* DARK BLUE on gold — always */
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 12px 28px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 16px rgba(255,204,0,0.35);
    white-space: nowrap;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #ffe14d 0%, #FFCC00 100%);
    color: #001f66 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,204,0,0.5);
}

.btn-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #003399;
    color: #ffffff !important;           /* WHITE on blue — always */
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 12px 28px;
    transition: all 0.25s;
}
.btn-blue:hover {
    background: #001f66;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ============================================================
   11. NAVIGATION
============================================================ */
#mainNav {
    background: #001f66 !important;      /* Always solid dark navy */
    border-bottom: 3px solid #FFCC00;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.nav-link {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff !important;           /* WHITE on dark navy */
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: #FFCC00;
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link:hover,
.nav-link.active { color: #FFCC00 !important; }

/* ============================================================
   12. TOP BAR
============================================================ */
#topBar {
    background: #001045;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#topBar a,
#topBar span { color: #bfd0ff; font-size: 0.78rem; font-weight: 700; }
#topBar a:hover { color: #FFCC00; }
#topBar .icon-gold { color: #FFCC00; }

/* ============================================================
   13. CARDS
============================================================ */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,51,153,0.12);
    border-color: rgba(255,204,0,0.4) !important;
}

/* Branch cards — white bg, dark blue text */
.branch-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
}
.branch-card h3 { color: #003399; }
.branch-card p  { color: #374151; }

/* ============================================================
   14. TOURNAMENT TICKER STRIP
   (gold bg — must use dark text)
============================================================ */
.ticker-strip {
    background: #FFCC00;
    color: #001f66 !important;
}
.ticker-strip * { color: #001f66 !important; }
.ticker-strip .btn-blue { color: #ffffff !important; }

/* ============================================================
   15. SPONSORS MARQUEE
============================================================ */
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 32s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}

/* ============================================================
   16. WHATSAPP FLOAT
============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,0.5);
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}
.whatsapp-float:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 30px rgba(37,211,102,0.65);
}
.whatsapp-float i { color: #ffffff; font-size: 1.6rem; }

/* ============================================================
   17. MODALS
============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 500;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex !important; }

/* ============================================================
   18. FADE ANIMATIONS (scroll-triggered)
============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Scroll-triggered — paused by default, JS starts them */
.scroll-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   19. BLOG / PROSE STYLES
============================================================ */
.prose-dc h2 {
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: #003399;
    text-transform: uppercase;
    margin: 1.8rem 0 0.7rem;
}
.prose-dc h3 {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #003399;
    margin: 1.4rem 0 0.5rem;
}
.prose-dc p {
    color: #374151;
    line-height: 1.85;
    margin-bottom: 1.1rem;
    font-size: 1.02rem;
    font-family: 'Nunito', sans-serif;
}
.prose-dc a  { color: #003399; font-weight: 700; }
.prose-dc a:hover { color: #e6b800; }
.prose-dc strong { color: #003399; }
.prose-dc ul li,
.prose-dc ol li {
    color: #374151;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0.4rem;
}
.prose-dc img { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* ============================================================
   20. SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #003399; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #FFCC00; }

/* ============================================================
   21. SELECTION
============================================================ */
::selection { background: #FFCC00; color: #001f66; }

/* ============================================================
   22. FOCUS (accessibility)
============================================================ */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   23. RESPONSIVE VIDEO
============================================================ */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ============================================================
   24. PRINT
============================================================ */
@media print {
    #mainNav, footer, .whatsapp-float, #topBar { display: none !important; }
    body { font-size: 12pt; color: #000; }
}

/* ============================================================
   25. SKELETON LOADER
============================================================ */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}