/* ==========================================================================
   GovEduCouncil - Responsive CSS (Mobile-First)
   ========================================================================== */

/* ==========================================================================
   LARGE DESKTOPS (1280px+) — already handled by main CSS
   ========================================================================== */

/* ==========================================================================
   TABLETS AND SMALL DESKTOPS (max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .services-grid           { grid-template-columns: repeat(4, 1fr); }
    .downloads-grid          { grid-template-columns: repeat(3, 1fr); }
    .chairman-grid           { grid-template-columns: 260px 1fr; gap: var(--space-10); }
    .footer__grid            { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .content-with-sidebar    { grid-template-columns: 1fr 280px; }
    .hero-slider             { height: 480px; }
    /* Slightly compact nav search on smaller desktops */
    .nav-search__form        { width: 160px; }
    .nav-link                { padding: 0 var(--space-2); font-size: 0.75rem; }
    .header__branding        { max-width: 250px; }
}

/* ==========================================================================
   TABLETS (max 900px)
   ========================================================================== */
@media (max-width: 900px) {
    /* Typography */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* ---- Header ---- */
    .header__inner {
        gap: var(--space-3);
    }
    .header__branding {
        max-width: none;
    }
    .header__site-name {
        font-size: 0.9rem;
    }

    /* On mobile, hamburger is shown inside the header (right side) */
    .header__hamburger { display: flex; }
    /* The search in the nav bar is hidden on mobile (it's in the drawer instead) */
    .nav-search { display: none; }

    /* ---- Nav — full-width slide-down drawer ---- */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        z-index: calc(var(--z-sticky) + 10);
        background: var(--color-primary-dark);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        overflow-y: auto;
        border-top: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar {
        display: none;
    }    /* reset sticky */
    .site-nav.is-open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    .site-nav__wrapper {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding-top: var(--space-10);
    }
    .site-nav__menu-wrap { 
        display: block; 
        margin-left: 0;
        width: 100%;
    }

    /* Mobile nav menu: vertical list */
    .nav-menu {
        flex-direction: column;
        width: 100%;
    }
    .nav-menu > li {
        width: 100%;
        flex-shrink: 1;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .nav-link {
        padding: var(--space-4) var(--space-6);
        min-height: unset;
        height: auto;
        font-size: var(--text-sm);
        color: rgba(255,255,255,0.88);
        justify-content: flex-start;
        width: 100%;
    }
    .nav-link::after { display: none; }
    .nav-link:hover, .nav-link:focus-visible {
        color: var(--color-secondary);
        background: rgba(255,255,255,0.06);
    }
    .current-menu-item > .nav-link,
    .current-menu-ancestor > .nav-link,
    .current_page_item > .nav-link {
        color: var(--color-secondary);
        background: transparent;
        border-left: 3px solid var(--color-secondary);
        padding-left: calc(var(--space-6) - 3px);
    }

    /* Mobile dropdown */
    .nav-menu .sub-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        border-top: none;
        border-left: 3px solid var(--color-secondary);
        margin-left: var(--space-5);
        background: rgba(0,0,0,0.2);
        display: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav-menu li.is-open > .sub-menu { display: block; }
    .nav-link--sub {
        color: rgba(255,255,255,0.7);
        padding: var(--space-3) var(--space-5);
        height: auto;
        min-height: unset;
    }
    .nav-link--sub:hover { background: rgba(255,255,255,0.05); color: var(--color-secondary); }

    /* Mobile search inside drawer */
    .nav-search {
        display: flex;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: var(--space-4) var(--space-5);
        margin-left: 0;
    }
    .nav-search__form {
        width: 100%;
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.2);
    }
    .nav-search__form:focus-within {
        background: rgba(255,255,255,0.15);
    }
    .nav-search__input { 
        font-size: var(--text-sm); 
        padding: 8px 14px; 
        color: var(--color-white);
    }
    .nav-search__input::placeholder { color: rgba(255,255,255,0.5); }
    .nav-search__btn { 
        width: 40px; 
        height: 40px; 
        color: rgba(255,255,255,0.8);
    }

    /* Mobile nav overlay */
    .site-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: calc(var(--z-sticky) - 1);
    }
    .site-nav-overlay.is-visible { display: block; }

    /* Services */
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    .service-card { padding: var(--space-6) var(--space-4); }

    /* About Section */
    .about-section {
        padding: 60px 0;
    }
    .about-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .about-section__content {
        margin: 0 auto;
        text-align: center;
    }
    .about-title {
        font-size: 32px;
    }
    .about-title::first-line {
        font-size: 28px;
    }
    .about-separator {
        margin-left: auto;
        margin-right: auto;
    }
    .about-eyebrow {
        justify-content: center;
    }
    .about-dignitary-card {
        width: 100%;
        max-width: 280px;
    }
    .about-dignitary-card:nth-child(even) {
        margin-top: 0;
    }

    /* Notices / Circulars */
    .notices-circulars-grid { grid-template-columns: 1fr; gap: var(--space-6); }

    /* News grid */
    .news-grid { grid-template-columns: repeat(2, 1fr); }

    /* Chairman */
    .chairman-grid { grid-template-columns: 1fr; text-align: center; }
    .chairman-photo-col { display: flex; justify-content: center; }
    .chairman-photo { max-width: 220px; height: 270px; }
    .chairman-photo-frame { display: none; }
    .chairman-eyebrow { justify-content: center; }

    /* Timeline */
    .timeline::before { left: 20px; }
    .timeline-item { width: 100%; left: 0 !important; text-align: left; padding-left: 52px; }
    .timeline-dot { left: 12px !important; right: auto !important; }

    /* Downloads */
    .downloads-grid { grid-template-columns: repeat(3, 1fr); }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* Content layout */
    .content-with-sidebar { grid-template-columns: 1fr; }
    .sidebar { order: -1; }

    /* Archive */
    .archive-grid { grid-template-columns: repeat(2, 1fr); }

    /* Hero */
    .hero-slider { height: 420px; }
    .hero-slide__title { font-size: clamp(1.5rem, 4vw, 2.5rem); }
    .hero-slider__arrow { width: 40px; height: 40px; }
    .hero-slider__arrow--prev { left: var(--space-3); }
    .hero-slider__arrow--next { right: var(--space-3); }

    /* Footer */
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ==========================================================================
   MOBILE (max 600px)
   ========================================================================== */
