body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f9fd;
    color: #333;
}
header {
    background-color: #0a8ed9;
    color: #fff;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* logo, nav, languages */
    flex-wrap: wrap;            /* allow wrapping when tight */
    position: relative;
    overflow: visible;
}
#site-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Reserve space so nav doesn't overlap absolute logo */
    min-width: clamp(180px, 25vw, 320px);
}
.site-logo {
    position: absolute;
    inset-inline-start: 1rem; /* align with header padding (RTL-aware) */
    bottom: -80px; /* hang below the blue header */
    height: 160px; /* default desktop size */
    width: auto;
}
/* Visually hidden, accessible label */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    white-space: nowrap;
    border: 0;
}
#nav-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    display: none; /* shown on mobile */
    margin-inline-end: 0.5rem;
    cursor: pointer;
}
#nav-toggle[aria-expanded="true"] {
    color: #ffeb3b;
}

/* Mobile nav visibility controlled by class to avoid FOUC on resize */
@media (max-width: 768px) {
    header nav { display: none; }
    header nav.open { display: block; }
    padding: 0.75rem 1rem 0;
}

/* Mobile header layout: hamburger | centered logo | languages */
@media (max-width: 768px) {
    header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
    #nav-toggle { display: block; grid-column: 1; justify-self: start; }
    #site-title { grid-column: 2; justify-content: center; min-width: 0; }
    .site-logo { position: static; bottom: auto; height: 96px; width: auto; display: inline; }
    .lang-switcher { grid-column: 3; justify-self: end; position: static; margin: 0; }
    header nav { grid-column: 1 / -1; width: 100%; }
}
#site-tagline {
    margin: 0;
    font-size: 1rem;
}
header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* allow items to wrap to next line */
    gap: 1rem;
}
/* Let nav grow/shrink between logo and languages on wide screens */
header nav { flex: 1 1 400px; min-width: 200px; margin-inline: 1rem; }
header nav li {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
header nav a {
    color: #fff;
    text-decoration: none;
}
header nav li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
header nav a:hover {
    text-decoration: underline;
}

.menu-donate {
    background-color: #ff6b6b;
    color: #fff !important;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}
.donate-item:hover { background-color: transparent; }
.donate-item a.menu-donate:hover { opacity: .9; text-decoration: none; }

/* Language switcher */
.lang-switcher { display: flex; align-items: center; gap: .25rem; }
.lang-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    border-radius: 4px;
    padding: .15rem .35rem;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}
.lang-btn.active { background: rgba(0,0,0,.15); }

.site-banner {
    background: #e6f4fa;
    color: #00344d;
    text-align: center;
    padding: .6rem 1rem;
    font-weight: 600;
}
@media (min-width: 769px) {
    /* offset the logo hanging below header */
    .site-banner { margin-top: 90px; }
}

.donate-btn {
    background-color: #ff6b6b;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    margin-inline-start: 1rem;
    white-space: nowrap;
}
.donate-btn:hover {
    opacity: 0.9;
}
section {
    padding: 2rem;
}
.project-list {
    display: flex;
    gap: 1rem;
}
.project-list article {
    background: #fff;
    padding: 1rem;
    border: 1px solid #eee;
    flex: 1;
}

/* Project-specific persona chips inside cards */
.project-personas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .5rem;
    margin-top: .75rem;
}
.project-personas .persona-label {
    font-weight: 600;
    color: #00344d;
    margin-inline-end: .25rem;
}
.project-personas .persona-chip {
    background-color: #0a8ed9;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: .25rem .6rem;
    font-size: .9rem;
    cursor: pointer;
}
.project-personas .persona-chip:hover { opacity: .9; }
button {
    background-color: #3cb371;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    margin-inline-end: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
button:hover {
    opacity: 0.9;
}

/* CTA hierarchy */
.primary-cta {
    background-color: #fe5b5b;
    color: #fff;
}

.secondary-cta {
    background-color: #cad6e1;
    color: #00344d;
}

.primary-cta:hover,
.secondary-cta:hover {
    opacity: 0.95;
}

/* Statistics block */
#stats {
    background-color: #ffffff;
    text-align: center;
}

.stats-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.stat-item {
    flex: 1 1 150px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0a8ed9;
    display: block;
}

