/**
 * Mobile Responsiveness Enhancements for Ramani Composites
 */

/* Base mobile responsive adjustments */
@media (max-width: 767px) {
    /* Increase base font size for better readability */
    body, p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Adjust heading sizes on mobile */
    h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* Ensure buttons are easily tappable */
    .btn {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    /* Improve spacing for better mobile readability */
    .section-padding {
        padding: 50px 0 !important;
    }

    /* Make container more suitable for mobile */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Ensure images don't overflow their containers */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Improve form fields on mobile */
    input, textarea, select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 12px !important;
    }
    
    /* Header adjustments for mobile */
    .header-two {
        padding: 10px 0 !important;
    }
    
    /* Make logo appropriately sized */
    .logo img {
        max-width: 180px !important;
        height: auto !important;
    }
    
    /* Space between logo and toggle button */
    .navbar-light .navbar-toggler {
        margin-left: auto !important;
    }
    
    /* Mobile navbar styling */
    .navbar-collapse {
        background: #fff !important;
        padding: 15px !important;
        margin-top: 10px !important;
        border-radius: 5px !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    /* Better mobile nav items */
    .navbar-nav .nav-item {
        padding: 5px 0 !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 16px !important;
        padding: 10px 15px !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Mobile dropdown styling */
    .navbar-nav .dropdown-menu {
        background: #f8f8f8 !important;
        padding: 0 !important;
        border: none !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }
    
    .navbar-nav .dropdown-menu a {
        padding: 10px 25px !important;
        font-size: 15px !important;
    }
    
    /* Add visual indicator for dropdowns */
    .mobile-dropdown-indicator {
        display: inline-block !important;
        margin-left: 5px !important;
        width: 10px !important;
        height: 10px !important;
        position: relative !important;
    }
    
    .mobile-dropdown-indicator:after {
        content: '+' !important;
        position: absolute !important;
        right: 0 !important;
        top: -9px !important;
    }
    
    .show .mobile-dropdown-indicator:after {
        content: '-' !important;
    }
}

/* Extra small devices */
@media (max-width: 575px) {
    /* Additional adjustments for very small screens */
    .logo img {
        max-width: 150px !important;
    }

    /* Reduce padding further on smaller screens */
    .section-padding {
        padding: 30px 0 !important;
    }

    /* Ensure proper spacing in footer */
    .footer {
        padding: 30px 0 !important;
    }

    /* Better spacing for stacked content */
    .mb-xs-20 {
        margin-bottom: 20px !important;
    }
    
    /* Make headings smaller on extra-small devices */
    h1, .h1 {
        font-size: 24px !important;
    }
    
    h2, .h2 {
        font-size: 22px !important;
    }
    
    h3, .h3 {
        font-size: 18px !important;
    }
    
    /* Adjust call-to-action for mobile */
    .call-to-action-text .action-title {
        font-size: 20px !important;
    }
}

/* Fix for iOS specific issues */
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Ensure proper touch target sizes */
@media (max-width: 767px) {
    /* Navigation improvements */
    .navbar-toggler {
        padding: 10px !important;
    }

    /* Make all interactive elements properly sized for touch */
    a, button, .btn, input[type="button"], input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Fix for tables on mobile */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Adjust card layouts on mobile */
    .ts-service-box {
        margin-bottom: 30px !important;
    }
    
    /* Better padding for content sections */
    .ts-service-box-content {
        padding: 15px !important;
    }
    
    /* Fix for grid items */
    .row [class*="col-"] {
        margin-bottom: 20px !important;
    }
    
    .row [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Better spacing for footer widgets */
    .footer-widget {
        margin-bottom: 30px !important;
    }
    
    /* Adjust slider elements */
    .slider-content {
        padding: 0 15px !important;
    }
    
    .slider-text {
        width: 100% !important;
        padding: 15px !important;
    }
    
    /* Adjust contact form spacing */
    #contact-form {
        padding: 15px !important;
    }
    
    /* Make banner area more mobile friendly */
    .banner-area {
        padding: 60px 0 !important;
    }
    
    .banner-heading {
        font-size: 24px !important;
    }
    
    /* Ensure images are centered on mobile */
    .text-center-mobile {
        text-align: center !important;
    }
    
    img.float-left, img.float-right {
        float: none !important;
        margin: 0 auto 20px !important;
        display: block !important;
    }
}

/* Landscape phone mode improvements */
@media (max-width: 767px) and (orientation: landscape) {
    .navbar-collapse {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    /* Adjust banner height in landscape */
    .banner-area {
        min-height: 300px !important;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for position:fixed header on iOS */
    .ios-fixed-fix {
        position: absolute !important;
    }
    
    /* Fix for weird scrolling behaviors on iOS */
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Header compact mode when scrolled */
.header-two.scrolled {
    padding: 5px 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
}