/**
 * Mobile Fixes for Kango Website
 * Prevents shaking and improves mobile experience
 */

/* Prevent horizontal scrolling and shaking */
html, body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Ensure vertical scrolling works on mobile */
body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
    /* Ensure natural scrolling behavior */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Fix mobile scrolling issues */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        min-height: 100vh;
        /* Ensure mouse wheel scrolling works in mobile view */
        pointer-events: auto !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        /* Enable click and drag scrolling */
        cursor: default !important;
        /* Enable right-click drag scrolling */
        -webkit-user-drag: auto !important;
        -moz-user-select: auto !important;
    }
    
    /* Ensure all containers allow scrolling */
    .container, .container-fluid {
        overflow: visible !important;
        pointer-events: auto !important;
        cursor: default !important;
    }
    
    /* Fix any elements that might block scrolling */
    main {
        overflow: visible !important;
        height: auto !important;
        pointer-events: auto !important;
        cursor: default !important;
    }
    
    /* Ensure mouse wheel scrolling works on all content */
    section, div, article {
        pointer-events: auto !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        cursor: default !important;
    }
    
    /* Enable click and drag scrolling for all interactive elements */
    .card, .btn, .navbar, .nav-link {
        pointer-events: auto !important;
        cursor: default !important;
    }
}

/* Fix viewport issues */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Prevent zoom on input focus (iOS) */
input, textarea, select {
    font-size: 16px !important;
    -webkit-appearance: none;
    border-radius: 0;
}

/* Fix iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
}

/* Fix navbar shaking on mobile */
.navbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Fix hero section shaking */
.hero-section {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix floating animations causing shake */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px) translateZ(0);
        -webkit-transform: translateY(0px) translateZ(0);
    }
    50% { 
        transform: translateY(-20px) translateZ(0);
        -webkit-transform: translateY(-20px) translateZ(0);
    }
}

/* Reduce animation intensity on mobile */
@media (max-width: 768px) {
    @keyframes float {
        0%, 100% { 
            transform: translateY(0px) translateZ(0);
            -webkit-transform: translateY(0px) translateZ(0);
        }
        50% { 
            transform: translateY(-10px) translateZ(0);
            -webkit-transform: translateY(-10px) translateZ(0);
        }
    }
    
    /* Reduce animation duration on mobile */
    .hero-section .position-absolute[style*="animation: float"] {
        animation-duration: 8s !important;
    }
}

/* Fix WhatsApp button shaking */
.whatsapp-float {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* Prevent layout shifts */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix Bootstrap container issues on mobile */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Fix navbar brand on mobile */
@media (max-width: 768px) {
    .navbar-brand-text {
        font-size: 1.2rem !important;
    }
}

/* Fix hero section on mobile */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    
    .hero-section .lead {
        font-size: 1.1rem !important;
    }
}

/* Fix button spacing on mobile */
@media (max-width: 768px) {
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .d-flex.gap-3 {
        gap: 1rem !important;
    }
}

/* Fix card layouts on mobile */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-img-top {
        height: 200px !important;
    }
}

/* Fix section padding on mobile */
@media (max-width: 768px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Prevent touch callouts but allow mouse interaction */
* {
    -webkit-touch-callout: none;
}

/* Allow text selection and mouse interaction for better desktop mobile testing */
body, html, main, section, div, p, h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    pointer-events: auto;
    /* Enable click and drag scrolling */
    cursor: default;
}



/* Ensure mouse wheel scrolling works in mobile view */
@media (max-width: 991.98px) {
    html, body {
        /* Enable mouse wheel scrolling */
        overflow-y: scroll !important;
        /* Ensure scroll events are not blocked */
        touch-action: pan-y !important;
        /* Allow mouse interaction */
        pointer-events: auto !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        /* Enable click and drag scrolling */
        cursor: default !important;
        /* Enable right-click drag scrolling */
        -webkit-user-drag: auto !important;
        -moz-user-select: auto !important;
    }
    
    /* Enable click and drag scrolling on all content areas */
    main, section, div, article, .container, .container-fluid {
        pointer-events: auto !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        cursor: default !important;
        /* Allow text selection but also enable drag scrolling */
        -webkit-user-drag: auto !important;
        /* Enable right-click drag */
        -moz-user-select: auto !important;
    }
    
    /* Enable right-click drag scrolling for all elements */
    * {
        -webkit-user-drag: auto !important;
        -moz-user-select: auto !important;
        user-select: auto !important;
    }
}

/* Allow text selection for input fields */
input, textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Fix iOS Safari address bar issues */
@media screen and (max-width: 768px) {
    .hero-section {
        min-height: calc(100vh - 60px);
    }
}

/* Fix sticky navbar on mobile */
.navbar.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Fix mobile menu button clickability */
.navbar-toggler {
    z-index: 1021 !important;
    position: relative;
    pointer-events: auto !important;
    touch-action: auto;
}

/* Ensure mobile menu button is always clickable */
@media (max-width: 991.98px) {   

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #dee2e6;
        z-index: 1000;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
        padding: 1rem;
    }
    
    .nav-item {
        width: 100%;
        text-align: center;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f8f9fa;
    }
    .navbar-toggler {
        z-index: 1021 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
    
    .navbar-toggler:focus {
        outline: 2px solid #dc3545;
        outline-offset: 2px;
    }
}

