/* ==========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ========================================== */

/* Tablet and Small Desktop */
@media (max-width: 968px) {
    .nav-menu {
        gap: 1.5rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --container-padding: 1.5rem;
    }

    .header-container {
        flex-wrap: wrap;
    }

    .nav-menu {
        display: none;
        /* Will add mobile menu in next iteration */
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .btn-contact {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .btn-donate {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
    }

    .hero-banner {
        background-attachment: scroll;
    }

    .hero-title {
        margin-bottom: 1rem;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .header-actions {
        gap: 0.5rem;
    }

    .btn-contact {
        display: none;
        /* Prioritize Donate button on small screens */
    }
}