/* Mobile Enhancements for Itholelomzansi Foundation */
/* Additional mobile optimizations beyond the existing responsive.css */

/* ================================
   MOBILE-FIRST IMPROVEMENTS
   ================================ */

/* Prevent horizontal scrolling on mobile */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ================================ */

/* Ensure all clickable elements are touch-friendly (44px minimum) */
@media (max-width: 768px) {
    .btn, .btn_hover, .btn_hover_two,
    .nav-link, .footer-social a,
    .dropdown-item, .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
    }
    
    /* Improve button spacing on mobile */
    .btn {
        margin: 5px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Better touch targets for navigation */
    .navbar-nav .nav-link {
        padding: 12px 15px;
        font-size: 16px;
        line-height: 1.4;
    }
    
    /* Improved dropdown touch targets */
    .dropdown-menu .dropdown-item {
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* ================================
   FORM MOBILE OPTIMIZATIONS
   ================================ */

@media (max-width: 768px) {
    /* Prevent zoom on form inputs for iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 12px 15px;
        border-radius: 6px;
        border: 2px solid #ddd;
        transition: border-color 0.3s ease;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #00c8e6;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 200, 230, 0.1);
    }
    
    /* Better spacing for form groups */
    .form-group {
        margin-bottom: 20px;
    }
    
    /* Full width forms on mobile */
    .contact_form .col-md-6,
    .donation_form .form-group {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    /* Better textarea sizing */
    textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Improve reCAPTCHA mobile display */
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
        margin-bottom: 15px;
    }
}

/* ================================
   NAVIGATION MOBILE IMPROVEMENTS
   ================================ */

@media (max-width: 991px) {
    /* Better mobile navigation */
    .navbar-collapse {
        background: #fff;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        padding: 15px;
    }
    
    /* Improve dropdown mobile behavior */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        margin: 0;
        background: #f8f9fa;
        border-radius: 6px;
        margin-top: 5px;
    }
    
    /* Better mobile hamburger menu */
    .navbar-toggler {
        border: none;
        padding: 8px;
        border-radius: 6px;
        background: rgba(0, 200, 230, 0.1);
    }
    
    .navbar-toggler span {
        background: #00c8e6;
        border-radius: 2px;
    }
    
    /* Close button enhancement */
    .navbar-toggler[aria-expanded="true"] {
        background: rgba(220, 53, 69, 0.1);
    }
    
    .navbar-toggler[aria-expanded="true"] span {
        background: #dc3545;
    }
}

/* ================================
   CONTENT MOBILE OPTIMIZATIONS
   ================================ */

@media (max-width: 768px) {
    /* Better image responsiveness */
    img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    /* Improve banner content */
    .banner_content {
        padding: 20px 15px;
        text-align: center;
    }
    
    .banner_content h1 {
        font-size: 32px !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .banner_content p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    /* Better section spacing */
    .section_gap {
        padding: 60px 0 !important;
    }
    
    /* Improve title spacing */
    .section_title {
        margin-bottom: 40px;
        text-align: center;
    }
    
    .section_title h2 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .section_title p {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 15px;
    }
}

/* ================================
   GALLERY MOBILE IMPROVEMENTS
   ================================ */

@media (max-width: 768px) {
    .gallery_item {
        margin-bottom: 20px;
    }
    
    .gallery_item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.3s ease;
    }
    
    .gallery_item:hover img {
        transform: scale(1.05);
    }
    
    /* Better gallery grid */
    .gallery_inner {
        gap: 15px;
    }
}

/* ================================
   FOOTER MOBILE IMPROVEMENTS
   ================================ */

@media (max-width: 768px) {
    .footer-area {
        padding: 50px 0 30px;
    }
    
    .single-footer-widget {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .single-footer-widget h6 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .single-footer-widget p,
    .single-footer-widget li {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .footer-social {
        margin-top: 20px;
    }
    
    .footer-social a {
        margin: 0 10px;
        font-size: 20px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 200, 230, 0.1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .footer-social a:hover {
        background: #00c8e6;
        color: white;
        transform: translateY(-2px);
    }
}

/* ================================
   CARDS AND CONTENT BOXES
   ================================ */

@media (max-width: 768px) {
    .range_box,
    .features_item,
    .team_item,
    .event_post {
        margin-bottom: 25px;
        padding: 20px;
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    
    .range_box:hover,
    .features_item:hover,
    .team_item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    /* Better text in cards */
    .range_box h4,
    .features_item h4 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    
    .range_box p,
    .features_item p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* ================================
   DONATION FORM MOBILE
   ================================ */

@media (max-width: 768px) {
    .donation_form {
        padding: 30px 20px !important;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .donation_form h3 {
        font-size: 18px !important;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .donation_form .form-group {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    .donation_form input,
    .donation_form select {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
        border-radius: 6px;
        border: 2px solid #ddd;
    }
    
    .donation_form .btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        margin-top: 10px;
    }
}

/* ================================
   EVENT DETAILS MOBILE
   ================================ */

@media (max-width: 768px) {
    .event_details_area {
        padding: 40px 0;
    }
    
    .event_post {
        text-align: center;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    }
    
    .event_post img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .event_title {
        font-size: 18px !important;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    
    .event_time {
        margin-top: 20px !important;
        font-size: 14px;
    }
}

/* ================================
   ABOUT US PAGE MOBILE
   ================================ */

@media (max-width: 768px) {
    .about_content {
        text-align: center;
        padding: 20px;
    }
    
    .about_content h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .about_content p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    /* Four pillars mobile layout */
    .col-md-3[style*="width: calc"] {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* ================================
   CONTACT PAGE MOBILE
   ================================ */

@media (max-width: 768px) {
    .contact_area .col-md-3,
    .contact_area .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }
    
    .contact_form {
        margin-top: 0 !important;
    }
    
    /* Map responsiveness */
    .contact_area iframe {
        height: 250px !important;
        border-radius: 8px;
    }
}

/* ================================
   LOADING STATES AND PERFORMANCE
   ================================ */

@media (max-width: 768px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Better transitions */
    * {
        transition: all 0.3s ease;
    }
    
    /* Loading indicator for slow connections */
    .loading {
        position: relative;
    }
    
    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin: -15px 0 0 -15px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #00c8e6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

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

@media (max-width: 768px) {
    /* Better focus states */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 3px solid #00c8e6;
        outline-offset: 2px;
    }
    
    /* Skip to content link for screen readers */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: #00c8e6;
        color: white;
        padding: 8px;
        text-decoration: none;
        border-radius: 4px;
        z-index: 10000;
        transition: top 0.3s;
    }
    
    .skip-link:focus {
        top: 6px;
    }
}

/* ================================
   UTILITY CLASSES
   ================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Text alignment utilities for mobile */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-left-mobile {
        text-align: left !important;
    }
}

/* Spacing utilities for mobile */
@media (max-width: 768px) {
    .mb-mobile-20 {
        margin-bottom: 20px !important;
    }
    
    .mt-mobile-20 {
        margin-top: 20px !important;
    }
    
    .p-mobile-20 {
        padding: 20px !important;
    }
}

/* ================================
   PRINT STYLES
   ================================ */

@media print {
    .navbar,
    .footer-area,
    .btn,
    .contact_form,
    .donation_form {
        display: none !important;
    }
    
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000 !important;
        background: #fff !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: #000 !important;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}