/* Touch Target Optimization - Phase 7 */
@media (max-width: 768px) {
    /* Ensure all interactive elements meet minimum touch target size (44x44px) */
    button,
    a.btn,
    input[type="button"],
    input[type="submit"],
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.5rem;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input,
    select,
    textarea {
        font-size: 16px;
    }
    
    /* Improve spacing for touch interactions */
    .form-control {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    /* Better spacing for mobile navigation */
    nav a,
    nav button {
        padding: 0.75rem 1rem;
        margin: 0.25rem 0;
    }
}

/* Mobile Text Truncation Fixes */

/* Prevent text truncation on mobile */
@media (max-width: 768px) {
    /* Hero Section - Fix text truncation */
    #hero_header h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
    }
    
    #hero_header h1 span {
        display: inline-block;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Hero description text */
    #hero_header p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
    
    /* About section - Fix "Why Choose Rushdania Counseling?" truncation */
    .section h2,
    .section h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
        line-height: 1.3 !important;
    }
    
    .section h2 span,
    .section h3 span {
        display: inline-block;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* About description text */
    .section p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
    
    /* Container fixes */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Column fixes */
    [class*="col-"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Panel fixes */
    .panel {
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    /* Hero section container */
    #hero_header .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Hero text container */
    #hero_header .panel.vstack {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Fix text in hero */
    #hero_header .h2,
    #hero_header .display-6,
    #hero_header .display-3 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* About section container */
    .section .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    /* Hero title - smaller font but no truncation */
    #hero_header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Hero description */
    #hero_header p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* Section headings */
    .section h2,
    .section h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Section paragraphs */
    .section p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

/* Global text overflow prevention */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Specific fixes for text elements */
h1, h2, h3, h4, h5, h6,
p, span, div, li, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Prevent text truncation */
.text-truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Mobile menu fixes */
@media (max-width: 991px) {
    .uc-offcanvas-bar {
        max-width: 80% !important;
    }
    
    .uc-offcanvas-bar .panel {
        padding: 1rem !important;
    }
    
    .uc-offcanvas-bar ul li a {
        word-wrap: break-word;
        white-space: normal !important;
    }
    
    /* Mobile menu language switcher */
    .uc-offcanvas-bar .lang-switcher {
        display: flex !important;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    /* Mobile menu buttons */
    .uc-offcanvas-bar .vstack.gap-2 {
        padding: 0.5rem 0;
    }
    
    .uc-offcanvas-bar .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Mobile navbar container - fix appearance */
    .uc-navbar-container {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    
    .dark .uc-navbar-container {
        background: rgba(26, 95, 90, 0.2) !important;
    }
    
    /* Mobile menu trigger button styling */
    .uc-menu-trigger {
        background: var(--rushdania-teal, #1a5f5a) !important;
        color: white !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .uc-menu-trigger i {
        font-size: 1.25rem !important;
        color: white !important;
    }
    
    .uc-menu-trigger:hover {
        background: var(--rushdania-teal-dark, #134a46) !important;
    }
    
    .uc-menu-trigger:hover i {
        color: white !important;
    }
    
    /* Ensure navbar is visible on mobile */
    .uc-navbar {
        min-height: 56px !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Center content in mobile navbar */
    .uc-navbar-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Social media icons positioning in hero section - mobile */
    @media (max-width: 991px) {
        /* Ensure logo column is centered and full width on mobile */
        #hero_header .sm\:col-8 {
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            flex-direction: column !important;
        }
        
        /* Center the panel containing logo and icons */
        #hero_header .sm\:col-8 .panel {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        /* Center logo image */
        #hero_header .sm\:col-8 .panel img {
            margin: 0 auto !important;
            display: block !important;
            max-width: 300px !important;
        }
        
        /* Center social icons container */
        #hero_header .sm\:col-8 .hstack {
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            margin-top: 1.5rem !important;
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
        }
        
        /* Style social icons */
        #hero_header .social-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(10px) !important;
            transition: all 0.3s ease !important;
        }
        
        #hero_header .social-icon:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            transform: translateY(-3px) scale(1.1) !important;
        }
        
        #hero_header .social-icon i {
            font-size: 1.25rem !important;
        }
        
        /* Facebook icon */
        #hero_header .social-facebook {
            background: rgba(24, 119, 242, 0.2) !important;
        }
        
        #hero_header .social-facebook:hover {
            background: rgba(24, 119, 242, 0.4) !important;
        }
        
        /* Instagram icon */
        #hero_header .social-instagram {
            background: rgba(225, 48, 108, 0.2) !important;
        }
        
        #hero_header .social-instagram:hover {
            background: rgba(225, 48, 108, 0.4) !important;
        }
        
        /* TikTok icon */
        #hero_header .social-tiktok {
            background: rgba(0, 0, 0, 0.3) !important;
        }
        
        #hero_header .social-tiktok:hover {
            background: rgba(0, 0, 0, 0.5) !important;
        }
        
        #hero_header .social-tiktok i {
            color: white !important;
        }
        
        /* WhatsApp icon */
        #hero_header .social-whatsapp {
            background: rgba(37, 211, 102, 0.2) !important;
        }
        
        #hero_header .social-whatsapp:hover {
            background: rgba(37, 211, 102, 0.4) !important;
        }
    }
}