/* Central Aid Custom Color Scheme */
:root {
    --primary: #001219;        /* Midnight Blue - for text/headers */
    --secondary: #005f73;      /* Deep Teal - for buttons */
    --accent: #e9d8a6;         /* Cream - for accents */
    --background: #fdf0d5;     /* Light Cream - for backgrounds */
}

/* Override Tailwind colors with brand colors */
.bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-blue-950,
.bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900, .bg-indigo-950,
.bg-purple-600, .bg-green-600, .bg-teal-600, .bg-orange-600 {
    background-color: var(--secondary) !important;
}

.bg-gradient-to-r, .bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--primary), var(--secondary)) !important;
}

.text-blue-600, .text-blue-700, .text-indigo-600, .text-purple-600, 
.text-teal-600, .text-orange-600, .text-green-600 {
    color: var(--secondary) !important;
}

.text-gray-900, .text-gray-800, .text-gray-700 {
    color: var(--primary) !important;
}

.bg-gray-50, .bg-gray-100 {
    background-color: var(--background) !important;
}

.border-blue-600, .border-blue-700, .border-indigo-600 {
    border-color: var(--secondary) !important;
}

/* Buttons */
.bg-white.text-blue-600, .bg-white.text-purple-600, 
.bg-white.text-teal-600, .bg-white.text-orange-600 {
    background-color: var(--accent) !important;
    color: var(--primary) !important;
}

.bg-white.text-blue-600:hover, .bg-white.text-purple-600:hover,
.bg-white.text-teal-600:hover, .bg-white.text-orange-600:hover {
    background-color: var(--background) !important;
    color: var(--primary) !important;
}

/* Accent colors */
.bg-blue-100, .bg-green-100, .bg-purple-100, .bg-teal-100 {
    background-color: rgba(233, 216, 166, 0.3) !important;
}

.text-blue-600.bg-blue-100, .text-green-600.bg-green-100,
.text-purple-600.bg-purple-100, .text-teal-600.bg-teal-100 {
    color: var(--secondary) !important;
}

/* Icons */
.material-icons {
    color: inherit;
}

/* Navigation specific */
.bg-gradient-to-r.from-blue-900 {
    background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
}

/* Hero section */
.hero-slider .bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--primary), var(--secondary)) !important;
}

/* Impact counters */
.text-blue-600.text-6xl, .text-green-600.text-6xl, 
.text-purple-600.text-6xl {
    color: var(--secondary) !important;
}

/* Stats and numbers */
.text-4xl.text-blue-600, .text-5xl.text-blue-600,
.text-4xl.text-green-600, .text-5xl.text-green-600,
.text-4xl.text-purple-600, .text-5xl.text-purple-600 {
    color: var(--secondary) !important;
}

/* Cards and shadows */
.shadow-lg, .shadow-xl {
    box-shadow: 0 10px 25px rgba(0, 18, 25, 0.15);
}

/* Links — only apply to non-nav links to avoid overriding white nav text */
a:not(nav a):hover {
    color: var(--secondary) !important;
}

/* Form inputs focus */
input:focus, textarea:focus, select:focus {
    border-color: var(--secondary) !important;
    outline: none;
}

/* Rounded buttons with gradient */
.rounded-full.bg-gradient-to-br {
    background: var(--secondary) !important;
}

/* Hover states for colored backgrounds */
.hover\:bg-blue-50:hover, .hover\:bg-purple-50:hover,
.hover\:bg-teal-50:hover, .hover\:bg-orange-50:hover {
    background-color: var(--background) !important;
}

/* Text on dark backgrounds */
.bg-gradient-to-r .text-white,
.bg-gradient-to-br .text-white {
    color: white !important;
}

/* Body background */
body {
    background-color: white !important;
}

/* Section backgrounds */
section.bg-gray-50 {
    background-color: var(--background) !important;
}

/* CTA Section */
.bg-gradient-to-r.from-blue-600 {
    background: linear-gradient(to right, var(--secondary), var(--primary)) !important;
}



/* ═══════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════ */

/* ── Viewport & base ── */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── Top bar: hide on small screens ── */
@media (max-width: 767px) {
    .top-bar-contact { display: none !important; }
}

/* ── Hero slider: shorter on mobile ── */
@media (max-width: 640px) {
    .hero-slider { height: 420px !important; }
    .hero-slider h1 { font-size: 1.875rem !important; line-height: 1.2 !important; }
    .hero-slider p  { font-size: 1rem !important; }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .hero-slider { height: 520px !important; }
}

/* ── Prevent horizontal overflow ── */
body { overflow-x: hidden; }
.max-w-7xl { max-width: 100%; }

