/* =====================================================
 * ExamPro — Responsive CSS
 * Covers ONLY classes that actually exist in the HTML.
 * This replaces the old leftover template rules.
 * ===================================================== */

/* ─── Mobile-first base (up to 767px) ─── */
@media (max-width: 767px) {

    .main-header {
        padding: 10px 0 18px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .top-nav-grid {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    /* Row 1 — links: HOME, JOIN, Group, Proofs — centered & balanced */
    .nav-links-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;   /* center the whole group */
        align-items: center;
        gap: 6px;                  /* breathing room between buttons */
        width: 100%;
        overflow: visible;         /* no scroll needed — 5 items fit fine using flex: 1 */
    }

    /* Bigger, equal-width buttons on Row 1 */
    .nav-links-group .nav-btn-sm {
        font-size: 0.82rem;        /* slightly larger text */
        padding: 7px 0;            /* equal vertical padding */
        flex: 1;                   /* each button shares equal width */
        justify-content: center;   /* center icon + text inside button */
        border-radius: 5px;
    }

    /* Row 2 — PIN form: full width */
    .nav-pin-group {
        width: 100%;
    }
    .nav-pin-group form {
        display: flex;
        width: 100%;
    }
    .nav-pin-group .search-input-sm {
        flex: 1;
        font-size: 0.85rem;
        padding: 7px 10px;
        border-radius: 4px 0 0 4px;
    }
    .nav-pin-group .submit-btn {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding: 7px 12px;
        border-radius: 0 4px 4px 0;
        white-space: nowrap;
    }

    /* Generic nav-btn-sm fallback (for any outside the groups) */
    .nav-btn-sm {
        font-size: 0.7rem;
        padding: 5px 7px;
        white-space: nowrap;
    }

    .home-main {
        padding: 15px 8px 100px;
    }

    .main-headline {
        font-size: 1.2rem;
    }

    .sub-headline {
        font-size: 0.88rem;
    }

    .card-notice {
        margin-bottom: 15px;
    }

    .card-body {
        padding: 14px 12px;
    }

    .auth-btn-pill {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .bottom-navbar {
        gap: 4px;
        padding: 10px 4px;
    }

    .bottom-btn {
        font-size: 0.65rem;
        padding: 7px 2px;
    }

    .bottom-input {
        width: 55px;
        font-size: 0.7rem;
    }
}

/* ─── Tablet (601px – 767px) ─── */
@media (min-width: 601px) and (max-width: 767px) {
    .home-main {
        padding: 20px 12px 100px;
    }

    .main-headline {
        font-size: 1.4rem;
    }
}

/* ─── Desktop (768px and above) ─── */
@media (min-width: 768px) {
    .container {
        max-width: 1100px;
        padding: 0 20px;
    }

    .main-header {
        padding: 18px 0 30px;
    }

    /* Desktop Navigation Button Sizing & Layout */
    .top-nav-grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin: 0 auto 24px auto;
        width: 100%;
        max-width: 900px;
    }

    /* On desktop, both groups sit side-by-side in one row */
    .nav-links-group {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
        overflow: visible;
    }

    .nav-pin-group {
        width: auto;
    }
    .nav-pin-group form {
        display: flex;
        width: 260px;
    }

    .nav-btn-sm {
        padding: 12px 22px;
        font-size: 1.05rem;
        border-radius: 8px;
        gap: 8px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-links-group .nav-btn-sm:first-child {
        padding: 12px 18px;
    }

    .nav-btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.18);
        filter: brightness(1.15);
    }

    .nav-btn-sm:active {
        transform: translateY(0);
    }

    .search-input-sm {
        padding: 12px 16px;
        font-size: 1.05rem;
        border-radius: 8px 0 0 8px;
    }

    .submit-btn {
        border-radius: 0 8px 8px 0;
        padding: 12px 20px;
        font-size: 1.05rem;
    }

    /* Two-column card grid on home page */
    .home-main.page-home > .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
        row-gap: 20px;
        align-items: start;
    }

    /* Headlines span full width */
    .home-main.page-home > .container > .main-headline,
    .home-main.page-home > .container > .sub-headline {
        grid-column: 1 / -1;
    }

    /* Each card takes one column */
    .home-main.page-home > .container > .card-notice {
        margin-bottom: 0;
    }

    /* Bottom navbar constrained to center on desktop */
    .bottom-navbar {
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 1100px;
        width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 16px 24px;
        gap: 16px;
        justify-content: center;
    }

    .bottom-btn {
        font-size: 1.05rem;
        padding: 12px 24px;
        border-radius: 8px;
        flex: none;
        min-width: 130px;
    }

    .bottom-verify-form {
        flex: unset;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 340px;
    }

    .bottom-input {
        flex: 1;
        padding: 12px 16px;
        font-size: 1.05rem;
        border-radius: 8px;
        width: 200px;
        min-width: 150px;
    }

    .btn-verify {
        padding: 12px 24px;
        font-size: 1.05rem;
        border-radius: 8px;
        min-width: 110px;
    }

    /* Footer & Scam Warning Sizing on Desktop */
    .footer-copyright {
        font-size: 1.05rem;
    }

    .footer-links {
        font-size: 0.95rem;
        gap: 20px;
    }

    .scam-warning {
        font-size: 1.1rem;
    }
}

/* ─── Large Desktop (1200px+) ─── */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}