/* ═══════════════════════════════════════════════════════════════
   AVONDORA — Site-wide mobile optimizations
   Loaded last so page styles can inherit clean overrides.
═══════════════════════════════════════════════════════════════ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Avoid page overflow without breaking nav/menu words letter-by-letter */
p, h1, h2, h3, h4, td, th, label {
    overflow-wrap: break-word;
}
.nav-menu,
.nav-menu * {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* ── WhatsApp + booking bars ── */
@media (max-width: 992px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 26px;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 1100;
    }

    .td-mobile-floating-bar,
    .dtd-mobile-bar {
        z-index: 1050;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 12px;
    }

    body:has(.td-mobile-floating-bar),
    body:has(.dtd-mobile-bar) {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    body:has(.td-mobile-floating-bar) .whatsapp-float,
    body:has(.dtd-mobile-bar) .whatsapp-float {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    /* Sticky category / region pills under shortened header */
    .jn-cat-nav,
    .exp-cat-nav,
    .dest-region-nav,
    .dt-cat-nav {
        top: 64px !important;
    }

    /* Footer breathing room above WA */
    footer {
        padding-bottom: 24px;
    }
    .footer-grid {
        gap: 28px !important;
    }
    .footer-social-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Generic heroes / detail heroes */
    .hero {
        height: auto !important;
        min-height: 0 !important;
        padding: 110px 16px 64px !important;
    }
    .detail-hero {
        height: auto !important;
        min-height: 280px;
        padding: 120px 16px 40px;
    }
    .detail-hero-title {
        font-size: clamp(26px, 7vw, 34px) !important;
    }
    .detail-hero-meta {
        flex-wrap: wrap;
        gap: 12px !important;
    }
    .detail-main {
        padding: 22px 16px !important;
    }

    /* Touch: show hover-only CTAs */
    .hp-lx-tour-cta,
    .hp-lx-dest-go,
    .hp-lx-gallery-cell figcaption {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Homepage luxury — natural page scroll, no nested bars */
    .hp-lx-about,
    .hp-lx-about-grid,
    .hp-lx-about-copy,
    .hp-lx-about-visual,
    .hp-body,
    main.main-home {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    .hp-lx-about-visual {
        min-height: 0 !important;
    }
    .hp-lx-float-badge,
    .hp-lx-award-chip {
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin: 12px 0 0;
        display: inline-flex;
    }
    .hp-about-award {
        left: 0 !important;
    }
    .hp-test-card {
        padding: 28px 20px !important;
    }
    .hp-exp-grid {
        grid-template-columns: 1fr !important;
    }
    .hp-hero-label,
    .hp-stat-label {
        font-size: 11px !important;
    }

    /* Listing search cards */
    .jn-search-card,
    .dt-search-card,
    .search-filter-section {
        padding: 18px 16px !important;
    }
    .search-filter-section {
        margin-top: -24px !important;
    }
    .btn-jn-search,
    .btn-dt-search {
        width: 100%;
        white-space: normal;
    }

    /* Heroes on listing pages */
    .jn-hero,
    .dt-hero,
    .dest-hero,
    .exp-hero,
    .td-hero {
        min-height: 340px !important;
        height: auto !important;
        padding-top: 96px;
        padding-bottom: 48px;
    }
    .jn-stats {
        margin-top: 0 !important;
    }

    /* About */
    .ab-hero {
        height: auto !important;
        min-height: 70svh !important;
    }
    .ab-story-images {
        height: 320px !important;
    }

    /* Blog / legal */
    .blog-hero {
        padding: 48px 0 36px !important;
    }
    .lg-prose {
        padding: 24px 18px !important;
    }
    .lg-hero {
        padding: 96px 0 48px !important;
    }

    /* Forms */
    .ct-form-card,
    .pl-form-card .form-step {
        padding: 22px 16px !important;
    }
    .pl-success-card {
        padding: 36px 20px !important;
    }
    .pl-step-node {
        min-width: 0 !important;
        flex: 1;
        font-size: 10px;
    }
    .pl-step-circle {
        width: 32px !important;
        height: 32px !important;
    }

    /* Inputs — 16px prevents iOS zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* Buttons — comfortable taps */
    .btn,
    button:not(.nav-toggle) {
        min-height: 44px;
    }
}

@media (max-width: 560px) {
    .hp-lx-exp-scroll,
    .hp-lx-why-showcase {
        grid-template-columns: 1fr !important;
    }
    .hp-lx-svc-grid {
        grid-template-columns: 1fr !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .td-highlights-grid,
    .dest-maldives-features,
    .cat-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .dest-maldives-content {
        padding: 28px 18px !important;
    }
    .dest-maldives-content h2 {
        font-size: 24px !important;
    }
    .logo-text .tagline {
        font-size: 9px !important;
        letter-spacing: 1.4px;
    }
    .ct-form-card,
    .pl-form-card .form-step {
        padding: 20px 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV SUBMENUS — single column, readable, no letter-break
═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .nav-menu,
    .nav-menu * {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .nav-menu .mega-col,
    .nav-menu .mega-col-wide,
    .nav-menu .mega-col-narrow,
    .nav-menu .mega-inner {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        border: none !important;
        padding: 0 8px !important;
    }

    .nav-menu .nav-item-dropdown.open > .dropdown-menu,
    .nav-menu .nav-item-dropdown.open > .dropdown-menu.dropdown-2col,
    .nav-menu .mega-parent.open .mega-filters,
    .nav-menu .mega-parent.open .mega-tours-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px 10px 12px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .nav-menu .mega-label,
    .nav-menu .dropdown-section-label {
        display: block !important;
        grid-column: auto !important;
        text-align: left !important;
        color: var(--accent, #c5a85a) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.3px !important;
        text-transform: uppercase !important;
        padding: 10px 12px 4px !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .nav-menu .mega-filter-tag,
    .nav-menu .dropdown-item a,
    .nav-menu .mega-view-all {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        color: #1a261c !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.15px !important;
        text-transform: none !important;
        line-height: 1.35 !important;
    }

    .nav-menu .mega-filter-tag i,
    .nav-menu .dropdown-item a i {
        flex-shrink: 0 !important;
        width: 18px !important;
        text-align: center !important;
        color: var(--accent, #c5a85a) !important;
    }

    .nav-menu .dropdown-item {
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-menu .mega-tour-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .nav-menu .mega-tour-item img {
        width: 56px !important;
        height: 42px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .nav-menu .mega-tour-item span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #1a261c !important;
        text-align: left !important;
    }

    .nav-menu .mega-view-all {
        justify-content: center !important;
        font-weight: 700 !important;
        color: var(--accent, #c5a85a) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-top: 6px !important;
        border-top: 1px solid rgba(18, 60, 36, 0.08) !important;
        border-radius: 0 !important;
        white-space: normal !important;
    }
}

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