/* ============================================
   Responsive Styles - Media Queries
   ============================================ */

/* Top Bar - Desktop */
@media (min-width: 768px) {
    .top-bar {
        background-color: var(--white);
        color: var(--gray-700);
        padding: 1rem 0;
    }

    .top-bar .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        gap: 0;
    }

    .top-bar a {
        color: var(--gray-700);
    }
}

/* Navbar - Desktop */
@media (min-width: 1024px) {
    .navbar {
        background-color: var(--primary);
        padding: 1.6rem 0;
    }

    .logo span:first-child {
        color: var(--white);
    }

    .logo span:last-child {
        color: var(--accent);
    }

    .nav-menu {
        display: flex;
    }

    .nav-link {
        color: var(--white);
    }

    .nav-link::after {
        background-color: var(--accent);
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--accent);
    }

    .mobile-toggle {
        display: none;
    }
}

/* Hero Buttons */
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
    }
}

/* Grid - Tablet */
@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Grid - Desktop */
@media (min-width: 1024px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* Top Bar Contact */
@media (min-width: 768px) {
    .top-bar .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Footer */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CTA Section */
@media (min-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }
}