@media (max-width: 600px) {
    /* Home Marquee */
    .home-marquee { padding: var(--space-2) 0; }

    /* About Section */
    .about-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .about-section__content {
        margin: 0 auto;
        text-align: center;
    }
    /* Container */
    .container { padding-left: var(--space-4); padding-right: var(--space-4); }

    /* Sections */
    .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .section-header { margin-bottom: var(--space-8); }
    .section-header__title { font-size: var(--text-2xl); }

    /* Topbar */
    .topbar__left { display: none; }
    .topbar__right { width: 100%; justify-content: center; }
    .topbar__inner { height: auto; min-height: 36px; padding: var(--space-1) 0; }
    
    .topbar-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
        border-left: none;
        padding-left: 0;
    }

    /* Header */
    .header__branding { gap: var(--space-2); }
    .header__govt-logo { width: 40px; height: 40px; }
    .header__site-name { font-size: 0.85rem; }
    .header__council-full { font-size: 0.55rem; }
    .header__hamburger { width: 36px; height: 36px; padding: var(--space-1); }

    /* Hero */
    .hero-slider { height: 360px; }
    .hero-slide__title { font-size: var(--text-2xl); }
    .hero-slide__subtitle { display: none; }
    .hero-slide__cta { gap: var(--space-3); }
    .hero-slide__cta .btn--lg { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
    .hero-slider__arrow { display: none; }

    /* Marquee */
    .marquee-bar { height: 38px; }
    .marquee-bar__label { padding: 0 var(--space-3); font-size: 10px; }

    /* Services */
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .service-card { padding: var(--space-4) var(--space-3); }
    .service-card__icon { width: 50px; height: 50px; }
    .service-card__title { font-size: var(--text-sm); }
    .service-card__desc { display: none; }

    /* Notices */
    .notice-list__item { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .notice-list__date-box { width: 42px; }
    .notice-list__day { font-size: var(--text-lg); }
    .notice-list__title { font-size: var(--text-xs); }

    /* News */
    .news-grid { grid-template-columns: 1fr; }

    /* Chairman */
    .chairman-photo { max-width: 180px; height: 220px; }
    .chairman-quote__text { font-size: var(--text-base); }

    /* Timeline */
    .timeline::before { left: 12px; }
    .timeline-item { padding-left: 36px; }
    .timeline-dot { width: 12px; height: 12px; left: 6px !important; }

    /* Downloads */
    .downloads-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .download-card { padding: var(--space-4); }
    .download-card__title { font-size: var(--text-sm); }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

    /* Lightbox */
    .lightbox-modal__arrow--prev { left: var(--space-2); top: auto; bottom: var(--space-4); transform: none; }
    .lightbox-modal__arrow--next { right: var(--space-2); top: auto; bottom: var(--space-4); transform: none; }

    /* Footer */
    .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .footer__main { padding: var(--space-10) 0 var(--space-8); }
    .footer__bottom-inner { flex-direction: column; gap: var(--space-2); text-align: center; }

    /* Archive */
    .archive-grid { grid-template-columns: 1fr; }

    /* Single nav */
    .single-post__nav { grid-template-columns: 1fr; }
    .single-post__next { text-align: left; }

    /* Buttons */
    .hero-slide__cta .btn--outline-white { display: none; }
}

/* ==========================================================================
   SMALL PHONES (max 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .services-grid { grid-template-columns: 1fr 1fr; }
    .downloads-grid { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-filters { gap: var(--space-2); }
    .gallery-filter { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
}

/* ==========================================================================
   EXTRA SMALL PHONES (max 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .topbar, .site-header, .site-nav, .marquee-bar,
    .hero-slider, .hero-slider__arrows, .hero-slider__dots,
    .sidebar, .site-footer, .btn, .gallery-filters,
    .lightbox-modal, .hero-slider__arrow { display: none !important; }

    body { font-size: 12pt; color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
    h1, h2, h3 { page-break-after: avoid; }
    .container { max-width: 100%; padding: 0; }
    .content-with-sidebar { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .marquee-bar__track { animation: none; }
    .hero-slide { transition: none; }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */
@media (prefers-contrast: high) {
    .card { border: 2px solid var(--color-primary); }
    .btn--primary { background: #000; border-color: #000; }
    .nav-link { color: #fff; }
}