/* Mobile Overflow Prevention - Apply to All Pages */
@media (max-width: 768px) {
    /* Full width mobile setup */
    html, body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    * {
        box-sizing: border-box;
    }
    
    /* General Mobile Improvements - Full Width Coverage */
    .container {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 15px;
    }
    
    section {
        width: 100vw;
        max-width: 100vw;
        padding: 40px 0;
        margin: 0;
    }
    
    /* Ensure all major sections cover full width */
    .hero,
    .about,
    .mission,
    .did-you-know,
    .news-insights,
    .a2pre-section,
    .stay-updated,
    footer {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* Remove any max-width constraints on mobile */
    .hero-content,
    .mission-content,
    .about-content {
        max-width: 100%;
        width: 100%;
    }
    
    /* Footer Mobile Styles — matching homepage layout */
    .footer-section {
        padding: 30px 0 20px !important;
    }

    .footer-content {
        width: 100%;
        max-width: 100%;
        padding: 0 15px !important;
        margin: 0;
        box-sizing: border-box;
    }

    .footer-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding-right: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Navigation links section - appears first */
    .footer-left {
        order: 1;
        width: 100%;
        align-items: center;
        margin-left: 0 !important;
        display: contents;
    }

    .footer-main-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        width: 100%;
    }

    .footer-logo-span {
        grid-column: unset;
        grid-row: unset;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .footer-logo-span img {
        width: 100px !important;
        height: 100px !important;
    }

    .footer-nav-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(6, 1fr) !important;
        gap: 15px !important;
        text-align: center;
        margin-top: 0 !important;
        width: 100%;
    }

    .footer-nav-grid a {
        font-size: 0.9rem !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-nav-grid a:last-child {
        border-bottom: none;
    }

    /* Hide copyright from footer-left in mobile */
    .footer-left .footer-copyright {
        display: block; text-align: center; order: 99; width: 100%; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.15);
    }

    /* Contact info section - appears second */
    .footer-contact-info {
        order: 2;
        align-items: center !important;
        text-align: center;
        margin-right: 0 !important;
        margin-top: 0 !important;
        width: 100%;
        gap: 20px !important;
        margin-bottom: 30px;
    }

    .contact-item-with-icon {
        justify-content: center;
        flex-direction: row;
    }

    .address-text,
    .email-text {
        text-align: center !important;
        white-space: normal !important;
        max-width: 250px;
    }

    /* Social media icons - appears third */
    .footer-social-icons {
        order: 3;
        justify-content: center;
        margin-right: 0 !important;
        gap: 20px !important;
        margin-bottom: 20px;
    }

    .footer-social-icons svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Hide the original footer-right container structure */
    .footer-right {
        order: 2;
        width: 100%;
        display: contents !important;
        padding-left: 0 !important;
    }

    .footer-copyright p {
        font-size: 0.75rem !important;
        text-align: center;
        word-break: break-word;
    }
    
    /* Prevent all text overflow */
    h1, h2, h3, h4, h5, h6, p, span, div, a {
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Fix any image overflow */
    img, svg {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix grid and flex containers */
    .grid, .flex, 
    .program-grid, .leadership-grid, .benefits-grid,
    .news-grid, .a2pre-grid, .media-items {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix all cards and items */
    .card, .item, .program-item, .leadership-item,
    .news-item, .media-item, .a2pre-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Hide old mobile menu toggle */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .search-container {
        width: 100%;
        margin: 20px 0;
    }
    
    .search-input {
        width: 100%;
        padding: 15px;
        font-size: 1rem;
    }
    
    /* Content stacking */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .program-grid,
    .leadership-grid,
    .benefits-grid,
    .news-grid,
    .a2pre-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .media-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .media-items {
        grid-template-columns: 1fr;
    }
    
    /* Did You Know Section Mobile Fixes */
    .did-you-know {
        text-align: center;
        padding: 40px 0;
    }
    
    .did-you-know h2 {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .facts-carousel {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }
    
    .fact-display {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
    }
    
    .fact-card {
        text-align: center !important;
        padding: 30px 20px;
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .fact-number {
        text-align: center;
        margin-bottom: 15px;
        font-size: 3rem !important;
    }
    
    .fact-card p {
        text-align: center !important;
        max-width: 100%;
        margin: 0 auto;
        line-height: 1.6;
    }
    
    .facts-navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 30px;
        width: 100%;
    }
    
    .fact-nav-btn {
        margin: 0;
    }
    
    /* Action Section (Partner With Us / Apply for Program) Mobile */
    .action-section {
        width: 100vw;
        max-width: 100vw;
        padding: 40px 0;
        text-align: center;
    }
    
    .action-content {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        text-align: center;
    }
    
    .action-content h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .action-content p {
        text-align: center;
        margin-bottom: 30px;
        max-width: 100%;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        align-items: center;
    }
    
    .action-btn {
        width: 100%;
        text-align: center;
        padding: 15px 25px;
        margin: 0;
    }
    
    /* Stay Updated Section Mobile */
    .stay-updated {
        width: 100vw;
        max-width: 100vw;
        padding: 40px 0;
        text-align: center;
    }
    
    .stay-updated-content {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        text-align: center;
        margin: 0 auto;
    }
    
    .stay-updated h2 {
        text-align: center;
        font-size: 2rem !important;
        margin-bottom: 20px;
    }
    
    .stay-updated p {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 30px;
        max-width: 100%;
    }
    
    .newsletter-form {
        width: 100%;
        max-width: 100%;
    }
    
    .form-fields {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .form-fields input {
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        border: 2px solid rgba(255,255,255,0.3);
        font-size: 1rem;
    }
    
    .subscribe-btn {
        width: 100%;
        max-width: 200px;
        margin: 20px auto 0;
        padding: 15px 25px;
        text-align: center;
    }
    
    h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 20px;
    }
    
    h3 {
        font-size: 1.3rem;
        text-align: center;
    }
    
    /* Profile Pages Mobile Fixes */
    .profile-hero {
        width: 100vw;
        max-width: 100vw;
        padding: 40px 0;
    }
    
    .hero-layout {
        max-width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }
    
    .profile-content {
        grid-template-columns: 1fr !important;
        gap: 30px;
        max-width: 100%;
        padding: 20px 15px;
        margin: 0 auto;
    }
    
    .profile-main {
        width: 100%;
    }
    
    .profile-sidebar {
        width: 100%;
        order: -1;
        text-align: center;
    }
    
    .breadcrumb-container {
        padding: 0 15px;
        max-width: 100%;
    }

    /* Mobile Search Dropdown Styles */
    .mobile-search-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .mobile-search-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        z-index: 1000;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-search-dropdown.active {
        display: block;
    }

    .mobile-search-dropdown .search-dropdown-result {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .mobile-search-dropdown .search-result-page,
    .mobile-search-dropdown .search-result-title,
    .mobile-search-dropdown .search-result-snippet {
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .mobile-search-dropdown .search-result-title {
        font-size: 0.85rem;
    }

    .mobile-search-dropdown .search-result-snippet {
        font-size: 0.8rem;
    }

    .mobile-search-dropdown .search-see-all {
        width: 100%;
        box-sizing: border-box;
    }

    /* Breadcrumb Mobile Styles — uniform across all pages */
    section[style*="background: #f8f9fa"] {
        padding: 10px 0 !important;
    }

    section[style*="background: #f8f9fa"] div {
        padding: 0 15px !important;
    }

    section[style*="background: #f8f9fa"] nav {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    span.breadcrumb-slash {
        margin: 0 2px !important;
    }
}

@media (max-width: 480px) {
    .hero-content h2 { font-size: 2.2rem; }
    .pillar, .point { padding: 40px 30px; }
    .contact-item { padding: 30px 25px; }

    /* Breadcrumb 480px adjustments */
    section[style*="background: #f8f9fa"] {
        padding: 10px 0 !important;
    }

    section[style*="background: #f8f9fa"] div {
        padding: 0 10px !important;
    }

    section[style*="background: #f8f9fa"] nav {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    section[style*="background: #f8f9fa"] nav span.breadcrumb-slash {
        margin: 0 1px !important;
    }
}