/* 
   AQuasar UK Ltd - Responsive Styles
*/

/* Tablet & Mobile Landscape */
@media (max-width: 1024px) {
    :root {
        --container-width: 960px;
        --spacing-xxl: 48px;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    :root {
        --container-width: 100%;
        --header-height: 70px;
        --spacing-lg: 20px;
        --spacing-xl: 24px;
        --spacing-xxl: 40px;
    }

    /* Typography */
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Layout */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .flex-between .btn {
        width: 100%;
    }

    /* Navigation */
    .nav-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--color-primary);
        flex-direction: column;
        padding: var(--spacing-xl);
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
        overflow-y: auto;
    }

    .nav-menu.active {
        transform: translateX(0);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }

    .nav-link {
        font-size: 1.25rem;
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Hero */
    .hero-content {
        padding-top: 100px;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Values */
    .values-section {
        margin-top: 0;
        padding-top: var(--spacing-xl);
        border-radius: 0;
    }

    /* Product Detail */
    .product-gallery {
        height: 300px;
    }
}

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

    .btn {
        width: 100%;
    }
}