/* ============================================================
   RESPONSIVE — mobile-first scale up
   ============================================================ */

/* Small tablet and up */
@media (min-width: 600px) {
    .hero h1 { font-size: 3rem; }
    .hero p  { font-size: 1.15rem; }
    .section-header h2 { font-size: 2.2rem; }
    .about-text h3 { font-size: 1.9rem; }
    .banner-text h2 { font-size: 2rem; }
    .modal-content { padding: 50px; }
}

/* Tablet */
@media (min-width: 900px) {
    .hero h1 { font-size: 3.6rem; }
    .nav-link { font-size: 0.78rem; }
}

/* Below 1024px — hide desktop nav, show hamburger */
@media (max-width: 1023px) {
    .nav-toggle { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        padding: 20px 5%;
        box-shadow: var(--shadow-md);
    }
    .nav-links.is-open { display: flex; }
    .nav-links .nav-link {
        padding: 14px 0;
        border-bottom: 1px solid #eee;
        font-size: 0.85rem;
    }
    .nav-links .donate-nav-btn {
        margin-top: 14px;
        text-align: center;
    }
    .nav-wrapper { position: static; }
    .site-nav { position: sticky; }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero h1 { font-size: 4rem; }
    .container { padding: 80px 5%; }
}

/* Mobile-only refinements */
@media (max-width: 599px) {
    .container { padding: 50px 5%; gap: 40px; }
    .main-grid { gap: 40px; }
    .township-narrative { padding: 22px; font-size: 1rem; }
    .card { padding: 25px; }
    .banner-box { padding: 35px 25px; }
    .volunteer-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .volunteer-box .btn { width: 100%; text-align: center; }
    .sidebar { padding: 25px; position: static; }
    .modal-content { margin: 10% auto; padding: 30px 22px; }
    .journal-body h2 { font-size: 1.5rem; }
    .btn { padding: 12px 24px; }
}