/* ============================================================
   SCHOOL GROWTH PARTNER — PREMIUM DESIGN SYSTEM
   Inspired by 152co.com editorial aesthetic
   Palette: White-dominant · Light Blue accents · Yellow highlights
   ============================================================ */

/* --- Design Tokens --- */
:root {
    --blue-light:   #DCEEFF;
    --blue-soft:    #BFDFFF;
    --yellow:       #FFD54A;
    --yellow-light: #FFF4BF;
    --white:        #FFFFFF;
    --text:         #1A1A1A;
    --muted:        #6B7280;
    --primary-blue: #3B8BDE;
    --border:       #E8F3FF;
}

/* --- Base --- */
html { scroll-behavior: smooth; }
body.modal-open { overflow: hidden; }

/* ============================================================
   NAVIGATION — Clean white, editorial
   ============================================================ */

/* Override glass-dark to white */
.glass-dark {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(220, 238, 255, 0.7) !important;
    box-shadow: 0 2px 32px rgba(59, 139, 222, 0.06) !important;
}

/* Glass light (already white) */
.glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 238, 255, 0.6);
}

/* Nav links — dark text */
#navbar nav a {
    color: #1A1A1A !important;
    font-weight: 500;
    transition: color 0.2s;
}
#navbar nav a:hover { color: var(--primary-blue) !important; }

/* Nav logo text */
#navbar .text-white.font-bold,
#navbar a.text-white {
    color: #1A1A1A !important;
}

/* Mobile hamburger icon */
#navbar button .fa-bars { color: #1A1A1A !important; }

/* Mobile menu — white card */
#mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--blue-light) !important;
}
#mobile-menu a {
    color: #1A1A1A !important;
}
#mobile-menu a:hover { color: var(--primary-blue) !important; }

/* ============================================================
   HERO SECTION — White bg, dark text, blue light gradient
   ============================================================ */

/* Remove dark overlay from hero — keep image but lighten overlay */
#home .bg-gradient-to-r.from-dark\/92 {
    background: linear-gradient(to right,
        rgba(255,255,255,0.90) 0%,
        rgba(220,238,255,0.80) 50%,
        rgba(220,238,255,0.30) 100%) !important;
}

/* Hero text override to dark */
#home .text-white.w-full,
#home .hero-content h1,
#home .hero-content p,
#home .hero-content span {
    color: var(--text) !important;
}
#home h1 { color: #1A1A1A !important; }
#home .text-gray-300 { color: #4B5563 !important; }

/* Hero scroll indicator */
#home .text-white.animate-bounce a { color: #6B7280 !important; }
#home .text-white.animate-bounce span { color: #6B7280 !important; }

/* Hero badge */
#home .bg-accent\/20 {
    background-color: rgba(255, 213, 74, 0.15) !important;
    border-color: rgba(255, 213, 74, 0.4) !important;
}
#home .text-yellow-200 { color: #92400E !important; }

/* Hero "Improve Existing School" ghost button */
#home .bg-white\/10 {
    background: rgba(59, 139, 222, 0.08) !important;
    border-color: rgba(59, 139, 222, 0.25) !important;
    color: #1A1A1A !important;
}
#home .bg-white\/10:hover {
    background: rgba(59, 139, 222, 0.15) !important;
}
#home .bg-white\/10 .fa-chart-line,
#home .bg-white\/10 i { color: var(--primary-blue) !important; }

/* Hero "Book Consultation" ghost button */
#home .bg-primary\/80 {
    background: var(--yellow) !important;
    border-color: transparent !important;
    color: #1A1A1A !important;
}
#home .bg-primary\/80:hover { background: #ffc107 !important; }

/* ============================================================
   TRUST STRIP — Yellow ribbon
   ============================================================ */

#trust-strip,
div[id="trust-strip"] {
    background-color: var(--yellow) !important;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Trust strip text — dark on yellow */
#trust-strip .text-white,
#trust-strip span {
    color: #1A1A1A !important;
}
#trust-strip .text-white\/30 { color: rgba(0,0,0,0.2) !important; }
/* Keep icons their color */
#trust-strip .text-accent { color: #1A1A1A !important; }

/* ============================================================
   ABOUT SECTION — Clean white (already good)
   ============================================================ */

