/* =====================================================
   PNTV Africa – responsive.css
   Mobile-first refinements + large desktop (1920+)
   ===================================================== */

/* Hide the hamburger on desktop */
.mobile-menu-toggle { display: none; }

/* =====================================================
   MOBILE MENU
   ===================================================== */
@media (max-width: 900px) {

    /* Show hamburger on mobile */
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 10px;
        cursor: pointer;
    }

    /* Hamburger icon — 3 bars */
    .mobile-menu-toggle .hamburger {
        position: relative;
        display: block;
        width: 24px;
        height: 2px;
        background: #ffffff;
        transition: background 0.2s ease;
    }
    .mobile-menu-toggle .hamburger::before,
    .mobile-menu-toggle .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: #ffffff;
        transition: transform 0.25s ease;
    }
    .mobile-menu-toggle .hamburger::before { top: -8px; }
    .mobile-menu-toggle .hamburger::after  { top: 8px; }

    /* Hamburger → X when open */
    .site-header.nav-open .hamburger { background: transparent; }
    .site-header.nav-open .hamburger::before { top: 0; transform: rotate(45deg); }
    .site-header.nav-open .hamburger::after  { top: 0; transform: rotate(-45deg); }

    /* Hide primary nav by default on mobile */
    .primary-nav {
        display: none;
    }

    /* Show it when header has nav-open */
    .site-header.nav-open .primary-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-dark, #1a3a5c);
        padding: 1rem 0;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    /* Make header position:relative so dropdown anchors under it */
    .site-header { position: relative; }

    /* Nav list — vertical on mobile */
    .primary-nav .nav-list {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .primary-nav .nav-item {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .primary-nav .nav-item:last-child { border-bottom: none; }

    .primary-nav .nav-link {
        display: block;
        padding: 14px 24px;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
    }
    .primary-nav .nav-link:hover,
    .primary-nav .nav-link.active {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Mobile dropdowns — collapsed by default */
    .primary-nav .dropdown-menu {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.2);
    }
    .primary-nav .nav-item.dropdown-open .dropdown-menu {
        display: block;
    }
    .primary-nav .dropdown-link {
        display: block;
        padding: 12px 24px 12px 40px;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }
    .primary-nav .dropdown-link:hover,
    .primary-nav .dropdown-link.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Lock body scroll while menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* Extra small screens */
@media (max-width: 479px) {
  .container { padding: 0 1rem; }
  .section-title { font-size: 1.1rem; }
  .hero-content { padding: 1.25rem 1rem 1.1rem; }
  .latest-title { font-size: 1rem; }
  .live-button span:last-child { display: none; }
  .live-button { padding: 0.5rem 0.9rem; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-side-image { width: 130px; height: 90px; }
}

/* Large desktop & 1920×1080 */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
  .home-section { padding: 4rem 0; }
  .section-title { font-size: 1.55rem; }
  .latest-title { font-size: 1.1rem; }
  .hero-title { font-size: 1.9rem; }
}

@media (min-width: 1920px) {
  :root {
    --container: 1440px;
    --container-wide: 1600px;
  }
  .container { max-width: 1440px; }
  .home-hero .container,
  .latest-news .container,
  .editors-pick-section .container {
    max-width: 1520px;
  }
  .hero-grid { gap: 2rem; }
  .latest-grid { gap: 2rem; }
  .logo { height: 60px; }
  .header-top-inner { padding: 1rem 0; }
}

/* Print */
@media print {
  .site-header, .site-footer, .search-overlay, .newsletter-modal { display: none !important; }
  body { color: #000; background: #fff; }
}