/* MOBILE NAVIGATION & TOGGLE STYLES */
.menu-toggle {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    z-index: 10000 !important;
}
.menu-toggle span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #333 !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 768px) {
    /* Header layout for mobile */
    .custom-header-container { 
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .menu-toggle { display: flex !important; }
    
    /* Navigation drawer */
    nav#site-navigation {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #eee !important;
        padding: 20px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
    }
    
    nav#site-navigation.active {
        display: block !important;
    }
    
    ul.nav-list { 
        flex-direction: column !important;
        gap: 15px !important; 
        text-align: center !important; 
    }

    /* Sub-menus on mobile (vertical accordion style) */
    ul.sub-menu {
        position: static !important;
        display: none !important;
        box-shadow: none !important;
        padding-left: 20px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    ul.nav-list li:hover > ul.sub-menu {
        display: block !important;
    }

    /* Footer adjustments for mobile */
    .custom-footer-container { 
        grid-template-columns: 1fr !important; 
        text-align: center !important; 
        gap: 30px !important; 
    }

    /* FRONT PAGE MOBILE FIXES */
    .hero-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .hero-header h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .hero-feature a {
        height: 250px !important;
    }

    .hero-feature h2 {
        font-size: 20px !important;
    }

    .news-grid {
        grid-template-columns: 1fr !important;
    }

    .news-card {
        flex-direction: column !important;
    }

    .news-card > div:first-child {
        width: 100% !important;
        height: 200px !important;
    }

    .news-card > div:last-child {
        padding: 15px !important;
    }

    .trend-grid, .latam-grid, .academy-grid {
        grid-template-columns: 1fr !important;
    }

    .breaking-news-v2 .container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

    .ticker-wrapper {
        width: 100% !important;
        overflow: hidden !important;
    }

    .ticker-content {
        white-space: normal !important; /* Wrap ticker on mobile instead of horizontal overflow */
        display: flex !important;
        flex-direction: column !important;
    }

    .ticker-content a {
        margin-right: 0 !important;
        margin-bottom: 5px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }

    /* Site logo mobile size */
    .site-logo a {
        font-size: 24px !important;
        word-break: break-word !important;
    }

    /* Global container padding for mobile */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Prevent any child from pushing it out */
    }

    /* Prevent overflow on the whole page */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    section {
        padding: 40px 0 !important;
    }

    .cta-block form {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 20px !important;
    }

    .cta-block h2 {
        font-size: 24px !important;
    }

    .cta-block p {
        font-size: 16px !important;
    }

    /* Additional PRO Template Fixes */
    .hero-container {
        grid-template-columns: 1fr !important;
    }

    .hero-thumbnail img {
        height: 250px !important;
    }
}