/* Responsive Fixes for Mobile - Global Styles */

/* Prevent horizontal overflow on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure all containers respect viewport width */
* {
    max-width: 100vw;
}

/* Fix for header spacing on mobile */
body {
    padding-top: 70px; /* Height of mobile header */
}

@media (min-width: 768px) {
    body {
        padding-top: 80px; /* Height of desktop header */
    }
}

/* Specific page adjustments */
.consultation-page body {
    padding-top: 90px;
}

/* Fix first sections to avoid being hidden by header */
section:first-child,
.hero,
main > *:first-child {
    margin-top: 0;
    padding-top: 20px;
}

/* Ensure main content doesn't get hidden under fixed header */
main, 
.hero,
section:first-of-type {
    scroll-margin-top: 80px;
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    /* Prevent horizontal scroll from oversized content */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Fix hero sections on mobile */
    .hero {
        min-height: calc(100vh - 70px);
        padding-top: 2rem !important;
    }
    
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
    }
    
    .hero p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Fix oversized text that might cause overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Prevent images from causing overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix tables on mobile */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Fix code blocks */
    pre, code {
        overflow-x: auto;
        max-width: 100%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /* Ensure buttons don't overflow */
    button, .btn {
        max-width: 100%;
        white-space: normal;
    }
    
    /* Fix cards and boxes */
    .card, .bg-white.rounded-lg {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Consultation page specific */
    .hero-extra-padding {
        padding-top: 100px !important;
    }
    
    /* Blog cards on mobile */
    .blog-card {
        margin: 0.5rem;
    }
    
    /* Footer adjustments */
    footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Modal adjustments */
    .modal > div {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
}

/* iPad and tablet specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        padding-top: 100px;
    }
    
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 767px) {
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .mobile-menu-link {
        padding: 1rem;
    }
}

/* Fix for iOS Safari bounce scroll */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
    font-size: 16px !important;
}

/* Fix for header z-index issues */
#main-header {
    z-index: 9999 !important;
}

/* Ensure mobile menu is above everything */
#mobile-menu {
    z-index: 10000 !important;
}

#mobile-menu-panel {
    z-index: 10001 !important;
}