/* ========================================
   MOBILE RESPONSIVE STYLES
   Premium Mobile Experience
   Like OnlineKhabar/RatoPati
   ======================================== */

/* ========================================
   MOBILE HEADER & NAVIGATION
   ======================================== */

@media (max-width: 768px) {
    /* Fluid Containers */
    .sb-container {
        padding: 0 12px;
    }

    /* Fix Header Overlap */
    .sb-home-container, 
    .site-main, 
    #content,
    .archive-wrapper,
    .single-post-wrapper,
    .page-wrapper {
        padding-top: 115px !important; /* Increased to account for Sticky Mobile Header + Ticker */
    }

    /* Force Mobile-First Reflow - No Scaling Down */
    .sb-top-bar {
        display: none !important;
    }

    /* Reset Theme Containers */
    .container, 
    .site-content, 
    #primary, 
    #secondary {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* Mobile Header & Sticky Nav */
    .sb-sticky-header, 
    .sb-sticky-header.is-sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 10001; /* Above all */
        background: #FFFFFF !important;
        border-bottom: 2px solid #000000;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }

    .sb-main-nav {
        background: #000000;
    }

    .sb-mobile-header {
        display: flex !important;
        justify-content: center !important; /* Force centering */
        align-items: center;
        padding: 8px 15px;
        background: #000000;
        color: #FFFFFF;
        position: relative; /* For absolute button positioning */
    }

    .sb-mobile-logo {
        color: #FFFFFF !important;
        font-family: 'Noto Sans Devanagari', sans-serif;
        font-size: 1.4rem !important;
        font-weight: 900;
        letter-spacing: 0;
        text-align: center;
        flex: 1;
        display: block !important;
        padding: 0 70px !important; /* Prevent touching the menu button */
    }

    .sb-mobile-logo a {
        color: #FFFFFF !important;
        text-decoration: none !important;
    }

    /* Mobile News Ticker Optimization */
    .sb-news-ticker {
        height: 38px !important;
        border-top: 1px solid #EEEEEE !important;
        border-bottom: none !important;
    }

    .ticker-label {
        height: 38px !important;
        line-height: 38px !important;
        font-size: 0.75rem !important;
        padding: 0 10px !important;
    }

    .ticker-scroll a {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
    }

    .mobile-menu-toggle {
        display: block !important;
        background: #FFFFFF !important; /* High Contrast White */
        color: #000000 !important; /* Black Text */
        border: 2px solid #000000 !important;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 0; /* Sharp Newspaper Edge */
        transition: all 0.2s ease-in-out;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10005;
        box-shadow: 2px 2px 0 #000;
        white-space: nowrap;
    }

    .mobile-menu-toggle:active {
        transform: translateY(-50%) scale(0.95);
        box-shadow: none;
    }

    /* Drawer Menu Refinement */
    .sb-menu {
        display: none !important; 
        flex-direction: column;
        position: fixed; 
        top: 60px; /* Adjusted for taller header */
        left: 0;
        right: 0;
        bottom: 0; /* Full height for better scrolling */
        background: rgba(0, 0, 0, 0.98) !important;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        z-index: 10000;
        border-top: 1px solid #333;
        padding: 20px 0 60px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
    }

    .sb-menu.mobile-active {
        display: flex !important;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .sb-menu li {
        width: 100%;
        border-bottom: 1px solid #1a1a1a;
        opacity: 0;
        transform: translateX(-10px);
    }

    .sb-menu.mobile-active li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Staggered animation for menu items */
    .sb-menu.mobile-active li:nth-child(1) { transition: all 0.3s ease 0.05s; }
    .sb-menu.mobile-active li:nth-child(2) { transition: all 0.3s ease 0.10s; }
    .sb-menu.mobile-active li:nth-child(3) { transition: all 0.3s ease 0.15s; }
    .sb-menu.mobile-active li:nth-child(4) { transition: all 0.3s ease 0.20s; }
    .sb-menu.mobile-active li:nth-child(5) { transition: all 0.3s ease 0.25s; }
    .sb-menu.mobile-active li:nth-child(6) { transition: all 0.3s ease 0.30s; }
    .sb-menu.mobile-active li:nth-child(7) { transition: all 0.3s ease 0.35s; }
    .sb-menu.mobile-active li:nth-child(8) { transition: all 0.3s ease 0.40s; }
    .sb-menu.mobile-active li:nth-child(n+9) { transition: all 0.3s ease 0.45s; }

    .sb-menu li a {
        padding: 18px 25px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;
        text-decoration: none;
    }

    .sb-menu li a:after {
        content: '→';
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.2s;
    }

    .sb-menu li a:active,
    .sb-menu li a:hover {
        background: #111111;
        padding-left: 30px !important;
        color: #FFFFFF !important;
    }

    .sb-menu li a:active:after,
    .sb-menu li a:hover:after {
        opacity: 1;
        transform: translateX(0);
    }

    /* Typography Overrides (for Archive/Single if needed) */
    .site-title {
        font-size: clamp(24px, 8vw, 32px) !important;
        text-align: center;
    }
}

/* ========================================
   MOBILE FEATURED SECTION
   ======================================== */

@media (max-width: 768px) {
    .featured-section {
        margin: 20px 0 !important;
    }
    
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Main Featured - Full Width */
    .main-featured {
        grid-column: 1 / -1;
    }
    
    .main-featured img {
        height: 250px !important;
    }
    
    .featured-main-content {
        padding: 15px !important;
    }
    
    .featured-main-title {
        font-size: 22px !important;
    }
    
    /* Better Excerpts */
    .featured-main-excerpt {
        font-size: 14px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Side Featured - Stack */
    .featured-side {
        flex-direction: column !important;
    }
    
    .featured-side-article {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-bottom: 15px;
    }
    
    .featured-side-article img {
        width: 120px !important;
        height: 80px !important;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 4px;
    }
    
    .featured-side-content {
        padding: 0 !important;
    }
    
    .featured-side-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
}

/* ========================================
   MOBILE NEWS GRID
   ======================================== */

@media (max-width: 768px) {
    .latest-section {
        margin: 25px 0 !important;
    }
    
    .section-header {
        padding: 10px 0 !important;
        margin-bottom: 15px !important;
    }
    
    .section-header h2 {
        font-size: 18px !important;
    }
    
    .view-all {
        font-size: 12px !important;
    }
    
    /* 4 Column Grid -> 2 Column */
    .news-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .news-card img {
        height: 140px !important;
    }
    
    .news-card-content {
        padding: 12px !important;
    }
    
    .news-card-title {
        font-size: 14px !important;
    }
    
    .news-card-meta {
        font-size: 11px !important;
    }
    
    /* 3 Column Grid -> 2 Column */
    .news-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ========================================
   MOBILE CONTENT + SIDEBAR
   ======================================== */

@media (max-width: 768px) {
    .main-content-area {
        margin: 25px 0 !important;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .category-sections {
        order: 1;
    }
    
    .sidebar {
        order: 2;
        position: static !important;
    }
    
    .sidebar-widget {
        padding: 15px !important;
    }
    
    .widget-title {
        font-size: 16px !important;
    }
    
    .most-read-list li {
        padding: 10px 0 !important;
    }
    
    .most-read-list li a {
        font-size: 13px !important;
    }
    
    .social-links {
        gap: 8px !important;
    }
    
    .social-link {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE AD SPACES
   ======================================== */

@media (max-width: 768px) {
    .top-ad,
    .middle-ad,
    .top-ad-container,
    .ad-container {
        margin: 15px 0 !important;
    }
    
    .ad-728x90 {
        width: 100% !important;
        height: auto !important;
        min-height: 90px;
    }
    
    .sidebar-ad .ad-300x250 {
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
    }
}

/* ========================================
   MOBILE FOOTER
   ======================================== */

@media (max-width: 768px) {
    .upper-footer {
        padding: 25px 0 20px !important;
        margin-top: 40px !important;
    }
    
    .upper-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .footer-column h4 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-column a {
        font-size: 12px !important;
    }
    
    .lower-footer {
        padding: 20px 0 15px !important;
    }
    
    .footer-corporate-info {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .corporate-info p,
    .footer-contact p {
        font-size: 12px !important;
    }
    
    .footer-contact {
        text-align: left !important;
    }
    
    .footer-bottom-bar {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    
    .footer-copyright {
        font-size: 11px !important;
    }
    
    .footer-social {
        gap: 12px !important;
    }
    
    .footer-social a {
        font-size: 18px !important; /* Slightly larger for touch */
        color: #777 !important; /* Grayscale base state */
        text-decoration: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #333;
        border-radius: 50%;
    }
    
    .footer-social a:hover {
        color: #FFFFFF !important;
        border-color: #FFFFFF;
        background: #333;
    }
}

/* ========================================
   MOBILE SINGLE POST
   ======================================== */

@media (max-width: 768px) {
    .single-post-wrapper {
        padding: 0 12px !important;
    }
    
    .breadcrumb {
        font-size: 12px !important;
        padding: 12px 0 !important;
    }
    
    .post-category {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    
    .single-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .post-meta-bar,
    .nepali-entry-meta,
    .sb-meta-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px 12px !important;
        padding: 10px 0 !important;
        font-size: 11px !important;
        width: 100% !important;
    }

    .sb-single-excerpt {
        font-size: 1rem !important;
        padding: 0 10px 15px !important;
        margin-bottom: 20px !important;
    }
    
    .post-featured-image img {
        max-height: 300px !important;
    }
    
    .social-share {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }
    
    .share-label {
        width: 100%;
        margin-bottom: 8px !important;
    }
    
    .share-btn {
        flex: 1;
        min-width: calc(50% - 5px);
        text-align: center;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .post-content {
        font-size: 18px !important; /* Increased for premium readability */
        line-height: 1.8 !important; /* Slightly more space */
        color: #000000 !important;
    }
    
    .post-content h2 {
        font-size: 22px !important;
    }
    
    .post-content h3 {
        font-size: 19px !important;
    }
    
    .post-tags {
        padding: 15px 0 !important;
        margin: 30px 0 !important;
    }
    
    .post-tag {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    
    .related-section {
        margin: 30px 0 !important;
        padding: 20px 0 !important;
    }
    
    .related-title {
        font-size: 18px !important;
    }
    
    .related-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .related-card img {
        height: 160px !important;
    }
    
    .post-nav .nav-links {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ========================================
   MOBILE ARCHIVE PAGE
   ======================================== */

@media (max-width: 768px) {
    .archive-wrapper {
        padding: 0 12px !important;
    }
    
    .archive-header {
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .archive-title {
        font-size: 24px !important;
    }
    
    .archive-description {
        font-size: 14px !important;
    }
    
    .archive-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .archive-sidebar {
        position: static !important;
    }
    
    .post-card {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .post-card img {
        width: 100% !important;
        height: 200px !important;
    }
    
    .post-card-content h2 {
        font-size: 18px !important;
    }
    
    .post-card-excerpt {
        font-size: 14px !important;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .pagination a,
    .pagination span {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE PAGE TEMPLATE
   ======================================== */

@media (max-width: 768px) {
    .page-wrapper {
        padding: 0 12px !important;
    }
    
    .page-header {
        padding: 25px 0 !important;
        margin-bottom: 25px !important;
    }
    
    .page-title {
        font-size: 28px !important;
    }
    
    .page-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .page-sidebar {
        position: static !important;
    }
    
    .page-content {
        padding: 20px !important;
    }
    
    .page-content h1 {
        font-size: 26px !important;
    }
    
    .page-content h2 {
        font-size: 22px !important;
    }
}

/* ========================================
   VERY SMALL PHONES (< 375px)
   ======================================== */

@media (max-width: 375px) {
    .site-title {
        font-size: 30px !important;
    }
    
    .news-grid-4,
    .news-grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .news-card img {
        height: 160px !important;
    }
    
    .featured-side-article {
        flex-direction: column !important;
    }
    
    .featured-side-article img {
        width: 100% !important;
        height: 150px !important;
    }
    
    .footer-column {
        width: 100%;
    }
}

/* ========================================
   MOBILE TOUCH OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on mobile */
    .news-card:hover,
    .featured-article:hover,
    .related-card:hover {
        box-shadow: none;
        border-color: #e0e0e0;
    }
    
    /* Better scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent text size adjustment on orientation change */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
}

/* ========================================
   MOBILE NAVIGATION JAVASCRIPT
   Add this to your template
   ======================================== */

/*
<script>
// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
    const nav = document.querySelector('.main-navigation');
    const toggle = document.querySelector('.mobile-menu-toggle');
    
    if (toggle && nav) {
        toggle.addEventListener('click', function() {
            nav.classList.toggle('active');
            toggle.textContent = nav.classList.contains('active') ? 'CLOSE ✕' : 'MENU ☰';
        });
    }
});
</script>
*/