/* Additional Mobile Fixes for Better Compatibility */

/* ==========================
   OVERRIDE ANY CONFLICTING STYLES 
   ========================== */

/* Ensure newsletter form always works properly on mobile */
@media (max-width: 767.98px) {
    /* Force newsletter form to be responsive */
    .newsletter-form .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .newsletter-form .input-group .form-control {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 0 !important;
        border-radius: 6px !important;
    }
    
    .newsletter-form .input-group .btn {
        width: 100% !important;
        flex: none !important;
        border-radius: 6px !important;
    }
    
    /* Override any Bootstrap input-group styles that might interfere */
    .newsletter-form .input-group > .form-control:not(:first-child) {
        border-top-left-radius: 6px !important;
        border-bottom-left-radius: 6px !important;
    }
    
    .newsletter-form .input-group > .btn:not(:last-child) {
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
}

/* ==========================
   MOBILE MENU BUTTON VISIBILITY FIX 
   ========================== */

/* Ensure mobile menu button is properly hidden/shown at the right breakpoints */
.mobile-nav-toggle {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .mobile-nav-toggle {
        display: flex !important;
    }
}

/* Make sure desktop navigation is properly hidden on mobile */
@media (max-width: 1199.98px) {
    .navbar-expand-xl .navbar-nav {
        display: none !important;
    }
    
    .d-xl-block {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {
        display: flex !important;
    }
    
    .d-xl-block {
        display: block !important;
    }
    
    .d-xl-none {
        display: none !important;
    }
}

/* ==========================
   TOUCH TARGET IMPROVEMENTS 
   ========================== */

@media (max-width: 767.98px) {
    /* Ensure all interactive elements have proper touch targets */
    .newsletter-form .btn,
    .mobile-nav-toggle,
    .social-links a,
    .footer-widget ul li a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
    }
    
    /* Newsletter button specific improvements */
    .newsletter-form .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Mobile menu toggle improvements */
    .mobile-nav-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-nav-toggle:focus {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
    }
}

/* ==========================
   INPUT FIELD IMPROVEMENTS 
   ========================== */

@media (max-width: 767.98px) {
    /* Better mobile input styling */
    .newsletter-form .form-control {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.75rem 1rem !important;
        line-height: 1.5 !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    .newsletter-form .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
        opacity: 1 !important;
    }
    
    .newsletter-form .form-control:focus {
        border-color: #007bff !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        outline: none !important;
    }
    
    /* Error state styling */
    .newsletter-form .form-control.is-invalid {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }
}

/* ==========================
   HAMBURGER ANIMATION FIX 
   ========================== */

.mobile-nav-toggle .hamburger-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: var(--primary-color, #003366) !important;
    margin: 3px 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
    transform-origin: center !important;
}

/* Active state for hamburger */
.mobile-nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
    background-color: #fff !important;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px) !important;
    background-color: #fff !important;
}

/* ==========================
   VALIDATION MESSAGE STYLING 
   ========================== */

.validation-message {
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.validation-message.text-danger {
    color: #dc3545 !important;
}

.validation-message.text-success {
    color: #28a745 !important;
}

/* ==========================
   FOOTER RESPONSIVE IMPROVEMENTS 
   ========================== */

@media (max-width: 575.98px) {
    /* Better footer spacing on very small screens */
    .main-footer {
        padding: 1.5rem 0 !important;
    }
    
    .footer-widget {
        margin-bottom: 1.5rem !important;
    }
    
    .footer-widget h5.widget-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .footer-newsletter-desc {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Company info improvements */
    .footer-left-col .footer-logo {
        width: 70px !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-left-col p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
}

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

@media (max-width: 767.98px) {
    /* Better focus indicators */
    .newsletter-form .form-control:focus,
    .newsletter-form .btn:focus,
    .mobile-nav-toggle:focus,
    .social-links a:focus {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
    }
    
    /* Screen reader improvements */
    .mobile-nav-toggle[aria-expanded="true"] {
        background-color: rgba(0, 123, 255, 0.1) !important;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .newsletter-form .form-control {
            border-width: 2px !important;
        }
        
        .mobile-nav-toggle .hamburger-line {
            height: 3px !important;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .mobile-nav-toggle .hamburger-line,
        .newsletter-form .btn,
        .social-links a {
            transition: none !important;
        }
    }
}

/* ==========================
   LOADING STATES 
   ========================== */

.newsletter-form .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.newsletter-form .btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================
   MOBILE OVERLAY IMPROVEMENTS 
   ========================== */

.mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-nav-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

/* Ensure overlay works on all devices */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    .mobile-nav-overlay {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================
   MOBILE MENU BUTTON ENHANCED FIX
   ========================== */

/* Force proper mobile menu button styling and behavior */
.mobile-nav-toggle {
    /* Reset any conflicting styles */
    position: relative !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    gap: 3px !important;
}

.mobile-nav-toggle:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.mobile-nav-toggle:focus {
    background-color: rgba(0, 123, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5) !important;
}

.mobile-nav-toggle:active {
    transform: scale(0.95) !important;
}

/* Hamburger lines styling */
.mobile-nav-toggle .hamburger-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: var(--primary-color, #003366) !important;
    border-radius: 1px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
    margin: 0 !important;
}

/* Active state animations */
.mobile-nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
    background-color: #fff !important;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
}

.mobile-nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px) !important;
    background-color: #fff !important;
}

/* Ensure button is visible only on mobile */
@media (min-width: 1200px) {
    .mobile-nav-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 1199.98px) {
    .mobile-nav-toggle {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Mobile overlay enhanced */
.mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Debugging aid - remove in production */
.mobile-nav-toggle {
    border: 2px solid red !important; /* Temporary - to see if button is there */
}

/* Remove debugging border after confirming it works */
@media (max-width: 1199.98px) {
    .mobile-nav-toggle {
        border: none !important; /* Override the debug border */
    }
}