/* =====================================================================
   SARKARI THEME — mobile.css
   Mobile and tablet responsive overrides.
   Desktop styles (1024px+) live in style.css and are NOT modified here.
   All layout rules are inside @media max-width blocks.
   ===================================================================== */

/* ── Home column grid: CSS custom property for column count ──────── */
/* Desktop: use the PHP-set column count via --home-cols variable */
.home-col-grid {
    grid-template-columns: repeat(var(--home-cols, 3), 1fr) !important;
}

/* ── Hamburger button — hidden on desktop, flex on mobile ─────────── */
.nav-hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    border-radius: 4px;
}
.nav-hamburger-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); }

/* ── Nav close button inside drawer ──────────────────────────────── */
.nav-close-item { display: none !important; }

/* ── Nav overlay ─────────────────────────────────────────────────── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 98;
}
.nav-overlay.nav-open { display: block; }

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

    /* Body font-size floor */
    body { font-size: 15px; }

    /* Container horizontal padding */
    .container { padding: 0 12px; }

    /* ── Header-top on mobile: Logo left | Hamburger right ── */
    .header-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
    }
    .site-logo { flex: 1 1 auto; }

    /* Hamburger: show in header-top on mobile */
    .nav-hamburger-btn {
        display: flex;
        order: 2;               /* sits right of logo */
        flex-shrink: 0;
        background: #1565c0;    /* blue pill to match nav */
        border-radius: 6px;
        color: #fff;
        width: 40px;
        height: 40px;
        padding: 9px;
    }

    /* Search goes full-width on the next row */
    .header-search {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
    }
    .header-search input {
        width: 100%;
        flex: 1;
        min-height: 40px;
        font-size: 16px; /* prevent iOS zoom on focus */
    }
    .header-search button {
        min-width: 44px;
        min-height: 40px;
    }

    /* Nav bar: collapse height but keep overflow visible so the
       position:fixed drawer <ul> child is still rendered.
       display:none would also hide fixed children — do NOT use it. */
    .main-nav {
        height: 0;
        overflow: visible;
        padding: 0;
    }

    /* ── Nav close item: visible inside drawer ── */
    .nav-close-item {
        display: block !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        list-style: none;
    }
    .nav-close-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 13px 20px;
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.85);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
    }
    .nav-close-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); }

    /* ── Nav <ul> transforms into a LEFT slide-in drawer ── */
    .main-nav ul {
        --drawer-w: 30vw;                     /* 30% of screen width */
        position: fixed;
        top: 0;
        left: calc(-1 * var(--drawer-w));     /* fully off-screen left */
        width: var(--drawer-w);
        height: 100vh;
        flex-direction: column;
        background: #1565c0;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 99;
        padding: 0;
        transition: left 0.25s ease;
        white-space: normal;
        border-right: 1px solid rgba(255,255,255,0.15);
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        display: flex;
    }
    .main-nav ul.nav-open { left: 0; }
    .main-nav ul li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .main-nav ul li:last-child { border-bottom: none; }
    .main-nav ul li a { padding: 11px 14px; font-size: 13px; display: block; min-height: 44px; }
    .main-nav ul::-webkit-scrollbar { width: 0; }

    /* ── All-jobs table: horizontal scroll ── */
    .all-jobs-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .all-jobs-table { min-width: 520px; }

    /* ── Sarkari job detail tables: horizontal scroll ── */
    .s-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .sarkari-table { min-width: 480px; }

    /* ── Prose tables: horizontal scroll ── */
    .prose { overflow-x: auto !important; }

    /* ── Link buttons: reduce padding ── */
    .links-grid { gap: 5px; padding: 8px 10px; }
    .link-btn { font-size: 11px; padding: 5px 10px; }

    /* ── Pagination: larger tap targets ── */
    .pg-btn {
        padding: 9px 14px;
        font-size: 13px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Footer ── */
    .footer-links { gap: 6px; }
    .footer-links a { font-size: 12px; }
    .site-footer { padding: 12px 0 8px; }

    /* ── Single blog post body ── */
    .art-body { padding: 12px 14px; font-size: 14px; }

    /* ── Category tabs: already 2-col at 640px, ensure at 360px too ── */
    .cat-tab-btn { padding: 8px 10px; font-size: 12px; gap: 6px; }
    .cat-tab-btn svg { width: 16px; height: 16px; }

    /* ── Featured grid color cells ── */
    .featured-cell { font-size: 12px; padding: 10px 6px; min-height: 46px; }

    /* ── Notice bar ── */
    .notice-bar { font-size: 12px; padding: 6px 12px; }

    /* ── Home column grid: ALWAYS 1-column on mobile.
       Overrides both the CSS custom property AND any inline style. ── */
    .home-col-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Social share bar: icon-only on mobile, all on one row ── */
    .share-bar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .share-text { display: none; }        /* hide text labels */
    .share-btn {
        padding: 7px 9px;
        flex-shrink: 0;
        min-height: 34px;
        border-radius: 10px;              /* rounded pill shape */
    }
    .share-btn svg { width: 13px; height: 13px; }  /* smaller icon */
    .share-label { font-size: 11px; flex-shrink: 0; }

    /* ── Blog archive cards: stack vertically on mobile ── */
    .blog-card {
        flex-direction: column;   /* image on top, text below */
    }
    .blog-card-img {
        flex: none;
        width: 100%;
        height: 185px;
        margin: 0;                /* no left/top margin */
        border-radius: 4px 4px 0 0;
    }
    .blog-card-img img {
        border-radius: 4px 4px 0 0;
    }
    .blog-card-body {
        padding: 10px 12px 12px;
    }
    .blog-card-title {
        font-size: 14px;
        -webkit-line-clamp: 3;
    }
    .blog-card-excerpt {
        display: none;           /* hide excerpt on mobile, save space */
    }

    /* ── Prevent ANY content from overflowing viewport ── */
    .container { overflow-x: hidden; }
    main { overflow-x: hidden; min-width: 0; }

    /* ── Job title: word-break so long titles don't overflow ── */
    .job-title-box h1 {
        font-size: 15px !important;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .breadcrumb { overflow: hidden; }
    .breadcrumb .container { white-space: nowrap; overflow-x: auto; }

    /* ── Sarkari tables: scrollable wrapper ── */
    .s-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .sarkari-table {
        min-width: 440px;
        font-size: 12px;
    }
    .sarkari-table th,
    .sarkari-table td {
        padding: 5px 7px;
        font-size: 11px;
    }

    /* ── Job detail page: prose text overflow fix ── */
    .prose p,
    .short-desc p,
    .art-body p {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* ── Links grid: smaller buttons on mobile ── */
    .links-grid { padding: 8px 10px; gap: 5px; }
    .link-btn { font-size: 11px; padding: 5px 9px; }

    /* ── Page layout: ensure single column full width ── */
    .page-layout { grid-template-columns: 1fr !important; overflow: hidden; }
}

/* =================== TABLET: 768px to 1023px ====================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hamburger not needed: nav scrolls horizontally, this is fine */
    .nav-hamburger-btn { display: none; }

    /* Search: slightly smaller */
    .header-search input { width: 180px; }

    /* Container: slightly more padding */
    .container { padding: 0 16px; }

    /* Tables: scroll */
    .all-jobs-box { overflow-x: auto; }
    .all-jobs-table { min-width: 520px; }
}