/* Persona selector removed */
footer {
    background-color: #eee;
    text-align: center;
    padding: 1rem;
}

/* Social media icons */
.social-icons {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.social-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
}
.social-icon.facebook { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%234267B2%22%3E%3Cpath d%3D%22M22.675 0h-21.35C.593 0 0 .594 0 1.326v21.348C0 23.406.593 24 1.325 24H12.82v-9.294H9.692V11.41h3.128V8.797c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.098 2.795.142v3.24l-1.918.001c-1.504 0-1.796.716-1.796 1.766v2.317h3.587l-.467 3.296h-3.12V24h6.116C23.406 24 24 23.406 24 22.674V1.326C24 .594 23.406 0 22.675 0z%22/%3E%3C/svg%3E'); }
.social-icon.instagram { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%23E4405F%22%3E%3Cpath d%3D%22M12 2.163c3.204 0 3.584.012 4.849.07 1.366.062 2.633.332 3.608 1.308.975.976 1.246 2.243 1.308 3.608.058 1.265.069 1.645.069 4.849s-.012 3.584-.07 4.849c-.062 1.366-.331 2.633-1.308 3.609-.976.975-2.243 1.246-3.608 1.307-1.265.059-1.645.07-4.849.07s-3.584-.012-4.849-.07c-1.366-.062-2.633-.332-3.608-1.308-.976-.976-1.246-2.243-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12c0-3.204.012-3.584.07-4.849.062-1.366.332-2.633 1.308-3.608C4.516 2.565 5.783 2.294 7.149 2.233 8.414 2.175 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.772.131 4.602.403 3.607 1.398 2.612 2.393 2.34 3.564 2.281 4.844.012 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.28.331 2.451 1.326 3.446.995.995 2.166 1.267 3.446 1.326C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.28-.059 2.451-.331 3.446-1.326.995-.995 1.267-2.166 1.326-3.446.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.28-.331-2.451-1.326-3.446C19.399.403 18.228.131 16.948.072 15.668.013 15.259 0 12 0z%22/%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22/%3E%3Cpath d%3D%22M18.406 4.594a1.44 1.44 0 11-2.881 0 1.44 1.44 0 012.881 0z%22/%3E%3C/svg%3E'); }
.social-icon.telegram { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%2300A0E3%22%3E%3Cpath d%3D%22M9.993 17.674l-.498 4.859c.712 0 1.022-.306 1.404-.672l3.371-3.209 6.991 5.087c1.281.705 2.207.333 2.528-1.188l4.588-21.508C28.933.294 28.02-.159 27.235.118L1.237 9.112C-.502 9.827-.514 10.885.941 11.332l5.951 1.861 13.807-8.693c.65-.424 1.243-.19.756.242L9.993 17.674z%22/%3E%3C/svg%3E'); }
/* Responsive styles */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .donate-btn {
        margin-top: 0.5rem;
    }
    section {
        padding: 1rem;
    }
    .project-list {
        flex-direction: column;
    }
    button {
        margin-block-end: 0.5rem;
    }
    .floating-support,
    .floating-contact,
    .floating-project {
        display: block;
    }
}

@media (max-width: 480px) {
    #site-title {
        font-size: 1.5rem;
    }
    /* Keep logo visible and larger */
    .site-logo { display: inline; height: 84px; }
    #site-tagline {
        font-size: 0.9rem;
    }
    header nav ul {
        flex-direction: column;
        width: 100%;
    }
    header nav li {
        padding: 0.5rem 0;
    }

    /* hide long tagline on very small screens */
    #site-tagline {
        display: none;
    }

    /* reduce media block heights */
    .stories-slide img {
        max-height: 250px;
    }
    .calendar-embed iframe {
        height: 300px;
    }
}

.floating-support {
    position: fixed;
    bottom: 1rem;
    inset-inline-end: 1rem;
    background-color: #3cb371;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    display: none;
}
.floating-contact,
.floating-project {
    position: fixed;
    inset-inline-end: 1rem;
    background-color: #0a8ed9;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    display: none;
}
.floating-contact { bottom: 4rem; }
.floating-project { bottom: 7rem; }

.contact-link {
    margin-inline-end: 0.5rem;
}

/* Map embed - removed */

/* Stories slider */
.stories-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}
.stories-slide {
    display: none;
    text-align: center;
}
.stories-slide.active {
    display: block;
}
.stories-slide img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 4px;
 }
