/* Shared dropdown styling - standardizes the Programs & Others menus on every page */
.programslist .programslist1,
.others .other-main {
position: absolute;
top: 150%;
left: 50%;
transform: translateX(-50%);
background-color: #ffffff;
color: #000000;
min-width: 300px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: 10px 0;
opacity: 0;
visibility: hidden;
display: block;
transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
z-index: 1001;
}
.programslist:hover .programslist1,
.others:hover .other-main {
top: 100%;
opacity: 1;
visibility: visible;
}
.programslist1 ul,
.other-main ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.programslist1 ul li,
.other-main ul li {
margin: 0;
width: 100%;
}
.programslist1 ul li a,
.other-main ul li a {
display: block;
padding: 12px 20px;
font-size: 14px;
white-space: nowrap;
color: #000000;
}
.programslist1 ul li a:hover,
.other-main ul li a:hover {
background-color: #f3e8ff;
color: #4c0563;
}
.programslist1 ul li a i,
.other-main ul li a i {
margin-left: 8px;
}

/* ============================================================
   Site-wide font: match the Education page, which uses the
   system sans-serif stack (no custom web font). nav.css loads
   on every public page via header.php (and NOT the dashboard),
   and after each page's own CSS, so this wins. Overrides Inter
   on body and Poppins on headings.
   ============================================================ */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}

/* ============================================================
   Rebuilt site footer (shared on every public page):
   four columns + "ways to partner" info pills with hover pop-ups.
   Lives here so it is consistent across all pages.
   ============================================================ */
.footer {
    display: block;
    background: #1a1024;
    color: #fff;
    padding: 50px 0 24px;
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-main .footer-col {
    flex: 1 1 160px;
    min-width: 150px;
}
.footer-main .footer-brand {
    flex: 2.4 1 480px;
}
.footer-brand img {
    height: 60px;
    width: auto;
    margin-bottom: 14px;
}
.join-movement { color: #fff; }
.join-movement:hover { color: #f6bb33; }
.footer-col h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    color: rgba(255,255,255,.78);
    font-size: .92rem;
    transition: color .25s ease, padding-left .25s ease;
}
.footer-col ul li a:hover { color: #f6bb33; padding-left: 4px; }
.footer-donate-col { display: flex; align-items: flex-start; justify-content: flex-end; }
.footer-donate-btn {
    display: inline-block;
    background: #f6bb33;
    color: #1a1024;
    padding: 14px 34px;
    border-radius: 30px;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease;
}
.footer-donate-btn:hover { background: #fff; transform: translateY(-3px); }
.footer-line {
    border: 0;
    border-top: 2px solid rgba(255,255,255,.28);
    width: 88%;
    max-width: 1200px;
    margin: 34px auto 26px;
}
.footer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.footer-pills .pill {
    position: relative;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: .88rem;
    cursor: default;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.footer-pills .pill:hover,
.footer-pills .pill:focus {
    background: #6d28d9;
    border-color: #6d28d9;
    transform: translateY(-2px);
    outline: none;
}
.footer-pills .pill-pop {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0;
    transform: translateY(10px);
    width: 300px;
    max-width: 78vw;
    background: #fff;
    color: #333;
    text-align: left;
    padding: 16px 18px;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    font-size: .82rem;
    line-height: 1.55;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 20;
}
.footer-pills .pill-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 28px;
    border: 8px solid transparent;
    border-top-color: #fff;
}
.footer-pills .pill:hover .pill-pop,
.footer-pills .pill:focus .pill-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 8px;
    color: rgba(255,255,255,.85);
    font-size: .9rem;
}
.footer-social { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.footer-social a { color: rgba(255,255,255,.8); transition: color .25s ease; }
.footer-social a:hover { color: #f6bb33; }
@media (max-width: 768px) {
    .footer-main { flex-direction: column; gap: 22px; }
    /* size columns to their content (desktop flex-basis was acting as a tall min-height) */
    .footer-main .footer-col,
    .footer-main .footer-brand { flex: 0 0 auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    /* anchor the hover pop-ups to the pills row (not each pill) so they never overflow the screen */
    .footer-pills { position: relative; }
    .footer-pills .pill { position: static; }
    .footer-pills .pill-pop { left: 0; right: 0; width: auto; max-width: 100%; }
    .footer-pills .pill-pop::after { left: 24px; }
}

/* ============================================================
   Floating side decorations — drop an empty <div class="side-decor">
   as the first child of any full-width .decor-host; the shared footer
   script fills it with shapes. Auto-hidden below 1100px.
   ============================================================ */
.decor-host { position: relative; isolation: isolate; }
.decor-host > *:not(.side-decor) { position: relative; z-index: 1; }
.side-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.side-decor .deco { position: absolute; }
.side-decor .circle { border-radius: 50%; }
.side-decor .ring { border-radius: 50%; background: transparent !important; border-style: solid; }
.side-decor .square { border-radius: 9px; }
.side-decor .tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.side-decor .diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.side-decor .plus { clip-path: polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%); }
.side-decor .hex { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
@keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px,22px); } }
@keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-24px,-18px); } }
@keyframes floatC { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(20px,-16px) rotate(22deg); } }
@keyframes floatD { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-18px,18px) rotate(-22deg); } }
.side-decor .l1 { width: 90px; height: 90px; border-width: 11px; border-color: rgba(246,187,51,.5); left: 4%; top: 5%; animation: floatA 11s ease-in-out infinite; }
.side-decor .l2 { width: 44px; height: 44px; background: rgba(197,0,237,.28); left: 9%; top: 18%; animation: floatC 12s ease-in-out infinite; }
.side-decor .l3 { width: 50px; height: 50px; background: rgba(109,40,217,.3); left: 3%; top: 33%; animation: floatD 10s ease-in-out infinite; }
.side-decor .l4 { width: 24px; height: 24px; background: rgba(33,164,214,.36); left: 8%; top: 49%; animation: floatB 9s ease-in-out infinite; }
.side-decor .l5 { width: 46px; height: 46px; background: rgba(138,43,226,.3); left: 4%; top: 64%; animation: floatC 13s ease-in-out infinite; }
.side-decor .l6 { width: 42px; height: 42px; background: rgba(246,187,51,.34); left: 7%; top: 81%; animation: floatA 12s ease-in-out infinite; }
.side-decor .r1 { width: 72px; height: 72px; border-width: 10px; border-color: rgba(138,43,226,.45); right: 4%; top: 7%; animation: floatB 12s ease-in-out infinite; }
.side-decor .r2 { width: 50px; height: 50px; background: rgba(246,187,51,.32); right: 8%; top: 21%; animation: floatC 11s ease-in-out infinite; }
.side-decor .r3 { width: 26px; height: 26px; background: rgba(197,0,237,.32); right: 3%; top: 36%; animation: floatA 10s ease-in-out infinite; }
.side-decor .r4 { width: 44px; height: 44px; background: rgba(109,40,217,.3); right: 7%; top: 51%; animation: floatD 13s ease-in-out infinite; }
.side-decor .r5 { width: 54px; height: 54px; background: rgba(33,164,214,.3); right: 4%; top: 66%; animation: floatC 12s ease-in-out infinite; }
.side-decor .r6 { width: 40px; height: 40px; border-width: 9px; border-color: rgba(197,0,237,.42); right: 8%; top: 82%; animation: floatB 11s ease-in-out infinite; }
@media (max-width: 1100px) { .side-decor { display: none; } }
@media (prefers-reduced-motion: reduce) { .side-decor .deco { animation: none; } }

