/* ═══ OppEngine Global Mobile Responsive Fix ═══ */

/* ── Hamburger for all pages ── */
.mobile-hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

@media (max-width: 768px) {
    /* ── Navigation ── */
    .mobile-hamburger { display: block; }
    .nav-links { 
        display: none !important; 
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0f0f0f;
        border-bottom: 1px solid #1e1e1e;
        padding: 12px 24px;
        flex-direction: column;
        gap: 12px;
    }
    .nav-links.open { display: flex !important; }
    .nav-links a { margin-left: 0 !important; padding: 8px 0; font-size: 16px; }
    .nav { flex-wrap: wrap; padding: 12px 16px; position: relative; }

    /* ── Landing page ── */
    .hero-title { font-size: 32px !important; line-height: 1.1 !important; }
    .hero-subtitle { font-size: 15px !important; padding: 0 8px; }
    .hero { padding: 40px 16px 32px !important; }
    .nav-cta { font-size: 13px !important; padding: 8px 14px !important; }
    .steps-grid, .features-big-grid, .pricing-grid,
    .testimonials-grid, .proof-grid { 
        grid-template-columns: 1fr !important; 
    }
    .feature-large { grid-column: span 1 !important; }
    .cta-section { padding: 40px 16px !important; }
    .cta-section h2 { font-size: 28px !important; }
    .section-title { font-size: 28px !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .proof-stats { flex-direction: column; gap: 16px; }
    .proof-divider { display: none !important; }

    /* ── Country pages ── */
    .hero h1 { font-size: 24px !important; line-height: 1.2 !important; }
    .hero-stats { flex-wrap: wrap; gap: 16px !important; justify-content: center; }
    .hero-stat .val { font-size: 22px !important; }
    .sector-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bar-cell { min-width: 100px !important; }
    .cta-box { padding: 20px 16px !important; margin: 24px 16px !important; }
    .section { padding: 32px 16px !important; }
    .section h2 { font-size: 22px !important; }
    .opp-grid, .opportunities-grid { grid-template-columns: 1fr !important; }
    .gap-grid { grid-template-columns: 1fr !important; }
    .signals-grid { grid-template-columns: 1fr !important; }

    /* ── Markets page ── */
    .market-grid, .markets-grid { grid-template-columns: 1fr !important; }
    .filter-row, .filter-bar { 
        flex-direction: column !important; 
        gap: 8px !important;
        align-items: stretch !important;
    }
    .market-card { padding: 16px !important; }
    .stats-row { flex-wrap: wrap; gap: 8px; }

    /* ── Report pages ── */
    .report-header { padding: 32px 16px !important; }
    .report-header h1 { font-size: 24px !important; }
    .report-content { padding: 24px 16px !important; }
    .report-meta { flex-wrap: wrap; gap: 8px; }
    .report-grid { grid-template-columns: 1fr !important; }
    .report-sidebar { 
        position: static !important; 
        width: 100% !important;
        order: -1;
    }
    .toc { display: none; }

    /* ── Sector pages ── */
    .sector-header { padding: 32px 16px !important; }
    .sector-header h1 { font-size: 22px !important; }
    .sector-grid { grid-template-columns: 1fr !important; }
    .sector-stats { flex-wrap: wrap; gap: 12px; }

    /* ── Compare / VS pages ── */
    .compare-table { display: block; overflow-x: auto; }
    .vs-grid { grid-template-columns: 1fr !important; }
    .comparison-grid { grid-template-columns: 1fr !important; }

    /* ── General ── */
    body { font-size: 15px; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .container { padding: 0 16px !important; }
    img { max-width: 100%; height: auto; }
    .hide-mobile { display: none !important; }
    pre, code { overflow-x: auto; font-size: 13px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 26px !important; }
    .hero h1 { font-size: 20px !important; }
    .nav-brand { font-size: 16px; }
    .section h2 { font-size: 20px !important; }
    .hero-stats { gap: 12px !important; }
    .hero-stat .val { font-size: 20px !important; }
    .kpi-grid, .kpi-row { grid-template-columns: 1fr !important; }
}

/* ── Landing nav-actions (Log in / Get started) ── */
@media (max-width: 768px) {
    .nav-actions { gap: 8px !important; }
    .nav-actions a:first-child { display: none; } /* Hide Log in text */
    .nav-actions .nav-cta { 
        font-size: 12px !important; 
        padding: 6px 12px !important; 
        white-space: nowrap;
    }
    .nav-inner { padding: 0 !important; }
    
    /* Fix hero for mobile */
    .hero-cta-group { 
        flex-direction: column !important; 
        gap: 12px !important;
        align-items: stretch !important;
    }
    .hero-cta-group a { text-align: center; }
    
    /* Float cards hide on mobile */
    .float-card, .mini-sidebar { display: none !important; }
    
    /* Footer */
    .footer-inner { 
        flex-direction: column !important; 
        gap: 24px !important;
        text-align: center;
    }
    .footer-links { 
        flex-direction: column !important; 
        gap: 16px !important;
    }
}

/* ── Fix: disable scroll animations on mobile (opacity:0 elements never trigger) ── */
@media (max-width: 768px) {
    .feature-card,
    .step-card,
    .proof-stat,
    .testimonial-card,
    .pricing-card,
    .cta-section,
    [class*='fade-in'],
    [class*='slide-up'],
    [class*='reveal'] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ── Sector pages nav (plain nav > div structure) ── */
@media (max-width: 768px) {
    nav > div:not(.nav-links):not(.nav-inner) {
        display: none;
    }
    nav > div:not(.nav-links):not(.nav-inner).open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0f0f0f;
        padding: 12px 20px;
        gap: 12px;
        border-bottom: 1px solid #1e1e1e;
        z-index: 100;
    }
    nav > div:not(.nav-links):not(.nav-inner).open a {
        margin-left: 0 !important;
        padding: 8px 0;
        font-size: 16px;
    }
}