/**
 * Mobile Responsive Enhancement CSS
 * Ensures all interactive elements are clickable and functional on mobile/tablet devices
 * Author: Pawatech Solutions
 */

/* ========================================
   GLOBAL MOBILE TOUCH OPTIMIZATIONS
======================================== */

/* Ensure all clickable elements have proper touch targets (minimum 44x44px) */
@media (max-width: 991px) {
    /* Enable pointer events and clickability for all interactive elements */
    /* IMPORTANT: Keep original desktop styles - only add clickability */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .readon,
    .btn,
    .submit-btn {
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Form inputs - Prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    textarea,
    select,
    .from-control {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 12px 15px !important;
        width: 100% !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        transition: border-color 0.3s ease !important;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus,
    .from-control:focus {
        border-color: #106eea !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(16, 110, 234, 0.1) !important;
    }

    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    /* Submit buttons - Keep original styling, just make clickable */
    input[type="submit"],
    button[type="submit"],
    .submit-btn,
    .readon.submit {
        cursor: pointer !important;
    }

    /* Navigation menu items */
    .mobile-menu-list li a {
        min-height: 50px !important;
        padding: 16px 25px !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Social icons */
    .top-social-icons a,
    .footer-social li a,
    .mobile-social a {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Card links - ensure they're clickable */
    .program-card-modern h3 a,
    .blog-item h3 a,
    .blog-button a,
    .program-btn {
        padding: 8px 0 !important;
        display: inline-block !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        text-decoration: none !important;
    }

    /* Action buttons - Keep original styling */
    .readon,
    .btn,
    .lets-talk {
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Footer links */
    .site-map li a,
    .copy-right-menu li a {
        padding: 10px 5px !important;
        min-height: 44px !important;
        display: inline-block !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Address widget links */
    .address-widget li a {
        padding: 8px 0 !important;
        display: inline-block !important;
        min-height: 36px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Newsletter form */
    .textwidget input[type="email"] {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 12px 60px 12px 15px !important;
    }

    .textwidget input[type="submit"],
    .textwidget button[type="submit"] {
        /* Keep original button styling */
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Breadcrumb links */
    .rs-breadcrumbs .breadcrumbs-inner ul li a {
        padding: 5px 10px !important;
        min-height: 32px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* WhatsApp floating button */
    .whatsapp-float {
        width: 56px !important;
        height: 56px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 28px !important;
        z-index: 999 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Scroll to top button */
    #scrollUp {
        width: 44px !important;
        height: 44px !important;
        right: 20px !important;
        bottom: 80px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Video play buttons */
    .popup-videos,
    .popup-border {
        min-width: 60px !important;
        min-height: 60px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Carousel controls */
    .owl-nav button {
        min-width: 44px !important;
        min-height: 44px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    .owl-dots .owl-dot {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 8px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Ensure all links in desktop menu work on tablets */
    .desktop-menu li a {
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Fix any overlay issues */
    .mobile-menu-overlay {
        pointer-events: auto !important;
    }

    /* Make sure cards themselves are clickable */
    .program-card-modern,
    .blog-item,
    .service-card {
        position: relative !important;
    }

    /* Clickable card fix */
    .program-card-modern a,
    .blog-item a {
        position: relative !important;
        z-index: 2 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}

/* ========================================
   PHONE SPECIFIC FIXES (Mobile Portrait)
======================================== */
@media (max-width: 767px) {
    /* CRITICAL: Ensure all links and buttons work */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .readon,
    .btn {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: rgba(16, 110, 234, 0.3) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Remove any blocking elements */
    * {
        -webkit-touch-callout: default !important;
    }

    /* Full width columns */
    .col-sm-12,
    .col-md-6,
    .col-lg-4,
    .col-lg-3,
    .col-lg-6,
    .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    /* Container padding */
    .container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    /* Typography scaling */
    h1,
    .page-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2,
    .title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    /* Section padding reduction */
    .pt-120,
    .pb-120 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .pt-100,
    .pb-100 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .pt-80,
    .pb-80 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Contact page layout */
    .col-lg-4.md-mb-60,
    .col-lg-8.pl-70 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Banner content */
    .rs-banner .banner-content h1,
    .rs-banner .banner-content .it-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    /* Contact box */
    .contact-box {
        margin-bottom: 40px !important;
        padding: 30px 20px !important;
    }

    /* Form groups */
    .form-group,
    .row > [class*="col-"] {
        margin-bottom: 20px !important;
    }

    /* Footer adjustments */
    .footer-widget {
        margin-bottom: 35px !important;
        text-align: left !important;
    }

    .footer-bottom .text-right,
    .footer-bottom .col-lg-6 {
        text-align: center !important;
    }

    .copy-right-menu {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .copy-right-menu li {
        margin: 0 !important;
    }

    /* Partner items */
    .partner-item {
        padding: 20px !important;
        height: 100px !important;
        margin-bottom: 20px !important;
    }

    .partner-item img {
        max-height: 60px !important;
    }

    /* Program cards */
    .program-featured-image,
    .program-image-hero {
        height: 220px !important;
    }

    /* Map iframe */
    .map-canvas iframe {
        width: 100% !important;
        height: 300px !important;
    }

    /* Remove paddings on mobile */
    .pl-70,
    .pr-70,
    .pl-140,
    .pr-140 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Button alignment */
    .text-right,
    .text-lg-right {
        text-align: center !important;
    }

    /* Center align on mobile */
    .md-text-center {
        text-align: center !important;
    }
}

/* ========================================
   SMALL PHONES (iPhone SE, etc.)
======================================== */
@media (max-width: 375px) {
    /* Tighter spacing */
    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    /* Smaller typography */
    h1,
    .page-title {
        font-size: 24px !important;
    }

    h2,
    .title {
        font-size: 22px !important;
    }

    /* Logo smaller */
    .logo-section .logo-img,
    .mobile-logo img {
        max-height: 45px !important;
    }

    /* Mobile menu sidebar */
    .mobile-menu-sidebar {
        width: 280px !important;
        max-width: 90vw !important;
    }

    /* Buttons - Keep original styling, just ensure clickability */
    .readon,
    .btn {
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Partner grid 2 columns */
    .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ========================================
   TABLET SPECIFIC (768px - 991px)
======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Two column layout for tablets */
    .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Adjust padding for tablet */
    .container {
        padding-right: 25px !important;
        padding-left: 25px !important;
    }

    /* Touch targets slightly smaller on tablets */
    a:not(.brand-logo),
    button {
        min-height: 40px !important;
    }
}

/* ========================================
   LANDSCAPE MODE FOR PHONES
======================================== */
@media (max-width: 991px) and (orientation: landscape) {
    /* Hide top bar to save space */
    .top-info-bar {
        display: none !important;
    }

    /* Reduce header height */
    .nav-wrapper {
        padding: 10px 0 !important;
    }

    .logo-section .logo-img {
        max-height: 45px !important;
    }

    /* Adjust mobile menu for landscape */
    .mobile-menu-sidebar {
        width: 300px !important;
    }

    .mobile-menu-header {
        padding: 15px 20px !important;
    }

    .mobile-menu-list li a {
        padding: 12px 25px !important;
    }

    /* Reduce section padding in landscape */
    .pt-120,
    .pb-120 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove complex hover effects on touch devices */
    a:hover,
    button:hover {
        transform: none !important;
    }

    /* Add tap feedback */
    a:active,
    button:active {
        opacity: 0.8 !important;
        transform: scale(0.98) !important;
    }

    /* Better tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(16, 110, 234, 0.2) !important;
    }

    /* Disable hover animations that don't work on touch */
    .program-card-modern:hover,
    .blog-item:hover {
        transform: translateY(-5px) !important;
    }
}

/* ========================================
   IOS SPECIFIC FIXES
======================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS rendering issues */
    input,
    textarea,
    select {
        -webkit-appearance: none !important;
        border-radius: 0 !important;
    }

    /* Prevent zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea {
        font-size: 16px !important;
    }

    /* Fix iOS button styling */
    button,
    input[type="button"],
    input[type="submit"] {
        -webkit-appearance: none !important;
    }
}

/* ========================================
   IMPROVED CLICK/TAP AREAS
======================================== */
@media (max-width: 991px) {
    /* Ensure proper spacing between clickable elements */
    .mobile-menu-list li {
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Program card entire card clickable */
    .program-card-modern {
        cursor: pointer !important;
    }

    /* Blog card clickable area */
    .blog-item {
        cursor: pointer !important;
    }

    /* Newsletter form fix */
    .textwidget form {
        position: relative !important;
    }

    .textwidget .paper-plane {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Contact form spacing */
    .contact-widget .row > div,
    .rs-contact .row > div {
        margin-bottom: 20px !important;
    }

    /* Address box spacing */
    .address-box {
        margin-bottom: 25px !important;
        padding: 15px !important;
    }

    /* Improve list spacing */
    .site-map li,
    .address-widget li {
        margin-bottom: 12px !important;
    }
}

/* ========================================
   PREVENT LAYOUT BREAKS
======================================== */
@media (max-width: 991px) {
    /* Prevent overflow */
    body {
        overflow-x: hidden !important;
    }

    /* Word wrapping */
    h1, h2, h3, h4, h5, h6,
    p, a, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Image responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

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

    /* Table responsive */
    table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* Fix overlapping content */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    .row > [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
======================================== */
:focus {
    outline: 2px solid #106eea !important;
    outline-offset: 2px !important;
}

button:focus,
a:focus {
    outline: 2px solid #106eea !important;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */
* {
    -webkit-tap-highlight-color: rgba(16, 110, 234, 0.2);
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   CRITICAL FIX: ENSURE ALL LINKS/BUTTONS CLICKABLE
======================================== */
@media (max-width: 991px) {
    /* Force all interactive elements to be clickable */
    a,
    a *,
    button,
    button *,
    input[type="button"],
    input[type="submit"],
    .readon,
    .btn,
    .mobile-menu-list li a,
    .desktop-menu li a,
    .footer-social li a,
    .top-social-icons a,
    .mobile-social a,
    .site-map li a,
    .copy-right-menu li a,
    .address-widget li a,
    .program-card-modern a,
    .blog-item a,
    .blog-button a,
    .program-btn,
    .whatsapp-float,
    #scrollUp {
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }

    /* Remove any z-index conflicts */
    .main-content {
        position: relative !important;
        z-index: auto !important;
    }

    /* Ensure nothing blocks clicks */
    .container,
    .row,
    [class*="col-"] {
        pointer-events: auto !important;
    }

    /* Fix card overlays */
    .program-overlay,
    .blog-overlay {
        pointer-events: none !important;
    }

    /* Make sure parent containers don't block */
    .nav-wrapper,
    .logo-section,
    .menu-area {
        pointer-events: auto !important;
    }

    /* Specific link fixes */
    a[href],
    a[href] * {
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* Button specific fixes */
    button[type],
    input[type="submit"],
    input[type="button"] {
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-appearance: button !important;
    }
}