/* ============================================
   Header Responsive Styles - Pixel Perfect Match
   ============================================ */

/* Breakpoints matching Tailwind:
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
*/

/* ============================================
   Mobile First (< 640px)
   ============================================ */

/* Header adjustments for mobile */
@media (max-width: 767px) {

    /* Header is sticky on all devices */
    .modeo-header {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .modeo-header .max-w-8xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Logo centered on mobile, matching Next.js */
    .modeo-header__logo {
        flex: 1 1 0%;
        display: flex;
        justify-content: center;
    }

    /* Ensure logo doesn't shrink too much */
    .modeo-header__logo h1 {
        font-size: 1.5rem;
        /* text-2xl = 1.5rem */
        line-height: 2rem;
        font-weight: 700;
    }

    /* Hide desktop navigation on mobile */
    .modeo-header nav {
        display: none;
    }
}

/* ============================================
   Small screens (640px+)
   ============================================ */

@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ============================================
   Medium screens / Desktop (768px+)
   ============================================ */

@media (min-width: 768px) {

    /* Header becomes sticky */
    .modeo-header {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    /* Hide mobile elements */
    .md\:hidden {
        display: none !important;
    }

    /* Show desktop elements */
    .md\:flex {
        display: flex !important;
    }

    .md\:block {
        display: block !important;
    }

    /* Navigation adjustments - matching Next.js space-x-8 (2rem) */
    .modeo-header nav {
        display: flex;
        flex: 1 1 0%;
        justify-content: center;
        gap: 0;
        /* Reset gap, use margin instead for space-x-8 */
    }

    /* Ensure nav items have proper spacing like space-x-8 in Next.js */
    .modeo-header nav>*+* {
        margin-left: 2rem;
        /* space-x-8 = 2rem */
    }

    /* Logo positioning */
    .md\:flex-initial {
        flex: 0 1 auto;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

    /* Mega menu positioning */
    .modeo-mega-menu {
        top: 4rem;
        /* h-16 */
    }

    /* User menu visible on desktop */
    .modeo-user-menu-wrapper {
        display: flex;
    }
}

/* ============================================
   Large screens (1024px+)
   ============================================ */

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* More spacing for navigation on large screens - matching Next.js */
    .modeo-header nav {
        gap: 0;
        /* Reset gap, use margin instead for space-x-8 */
    }

    .modeo-header nav>*+* {
        margin-left: 2rem;
        /* space-x-8 = 2rem */
    }
}

/* ============================================
   Extra Large screens (1280px+)
   ============================================ */

@media (min-width: 1280px) {

    /* Max width container */
    .max-w-8xl {
        max-width: 1600px;
    }
}

/* ============================================
   2XL screens (1536px+)
   ============================================ */

@media (min-width: 1536px) {
    .max-w-8xl {
        max-width: 1600px;
    }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets on mobile */
    .modeo-mobile-nav-button,
    .modeo-cart-button,
    .modeo-user-menu-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Better spacing for touch */
    .modeo-header nav a {
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   High DPI / Retina Displays
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Ensure crisp borders */
    .modeo-header {
        border-bottom-width: 0.5px;
    }

    .modeo-mega-menu {
        border-top-width: 0.5px;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .modeo-header {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid #000;
    }

    .modeo-mobile-nav-button,
    .modeo-cart-button,
    .modeo-user-menu,
    .modeo-mega-menu,
    .modeo-mobile-nav {
        display: none !important;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .modeo-header *,
    .modeo-mega-menu *,
    .modeo-mobile-nav * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .modeo-mega-menu {
        transition: none !important;
    }

    .modeo-mobile-nav {
        transition: none !important;
    }
}

/* ============================================
   Dark Mode Support (if needed in future)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Currently not using dark mode, but ready for future */
    /* .modeo-header {
        background-color: #1a1a1a;
        border-bottom-color: #333;
    } */
}

/* ============================================
   Container Queries (Future Enhancement)
   ============================================ */

@container (min-width: 768px) {
    /* Future: Use container queries for better component-level responsiveness */
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus visible for keyboard navigation */
.modeo-header *:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modeo-header {
        border-bottom-width: 2px;
    }

    .modeo-nav-item a {
        font-weight: 600;
    }
}