/*
 * mobile.css — 100% Mobile-first responsive overrides
 * Covers: navbar, hero, cards, grids, sidebar, post page, footer, forms, modals
 * Breakpoints: 1024px (tablet), 768px (phablet), 480px (phone), 360px (small phone)
 */

/* ══════════════════════════════════════════════════════
   0. GLOBAL SAFE ZONE
══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    overflow-x: hidden;
    width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════════════
   1. CONTAINER
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .container, .container-narrow { padding: 0 24px; }
}

@media (max-width: 640px) {
    .container, .container-narrow { padding: 0 16px; }
}

/* ══════════════════════════════════════════════════════
   2. NAVBAR — mobile drawer
══════════════════════════════════════════════════════ */

@media (max-width: 800px) {

    /* Brand shrink */
    .nav-brand-main { font-size: 0.95rem; }
    .nav-brand-sub  { font-size: 0.55rem; letter-spacing: 1.5px; }

    /* Hide desktop links, show burger */
    .nav-links li { list-style: none; }
    .mobile-only-header { display: none; }
    
    .nav-links   { display: none !important; }
    .nav-login-btn { display: none !important; }
    .nav-mobile-btn { 
        display: flex !important; 
        position: relative;
        z-index: 9999;
    }

    /* ── Standard Compact Side Drawer ── */
    #navLinks.nav-links.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: rgba(0, 0, 0, 0.45) !important; 
        z-index: 100000 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; 
        padding: 0 !important;
        margin: 0 !important;
    }

    #navLinks.nav-links.mobile-open::before {
        content: '';
        position: fixed;
        top: 0; right: 0;
        width: 260px;
        height: 100%;
        background: #ffffff !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.2);
        z-index: -1;
    }

    [data-theme="dark"] #navLinks.nav-links.mobile-open::before {
        background: #0a0f1e !important;
    }

    #navLinks.nav-links.mobile-open li {
        width: 260px !important;
        margin-left: auto !important;
        padding: 0 20px !important;
        list-style: none !important;
        display: block !important;
    }

    #navLinks.nav-links.mobile-open li:first-child { 
        margin-top: 40px !important; 
    }

    #navLinks.nav-links.mobile-open li a {
        display: block !important;
        font-size: 16px !important; 
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        width: 100% !important;
        padding: 12px 0 !important; 
        border-bottom: 1px solid var(--border) !important;
        text-align: left !important;
        text-transform: uppercase !important;
        line-height: 1.3 !important;
    }

    #navLinks.nav-links.mobile-open li:last-child a { border-bottom: none !important; }

    /* Reset the mobile toggle button itself */
    .nav-mobile-btn {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: 44px; height: 44px;
        align-items: center; justify-content: center;
        box-shadow: none !important;
        outline: none !important;
    }





    /* ==============================================================
       CRITICAL FIX: Overriding Stacking Context / Containing Blocks
       Backdrop-filter on the parent breaks `position: fixed` for children! 
       When drawer is open, we disable it. 
       ============================================================== */
    body.drawer-active .site-nav,
    body.drawer-active .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important; /* Let the drawer handle background */
    }

    /* User dropdown — elegant floating card on mobile */
    .nav-drop-menu {
        position: absolute;
        right: -20px;
        left: auto;
        min-width: 280px;
        width: calc(100vw - 40px);
        max-width: 320px;
        border-radius: 18px;
        top: calc(100% + 15px);
        box-shadow: 0 15px 45px rgba(0,0,0,0.15);
    }

    /* Ensuring the Hamburger / Close toggle stays clickable above the dark overlay */
    .mobile-toggle {
        position: relative !important;
        z-index: 99999999 !important; /* Higher than #navLinks.mobile-open */
    }

    .nav-drop-item {
        padding: 14px 20px;
    }

    /* Category bar — smaller text, scroll */
    .nav-cat-inner { gap: 0; padding: 0 16px; }
    .nav-cat-btn   { font-size: 0.65rem; margin-right: 20px; }
}

