/* ============================================
   RESPONSIVE GLOBAL – cPanel-ready
   Meander Himalaya – All devices & OS
   iPhone, Android, Tablets, Desktop
   Windows, Linux, macOS
   ============================================ */

/* --- Prevent horizontal scroll on all browsers (100vw includes scrollbar on some) --- */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
}

/* Safe area insets: notched iPhones, Android gesture nav, foldables */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* --- Touch: larger tap targets, no double-zoom on inputs (iOS) --- */
@media (pointer: coarse) {
    a, button, [role="button"], .nav-menu a, .cta-btn, .btn-view-details, .btn-book-now {
        min-height: 44px;
        min-width: 44px;
        -webkit-tap-highlight-color: rgba(197, 160, 89, 0.2);
        tap-highlight-color: rgba(197, 160, 89, 0.2);
    }

    input, select, textarea, .form-group input {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Footer text links: avoid 44×44 blocks on every list item (keeps layout tidy) */
    .footer-section ul li a,
    .footer-section p a.footer-contact-link {
        min-height: auto;
        min-width: auto;
        padding: 0.35rem 0;
        display: inline-flex;
        align-items: center;
    }

    .footer .social-links a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* --- Containers: never overflow viewport, respect safe areas --- */
.container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* --- Navbar: safe top and compact on small screens --- */
.navbar {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    top: 0;
    left: 0;
    right: 0;
}

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

/* --- Hero: full viewport height across devices --- */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
}

.slider-dots,
.hero-scroll-hint {
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- Modals: full-screen on small viewports, safe areas --- */
.booking-modal,
.success-modal {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    min-height: 100dvh;
    min-height: 100svh;
}

.modal-container {
    max-height: calc(100dvh - 2rem);
    max-height: calc(100svh - 2rem);
}

/* --- Footer: safe bottom on notched / gesture devices --- */
.footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* --- Responsive breakpoints: tablets --- */
@media (max-width: 992px) {
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* --- Phones --- */
@media (max-width: 768px) {
    .nav-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .hero .slide-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        /* Ensure content stays inside viewport on mobile */
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 92%;
        max-width: 92%;
        transform: translateY(-50%);
        box-sizing: border-box;
    }

    /* Homepage luxury: tighter hero stack; wins over .hero .slide-content above */
    body.page-home .hero .slide-content {
        top: 48%;
        left: 50%;
        right: auto;
        width: min(92vw, 56rem);
        max-width: 56rem;
        margin-left: 0;
        margin-right: 0;
        transform: translate(-50%, -48%);
        padding: 0.2rem max(1rem, env(safe-area-inset-right)) 0.3rem max(1rem, env(safe-area-inset-left));
    }

    .modal-container {
        border-radius: 0;
        max-height: 100dvh;
        max-height: 100svh;
    }
}

/* --- Small phones (e.g. iPhone SE, narrow Android) --- */
@media (max-width: 480px) {
    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* --- Landscape phones: prevent hero from being too short --- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vmin;
    }

    .slide-content h1 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .hero-scroll-hint {
        display: none;
    }
}

/* --- Prefer reduced motion (accessibility, all OS) --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- High contrast / Windows --- */
@media (prefers-contrast: high) {
    .cta-btn,
    .btn-submit,
    .nav-menu a:hover {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* --- Admin-driven listing heroes (site-content.json listingHeroes) --- */
.page-treks .detail-hero.at-hero.treks-mock-hero.meander-json-hero-bg::before,
.page-expeditions .detail-hero.at-hero.treks-mock-hero.meander-json-hero-bg::before {
    background:
        linear-gradient(180deg, rgba(7, 9, 15, 0.78) 0%, rgba(7, 9, 15, 0.45) 42%, rgba(7, 9, 15, 0.82) 100%),
        var(--mh-listing-hero-img) !important;
    background-size: auto, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
}

.page-treks .detail-hero.meander-json-hero-bg .treks-hero-svg-bg,
.page-expeditions .detail-hero.meander-json-hero-bg .treks-hero-svg-bg {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.peak-hero-noir.meander-json-peak-bg::before {
    background:
        linear-gradient(180deg, rgba(10, 10, 11, 0.5) 0%, rgba(10, 10, 11, 0.75) 50%, #0a0a0b 100%),
        var(--mh-peak-listing-hero-img) center/cover no-repeat !important;
}