/* ===================================
   Responsive Design - Mobile First
   =================================== */

/* Mobile Devices (up to 767px) - Base styles in style.css */

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .section {
        padding: 5rem 0;
    }
}

/* Mobile Navigation */
@media (max-width: 991px) {
    .mobile-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 9999;
        align-items: flex-start;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        width: 100%;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
        z-index: 9998;
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
    }

    .categories-grid,
    .shop-category-grid {
        grid-template-columns: 1fr;
    }

    .badges-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .top-bar .container {
        justify-content: center;
        text-align: center;
    }

    .top-bar-info {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {

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

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

/* Large Desktop (1440px and up) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

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

/* Print Styles */
@media print {

    .header,
    .footer,
    .mobile-toggle,
    .hero-cta {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    .section {
        page-break-inside: avoid;
    }
}

/* Force footer text color (fallback) */
footer .footer-bottom p,
.footer-bottom p {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 400;
}