/* ══════════════════════════════════════════════════════
   3. BREAKING TICKER
══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .breaking-ticker { font-size: 0.7rem; }
    .ticker-label    { font-size: 0.6rem; letter-spacing: 0; padding: 2px 6px; margin-right: 10px; }
}

/* ══════════════════════════════════════════════════════
   4. HOMEPAGE HERO
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .hp-hero {
        min-height: 380px;
        border-radius: 0;
        margin-bottom: 0;
    }

    .hp-hero-content { padding: 32px 0 36px; }

    .hp-hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -1px; }
    .hp-hero-excerpt { font-size: 0.9rem; display: none; }

    .hp-hero-actions { gap: 12px; margin-bottom: 20px; }
    .hp-hero-btn  { font-size: 0.82rem; padding: 10px 20px; }
    .hp-hero-byline { font-size: 0.78rem; }

    .hp-hero-search { max-width: 100%; }
    .hp-hero-search-input { padding: 11px 14px; font-size: 0.88rem; }
    .hp-hero-search-input kbd { display: none; }
}

@media (max-width: 480px) {
    .hp-hero { min-height: 300px; }
    .hp-hero-title { font-size: 1.5rem; }
    .hp-hero-tag   { font-size: 0.6rem; }
}

/* ══════════════════════════════════════════════════════
   5. HOMEPAGE SEARCH UTILITY BAR
══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .hp-search-utility-bar { padding: 10px 0; }
    .hp-sub-row     { gap: 10px; }
    .hp-sub-topics  { gap: 6px; }
    .hp-sub-topic   { font-size: 0.72rem; padding: 4px 10px; }
    .hp-sub-search-btn { padding: 8px 12px; font-size: 0.82rem; }
    .hp-sub-label   { display: none; }
}

/* ══════════════════════════════════════════════════════
   6. HOMEPAGE SECTIONS
══════════════════════════════════════════════════════ */

/* Trending layout — stack */
@media (max-width: 1024px) {
    .hp-trending-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .hp-sidebar { position: static !important; }
}

/* News cards grid */
@media (max-width: 900px) {
    .hp-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .hp-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Section header */
@media (max-width: 480px) {
    .hp-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-bottom: 12px;
        margin-bottom: 20px;
    }
    .hp-section-header h2 { font-size: 1.1rem; }
    .hp-section-link      { font-size: 0.75rem; }
}

/* Editor's picks */
@media (max-width: 900px) {
    .hp-picks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .hp-picks-grid {
        grid-template-columns: 1fr !important;
    }
    .hp-picks-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Video grid */
@media (max-width: 900px) {
    .hp-video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .hp-video-grid { grid-template-columns: 1fr !important; }
}

/* Latest articles / main layout */
@media (max-width: 1024px) {
    .main-layout       { grid-template-columns: 1fr !important; }
    .hp-latest-layout  { grid-template-columns: 1fr !important; }
}

/* Posts grid */
@media (max-width: 900px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .main-layout .posts-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
    .posts-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   7. NEWS PAGE (posts.php)
══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}

@media (max-width: 560px) {
    .news-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    .news-page-hero { padding: 48px 0 36px; }
    .news-page-hero h1 { font-size: 1.8rem; letter-spacing: -1px; }
    .news-meta-bar { gap: 10px; }
}

/* ══════════════════════════════════════════════════════
   8. VIDEO PAGE (videos.php)
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .vp-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .vp-player-wrap { position: static !important; }
    .vp-playlist { max-height: 420px; }
}

@media (max-width: 560px) {
    .vp-hero { padding: 48px 0 36px; }
    .vp-hero h1 { font-size: 1.8rem; }

    .vp-item        { flex-direction: column; gap: 10px; }
    .vp-item-thumb  { width: 100% !important; aspect-ratio: 16/9; }
}

/* ══════════════════════════════════════════════════════
   9. CONTACT PAGE
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .contact-sidebar { position: static !important; }
}

@media (max-width: 640px) {
    .cf-row        { grid-template-columns: 1fr !important; gap: 0 !important; }
    .contact-form-wrap { padding: 24px 18px !important; }
    .cf-submit-row { flex-direction: column; align-items: stretch; }
    .cf-submit-btn { width: 100%; text-align: center; }

    .contact-hero h1 { font-size: 2.2rem; letter-spacing: -1.5px; }

    .ci-entry { gap: 12px; }
    .ci-icon  { width: 38px; height: 38px; border-radius: 10px; }
}

/* ══════════════════════════════════════════════════════
   10. SINGLE POST PAGE (post.php)
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sp-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
        padding-top: 32px;
    }
    .sp-sidebar {
        position: static !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .sp-toc { flex: 1; min-width: 200px; }
}

@media (max-width: 768px) {
    .sp-title { font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: -1px; }

    .sp-meta { gap: 12px; }
    .sp-meta-item { font-size: 0.75rem; }

    /* Actions — icon-only pill on small screens */
    .sp-actions { gap: 6px; }
    .sp-action-btn span { display: none; }
    .sp-action-btn { padding: 9px 12px; }

    .sp-author-card { flex-direction: column; gap: 16px; padding: 24px; }
    .sp-author-avatar { width: 56px; height: 56px; }

    .sp-reactions { flex-wrap: wrap; gap: 12px; padding: 18px 20px; }

    .sp-share-bar { gap: 8px; flex-wrap: wrap; }
    .sp-share-pill { font-size: 0.75rem; padding: 7px 12px; }

    .sp-newsletter { padding: 28px 20px; }
    .sp-nl-form    { flex-direction: column; }
    .sp-nl-btn     { width: 100%; }

    .sp-related-section { padding: 40px 0; }
    .sp-related-grid { grid-template-columns: 1fr !important; gap: 16px; }
}