/* ── Tables: horizontal scroll on mobile ── */
@media (max-width: 767px) {
    .table-scroll-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll-mobile table { min-width: 600px; }
}

/* ── Cards: full width on mobile ── */
@media (max-width: 640px) {
    .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
    .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

    /* Donation amount grid stays 2-col */
    .donation-grid { grid-template-columns: 1fr 1fr !important; }

    /* Scholarship sidebar stacks below content */
    .scholarship-layout { display: flex; flex-direction: column; }
    .scholarship-sidebar { order: -1; }

    /* Wizard options: single column */
    .wizard-options { grid-template-columns: 1fr !important; }

    /* Stat counters: 2 per row */
    .stats-grid { grid-template-columns: 1fr 1fr !important; }

    /* Gallery: 2 per row */
    .gallery-grid { grid-template-columns: 1fr 1fr !important; }

    /* Beneficiary/alumni cards: 1 per row */
    .people-grid { grid-template-columns: 1fr !important; }

    /* Form inputs: full width */
    input, select, textarea { width: 100% !important; }

    /* Buttons: full width in forms */
    .btn-mobile-full { width: 100% !important; text-align: center; justify-content: center; }

    /* Padding adjustments */
    section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Typography scale down */
    h1 { font-size: 1.875rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }

    /* Hide decorative large text on mobile */
    .hide-mobile { display: none !important; }

    /* Sticky nav: ensure it doesn't overlap content */
    nav.sticky { position: sticky; top: 0; z-index: 50; }

    /* Footer grid: single column */
    footer .grid { grid-template-columns: 1fr !important; }

    /* Application form: full width fields */
    .application-grid { grid-template-columns: 1fr !important; }

    /* Contact form */
    .contact-grid { grid-template-columns: 1fr !important; }
}

/* ── Tablet (641px – 1023px) ── */
@media (min-width: 641px) and (max-width: 1023px) {
    .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
    .scholarship-layout { display: grid; grid-template-columns: 1fr; }
}

/* ── Touch targets: minimum 44px ── */
@media (max-width: 1023px) {
    a, button { min-height: 44px; }
    nav a, nav button { min-height: 44px; display: flex; align-items: center; }
}

/* ── Mobile menu: smooth animation ── */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
#mobile-menu.open {
    max-height: 600px;
    opacity: 1;
}
/* Override hidden class when open */
#mobile-menu:not(.hidden) {
    max-height: 600px;
    opacity: 1;
}

/* ── Eligibility wizard: mobile friendly ── */
@media (max-width: 640px) {
    #wizard-container { padding: 1.25rem !important; }
    .wizard-step h3 { font-size: 1.125rem !important; }
    .option-btn { padding: 0.875rem !important; }
}

/* ── Donation page: currency + amount row ── */
@media (max-width: 480px) {
    .donation-currency-row { grid-template-columns: 1fr !important; }
    .donation-currency-row select { width: 100% !important; }
}

/* ── Scholarship apply form ── */
@media (max-width: 640px) {
    .apply-form-grid { grid-template-columns: 1fr !important; }
    .apply-form-grid > * { grid-column: span 1 !important; }
}

/* ── Gallery lightbox: full screen on mobile ── */
@media (max-width: 640px) {
    .lightbox-content { width: 95vw !important; max-height: 80vh !important; }
}

/* ── Floating WhatsApp / back-to-top buttons ── */
.fab-mobile {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .2s;
}
.fab-mobile:hover { transform: scale(1.1); }

/* ── Smooth scroll for anchor links ── */
html { scroll-padding-top: 80px; }

/* ── Print: hide nav/footer ── */
@media print {
    nav, footer, #mobile-menu, .fab-mobile { display: none !important; }
    body { background: white !important; }
}

/* ── Hero slider arrows — handled entirely via Tailwind classes in HTML ── */

/* ── Hero text: tighter on small phones ── */
@media (max-width: 480px) {
    .hero-slider h1 { font-size: 1.625rem !important; margin-bottom: 0.75rem !important; }
    .hero-slider p  { font-size: 0.9375rem !important; margin-bottom: 1.25rem !important; }
    .hero-slider .flex.flex-col { gap: 0.625rem !important; }
    .hero-slider a  { padding: 0.75rem 1.25rem !important; font-size: 0.875rem !important; }
}

/* ── Hero: center text on mobile (photo is hidden) ── */
@media (max-width: 1023px) {
    .hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }
    .hero-content h1,
    .hero-content p {
        text-align: center !important;
    }
    .hero-content .flex {
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── Accessibility: decorative Material Icons ── */
/* Applied via JS below since we can't use CSS to set aria attributes */