/* ============================================================
   Mobile navigation — one unified, animated drawer for every page.
   nav.css loads after each page's CSS, so this overrides the old
   per-page .side-menu colours.
   ============================================================ */
.menu-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.menu-backdrop { display: none; }

@media (max-width: 992px) {
    .main-nav { display: none; }
    .main-head { z-index: 1002; }

    /* animated hamburger → X */
    .hamburger-menu { display: block; position: relative; width: 30px; height: 22px; margin: 0; cursor: pointer; z-index: 1003; }
    .hamburger-menu .bar { position: absolute; left: 0; width: 100%; height: 3px; margin: 0; border-radius: 3px; background: #4c0563; transition: transform .45s cubic-bezier(.6,.05,.2,1), opacity .25s ease; }
    .hamburger-menu .bar:nth-child(1) { top: 0; }
    .hamburger-menu .bar:nth-child(2) { top: 9px; }
    .hamburger-menu .bar:nth-child(3) { top: 18px; }
    #menu-toggle:checked ~ .main-head .hamburger-menu .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    #menu-toggle:checked ~ .main-head .hamburger-menu .bar:nth-child(2) { opacity: 0; transform: translateX(-12px); }
    #menu-toggle:checked ~ .main-head .hamburger-menu .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* dim, blurred backdrop */
    .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(18,5,26,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; cursor: pointer; }
    #menu-toggle:checked ~ .menu-backdrop { opacity: 1; visibility: visible; }

    /* the drawer */
    .side-menu {
        position: fixed; top: 0; left: 0;
        width: 86%; max-width: 350px; height: 100%;
        background: linear-gradient(165deg, #5d0b7e 0%, #3a0a51 58%, #270a37 100%);
        color: #fff;
        transform: translateX(-100%);
        transition: transform .55s cubic-bezier(.76,0,.24,1), box-shadow .55s ease;
        box-shadow: none;
        z-index: 1001;
        padding: 104px 0 40px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .side-menu::-webkit-scrollbar { width: 0; }
    .side-menu::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(246,187,51,.16), transparent 70%); bottom: -50px; right: -50px; pointer-events: none; }
    #menu-toggle:checked ~ .side-menu { transform: translateX(0); box-shadow: 18px 0 70px rgba(0,0,0,.45); }

    .side-menu nav ul { display: block; list-style: none; margin: 0; padding: 0; }
    .side-menu nav li { width: 100%; margin: 0; opacity: 0; transform: translateX(-22px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
    #menu-toggle:checked ~ .side-menu nav li { opacity: 1; transform: none; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(1) { transition-delay: .14s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(2) { transition-delay: .19s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(3) { transition-delay: .24s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(4) { transition-delay: .29s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(5) { transition-delay: .34s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(6) { transition-delay: .39s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(7) { transition-delay: .44s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(8) { transition-delay: .49s; }
    #menu-toggle:checked ~ .side-menu nav li:nth-child(9) { transition-delay: .54s; }
    .side-menu nav a {
        display: block; position: relative;
        padding: 15px 32px;
        color: #fff; font-size: 1.18rem; font-weight: 600; letter-spacing: .3px;
        transition: color .3s ease, padding .3s ease, background .3s ease;
    }
    .side-menu nav a::before {
        content: ""; position: absolute; left: 0; top: 50%;
        width: 4px; height: 0; border-radius: 0 4px 4px 0;
        background: #f6bb33; transform: translateY(-50%);
        transition: height .3s ease;
    }
    .side-menu nav a:hover, .side-menu nav a:focus { color: #ffd84d; padding-left: 42px; background: rgba(255,255,255,.06); }
    .side-menu nav a:hover::before, .side-menu nav a:focus::before { height: 56%; }

    @media (prefers-reduced-motion: reduce) {
        .side-menu, .side-menu nav li, .hamburger-menu .bar { transition-duration: .01ms; }
    }
}