/* Fix Bootstrap collapse animation */
.collapse {
    transition: height 0.35s ease;
}

/* Fix image loading causing layout shifts */
img[src] {
    opacity: 1;
    transition: opacity 0.3s ease;
}

img[src].loaded {
    opacity: 1;
}

/* Fix form elements on mobile */
.form-control, .btn {
    -webkit-appearance: none;
    border-radius: 0.375rem;
}

/* Fix iOS Safari input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input[type="text"], input[type="password"], 
    input[type="datetime"], input[type="datetime-local"], 
    input[type="date"], input[type="month"], input[type="time"], 
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="url"], input[type="search"], input[type="tel"], 
    input[type="color"] {
        font-size: 16px !important;
    }
}

/* Fix horizontal scroll issues */
.row {
    margin-left: 0;
    margin-right: 0;
}

/* A) CSS: Allow native scroll - Force scrollable document */
html, body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    height: auto !important;
    min-height: 100% !important;  /* avoid 100vh quirks */
    position: static !important;   /* ensure not fixed */
}

/* D) Overlays: Don't intercept page touches unless open */
.overlay,
.menu-backdrop {
    pointer-events: none;
}

.overlay.is-open,
.menu-backdrop.is-open {
    pointer-events: auto;
}

/* 2) Make CSS favor vertical scroll and reduce accidental gestures */
/* Prefer vertical scroll, avoid accidental horizontal grabs */
html, body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Inside interactive controls, speed up taps without killing pinch-zoom */
a, button, .btn, input, textarea, select, [role="button"] {
    touch-action: manipulation; /* allows scroll + pinch, avoids double-tap zoom */
}

/* If any component should NOT trigger pull-to-refresh or page bounce */
.modal-body,
.drawer-body {
    overscroll-behavior: contain; /* keep scroll contained */
    -webkit-overflow-scrolling: touch;
}

/* A) CSS: disable smooth/snap scrolling & anchor jumps */
/* Turn off CSS-driven auto scroll behaviors */
html {
    scroll-behavior: auto !important;     /* no smooth autoscroll */
    overscroll-behavior-y: auto;          /* keep default */
}

* {
    scroll-snap-type: none !important;    /* no snapping jumps */
}

/* Inputs should not cause iOS zoom/jump; keep font >=16px */
input, select, textarea {
    font-size: 16px;                      /* prevent viewport zoom jump on focus */
}

/* Prefer vertical gestures; don't intercept */
html, body {
    touch-action: pan-y !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* B) Mobile-only CSS overrides for full company name */
.brand-full {
    white-space: normal;           /* allow wrap */
    line-height: 1.15;
    max-width: 80vw;               /* avoid overflow */
    display: inline-block;
}

/* Gentle font-size reduction only on very small widths */
@media (max-width: 360px) {
    .navbar-brand, .brand-full {
        font-size: 14px !important;   /* adjust as needed */
    }
}

@media (max-width: 480px) {
    .navbar-brand, .brand-full {
        font-size: 16px !important;   /* slightly smaller on small phones */
    }
}

/* A) CSS: safe defaults for mobile scrolling */
html, body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Menus/backdrops must NOT block touch unless open */
.menu-backdrop,
.nav-backdrop,
.offcanvas-backdrop,
.mobile-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;           /* default: not clickable */
    background: transparent;        /* ensure invisible when closed */
}

.menu-backdrop.is-open,
.nav-backdrop.is-open,
.offcanvas-backdrop.show,
.mobile-overlay.is-open {
    pointer-events: auto;           /* clickable only when open */
}

/* Brand/menu bar must not overlay full page */
.header, .navbar {
    position: relative;             /* avoid accidental fixed full-screen */
    z-index: 10;
}

/* Avoid full-screen invisible hitboxes on small screens */
@media (max-width: 768px) {
    .navbar, .header {
        height: auto;
    }
    .navbar * {
        max-height: 100vh;
    }
}

/* If brand/menu text is long, allow wrap not overflow */
.navbar-brand {
    white-space: normal;
    line-height: 1.15;
    max-width: 80vw;
}

/* D) TEMP — Diagnostics: reveal anything that still covers the page */
/* Remove this after testing */
*[style*="position: fixed"], .menu-backdrop, .nav-backdrop, .offcanvas-backdrop, .mobile-overlay {
    outline: 1px dashed rgba(255,0,0,.6) !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, 
.col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, 
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, 
.col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, 
.col-md-10, .col-md-11, .col-md-12, .col-md-auto, 
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, 
.col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, 
.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, 
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, 
.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
.col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
    padding-left: 15px;
    padding-right: 15px;
}

/* Fix Bootstrap grid on mobile */
@media (max-width: 576px) {
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
    .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, 
    .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, 
    .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, 
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, 
    .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, 
    .col-md-10, .col-md-11, .col-md-12, .col-md-auto, 
    .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, 
    .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, 
    .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, 
    .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, 
    .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
    .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
        padding-left: 10px;
        padding-right: 10px;
    }
}