/* ========================================
   COMPLETE MOBILE FIX
   ======================================== */

/* MOBILE ONLY - Max width 991px */
@media (max-width: 991px) {
    
    /* ===== HEADER FIXES ===== */
    header.header-with-topbar .header-top-bar {
        display: none !important;
    }
    
    header .header-language,
    header .header-push-button,
    header .push-button {
        display: none !important;
    }
    
    header.header-with-topbar {
        position: relative !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    header nav.navbar {
        position: relative !important;
        background: white !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    header nav.navbar .container-fluid {
        position: relative !important;
        height: 60px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Logo - LEFT */
    header nav .col-auto.me-auto,
    header nav .col-auto.col-lg-2.me-auto {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 60% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
    }
    
    header .navbar-brand {
        display: block !important;
        max-width: 180px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    header .navbar-brand img {
        max-width: 180px !important;
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    header .navbar-brand .default-logo,
    header .navbar-brand .alt-logo {
        display: none !important;
    }
    
    header .navbar-brand .mobile-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hamburger - RIGHT */
    header nav .col-auto.menu-order,
    header nav .menu-order {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 3 !important;
    }
    
    header .navbar-toggler {
        padding: 8px !important;
        border: none !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    /* Hide desktop language column on mobile */
    header .col-auto.col-lg-2.text-end {
        display: none !important;
    }
    
    /* Mobile menu dropdown */
    header .navbar-collapse {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: white !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        padding: 20px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    header .navbar-collapse:not(.show) {
        display: none !important;
    }
    
    header .navbar-collapse.show {
        display: block !important;
    }
    
    header .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    header .navbar-nav .nav-item {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    header .navbar-nav .nav-link {
        padding: 15px 10px !important;
        font-size: 16px !important;
        color: #1D1F27 !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    header .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 0 20px !important;
        border: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
    }
    
    /* Show mobile language selector */
    .mobile-only-lang {
        display: block !important;
    }
    
    /* ===== HERO SECTION FIXES ===== */
    section.p-0.bg-dark-gray {
        padding: 0 !important;
        margin-top: 0 !important;
    }
    
    .full-screen.ipad-top-space-margin {
        min-height: calc(100vh - 60px) !important;
        height: auto !important;
        padding: 40px 20px !important;
        margin-top: 0 !important;
    }
    
    .full-screen .fs-100 {
        font-size: 48px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    
    .full-screen .fs-22 {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    
    .full-screen .fs-18 {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    .full-screen .w-70,
    .full-screen .lg-w-80 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* SMALL MOBILE - Max width 575px */
@media (max-width: 575px) {
    header .navbar-brand {
        max-width: 150px !important;
    }
    
    header .navbar-brand img {
        max-width: 150px !important;
        max-height: 35px !important;
    }
    
    .full-screen .fs-100 {
        font-size: 36px !important;
    }
}

/* DESKTOP - Hide mobile language selector */
@media (min-width: 992px) {
    .mobile-only-lang {
        display: none !important;
    }
}

/* Fix mobile hero cutoff - remove extra padding */
@media (max-width: 991px) {
    .full-screen.ipad-top-space-margin {
        padding-top: 20px !important;
    }
}

/* Make desktop language selector white and visible */
@media (min-width: 992px) {
    header .header-language a {
        color: white !important;
    }
    
    header .header-language .dropdown-toggle,
    header .header-language i {
        color: white !important;
    }
}

/* Fix landscape mobile - even less padding */
@media (max-width: 991px) and (orientation: landscape) {
    .full-screen.ipad-top-space-margin {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .full-screen .fs-100 {
        font-size: 40px !important;
        margin-bottom: 10px !important;
    }
    
    .full-screen .fs-22 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
}

/* Hide burger menu on desktop */
@media (min-width: 992px) {
    .navbar-toggler,
    header .navbar-toggler {
        display: none !important;
    }
}

/* Fix dropdown menu link colors on mobile */
@media (max-width: 991px) {
    header .navbar-nav .dropdown-menu a {
        color: #1D1F27 !important;
        padding: 12px 10px !important;
        display: block !important;
        font-size: 15px !important;
    }
    
    header .navbar-nav .dropdown-menu li {
        border-bottom: 1px solid #e8e8e8 !important;
    }
}

/* Fix white space between header and hero on non-index pages */
@media (max-width: 991px) {
    .page-title-big-typography.ipad-top-space-margin,
    section.ipad-top-space-margin {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* Fix scroll indicator overlapping hero text on mobile - hide it */
@media (max-width: 991px) {
    .page-title-big-typography .down-section {
        display: none !important;
    }
}

/* Prevent horizontal scroll caused by translateX animations on mobile */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
    }
}

/* Fix comparison table column widths and word breaks on mobile */
@media (max-width: 767px) {
    .comparison-table th,
    .comparison-table td {
        font-size: 12px !important;
        padding: 10px 6px !important;
        word-break: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 28% !important;
        min-width: 90px !important;
    }
    .comparison-table th:nth-child(2),
    .comparison-table td:nth-child(2) {
        width: 36% !important;
    }
    .comparison-table th:nth-child(3),
    .comparison-table td:nth-child(3) {
        width: 36% !important;
    }
}