.stories-prev, .stories-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 50%;
}

.stories-prev { inset-inline-start: 10px; }
.stories-next { inset-inline-end: 10px; }



/* Calendar embed */
.calendar-embed iframe {
    width: 100%;
    max-width: 800px;
    height: 400px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: block;
    margin: 1rem auto 0;
}

/* Removed duplicate very-small logo override to avoid conflicts */

/* Desktop alignment: push language buttons to the right */
@media (min-width: 769px) {
    .lang-switcher { margin-inline-start: auto; }
}

/* Donation projects list (index support section) */
.donation-projects { margin-top: 1rem; }
.donation-projects h3 { margin: 0 0 .5rem; }
.donation-projects ul { list-style: none; padding: 0; margin: 0; }
.donation-projects li { background: #fff; border: 1px solid #eee; border-radius: 6px; margin-bottom: .5rem; }
.donation-link { display: block; padding: .75rem 1rem; color: inherit; text-decoration: none; }
.donation-link:hover { background: #f4f9fd; }
.donation-title { font-weight: 600; }
.donation-tagline { color: #0a8ed9; }

/* Donate page */
.donate-page { padding-block: 1rem 3rem; }
.donate-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1.25rem;
}
.donate-hero-media img { width: 100%; height: auto; border-radius: 4px; }
.donate-tagline { color: #0a8ed9; font-weight: 600; margin-block: .25rem .5rem; }
.donate-taxnote { color: #2f6b3a; font-size: .95rem; margin-block: .25rem 0; }

.donate-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-top: 1.25rem;
}
.donate-details { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 1rem; }
.donate-widget { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 1rem; }
.donate-amounts { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .5rem .75rem; }
.amount-btn { background: #cad6e1; color: #00344d; border-radius: 4px; }
.amount-btn.selected { background: #0a8ed9; color: #fff; }
.custom-amount { display: grid; gap: .35rem; margin-block: .25rem .5rem; }
.custom-amount input {
    padding: .5rem .75rem; border: 1px solid #ced9e3; border-radius: 4px; font-size: 1rem; width: 100%;
}
.donate-comment { min-height: 1.4em; color: #2f6b3a; margin: .25rem 0 .75rem; }
.donate-hint { font-size: .9rem; color: #666; margin-top: .25rem; }

@media (max-width: 900px) {
    .donate-hero { grid-template-columns: 1fr; }
    .donate-grid { grid-template-columns: 1fr; }
}

/* Forms: responsive inputs and input-box grid widths */
input, select, textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
input-box { display: block; box-sizing: border-box; }
input-box input, input-box select, input-box textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Utility widths for input-box layouts (used in teachers.php) */
.grid { display: flex; flex-wrap: wrap; gap: var(--gap, 10px); align-items: flex-start; --gap: 10px; }
.grid > * { min-width: 0; box-sizing: border-box; }

/* XS (default) */
.xs-12, .col-12 { flex: 0 0 100%; max-width: 100%; }
.xs-6 { flex: 0 0 calc((100% - var(--gap))/2); max-width: calc((100% - var(--gap))/2); }

/* SM ≥480px */
@media (min-width: 480px) {
  .sm-6 { flex: 0 0 calc((100% - var(--gap))/2); max-width: calc((100% - var(--gap))/2); }
  .sm-3 { flex: 0 0 calc((100% - 3*var(--gap))/4); max-width: calc((100% - 3*var(--gap))/4); }
}

/* MD ≥768px */
@media (min-width: 768px) {
  .md-4 { flex: 0 0 calc((100% - 2*var(--gap))/3); max-width: calc((100% - 2*var(--gap))/3); }
  .md-3 { flex: 0 0 calc((100% - 3*var(--gap))/4); max-width: calc((100% - 3*var(--gap))/4); }
}

/* LG ≥1024px */
@media (min-width: 1024px) {
  .lg-12 { flex: 0 0 100%; max-width: 100%; }
  .lg-4  { flex: 0 0 calc((100% - 2*var(--gap))/3); max-width: calc((100% - 2*var(--gap))/3); }
  .lg-3  { flex: 0 0 calc((100% - 3*var(--gap))/4); max-width: calc((100% - 3*var(--gap))/4); }
}