/* ========================================
   RESPONSIVE UTILITIES FOR THIRA CREATIONS
   Shared responsive utilities and overrides
   ======================================== */

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
@media screen and (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media screen and (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ========================================
   BODY SCROLL LOCK
   ======================================== */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ========================================
   CRITICAL: ENSURE OVERLAYS ARE HIDDEN BY DEFAULT
   ======================================== */
.mobile-menu-overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.filter-overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.filter-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   CRITICAL: ENSURE NAV-LINKS HIDDEN ON MOBILE
   ======================================== */
@media screen and (max-width: 768px) {
    .nav-links {
        position: fixed !important;
        right: -100vw !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .nav-links.active {
        right: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .filter-sidebar:not(.active) {
        left: -100% !important;
    }
}

/* ========================================
   TOUCH-FRIENDLY DEFAULTS
   ======================================== */
@media screen and (max-width: 768px) {
    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ========================================
   SMOOTH SCROLLING
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Disable smooth scrolling when menu is open */
body.menu-open {
    scroll-behavior: auto;
}

/* ========================================
   SAFE AREA INSETS (for notched devices)
   ======================================== */
@supports (padding: max(0px)) {
    .site-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* ========================================
   FIXED BOTTOM ELEMENTS - SAMSUNG/ANDROID FIX
   These need higher bottom values for Android browsers
   ======================================== */
@media screen and (max-width: 768px) {
    .mobile-filter-toggle {
        position: fixed !important;
        bottom: 90px !important; /* Higher for Samsung Browser toolbar */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 100 !important;
    }

    .basket-button {
        position: fixed !important;
        bottom: 90px !important; /* Higher for Samsung Browser toolbar */
        right: 15px !important;
        z-index: 999 !important;
    }
}

/* Even higher for very small screens / larger browser toolbars */
@media screen and (max-width: 768px) and (max-height: 700px) {
    .mobile-filter-toggle {
        bottom: 70px !important;
    }

    .basket-button {
        bottom: 70px !important;
    }
}

/* Support for browsers that understand safe-area-inset */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 768px) {
        .mobile-filter-toggle {
            bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }

        .basket-button {
            bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .hamburger-menu,
    .mobile-filter-toggle,
    .basket-button,
    .promo-banner,
    .mobile-menu-overlay,
    .filter-overlay {
        display: none !important;
    }

    nav .nav-links {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        right: auto !important;
    }

    body {
        background: white !important;
    }

    .hero,
    .site-footer {
        background: var(--navy-blue) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-carousel-container {
        height: 100vh;
        padding-bottom: 0;
    }

    .hero {
        padding: 2rem 1rem;
    }

    .gallery-modal-content img {
        max-height: 60vh;
    }

    .popup-content {
        max-height: 95vh;
    }

    .popup-image {
        height: 200px;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */
@media (prefers-contrast: high) {
    .hamburger-line {
        background-color: currentColor;
    }

    .nav-links a,
    .footer-links a {
        text-decoration: underline;
    }

    .filter-list a.active,
    .event-filter-btn.active,
    .toggle-option input[type="radio"]:checked + span {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}