@media (max-width: 480px) {
    .sp-breadcrumb { font-size: 0.72rem; gap: 4px; }
    .sp-cat-tag    { font-size: 0.6rem; padding: 4px 10px; }
    .sp-title      { font-size: 1.5rem; }
    .sp-body       { font-size: 1rem; line-height: 1.75; }

    .sp-tldr { flex-direction: column; gap: 6px; padding: 14px 16px; }
    .sp-tldr-label { margin-top: 0; }

    .sp-share-bar-label { width: 100%; }
}

/* ══════════════════════════════════════════════════════
   11. SIDEBAR (public-sidebar.php)
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .hp-sidebar-widget { max-width: 100%; }
}

@media (max-width: 640px) {
    .sidebar-widget { padding: 20px 16px; }
    .sidebar-post-item img { width: 64px; height: 50px; }
    .sidebar-post-item h4 { font-size: 0.82rem; }
}

/* ══════════════════════════════════════════════════════
   12. ABOUT PAGE
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* about-hero */
    .about-hero-inner { grid-template-columns: 1fr !important; gap: 32px; }
    .about-hero-img   { display: none; }

    /* timeline */
    .about-timeline { padding-left: 20px !important; }
    .about-tl-item { padding: 16px 16px 16px 20px !important; }

    /* principles */
    .principles-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   13. NEWSLETTER SECTION
══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .nl-section { padding: 52px 0; }
    .nl-title   { font-size: 1.6rem; }
    .nl-form    { flex-direction: column; }
    .nl-btn     { width: 100%; }
    .nl-desc    { font-size: 0.9rem; }
}

/* ══════════════════════════════════════════════════════
   14. FOOTER
══════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .footer-main { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 560px) {
    .footer-main { grid-template-columns: 1fr !important; gap: 28px !important; }
    .footer-brand-main { font-size: 1.2rem; }
    .footer-desc { max-width: 100%; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

    .site-footer { padding-top: 52px; }
}

/* ══════════════════════════════════════════════════════
   15. SEARCH PAGE (search.php)
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Reuse posts-grid single column */
    .search-results-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   16. POST CARDS (global)
══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .post-card-title { font-size: 1rem; }
    .post-card-body  { padding: 16px; }
    .post-card-author img { width: 28px; height: 28px; }
    .post-card-author-name { font-size: 0.75rem; }
    .read-more { font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════
   17. GLOBAL SEARCH MODAL
══════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .gsm-backdrop.open { padding-top: 0 !important; align-items: flex-end; }
    .gsm-box {
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }
    .gsm-results { flex: 1; }
    .gsm-footer  { flex-wrap: wrap; gap: 6px; }
    .gsm-footer-hint { font-size: 0.68rem; }
    .gsm-input   { font-size: 1rem !important; }
}

/* ══════════════════════════════════════════════════════
   18. FEATURED POST (classic layout)
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .featured-post {
        grid-template-columns: 1fr !important;
    }
    .featured-post-image { min-height: 240px !important; }
    .featured-post-content { padding: 24px !important; }
    .featured-post-content h2 { font-size: 1.5rem !important; }
}

/* ══════════════════════════════════════════════════════
   19. COMMENT SECTION
══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .sp-comment-form-wrap { flex-direction: column; gap: 10px; }
    .sp-comment-form-wrap img { width: 34px; height: 34px; }
    .sp-comments h2 { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════
   20. FORMS (global)
══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .form-control { font-size: 16px; } /* prevent iOS zoom */
    .btn          { padding: 12px 20px; font-size: 0.85rem; }
    .btn-lg       { padding: 14px 24px; font-size: 0.9rem; }
}

/* ══════════════════════════════════════════════════════
   21. BACK TO TOP BUTTON
══════════════════════════════════════════════════════ */

#backToTop {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

@media (max-width: 480px) {
    #backToTop {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* ══════════════════════════════════════════════════════
   22. UTILITY — Overflow Safety Net
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Any inline-grid that wasn't converted — force to single col */
    [style*="grid-template-columns: repeat(3,"],
    [style*="grid-template-columns: repeat(3, "],
    [style*="grid-template-columns: 1fr 320px"],
    [style*="grid-template-columns: 1fr 300px"],
    [style*="grid-template-columns: 1fr 350px"],
    [style*="grid-template-columns: 1fr 380px"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 2.5fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Tables on mobile */
    table      { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    thead, tbody, th, td, tr { display: block; }
    thead tr   { display: none; }
    td { position: relative; padding-left: 50%; min-height: 32px; }
    td::before { position: absolute; left: 12px; top: 8px; font-weight: 700; font-size: 0.78rem; color: var(--text-muted); content: attr(data-label); }
}

/* ══════════════════════════════════════════════════════
   23. MOBILE NAV DRAWER — JS driven
   (JS in navbar.php toggles .mobile-open)
══════════════════════════════════════════════════════ */

/* Handled in @media (max-width: 800px) above via .nav-links.mobile-open */