/**
 * Mobile Responsive Fixes
 *
 * Fixes untuk 43 responsive issues yang ditemukan dalam audit
 * Target: Mobile devices < 768px
 *
 * @package Bali_Private_Jet
 * @version 1.0.0
 */

/* ===================================
   GLOBAL MOBILE FIXES
   =================================== */

/* Ensure proper touch targets (min 44x44px) */
@media (max-width: 767px) {
    a, button, .swiper-button-next, .swiper-button-prev {
        min-height: 44px;
        min-width: 44px;
    }

    /* Global background image fixes for all heroes */
    section.hero,
    section.min-h-screen,
    .hero-section {
        overflow: hidden !important;
        position: relative !important;
    }

    /* Ensure all background containers are properly sized */
    section.hero .absolute.inset-0,
    section.min-h-screen .absolute.inset-0,
    .hero-section .absolute.inset-0 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* All hero background images */
    section.hero img,
    section.min-h-screen img,
    .hero-section img,
    .absolute.inset-0 img {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
    }

    /* Fix for background-image style backgrounds */
    .bg-fixed,
    [style*="background-image"] {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Gradient overlays should also fill properly */
    .absolute.inset-0 > div,
    .absolute.inset-0 .bg-gradient-to-b,
    .absolute.inset-0 .bg-gradient-to-t {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Dark overlay for better text readability on mobile */
    section.hero::before,
    section.min-h-screen::before,
    .hero-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.7) 100%
        ) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Ensure content stays above overlay */
    section.hero > .container,
    section.min-h-screen > .container,
    .hero-section > .container,
    section.hero > div.container,
    section.min-h-screen > div.container {
        position: relative !important;
        z-index: 10 !important;
    }

    /* Background images should be behind overlay */
    section.hero .absolute.inset-0,
    section.min-h-screen .absolute.inset-0,
    .hero-section .absolute.inset-0 {
        z-index: 0 !important;
    }

    /* Text enhancement for better readability on overlay */
    section.hero h1,
    section.min-h-screen h1,
    section.hero h2,
    section.min-h-screen h2,
    section.hero p,
    section.min-h-screen p,
    .hero-section h1,
    .hero-section h2,
    .hero-section p {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
                     0 4px 8px rgba(0, 0, 0, 0.2) !important;
        position: relative !important;
    }

    /* Extra emphasis for headings */
    section.hero h1,
    section.min-h-screen h1,
    .hero-section h1 {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                     0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }

    /* Yellow text needs less shadow */
    section.hero .text-lbyellow,
    section.min-h-screen .text-lbyellow,
    section.hero .text-yellow-400,
    section.min-h-screen .text-yellow-400 {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
                     0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ===================================
   FRONT-PAGE.PHP FIXES
   =================================== */

/* ISSUE #1: Hero heading - reduce size and improve line-height */
@media (max-width: 639px) {
    .min-h-screen h1.font-serif {
        font-size: 2rem !important; /* text-3xl → text-2xl */
        line-height: 1.375 !important; /* leading-tight → leading-snug */
    }
}

/* ISSUE #2: Subtitle - reduce size and add line-height */
@media (max-width: 639px) {
    .min-h-screen .text-lbyellow {
        font-size: 0.875rem !important; /* text-base → text-sm */
        line-height: 1.625 !important; /* add leading-relaxed */
    }
}

/* ISSUE #3: Trust bar - improve icon size and spacing */
@media (max-width: 767px) {
    .border-y .flex-wrap {
        gap: 0.75rem !important; /* gap-4 → gap-3 */
    }

    .border-y .flex-wrap span {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .border-y svg.w-4 {
        width: 1.25rem !important; /* w-4 → w-5 */
        height: 1.25rem !important; /* h-4 → h-5 */
    }
}

/* ISSUE #4 & #5: Swiper cards - increase padding and text size */
@media (max-width: 767px) {
    .valueSwiper .swiper-slide > div {
        padding-left: 1.5rem !important; /* px-4 → px-6 */
        padding-right: 1.5rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .valueSwiper .w-16 {
        width: 5rem !important; /* w-16 → w-20 */
        height: 5rem !important; /* h-16 → h-20 */
    }

    .valueSwiper h3.text-lg {
        font-size: 1.25rem !important; /* text-lg → text-xl */
    }

    .valueSwiper p.text-sm {
        font-size: 1rem !important; /* text-sm → text-base */
    }
}

/* ISSUE #6: Section headers - reduce size */
@media (max-width: 767px) {
    section h2.text-4xl {
        font-size: 1.875rem !important; /* text-4xl → text-3xl */
        margin-bottom: 1.5rem !important;
    }

    section h2.text-4xl + div,
    section h2.text-4xl + p {
        font-size: 1rem !important; /* text-lg → text-base */
    }
}

/* ISSUE #7: Grid 3 columns - reduce gap and padding */
@media (max-width: 767px) {
    .grid.md\:grid-cols-3 {
        gap: 1.5rem !important; /* gap-8 → gap-6 */
    }

    .grid.md\:grid-cols-3 > div {
        padding: 2rem !important; /* p-6 → p-8 */
    }

    .grid.md\:grid-cols-3 h4.text-xl {
        font-size: 1.125rem !important; /* text-xl → text-lg */
    }
}

/* ISSUE #8: Bespoke journeys section - reduce padding */
@media (max-width: 767px) {
    section .p-10.md\:p-16 {
        padding: 1.5rem !important; /* p-10 → p-6 */
    }

    section .p-10.md\:p-16 h3 {
        font-size: 1.5rem !important; /* text-3xl → text-2xl */
        margin-bottom: 1.5rem !important;
    }

    section .grid.lg\:grid-cols-4 {
        gap: 1.5rem !important; /* gap-8 → gap-6 */
    }
}

/* ISSUE #9: List text - increase size */
@media (max-width: 767px) {
    ul.text-sm {
        font-size: 1rem !important; /* text-sm → text-base */
    }
}

/* ISSUE #11: Route cards - reduce minimum height and padding */
@media (max-width: 639px) {
    .routesSwiper .swiper-slide > div {
        min-height: 200px !important; /* min-h-[240px] → min-h-[200px] */
        padding: 1rem !important; /* p-6 → p-4 */
    }
}

/* ISSUE #12: Route headings - reduce size */
@media (max-width: 767px) {
    .routesSwiper h4.text-xl {
        font-size: 1.125rem !important; /* text-xl → text-lg */
    }

    .routesSwiper .px-3 {
        padding-left: 0.5rem !important; /* px-3 → px-2 */
        padding-right: 0.5rem !important;
    }
}

/* ISSUE #13: Terminal section - reduce padding and gap */
@media (max-width: 767px) {
    .p-10.border.border-gray-800 {
        padding: 1.5rem !important; /* p-10 → p-6 */
    }

    .p-10.border h3 {
        font-size: 1.5rem !important; /* text-3xl → text-2xl */
    }

    .grid.md\:grid-cols-2 {
        gap: 1.5rem !important; /* gap-8 → gap-6 */
    }
}

/* ISSUE #15: Fleet cards - reduce gap and padding */
@media (max-width: 767px) {
    .grid.mb-12.md\:grid-cols-3 {
        gap: 1.5rem !important; /* gap-8 → gap-6 */
    }

    .grid.mb-12.md\:grid-cols-3 .p-8 {
        padding: 1.5rem !important; /* p-8 → p-6 */
    }

    .grid.mb-12.md\:grid-cols-3 h3.text-2xl {
        font-size: 1.25rem !important; /* text-2xl → text-xl */
    }
}

/* ISSUE #17: Two column grids - reduce gap */
@media (max-width: 1023px) {
    .grid.gap-16.lg\:grid-cols-2 {
        gap: 2.5rem !important; /* gap-16 → gap-10 */
        margin-bottom: 4rem !important;
    }

    .grid.gap-16.lg\:grid-cols-2 h3 {
        font-size: 1.5rem !important;
    }
}

/* ISSUE #18: Testimonials - reduce padding and text size */
@media (max-width: 767px) {
    .grid.gap-10.md\:grid-cols-2 {
        gap: 2rem !important; /* gap-10 → gap-8 */
    }

    .grid.gap-10.md\:grid-cols-2 .p-10 {
        padding: 1.5rem !important; /* p-10 → p-6 */
    }

    .grid.gap-10.md\:grid-cols-2 .text-6xl {
        font-size: 2.25rem !important; /* text-6xl → text-4xl */
    }

    .grid.gap-10.md\:grid-cols-2 p.text-lg {
        font-size: 1rem !important; /* text-lg → text-base */
    }
}

/* ISSUE #19: Gallery grid - reduce gap */
@media (max-width: 767px) {
    .grid.gap-6.lg\:grid-cols-3 {
        gap: 1rem !important; /* gap-6 → gap-4 */
    }
}

/* ISSUE #21: Experience cards - reduce padding and heading size */
@media (max-width: 767px) {
    .experienceSwiper .swiper-slide .p-8 {
        padding: 1.5rem !important; /* p-8 → p-6 */
    }

    .experienceSwiper h3.text-2xl {
        font-size: 1.25rem !important; /* text-2xl → text-xl */
    }
}

/* ISSUE #22 & #23: FAQ and CTA sections */
@media (max-width: 767px) {
    #faq h2.text-4xl,
    #contact h2.text-5xl {
        font-size: 1.875rem !important; /* text-4xl/text-5xl → text-3xl */
        line-height: 1.25 !important;
    }

    #contact h2 + p.text-xl {
        font-size: 1.125rem !important; /* text-xl → text-lg */
    }
}

/* ===================================
   CHARTER-REQUEST-PAGE.PHP FIXES
   =================================== */

/* ISSUE #24: Hero heading */
@media (max-width: 639px) {
    .charter-request h1 {
        font-size: 2rem !important;
        line-height: 1.375 !important;
    }
}

/* ISSUE #26: Contact method cards */
@media (max-width: 767px) {
    .charter-methods .grid.md\:grid-cols-3 {
        gap: 1.5rem !important;
    }
}

/* ISSUE #28: Process step icons - increase size */
@media (max-width: 767px) {
    .process-steps .w-16 {
        width: 5rem !important;
        height: 5rem !important;
    }
}

/* ISSUE #29: Form section - reduce padding */
@media (max-width: 767px) {
  

    #charter-request-form.space-y-8 {
        row-gap: 1.5rem !important;
    }
}

/* ISSUE #30: Trust indicators - fix grid */
@media (max-width: 767px) {
    .trust-indicators.grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ===================================
   DESTINATIONS.PHP FIXES
   =================================== */

/* ISSUE #31-33: Destinations hero and intro */
@media (max-width: 767px) {
    .destinations-hero h1 {
        font-size: 2rem !important;
    }

    .destinations-hero .text-xl {
        font-size: 1.125rem !important;
    }

    .destinations-intro h2.text-3xl {
        font-size: 1.5rem !important;
    }

    .destinations-intro .space-y-6 {
        row-gap: 1rem !important;
    }
}

/* ISSUE #34: Route category cards */
@media (max-width: 767px) {
    .route-categories .grid.md\:grid-cols-2 {
        gap: 1.5rem !important;
    }

    .route-categories .p-8 {
        padding: 1.5rem !important;
    }

    .route-categories .w-20 {
        width: 4rem !important;
        height: 4rem !important;
    }

    .route-categories .text-5xl {
        font-size: 2.25rem !important;
    }
}

/* ===================================
   CONTACT.PHP FIXES
   =================================== */

/* ISSUE #35-37: Contact form sections */
@media (max-width: 767px) {
    #contact h2.text-4xl {
        font-size: 1.875rem !important;
    }

    #contact .p-8.md\:p-12 {
        padding: 1.5rem !important;
    }

    #contact .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ===================================
   ARCHIVE-FLEET.PHP FIXES
   =================================== */

/* ISSUE #38: Fleet hero */
@media (max-width: 767px) {
    .fleet-archive h1.text-3xl {
        font-size: 2rem !important;
    }
}

/* ISSUE #39: Fleet categories grid */
@media (max-width: 767px) {
    .fleet-categories.grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ISSUE #40: Safety grid */
@media (max-width: 767px) {
    .safety-features.grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* ISSUE #41: Selection guidance grid */
@media (max-width: 767px) {
    .selection-guide.grid.md\:grid-cols-2 {
        gap: 1.5rem !important;
    }
}

/* ISSUE #42: FAQ items */
@media (max-width: 767px) {
    .faq-item button {
        padding: 1.5rem !important;
    }

    .faq-item h3.text-xl {
        font-size: 1.125rem !important;
        padding-right: 1.5rem !important;
    }

    .faq-item .p-8 {
        padding: 1.5rem !important;
    }
}

/* ISSUE #43: Fleet CTA */
@media (max-width: 767px) {
    .fleet-cta h2.text-3xl {
        font-size: 1.5rem !important;
    }
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

/* Ensure text is never too small to read */
@media (max-width: 767px) {
    body {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }

    p, li, td {
        min-font-size: 14px !important;
    }
}

/* Prevent horizontal scroll */
@media (max-width: 767px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100% !important;
    }

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

/* Improve touch targets */
@media (max-width: 767px) {
    button, a, input[type="button"], input[type="submit"] {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    input, select, textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Grid improvements for small screens */
@media (max-width: 767px) {
    .grid {
        grid-template-columns: 1fr !important;
    }

    .grid.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Spacing consistency */
@media (max-width: 767px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Ensure sufficient contrast */
@media (max-width: 767px) {
    .text-gray-400 {
        color: #d1d5db !important; /* Lighter for better contrast */
    }

    .text-gray-300 {
        color: #e5e7eb !important;
    }
}

/* Focus states for keyboard navigation */
@media (max-width: 767px) {
    a:focus, button:focus, input:focus, select:focus, textarea:focus {
        outline: 2px solid #ffcb30 !important;
        outline-offset: 2px !important;
    }
}

/* ===================================
   MOBILE NAVIGATION FIXES
   =================================== */

/* Ensure swiper navigation is accessible */
@media (max-width: 767px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 44px !important;
        height: 44px !important;
    }

    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        margin: 0 6px !important;
    }
}

/* ===================================
   HEADER MOBILE FIXES
   =================================== */

/* ISSUE #44: Header layout and logo sizing on mobile */
@media (max-width: 767px) {
    /* Reduce header padding */
    header {
        padding: 12px 16px !important;
    }

    /* Reduce logo size on mobile */
    header .logo img {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
    }

    /* Ensure hamburger menu meets touch target minimum */
    .hamburger-menu {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Adjust mobile nav positioning to match reduced header */
    .mobile-nav {
        top: 64px !important; /* Adjusted for new header height */
    }

    /* Fix nav menu items font size and spacing */
    .mobile-nav a,
    .mobile-nav button {
        font-size: 1rem !important;
        padding: 14px 16px !important;
        min-height: 44px !important;
    }
}

/* Extra small devices - further reduce logo */
@media (max-width: 375px) {
    header .logo img {
        height: 35px !important;
        max-height: 35px !important;
    }

    header {
        padding: 10px 12px !important;
    }
}

/* ===================================
   ALL HERO SECTIONS RESPONSIVE FIXES
   =================================== */

/* ISSUE #45: Front-page hero - comprehensive mobile fixes */
@media (max-width: 767px) {
    /* Hero section height and padding adjustments */
    .min-h-screen {
        min-height: 100vh !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Background image fixes - ensure proper coverage */
    .min-h-screen .absolute.inset-0 img,
    .min-h-screen .absolute.inset-0 > img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Hero heading - optimized for mobile readability (following drone show pattern) */
    .min-h-screen h1.font-serif {
        font-size: 1.875rem !important; /* text-3xl - 30px */
        line-height: 1.3 !important; /* Better readability */
        margin-bottom: 1.5rem !important; /* More spacing */
        word-spacing: 0.05em !important;
        letter-spacing: 0.02em !important;
        font-weight: 700 !important;
    }

    /* Hero subtitle - proper sizing for hierarchy */
    .min-h-screen .text-lbyellow {
        font-size: 0.875rem !important; /* text-sm - 14px */
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
        letter-spacing: 0.05em !important;
    }

    /* Hero description paragraph - comfortable reading size */
    .min-h-screen p.text-gray-300 {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important; /* Comfortable line height */
        margin-bottom: 2rem !important; /* More spacing before CTA */
    }

    /* Hero CTA buttons - prominent and touch-friendly */
    .min-h-screen a.bg-lbyellow,
    .min-h-screen a.border-white {
        padding: 1rem 1.5rem !important; /* Generous padding */
        font-size: 1rem !important; /* text-base - 16px */
        width: 100% !important;
        text-align: center !important;
        font-weight: 700 !important;
        min-height: 48px !important; /* WCAG compliant */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Button container - comfortable spacing */
    .min-h-screen .flex-col {
        gap: 0.875rem !important; /* 14px gap */
    }

    /* Container padding optimization */
    .min-h-screen .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Content wrapper */
    .min-h-screen .max-w-4xl {
        text-align: center !important;
        width: 100% !important;
    }
}

/* ISSUE #46: Destinations hero responsive fixes (UPDATED Nov 1, 2025) */

/* Desktop responsive fixes (768px - 1440px) */
@media (min-width: 768px) and (max-width: 1440px) {
    /* Destinations hero - better scaling on medium desktops */
    .destinations-page .hero h1 {
        font-size: 3.5rem !important; /* Between 3xl and 6xl */
        line-height: 1.2 !important;
    }

    .destinations-page .hero .text-xl.text-yellow-400,
    .destinations-page .hero .text-2xl.text-yellow-400 {
        font-size: 1.5rem !important;
    }

    .destinations-page .hero p.max-w-3xl {
        font-size: 1.125rem !important;
        max-width: 48rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Stats bar responsive */
    .destinations-page .hero .flex-wrap {
        gap: 1.5rem !important;
    }

    .destinations-page .hero .flex-wrap span {
        font-size: 0.9375rem !important;
    }
}

/* Tablet fixes (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .destinations-page .hero h1 {
        font-size: 2.5rem !important;
    }

    .destinations-page .hero .text-xl.text-yellow-400,
    .destinations-page .hero .text-2xl.text-yellow-400 {
        font-size: 1.25rem !important;
    }

    .destinations-page .hero p.max-w-3xl {
        font-size: 1rem !important;
    }
}

/* Mobile fixes (max-width: 767px) */
@media (max-width: 767px) {
    /* Destinations hero height and centering */
    .destinations-page .hero.h-96 {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Hero container */
    .destinations-page .hero .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* CRITICAL FIX: Background image layer - ensure visibility */
    .destinations-page .hero > div[style*="background-image"],
    .destinations-page section.hero > div[style*="background-image"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        opacity: 0.5 !important; /* Increased from 0.3 for better visibility */
        display: block !important;
    }

    /* Force background image to show - very specific selector */
    .destinations-page .hero .bg-fixed.bg-center.bg-cover,
    .destinations-page section.hero .absolute.inset-0.bg-fixed {
        opacity: 0.5 !important;
        z-index: 1 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Background image fixes for destinations - generic selector */
    .destinations-page .hero .absolute.inset-0 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Background pattern layer (yellow blobs) */
    .destinations-page .hero > div:first-child {
        z-index: 0 !important;
    }

    /* Overlay layer */
    .destinations-page .hero > div.bg-black.opacity-60 {
        z-index: 2 !important;
    }

    .destinations-page .hero .bg-fixed {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Dark overlay - REDUCED for better background visibility */
    .destinations-page .hero .bg-black.opacity-60,
    .destinations-page .hero > .absolute.inset-0.bg-black {
        opacity: 0.5 !important; /* Reduced from 0.6 */
        background-color: #000000 !important;
    }

    /* Ensure overlay doesn't completely hide background */
    .destinations-page .hero > div.absolute.bg-black {
        opacity: 0.4 !important; /* Even lighter overlay */
    }

    /* Additional overlay layer for destinations - LIGHTENED */
    .destinations-page .hero::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.2) 0%,  /* Reduced from 0.3 */
            rgba(0, 0, 0, 0.35) 100%  /* Reduced from 0.5 */
        ) !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    /* Mobile-specific: Force background image inline style to work */
    .destinations-page .hero [style*="background-image"] {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
        background-size: cover !important;
    }

    /* Ensure destinations content is above ALL overlays and backgrounds */
    .destinations-page .hero > div:last-child,
    .destinations-page .hero .relative {
        position: relative !important;
        z-index: 100 !important;
    }

    .destinations-page .hero .container {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Animated background blobs - reduce size */
    .destinations-page .hero .w-48 {
        width: 8rem !important;
        height: 8rem !important;
    }

    /* Decorative lines - reduce width */
    .destinations-page .hero .w-16 {
        width: 2rem !important;
    }

    /* Hero title with decorative lines container */
    .destinations-page .hero .space-x-2 {
        gap: 0.5rem !important;
        margin-top: 0 !important;
    }

    /* Destinations hero h1 - matching drone show size */
    .destinations-page .hero h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    /* Destinations hero subtitle */
    .destinations-page .hero .text-xl.text-yellow-400 {
        font-size: 0.875rem !important; /* 14px - matching subtitle pattern */
        margin-bottom: 1.25rem !important;
        line-height: 1.5 !important;
    }

    /* Destinations hero description */
    .destinations-page .hero p.max-w-3xl {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Quick stats bar */
    .destinations-page .hero .flex-wrap {
        gap: 1rem !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        font-size: 0.8125rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Stats icons */
    .destinations-page .hero .text-2xl {
        font-size: 1.125rem !important;
    }

    /* CTA button - full width and prominent */
    .destinations-page .hero a.bg-yellow-400 {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 400px !important;
        display: block !important;
        margin: 0 auto !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Content spacing */
    .destinations-page .hero .space-y-6 {
        row-gap: 1.25rem !important;
    }

    /* === DESTINATIONS PAGE - OTHER SECTIONS MOBILE === */

    /* Introduction Section */
    .destinations-page section:nth-of-type(2) h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
    }

    .destinations-page section:nth-of-type(2) p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    /* Route Categories Section */
    .destinations-page section:nth-of-type(3) h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .destinations-page section:nth-of-type(3) > div > div:first-child p {
        font-size: 0.9375rem !important;
    }

    /* Category cards */
    .destinations-page .grid.gap-8 {
        gap: 1.25rem !important;
    }

    .destinations-page .grid.gap-8 > div {
        padding: 1.5rem !important;
    }

    .destinations-page .grid.gap-8 h3 {
        font-size: 1.375rem !important;
        margin-bottom: 1rem !important;
    }

    .destinations-page .grid.gap-8 .w-20 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1rem !important;
    }

    .destinations-page .grid.gap-8 i.text-5xl {
        font-size: 2.25rem !important;
    }

    .destinations-page .grid.gap-8 p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* CTA Section */
    .destinations-page section:nth-of-type(4) {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Reduce overlay darkness on mobile for better background visibility */
    .destinations-page section:nth-of-type(4) > div.absolute.inset-0:first-of-type {
        opacity: 0.7 !important; /* Lighter than bg-black/85 */
    }

    .destinations-page section:nth-of-type(4) h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.25rem !important;
    }

    .destinations-page section:nth-of-type(4) p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .destinations-page section:nth-of-type(4) .flex.flex-col {
        gap: 1rem !important;
    }

    .destinations-page section:nth-of-type(4) a {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Destinations CTA Section - All devices (improve background visibility) */
@media (min-width: 768px) {
    /* Desktop - slightly lighter overlay */
    .destinations-page section:nth-of-type(4) > div.absolute.inset-0:first-of-type {
        background-color: rgba(0, 0, 0, 0.75) !important; /* Lighter than 0.85 */
    }
}

/* Extra small devices - Destinations page */
@media (max-width: 375px) {
    .destinations-page .hero h1 {
        font-size: 1.625rem !important; /* 26px */
    }

    .destinations-page .hero .text-xl.text-yellow-400 {
        font-size: 0.8125rem !important; /* 13px */
    }

    .destinations-page .hero p.max-w-3xl {
        font-size: 0.875rem !important; /* 14px */
    }

    .destinations-page section h2 {
        font-size: 1.5rem !important;
    }

    .destinations-page .grid.gap-8 h3 {
        font-size: 1.25rem !important;
    }
}

/* === FIX: Yellow line artifacts from overflow blobs (all devices) === */

/* Destinations Page */
.destinations-page .hero {
    overflow: hidden !important; /* Ensure blobs don't overflow creating yellow lines */
}

.destinations-page section {
    overflow: hidden !important; /* Prevent overflow artifacts in all sections */
}

/* Ensure animated blobs stay within bounds - fix the -bottom-8 blob */
.destinations-page .hero .absolute.-bottom-8 {
    bottom: 0 !important; /* Change from -bottom-8 to prevent overflow */
}

/* Ensure hero section clips overflow properly */
.destinations-page .hero.overflow-hidden {
    overflow: hidden !important;
}

/* Clip any element that might overflow */
.destinations-page .relative.overflow-hidden {
    overflow: hidden !important;
}

/* Blog Archive Page - Same yellow line fix */
.blog-page section {
    overflow: hidden !important; /* Prevent overflow artifacts */
}

/* Fix -bottom-8 blob in blog hero */
.blog-page section .absolute.-bottom-8 {
    bottom: 0 !important; /* Prevent overflow */
}

/* Ensure all sections clip overflow */
.blog-page .overflow-hidden {
    overflow: hidden !important;
}

/* CTA section overflow fix */
.blog-page .relative {
    overflow: hidden !important;
}

/* Fleet Archive Page - Yellow line fix */
.fleet-archive .hero,
.fleet-archive section {
    overflow: hidden !important; /* Prevent overflow artifacts */
}

/* Fix -bottom-8 blob in fleet hero */
.fleet-archive .hero .absolute.-bottom-8,
.fleet-archive section .absolute.-bottom-8 {
    bottom: 0 !important; /* Prevent overflow */
}

/* === COMPREHENSIVE FIX: All pages with animated blobs === */
/* Universal fix for any page with -bottom-8 blobs */
section .absolute.-bottom-8,
.hero .absolute.-bottom-8,
.relative .absolute.-bottom-8 {
    bottom: 0 !important; /* Prevent overflow creating yellow lines */
}

/* Ensure all sections with overflow-hidden actually clip */
section.overflow-hidden,
.overflow-hidden {
    overflow: hidden !important;
}

/* Fix for all relative containers that might have overflow */
section.relative {
    overflow: hidden !important;
}

/* ISSUE #47: Fleet archive hero responsive fixes (drone show pattern) */
@media (max-width: 767px) {
    /* Fleet hero height and centering */
    .fleet-archive .hero.h-96 {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hero container */
    .fleet-archive .hero .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Background image fixes for fleet */
    .fleet-archive .hero .absolute.inset-0 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .fleet-archive .hero .bg-fixed {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Enhanced dark overlay for fleet */
    .fleet-archive .hero .bg-black.opacity-60 {
        opacity: 0.75 !important; /* Increase opacity for better text readability */
        background-color: #000000 !important;
    }

    /* Additional overlay layer for fleet */
    .fleet-archive .hero::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 100%
        ) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Ensure fleet content is above overlay */
    .fleet-archive .hero .container {
        position: relative !important;
        z-index: 10 !important;
    }

    /* Animated background blobs - reduce size */
    .fleet-archive .hero .w-48 {
        width: 8rem !important;
        height: 8rem !important;
    }

    /* Decorative lines */
    .fleet-archive .hero .w-16 {
        width: 2rem !important;
    }

    /* Hero title container */
    .fleet-archive .hero .space-x-2 {
        gap: 0.5rem !important;
        margin-top: 0 !important;
    }

    /* Fleet hero h1 - matching drone show */
    .fleet-archive .hero h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    /* Fleet hero subtitle */
    .fleet-archive .hero .text-xl.text-yellow-400 {
        font-size: 0.875rem !important; /* 14px */
        margin-bottom: 1.25rem !important;
        line-height: 1.5 !important;
    }

    /* Fleet hero description */
    .fleet-archive .hero p.max-w-3xl {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Fleet CTA button - full width */
    .fleet-archive .hero a.bg-yellow-400 {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 400px !important;
        display: block !important;
        margin: 0 auto !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Content spacing */
    .fleet-archive .hero .space-y-6 {
        row-gap: 1.25rem !important;
    }
}

/* ISSUE #48: Charter request hero responsive fixes (drone show pattern) */
@media (max-width: 767px) {
    /* Charter hero - centered layout */
    .charter-request-page .min-h-screen {
        min-height: 100vh !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Charter hero container */
    .charter-request-page .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Background image fixes for charter */
    .charter-request-page .absolute.inset-0 img,
    .charter-request-page .absolute.inset-0 > img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Charter hero h1 */
    .charter-request-page h1.font-serif {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    /* Charter hero subtitle */
    .charter-request-page .text-lbyellow {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    /* Charter hero description */
    .charter-request-page p.text-gray-300 {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
    }

    /* Charter CTA buttons - prominent */
    .charter-request-page a[href^="tel"],
    .charter-request-page a[href^="#"] {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        min-height: 48px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Button container */
    .charter-request-page .flex-col {
        gap: 0.875rem !important;
    }

    /* Content wrapper */
    .charter-request-page .max-w-4xl {
        text-align: center !important;
    }
}

/* ISSUE #49: Contact page hero responsive fixes (drone show pattern) */
@media (max-width: 767px) {
    /* Contact hero adjustments */
    .page-template-page-contact .min-h-screen {
        min-height: 100vh !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .page-template-page-contact .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .page-template-page-contact h1 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    .page-template-page-contact .text-lbyellow {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }

    .page-template-page-contact p.text-gray-300 {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
    }

    .page-template-page-contact a.bg-lbyellow,
    .page-template-page-contact a.border-white {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Background image fixes */
    .page-template-page-contact .absolute.inset-0 img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ISSUE #50: Experience page hero responsive fixes (drone show pattern) */
@media (max-width: 767px) {
    /* Experience page hero - centered layout */
    .experience-page .min-h-screen {
        min-height: 100vh !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .experience-page .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Experience hero heading */
    .experience-page h1.font-serif {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    /* Experience hero subtitle */
    .experience-page .text-lbyellow {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Experience hero description */
    .experience-page p.text-gray-300 {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
    }

    /* Experience CTA buttons */
    .experience-page a.bg-lbyellow,
    .experience-page a.border-white {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Background image fixes */
    .experience-page .absolute.inset-0 img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Content wrapper */
    .experience-page .max-w-5xl {
        text-align: center !important;
    }

    /* Button container */
    .experience-page .flex-col {
        gap: 0.875rem !important;
    }
}

/* ISSUE #51: Single fleet page hero responsive fixes (drone show pattern) */
@media (max-width: 767px) {
    /* Single aircraft page hero */
    .single-aircraft-page .min-h-screen {
        min-height: 100vh !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .single-aircraft-page .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Breadcrumb */
    .single-aircraft-page nav.flex {
        font-size: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* Category badge */
    .single-aircraft-page span.inline-block.px-4 {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.625rem !important;
    }

    /* Aircraft title */
    .single-aircraft-page h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
    }

    /* Tagline */
    .single-aircraft-page .text-lbyellow.text-lg {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Description */
    .single-aircraft-page p.text-gray-300 {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Quick specs */
    .single-aircraft-page .flex.flex-wrap.gap-4 {
        gap: 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* CTA buttons */
    .single-aircraft-page a.bg-lbyellow,
    .single-aircraft-page a.border-white {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Background image */
    .single-aircraft-page .absolute.inset-0 img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Button container */
    .single-aircraft-page .flex-col {
        gap: 0.875rem !important;
    }
}

/* Extra small devices - additional hero fixes (following drone show pattern) */
@media (max-width: 375px) {
    /* Hero section padding */
    .min-h-screen {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Heading - still readable on small screens */
    .hero h1,
    .min-h-screen h1.font-serif {
        font-size: 1.625rem !important; /* 26px - keeping it readable */
        line-height: 1.25 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Subtitle - proportional reduction */
    .min-h-screen .text-lbyellow {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }

    /* Description - still comfortable to read */
    .min-h-screen p.text-gray-300 {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.6 !important;
        margin-bottom: 1.75rem !important;
    }

    /* CTA buttons - maintain touch target size */
    .hero a.bg-yellow-400,
    .min-h-screen a.bg-lbyellow,
    .min-h-screen a.border-white {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem !important; /* 15px */
        min-height: 48px !important; /* WCAG compliance */
    }

    /* Container padding */
    .min-h-screen .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Decorative elements */
    .hero .w-16,
    .destinations-page .hero .w-16,
    .fleet-archive .hero .w-16 {
        width: 1.5rem !important;
    }

    /* Stats/badge text */
    .destinations-page .hero .flex-wrap,
    .destinations-page .hero .flex-wrap span {
        font-size: 0.75rem !important;
    }

    /* Icon sizes */
    .destinations-page .hero i,
    .destinations-page .hero svg {
        font-size: 1rem !important;
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ===================================
   WHATSAPP FLOATING BUTTON FIXES
   =================================== */

/* WhatsApp floating button responsive positioning */
@media (max-width: 767px) {
    /* Floating WhatsApp button */
    .fixed.bottom-6.right-6,
    .fixed.bottom-8.right-8,
    a[href*="wa.me"].fixed,
    a[href*="whatsapp"].fixed {
        bottom: 1.25rem !important; /* 20px */
        right: 1.25rem !important; /* 20px */
        width: 3.5rem !important; /* 56px */
        height: 3.5rem !important; /* 56px */
        z-index: 9999 !important;
    }

    /* WhatsApp button icon size */
    .fixed.bottom-6.right-6 svg,
    .fixed.bottom-8.right-8 svg,
    a[href*="wa.me"].fixed svg,
    a[href*="whatsapp"].fixed svg {
        width: 2rem !important; /* 32px */
        height: 2rem !important; /* 32px */
    }
}

@media (max-width: 375px) {
    /* Extra small - even closer to edge */
    .fixed.bottom-6.right-6,
    .fixed.bottom-8.right-8,
    a[href*="wa.me"].fixed,
    a[href*="whatsapp"].fixed {
        bottom: 1rem !important; /* 16px */
        right: 1rem !important; /* 16px */
        width: 3rem !important; /* 48px */
        height: 3rem !important; /* 48px */
    }

    /* Smaller icon */
    .fixed.bottom-6.right-6 svg,
    .fixed.bottom-8.right-8 svg,
    a[href*="wa.me"].fixed svg,
    a[href*="whatsapp"].fixed svg {
        width: 1.75rem !important; /* 28px */
        height: 1.75rem !important; /* 28px */
    }
}