/* =============================================================================
   EDUSKILL INDIA FOUNDATION — Design System (static, hand-written)
   -----------------------------------------------------------------------------
   No build step. This file provides the exact component + utility classes the
   site markup uses. Organised as:
     1. Design tokens (light/dark)      5. Components (buttons, cards, forms…)
     2. Reset / base                    6. Navbar / footer
     3. Typography                      7. Sections / hero
     4. Layout utilities                8. Animations & helpers
   ============================================================================ */

/* 1. ---------------------------------------------------------------- TOKENS */
:root {
    /* ---- Official EDUSKILL INDIA FOUNDATION brand palette ---- */
    --primary:      #0B4E3D;   /* header, footer, nav, headings, primary buttons */
    --secondary:    #174D3D;   /* hover, active nav, section bg, highlights      */
    --green:        #2F8065;   /* success, impact numbers, donations, progress   */
    --green-dark:   #1F5C48;   /* green hover, environment / volunteer sections  */
    --orange:       #F15A24;   /* Donate Now, CTAs, badges, notifications        */
    --white:        #FDFEFE;

    /* ---- Semantic aliases (kept so existing components inherit the brand) ---- */
    --brand:        #0B4E3D;
    --brand-600:    #0B4E3D;
    --brand-700:    #174D3D;
    --brand-2:      #174D3D;
    --accent:       #F15A24;
    --accent-2:     #E8C52E;
    --success:      #2F8065;
    --success-dark: #1F5C48;
    --danger:       #DC2626;
    --warning:      #F15A24;
    --info:         #174D3D;

    --grad-brand:   linear-gradient(135deg, #0B4E3D 0%, #174D3D 100%);
    --grad-primary: linear-gradient(135deg, #0B4E3D 0%, #174D3D 100%);
    --grad-green:   linear-gradient(135deg, #2F8065 0%, #1F5C48 100%);
    --grad-cta:     linear-gradient(135deg, #0B4E3D 0%, #2F8065 100%);
    --grad-donate:  linear-gradient(135deg, #F15A24 0%, #E8C52E 100%);
    --grad-accent:  linear-gradient(135deg, #F15A24 0%, #E8C52E 100%);
    --grad-hero:    linear-gradient(135deg, rgba(11,78,61,.94) 0%, rgba(23,77,61,.88) 100%);
    --grad-soft:    linear-gradient(180deg, #FFFFFF 0%, #F1F6FB 100%);

    --bg:           #FFFFFF;
    --bg-alt:       #F1F6FB;
    --surface:      #FDFEFE;
    --surface-2:    #F4F8FC;
    --text:         #0B4E3D;
    --text-soft:    #374151;
    --muted:        #6B7280;
    --border:       #E5E7EB;
    --border-soft:  #EEF2F7;
    --ring:         rgba(23,77,61,.35);

    --shadow-sm:    0 1px 2px rgba(11,78,61,.07);
    --shadow:       0 4px 16px rgba(11,78,61,.10);
    --shadow-lg:    0 18px 40px rgba(11,78,61,.16);
    --shadow-brand: 0 12px 30px rgba(11,78,61,.30);

    --radius:       14px;
    --radius-sm:    10px;
    --radius-lg:    22px;
    --radius-full:  999px;

    --container:    1200px;
    --header-h:     74px;

    --font-sans:    'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --transition:   .25s cubic-bezier(.4, 0, .2, 1);
}

/* Dark mode — same brand palette, tinted from the primary navy and lightened
   where needed so text/links keep WCAG AA contrast on dark surfaces. */
:root[data-theme="dark"] {
    --bg:           #041F3D;
    --bg-alt:       #06294D;
    --surface:      #07305A;
    --surface-2:    #0A3A69;
    --text:         #EAF2FB;
    --text-soft:    #C7D8EA;
    --muted:        #93A9C2;
    --border:       #0E4478;
    --border-soft:  #0B3862;
    /* brand lightened for legibility on dark navy */
    --brand:        #4E9BE0;
    --brand-600:    #4E9BE0;
    --brand-700:    #7BB8EC;
    --brand-2:      #7BB8EC;
    --green:        #4CA383;
    --success:      #4CA383;
    --orange:       #F59440;
    --accent:       #F59440;
    --grad-soft:    linear-gradient(180deg, #041F3D 0%, #06294D 100%);
    --grad-hero:    linear-gradient(135deg, rgba(4,31,61,.95) 0%, rgba(23,77,61,.90) 100%);
    --shadow-sm:    0 1px 2px rgba(0,0,0,.45);
    --shadow:       0 6px 20px rgba(0,0,0,.5);
    --shadow-lg:    0 20px 46px rgba(0,0,0,.6);
    --shadow-brand: 0 12px 30px rgba(4,31,61,.6);
    --ring:         rgba(78,155,224,.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #041F3D; --bg-alt: #06294D; --surface: #07305A; --surface-2: #0A3A69;
        --text: #EAF2FB; --text-soft: #C7D8EA; --muted: #93A9C2;
        --border: #0E4478; --border-soft: #0B3862;
        --brand: #4E9BE0; --brand-600: #4E9BE0; --brand-700: #7BB8EC; --brand-2: #7BB8EC;
        --green: #4CA383; --success: #4CA383; --orange: #F59440; --accent: #F59440;
        --grad-soft: linear-gradient(180deg, #041F3D 0%, #06294D 100%);
        --shadow: 0 6px 20px rgba(0,0,0,.5); --shadow-lg: 0 20px 46px rgba(0,0,0,.6);
        --ring: rgba(78,155,224,.5);
    }
}

/* 2. ------------------------------------------------------------------ BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
    /* `clip` contains stray wide children WITHOUT disabling position:sticky
       descendants the way overflow-x:hidden does. */
    overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-700); }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* 3. ------------------------------------------------------------ TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p  { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--text-soft); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-600); margin-bottom: .75rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--grad-brand); border-radius: 2px; }
.text-gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-center { text-align: center; }
.text-white  { color: #fff !important; }
.text-muted  { color: var(--muted); }

/* 4. --------------------------------------------------------------- LAYOUT */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container-wide { max-width: 1400px; }
.container-narrow { max-width: 820px; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section-sm { padding: 3rem 0; }
.section-soft { background: var(--grad-soft); }
.section-alt { background: var(--bg-alt); }
.section-brand { background: var(--grad-brand); color: #fff; }
.section-dark { background: #0b1120; color: #e8eefc; }

.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-title { margin-bottom: .5rem; }
.section-subtitle { color: var(--muted); font-size: 1.08rem; margin: 0; }

.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-sidebar { grid-template-columns: 1fr 320px; gap: 2.5rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .gap-4 { gap: 2rem; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.w-full{width:100%}
.relative{position:relative}

/* 5. ----------------------------------------------------------- COMPONENTS */
/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.6rem; font-size: .95rem; font-weight: 700; line-height: 1;
    border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    white-space: nowrap; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { color: #fff; box-shadow: 0 16px 34px rgba(11,78,61,.4); }
.btn-accent { background: var(--grad-accent); color: #fff; box-shadow: 0 12px 30px rgba(241,90,36,.32); }
.btn-accent:hover { color: #fff; }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-outline { background: transparent; border-color: var(--brand-600); color: var(--brand-600); }
.btn-outline:hover { background: var(--brand-600); color: #fff; }
.btn-white { background: #fff; color: var(--brand-700); }
.btn-white:hover { color: var(--brand-700); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn.is-loading { opacity: .65; cursor: not-allowed; transform: none; }

/* Cards */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.2rem; margin-bottom: .5rem; }
.card-text { color: var(--muted); margin-bottom: 1rem; }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.06); }

/* 3D hover card */
.card-3d {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 2rem 1.75rem; box-shadow: var(--shadow); transform-style: preserve-3d;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative; overflow: hidden;
}
.card-3d::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition);
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(11,78,61,.12), transparent 42%);
    /* Decorative sheen only — it must never take a click.
       Being absolutely positioned with inset:0, this pseudo-element covers the
       whole card and, as a positioned box, hit-tests ABOVE the card's static
       in-flow children. Every form control inside a .card-3d was therefore
       unclickable: the newsletter email field on /blogs looked and measured
       perfectly normal (visible, enabled, pointer-events:auto) while
       elementFromPoint over it returned the CARD. Tapping it did nothing, which
       is why it read as "cannot type". */
    pointer-events: none;
}
.card-3d:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card-3d:hover::before { opacity: 1; }
.card-3d .icon-badge { margin-bottom: 1.1rem; }

/* Glassmorphism */
.glass {
    background: rgba(255,255,255,.14); backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg);
}
:root[data-theme="dark"] .glass { background: rgba(20,30,54,.5); border-color: rgba(255,255,255,.08); }

/* Icon badge (used on program/feature cards) */
.icon-badge {
    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.6rem; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-brand);
}
.icon-badge.accent { background: var(--grad-accent); box-shadow: 0 10px 24px rgba(241,90,36,.3); }

/* Badges / chips */
.badge { display: inline-block; padding: .3rem .75rem; font-size: .72rem; font-weight: 700; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .04em; }
.badge-brand { background: rgba(11,78,61,.12); color: var(--brand-600); }
.badge-accent { background: rgba(241,90,36,.15); color: var(--accent-2); }
.badge-success { background: rgba(47,128,101,.14); color: var(--success); }
.badge-danger { background: rgba(220,38,38,.12); color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: .82rem; color: var(--text-soft); }
.chip:hover { border-color: var(--brand-600); color: var(--brand-600); }

/* Divider */
.divider { height: 1px; background: var(--border); border: 0; margin: 2rem 0; }

/* Forms */
.form-group { margin-bottom: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--text-soft); }
.form-label .req { color: var(--danger); }
.form-control, .form-select, .form-textarea {
    width: 100%; padding: .8rem 1rem; font-size: .95rem; font-family: inherit;
    color: var(--text); background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px var(--ring);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-control.is-invalid, .form-textarea.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-error { display: block; color: var(--danger); font-size: .8rem; margin-top: .35rem; }
.form-hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.checkbox { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--text-soft); }
.checkbox input { margin-top: .2rem; }

/* Alerts */
.alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid transparent; font-size: .95rem; }
.alert-success { background: rgba(47,128,101,.1); border-color: rgba(47,128,101,.3); color: #1F5C48; }
.alert-error, .alert-danger { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.3); color: #b91c1c; }
.alert-warning { background: rgba(241,90,36,.1); border-color: rgba(241,90,36,.3); color: #9A5313; }
.alert-info { background: rgba(23,77,61,.1); border-color: rgba(23,77,61,.3); color: #174D3D; }

/* Flash toast container */
.flash-stack { position: fixed; top: calc(var(--header-h) + 12px); right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: .6rem; max-width: 360px; }
.flash-toast { padding: .9rem 1.1rem; border-radius: var(--radius-sm); color: #fff; box-shadow: var(--shadow-lg); animation: slideIn .4s ease; }
.flash-toast.success { background: var(--success); }
.flash-toast.error { background: var(--danger); }
.flash-toast.warning { background: var(--warning); }
.flash-toast.info { background: var(--info); }

/* Breadcrumb (rendered by helper.php breadcrumb()) */
.page-hero { background: var(--grad-brand); color: #fff; padding: clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px circle at 80% -20%, rgba(255,255,255,.18), transparent 60%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); }
.breadcrumb li:not(:first-child)::before { content: "/"; opacity: .55; }
.breadcrumb a { color: #fff; opacity: .85; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb [aria-current="page"] { font-weight: 600; }

/* Pagination (rendered by pagination.php) */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-weight: 600; }
.page-link:hover { border-color: var(--brand-600); color: var(--brand-600); }
.page-link.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; }
.page-link.is-disabled { opacity: .4; pointer-events: none; }
.page-ellipsis { display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--muted); }

/* Stars (helper.php star_rating) */
.stars { display: inline-flex; gap: 2px; color: #d1d5db; }
.stars .star.is-filled { color: var(--accent); }

/* Tables (admin lists) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { background: var(--surface-2); font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

/* 6. ------------------------------------------------------------ NAV/FOOTER */
.announcement-bar { text-align: center; font-size: .85rem; padding: .5rem 1rem; }
.announcement-bar a { color: inherit; text-decoration: underline; font-weight: 700; }

.navbar {
    position: sticky; top: 0; z-index: 900; height: var(--header-h);
    background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition), background var(--transition);
}
:root[data-theme="dark"] .navbar { background: color-mix(in srgb, var(--primary, #0B4E3D) 42%, rgba(0,0,0,.82)); }
.navbar.is-scrolled { box-shadow: var(--shadow); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }
.nav-brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.nav-brand img { height: 42px; width: auto; }
.nav-brand .brand-name { line-height: 1.1; }
.nav-brand .brand-name small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.nav-menu { display: flex; align-items: center; gap: .35rem; list-style: none; }
.nav-link { position: relative; padding: .55rem .85rem; font-weight: 600; font-size: .93rem; color: var(--text-soft); border-radius: var(--radius-sm); }
.nav-link:hover, .nav-link.is-active { color: var(--primary, #0B4E3D); background: color-mix(in srgb, var(--primary, #0B4E3D) 8%, transparent); }
.nav-actions { display: flex; align-items: center; gap: .6rem; }

.has-dropdown { position: relative; }
.has-dropdown > .nav-link::after { content: "▾"; margin-left: .3rem; font-size: .7rem; opacity: .7; }
.nav-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .5rem; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition); z-index: 950;
}
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--text-soft); font-size: .9rem; font-weight: 500; }
.nav-dropdown a:hover { background: var(--surface-2); color: var(--brand-600); }

.theme-toggle, .nav-toggle {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.15rem;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--brand-600); color: var(--brand-600); }
.nav-toggle { display: none; }

/* Mobile drawer */
.nav-drawer {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); background: var(--surface);
    box-shadow: var(--shadow-lg); z-index: 1100; padding: 1.5rem; transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1); overflow-y: auto; display: flex; flex-direction: column; gap: .25rem;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer a { padding: .8rem .6rem; border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 600; }
.nav-drawer a:hover { background: var(--surface-2); color: var(--brand-600); }
.drawer-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity var(--transition); }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

/* ============================== NGO FOOTER ======================================
   The footer closes the page on the SAME brand field the hero opens it on:
   a flat deep green carrying two very soft blooms (yellow, then gold) exactly
   as .hx-panel does, so the top and bottom of every page read as one surface.

   It was previously a navy field (#174D3D → #0B4E3D → #0B3A2E) with cool
   blue-grey text, which put a completely different hue at the bottom of a page
   whose hero is forest green. Every colour here now resolves through the Theme
   Engine, so changing the brand colour moves the header, hero and footer
   together instead of leaving the footer behind.

   The footer-scoped tokens below are the only place footer colour is decided;
   the rules that follow (and the refinement layer in ui.css) consume them.
   ============================================================================= */
.footer {
    /* Field */
    --f-field:  var(--footer-bg, #0F4537);
    --f-deep:   color-mix(in srgb, var(--footer-bg, #0F4537) 72%, #000);
    /* Ink — warm neutrals, never blue-grey, so they sit on green */
    --f-ink:    rgba(255,255,255,.74);
    --f-ink-2:  rgba(255,255,255,.60);
    --f-line:   rgba(255,255,255,.12);
    --f-glass:  rgba(255,255,255,.055);
    /* Accents lifted straight from the hero: yellow highlight, orange CTA */
    --f-accent: var(--yellow, #FFE987);
    --f-gold:   var(--gold, #E8C52E);
    /* Button surfaces use the AA-safe deeper mix (white label 4.60:1) plus a
       white inner hairline for their boundary; --f-flame stays full-strength for
       decorative marks like the footer heart and the top rule, which need to
       read against the green. */
    --f-cta:    var(--accent-ink, #CA4C1E);
    --f-flame:  var(--accent, #F15A24);

    position: relative; isolation: isolate; padding-top: 4.5rem; color: var(--f-ink);
    background:
        radial-gradient(72rem 40rem at 6% -8%,  color-mix(in srgb, var(--f-accent) 13%, transparent), transparent 62%),
        radial-gradient(56rem 34rem at 94% 6%,  color-mix(in srgb, var(--f-gold) 9%, transparent),   transparent 60%),
        linear-gradient(180deg, var(--primary, #0B4E3D) 0%, var(--f-field) 48%, var(--f-deep) 100%);
}
/* The top rule is the .footer-topline element (in flow, styled below). A second
   absolutely-positioned ::before hairline used to sit on top of it at the same
   3px — two rules stacked, one invisible. */
.footer h4 {
    color: #fff; font-size: 1.05rem; margin-bottom: 1.2rem; position: relative; padding-bottom: .6rem;
}
.footer h4::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--f-accent), var(--f-gold));
}
.footer a { color: var(--f-ink); transition: color var(--transition); }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.footer-brand p { color: var(--f-ink-2); font-size: .95rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; color: var(--f-ink); font-size: .92rem; margin-bottom: .6rem; }
.footer-contact li svg { color: var(--f-accent); flex: 0 0 auto; }
.newsletter-form { display: flex; gap: .5rem; margin-top: .9rem; }
.newsletter-form input {
    flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff;
    transition: border-color var(--transition), background var(--transition);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.48); }
.newsletter-form input:focus { outline: none; border-color: var(--f-accent); background: rgba(255,255,255,.12); }
@media (max-width: 480px) {
    .newsletter-form { flex-wrap: wrap; }
    .newsletter-form input { flex-basis: 160px; }
}
.social-links { display: flex; gap: .6rem; margin-top: 1.1rem; }
.social-links a {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    background: var(--f-glass); border: 1px solid var(--f-line); color: rgba(255,255,255,.86);
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.social-links a:hover {
    background: var(--f-accent); border-color: transparent; color: var(--primary, #0B4E3D);
    transform: translateY(-2px);
}
/* Trust / credential strip */
.footer-trust {
    display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 2.2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--f-line); font-size: .85rem; color: var(--f-ink);
}
.footer-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.footer-trust svg { color: var(--f-accent); width: 1.05em; height: 1.05em; }
.footer-bottom {
    border-top: 1px solid var(--f-line); margin-top: 2.5rem; padding: 1.5rem 0;
    text-align: center; font-size: .85rem; color: var(--f-ink-2);
    background: color-mix(in srgb, var(--f-deep) 82%, #000);
}
.footer-bottom a { color: var(--f-ink-2); }
.footer-bottom a:hover { color: #fff; }
.footer-heart { color: var(--f-flame); display: inline-flex; vertical-align: -.15em; }

.back-to-top {
    position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%;
    background: var(--grad-brand); color: #fff; border: 0; display: grid; place-items: center; font-size: 1.2rem;
    box-shadow: var(--shadow-brand); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all var(--transition); z-index: 800;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* 7. --------------------------------------------------------- HERO/SECTIONS */
.hero { position: relative; min-height: clamp(520px, 82vh, 760px); display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide::before { content: ""; position: absolute; inset: 0; background: var(--grad-hero); z-index: 1; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 2; max-width: 680px; }
.hero-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; }
.hero-subtitle { font-size: 1.2rem; color: rgba(255,255,255,.9); margin-bottom: 1.8rem; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 3; }
.hero-dots button { width: 12px; height: 12px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: all var(--transition); }
.hero-dots button.is-active { background: #fff; width: 32px; border-radius: 6px; }

/* Impact counters */
.counter-value { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; }
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.counter-item { text-align: center; padding: 1.5rem 1rem; }
.counter-item .icon-badge { margin: 0 auto 1rem; }
.counter-label { color: var(--muted); font-weight: 600; margin-top: .4rem; }
.section-brand .counter-label, .section-brand .counter-value { color: #fff; }

/* Testimonials carousel */
/* The viewport must clip: the track is a flex row of full/half-width cards that
   is far wider than its container (4 cards = 2344px inside 1160px), and it is
   moved with translateX. Without clipping here, the off-slide cards render in
   the page gutter beside the container — only the body's `overflow-x: clip`
   stopped them leaving the viewport entirely. */
[data-carousel] { overflow: hidden; }
.testi-track { display: flex; gap: 1.5rem; transition: transform .5s ease; }
.testi-card { flex: 0 0 100%; }
@media (min-width: 768px) { .testi-card { flex-basis: calc(50% - .75rem); } }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: "🔍"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,78,61,.55); color: #fff; font-size: 1.6rem; opacity: 0; transition: opacity var(--transition); }
.gallery-item:hover::after { opacity: 1; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(2,6,23,.92); z-index: 1500; display: none; align-items: center; justify-content: center; padding: 2rem; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: 20px; right: 26px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); border: 0; color: #fff; font-size: 2rem; width: 54px; height: 54px; border-radius: 50%; }
.lightbox-nav.prev { left: 20px; } .lightbox-nav.next { right: 20px; }

/* Progress bar (campaigns) */
.progress { height: 10px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; background: var(--grad-brand); border-radius: var(--radius-full); transition: width 1s ease; }

/* Map embed */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.map-embed iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* Empty state */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; }

/* Countdown */
.countdown { display: flex; gap: .75rem; }
.countdown div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .9rem; text-align: center; min-width: 62px; }
.countdown span { display: block; font-size: 1.4rem; font-weight: 800; color: var(--brand-600); }
.countdown small { font-size: .7rem; text-transform: uppercase; color: var(--muted); }

/* 8. ---------------------------------------------------------- ANIMATIONS */
/* Hidden initial state only when JS is available (html.js set by header script) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; } .reveal.delay-2 { transition-delay: .2s; } .reveal.delay-3 { transition-delay: .3s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float { animation: floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal, .js .reveal { opacity: 1; transform: none; }
}

/* Utility: aspect ratios & object cover */
.cover { width: 100%; height: 100%; object-fit: cover; }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow { box-shadow: var(--shadow); }
.list-check { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.list-check li { position: relative; padding-left: 1.9rem; color: var(--text-soft); }
.list-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.35rem; height: 1.35rem; background: rgba(47,128,101,.14); color: var(--success); border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }

/* Prose (blog / page content) */
.prose { color: var(--text-soft); line-height: 1.8; font-size: 1.05rem; }
.prose h2, .prose h3 { margin-top: 2rem; color: var(--text); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose ul, .prose ol { margin: 1rem 0 1rem 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote { border-left: 4px solid var(--brand-600); padding: .5rem 1.2rem; margin: 1.5rem 0; background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; }
.prose a { text-decoration: underline; }

/* 9. --------------------------------------------------------- RESPONSIVE */
@media (max-width: 992px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .counter-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .grid-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .nav-menu, .nav-actions .desktop-only { display: none; }
    .nav-toggle { display: grid; }
    .grid-2, .grid-3, .grid-4, .counter-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .section { padding: 3rem 0; }
}
@media (min-width: 769px) { .mobile-only { display: none !important; } }

/* =============================================================================
   10. PREMIUM HEADER TOP-BAR + ANIMATED FOOTER (design upgrade)
   ============================================================================ */

/* --- Top utility bar above the navbar ---
   A still strip in the deepest step of the brand green, so the header stack
   reads top-to-bottom as: contact strip (dark green) → navbar (white) → hero
   (brand green). It previously ran a 200%-wide navy gradient panning forever
   above the fold, which both fought the green hero for hue and never stopped
   costing paint. Colour comes from --primary so it tracks the Theme Engine. */
.topbar-utility {
    background: color-mix(in srgb, var(--primary, #0B4E3D) 84%, #000);
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    position: relative;
    z-index: 901;
}
@keyframes tuShimmer { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }
.topbar-utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.tu-left, .tu-right { display: flex; align-items: center; gap: 1rem; }
.tu-left a, .tu-right a { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.tu-left a:hover, .tu-right a:hover { color: #fff; }
/* Direct children only — the social pills inside .tu-right keep their own colour. */
.tu-left > a svg, .tu-right > a svg { color: var(--yellow, #FFE987); }
.tu-sep { width: 1px; height: 16px; background: rgba(255,255,255,.22); }
.tu-note { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: rgba(255,255,255,.72); }
.tu-social { display: flex; gap: .35rem; }
.tu-social a {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255,255,255,.10); color: rgba(255,255,255,.88); font-size: .8rem;
    transition: background var(--transition), color var(--transition);
}
.tu-social a:hover { background: var(--yellow, #FFE987); color: var(--primary, #0B4E3D); }
@media (max-width: 860px) { .tu-note, .tu-hide-sm { display: none; } }
@media (max-width: 560px) { .topbar-utility { font-size: .74rem; } .tu-left { gap: .6rem; } }
@media (max-width: 480px) {
    /* Prevent horizontal page scroll on narrow phones: allow wrapping and drop
       the social icons (duplicated in the footer). */
    .topbar-utility-inner { flex-wrap: wrap; row-gap: .15rem; min-width: 0; }
    .tu-left, .tu-right { flex-wrap: wrap; min-width: 0; }
    .tu-social { display: none; }
}

/* --- Stylish animated CTA (used in navbar) --- */
.btn-glow {
    position: relative; background: linear-gradient(120deg, #F15A24, #F15A24, #ef4444, #F15A24);
    background-size: 300% 100%; color: #fff; border: 0; animation: btnGlow 6s ease infinite;
    box-shadow: 0 8px 22px rgba(241,90,36,.4);
}
.btn-glow:hover { color: #fff; transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px rgba(241,90,36,.5); }
@keyframes btnGlow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.btn-glow .heart { display: inline-block; animation: pulseHeart 1.4s ease-in-out infinite; }
@keyframes pulseHeart { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* Nav link animated underline */
.nav-link::before {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
    background: var(--grad-brand); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.nav-link:hover::before, .nav-link.is-active::before { transform: scaleX(1); }

/* =============================================================================
   FOOTER — structural bits only
   -----------------------------------------------------------------------------
   Colour lives in the `.footer` token block above and the refinement layer in
   ui.css. What used to be here was a second full navy paint job (mesh + four
   animated aurora blobs + a panning rainbow top border) that the ui.css layer
   then painted over again — three stacked treatments of the same surface.
   ============================================================================ */
.footer.footer-premium { position: relative; overflow: hidden; }

/* Top rule — the one accent line, static, in the hero's yellow → gold → orange. */
.footer-premium .footer-topline {
    height: 3px; width: 100%; position: relative; z-index: 2;
    background: linear-gradient(90deg, var(--f-accent) 0%, var(--f-gold) 42%, var(--f-flame) 100%);
}
.footer-premium .container, .footer-premium .footer-bottom { position: relative; z-index: 2; }

.footer-premium .newsletter-form { margin: 0; }
.footer-premium .footer-col li { margin-bottom: .18rem; }
.footer-premium h4 { position: relative; padding-bottom: .7rem; }

/* =============================================================================
   EDUSKILL INDIA FOUNDATION — brand button & link specification
   Primary #0B4E3D · Secondary #174D3D · Green #2F8065/#1F5C48 · Orange #F15A24
   ============================================================================= */
.btn-primary            { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover      { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-secondary          { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover    { background: var(--primary); color: #fff; }
.btn-success            { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover      { background: var(--green-dark); border-color: var(--green-dark); }
.btn-donate,
.btn-orange             { background: var(--accent-ink); color: #fff; border-color: transparent; }
.btn-donate:hover,
.btn-orange:hover       { background: color-mix(in srgb, var(--accent) 74%, #000); color: #fff; transform: translateY(-2px); }
.btn-white              { background: var(--white); color: var(--primary); }
.btn-white:hover        { background: var(--white); color: var(--secondary); }

/* Any link whose href mentions donate picks up the CTA colour wherever it sits.
   This is the most specific button rule on the site — `a[href*="donate"].btn-primary`
   is (0,2,1), so it outranked the design-system's `.on-dark .btn-primary` and
   forced full-strength --orange back onto every donate button, taking their white
   labels to 3.37:1. It resolves through --accent-ink now like the rest. */
a[href*="donate"].btn-primary { background: var(--accent-ink); border-color: transparent; }
a[href*="donate"].btn-primary:hover { background: color-mix(in srgb, var(--accent) 74%, #000); }

/* Headings + links follow the brand blues */
h1, h2, h3, h4, h5, h6  { color: var(--primary); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--text); }
p                       { color: var(--text-soft); }
a                       { color: var(--primary); }
a:hover                 { color: var(--secondary); }
:root[data-theme="dark"] a { color: var(--brand-600); }
:root[data-theme="dark"] a:hover { color: var(--brand-700); }

/* Cards — white surface, subtle border, brand hover elevation */
.card, .card-3d         { background: var(--surface); border: 1px solid var(--border); }
.card:hover, .card-3d:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }

/* Forms — secondary-blue focus, brand success/error */
.form-control:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--secondary); outline-color: var(--secondary); }
.is-valid, .valid       { border-color: var(--green) !important; }
.is-invalid, .invalid   { border-color: var(--danger) !important; }

/* Counters / impact numbers / progress in brand green */
.counter-value, .stat-value, .impact-number { color: var(--green); }
.progress-bar, progress::-webkit-progress-value { background: var(--grad-green); }

/* Smooth brand-consistent transitions (200–300ms) */
.btn, .card, .card-3d, a, .nav-link { transition: color .25s cubic-bezier(.4,0,.2,1), background-color .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1); }