/* Stats counter boxes */
.bg-light { background-color: var(--blue-light) !important; }
.border-primary\/10 { border-color: rgba(59, 139, 222, 0.12) !important; }

/* ============================================================
   SERVICES SECTION — Light blue bg
   ============================================================ */

#services { background-color: var(--blue-light) !important; }

/* ============================================================
   WHY CHOOSE US — Dark → Light Blue
   ============================================================ */

/* Target the dark "Why Choose Us" section */
section.bg-dark {
    background-color: var(--blue-light) !important;
}

/* Override all white text inside formerly-dark sections */
section.bg-dark h2,
section.bg-dark h3,
section.bg-dark h4,
section.bg-dark p,
section.bg-dark span:not(.text-accent),
section.bg-dark li {
    color: #1A1A1A !important;
}
section.bg-dark .text-white { color: #1A1A1A !important; }
section.bg-dark .text-gray-400 { color: #4B5563 !important; }
section.bg-dark .text-gray-300 { color: #374151 !important; }
section.bg-dark .text-blue-100 { color: #1e40af !important; }

/* Cards inside dark→blue section */
section.bg-dark .bg-white\/10 {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(59,139,222,0.15) !important;
    box-shadow: 0 4px 20px rgba(59,139,222,0.08);
}
section.bg-dark .border-white\/10 { border-color: rgba(59,139,222,0.15) !important; }
section.bg-dark .text-primary { color: var(--primary-blue) !important; }

/* ============================================================
   WOMEN ENTREPRENEURS SECTION — Light Yellow
   ============================================================ */

section.bg-gradient-to-br.from-accent,
section[class*="from-accent"]:not([id="home"]) {
    background: var(--yellow-light) !important;
}
/* Text inside yellow section */
section[class*="from-accent"] h2,
section[class*="from-accent"] h3,
section[class*="from-accent"] p { color: #1A1A1A !important; }

/* ============================================================
   CTA SECTION — Yellow ribbon, dark text
   ============================================================ */

/* The big CTA section at page bottom */
section.bg-gradient-to-br[class*="from-primary"] {
    background: var(--yellow) !important;
}
section.bg-gradient-to-br[class*="from-primary"] h2 { color: #1A1A1A !important; }
section.bg-gradient-to-br[class*="from-primary"] p { color: #3D3000 !important; }
section.bg-gradient-to-br[class*="from-primary"] .text-white { color: #1A1A1A !important; }
section.bg-gradient-to-br[class*="from-primary"] .text-blue-100 { color: #3D3000 !important; }

/* CTA buttons on yellow bg */
section.bg-gradient-to-br[class*="from-primary"] .bg-accent {
    background: #1A1A1A !important;
    color: white !important;
}
section.bg-gradient-to-br[class*="from-primary"] .bg-accent:hover {
    background: #333 !important;
}
section.bg-gradient-to-br[class*="from-primary"] .bg-white\/10 {
    background: rgba(255,255,255,0.5) !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #1A1A1A !important;
}
section.bg-gradient-to-br[class*="from-primary"] .bg-white\/10:hover {
    background: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   FOOTER — White/very light
   ============================================================ */

footer.bg-dark {
    background-color: #F5F9FF !important;
    border-top: 1px solid var(--blue-light) !important;
}

/* Footer text */
footer.bg-dark { color: #6B7280 !important; }
footer.bg-dark .text-white { color: #1A1A1A !important; }
footer.bg-dark h4.text-white { color: #1A1A1A !important; }
footer.bg-dark .text-gray-400 { color: #6B7280 !important; }
footer.bg-dark a { color: #6B7280 !important; }
footer.bg-dark a:hover { color: var(--primary-blue) !important; }
footer.bg-dark .text-accent { color: var(--primary-blue) !important; }

/* Footer border */
footer.bg-dark .border-white\/10 {
    border-color: var(--blue-light) !important;
}

/* Footer logo */
footer.bg-dark a.text-white.font-bold { color: #1A1A1A !important; }
footer.bg-dark .text-accent { color: var(--primary-blue) !important; }
footer.bg-dark p.text-accent { color: var(--primary-blue) !important; }
footer.bg-dark span.text-accent { color: var(--primary-blue) !important; }

/* ============================================================
   SUB-PAGE HERO SECTIONS (about, services, etc.)
   ============================================================ */

/* Dark gradient hero → light blue/white */
section.pt-32.bg-gradient-to-br,
section.pt-28.bg-gradient-to-br,
section.pt-36.bg-gradient-to-br {
    background: linear-gradient(135deg, var(--blue-light) 0%, #ffffff 60%) !important;
}

/* Text in sub-page heroes */
section.pt-32 .text-white,
section.pt-28 .text-white,
section.pt-36 .text-white {
    color: #1A1A1A !important;
}
section.pt-32 .text-blue-100,
section.pt-28 .text-blue-100,
section.pt-36 .text-blue-100 {
    color: #4B5563 !important;
}
section.pt-32 .text-white\/80,
section.pt-28 .text-white\/80 {
    color: #4B5563 !important;
}

/* Badge in hero sections */
section.pt-32 .bg-white\/10,
section.pt-28 .bg-white\/10 {
    background: rgba(59,139,222,0.1) !important;
    border-color: rgba(59,139,222,0.25) !important;
    color: var(--primary-blue) !important;
}
section.pt-32 .text-accent,
section.pt-28 .text-accent { color: #D97706 !important; }

/* ============================================================
   CONTACT PAGE SPECIAL
   ============================================================ */

/* Contact cards on light bg */
.bg-primary.text-white.rounded-3xl {
    background: var(--blue-light) !important;
    color: #1A1A1A !important;
}

/* ============================================================
   PACKAGE PAGE — Keep dark (it's intentionally dark premium)
   ============================================================ */
/* packages.html has slate-950 bg — keep it */
.bg-slate-950 { background-color: #020617 !important; }

/* ============================================================
   BUTTON SYSTEM — Yellow CTAs
   ============================================================ */

/* Primary CTA buttons — keep yellow accent */
.bg-accent { background-color: var(--yellow) !important; }
.hover\:bg-yellow-400:hover { background-color: #FACC15 !important; }

/* Accent text — darken for readability on white */
.text-accent { color: #B45309 !important; }
a.text-accent { color: var(--primary-blue) !important; }
.text-accent.font-semibold,
.text-accent.font-bold { color: #B45309 !important; }

/* Counter numbers in accent */
.text-3xl.font-black.text-accent,
.text-4xl.font-black.text-accent { color: #D97706 !important; }

/* ============================================================
   MARQUEE ANIMATION
   ============================================================ */

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

/* ============================================================
   FLOAT ANIMATION
   ============================================================ */

@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

/* ============================================================
   SCROLLBAR
   ============================================================ */

.custom-scrollbar::-webkit-scrollbar { height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   UTILITIES
   ============================================================ */

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Service card hover shadows — updated to match new palette */
.service-card:hover {
    box-shadow: 0 20px 60px rgba(59, 139, 222, 0.12) !important;
}

/* Section label uppercase tags */
h3.text-primary.font-bold.tracking-wider {
    color: var(--primary-blue) !important;
    letter-spacing: 0.1em;
}

/* Prevent scroll when modal is open */
body.modal-open { overflow: hidden; }

/* ============================================================
   MOBILE MENU HAMBURGER — Dark icon
   ============================================================ */

#mobile-menu-btn i.fa-bars { color: #1A1A1A !important; }
#mobile-menu-btn { color: #1A1A1A !important; }

/* ── Floating Call Button (FAB) ── */
#flashPhoneBar {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    left: auto !important;
    width: auto !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: #1A1A1A;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 18px 10px 10px;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
#flashPhoneBar:hover {
    background: #3B8BDE;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(59,139,222,0.4);
}
#flashPhoneBar .phone-icon {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #FFD54A;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #1A1A1A;
    font-size: 0.9rem;
    flex-shrink: 0;
    z-index: 1;
}
/* Ripple only around the icon, behind it */
#flashPhoneBar .phone-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #FFD54A;
    z-index: -1;
    animation: fabRipple 2s ease-out infinite;
}
@keyframes fabRipple {
    0%   { transform: scale(1);   opacity: 0.7; }
    75%  { transform: scale(2.2); opacity: 0;   }
    100% { transform: scale(2.2); opacity: 0;   }
}
#flashPhoneBar .phone-num {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 480px) {
    #flashPhoneBar {
        bottom: 20px !important;
        right: 20px !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    #flashPhoneBar .phone-num {
        display: none !important;
    }
    #flashPhoneBar .phone-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
    }
}