/* ANT-CMR Responsive Styles — Mobile First */

/* ===== Tablet (max 1024px) ===== */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }
}

/* ===== Mobile (max 768px) ===== */
@media (max-width: 768px) {

    /* Header */
    .top-bar {
        display: none !important;
    }

    nav .container {
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 12px !important;
        font-size: 0.85rem;
    }

    /* Hero */
    .hero {
        height: 70vh !important;
    }

    .hero h1 {
        font-size: 2.2rem !important;
    }

    .hero p {
        font-size: 1rem !important;
    }

    .hero-btns {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-btns .btn {
        text-align: center;
    }

    /* Stats */
    .stats .container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }

    /* Programs */
    .programs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Donate Box */
    .donate-box {
        padding: 25px !important;
    }

    .donate-options {
        grid-template-columns: 1fr 1fr !important;
    }

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

/* ===== Small Mobile (max 480px) ===== */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem !important;
    }

    .stats .container {
        grid-template-columns: 1fr !important;
    }

    .donate-options {
        grid-template-columns: 1fr !important;
    }

    .nav-links .btn-action {
        width: 100%;
        text-align: center;
    }
}

/* ===== Active lang button style ===== */
.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.lang-btn.active-lang {
    color: var(--primary-green);
    background: rgba(0, 104, 55, 0.1);
}

.lang-btn:not(.active-lang) {
    color: #999;
}

/* ===== Hamburger Menu (Mobile) ===== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 3px;
    transition: all 0.3s;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none !important;
        width: 100%;
        flex-direction: column !important;
        background: white;
        padding: 20px;
        border-top: 1px solid #eee;
    }

    .nav-links.open {
        display: flex !important;
    }
}