/* ============================================================================
 * responsive-edtech.css
 * LearnCyberSecurity — Përmirësime responsive + paletë EdTech + WCAG AA
 * Krijuar: 2026-04-25
 *
 * Breakpoints standarde:
 *   - Mobile         : ≤  640px
 *   - Tablet         : 641px – 1024px
 *   - Desktop        : ≥ 1025px
 *
 * Ngarkuar i fundit në header.php → ka prioritet maksimal.
 * Nuk prek kodin server-side; vetëm visual + UX layer.
 * ============================================================================ */

/* ---------- 1. Paletë EdTech (CSS variables) -------------------------------
 * Plotëson variablat ekzistuese të dark theme me një paletë EdTech cross-mode.
 * Përdoren në komponentët e rinj dhe override për kontrast WCAG AA.
 */
:root {
    /* Trust Blue — primary EdTech */
    --edtech-primary: #1d4ed8;
    --edtech-primary-strong: #1e3a8a;
    --edtech-primary-soft: #dbeafe;
    --edtech-primary-ink: #1e40af;

    /* Success Green — complete / correct */
    --edtech-success: #16a34a;
    --edtech-success-strong: #14532d;
    --edtech-success-soft: #dcfce7;
    --edtech-success-ink: #15803d;

    /* Achievement Gold — badges / xp */
    --edtech-gold: #d97706;
    --edtech-gold-strong: #92400e;
    --edtech-gold-soft: #fef3c7;
    --edtech-gold-ink: #b45309;

    /* Danger Red — wrong answer / lock */
    --edtech-danger: #dc2626;
    --edtech-danger-strong: #7f1d1d;
    --edtech-danger-soft: #fee2e2;
    --edtech-danger-ink: #b91c1c;

    /* Neutral surfaces (light mode) */
    --edtech-surface: #ffffff;
    --edtech-surface-2: #f8fafc;
    --edtech-surface-3: #f1f5f9;
    --edtech-ink: #0f172a;
    --edtech-ink-2: #334155;
    --edtech-ink-3: #64748b;
    --edtech-border: #e2e8f0;

    /* Skill tier gradients (bronze → silver → gold → platinum) */
    --tier-bronze: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    --tier-silver: linear-gradient(135deg, #64748b 0%, #cbd5e1 100%);
    --tier-gold:   linear-gradient(135deg, #b45309 0%, #fcd34d 60%, #fffbeb 100%);
    --tier-platinum: linear-gradient(135deg, #334155 0%, #93c5fd 50%, #e0e7ff 100%);
}

[data-theme="dark"] {
    /* Light surfaces janë të paqartë në dark — riekuilibrojmë vetëm shtresën EdTech */
    --edtech-surface:   #131b2e;
    --edtech-surface-2: #0c1220;
    --edtech-surface-3: #1a2440;
    --edtech-ink:       #e2e8f0;
    --edtech-ink-2:     #cbd5e1;
    --edtech-ink-3:     #94a3b8;
    --edtech-border:    rgba(148, 163, 184, .18);

    --edtech-primary-soft: rgba(29, 78, 216, .18);
    --edtech-success-soft: rgba(22, 163, 74, .18);
    --edtech-gold-soft:    rgba(217, 119, 6, .18);
    --edtech-danger-soft:  rgba(220, 38, 38, .18);
}

/* ---------- 2. Reading mode për mësimet ------------------------------------
 * max-width 720px për trupin e mësimit, qendrore, line-height 1.7,
 * font-size i lexueshëm në mobile, paragrafë me hapësirë.
 */
.lesson-content {
    max-width: 720px;
    margin: 0 auto;
}
.lesson-content .lesson-body,
.lesson-content article,
.lesson-content .prose {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.75;
    font-size: 1rem;
    color: var(--edtech-ink);
}
@media (min-width: 1024px) {
    .lesson-content .lesson-body,
    .lesson-content article,
    .lesson-content .prose {
        font-size: 1.0625rem;
    }
}
@media (max-width: 640px) {
    .lesson-content .lesson-body,
    .lesson-content article,
    .lesson-content .prose {
        font-size: 1rem;
        line-height: 1.7;
        padding: 0 4px;
    }
    .lesson-content .lesson-body p,
    .lesson-content article p {
        margin-bottom: 1.1em;
    }
}

/* ---------- 3. Lab terminal — scroll mobile + virtual keyboard --------------
 * Output i terminalit bëhet i scroll-ueshëm me lartësi maksimale,
 * input bart fokus pa zoom (font-size:16px), dhe shtohen tasta virtuale
 * (mund të aktivizohen me JS shtesë; CSS gati).
 */
#lab-terminal {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}
#lab-output {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
#lab-output::-webkit-scrollbar { width: 6px; }
#lab-output::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

#lab-input {
    font-size: 16px !important; /* pengon iOS zoom */
}

/* Virtual keyboard — barre tastesh të shpeshta për mobile */
.lab-vkb {
    display: none;
    margin-top: 8px;
    gap: 6px;
    flex-wrap: wrap;
}
.lab-vkb button {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    min-height: 38px;
    cursor: pointer;
    user-select: none;
}
.lab-vkb button:active {
    background: #14b8a6;
    color: #fff;
}
@media (max-width: 768px) {
    .lab-vkb { display: flex; }
    #lab-output { max-height: 40vh; }
    #lab-terminal { font-size: 12.5px; padding: 12px; }
}

/* ---------- 4. Quiz — card-stack mobile, prominent timer --------------------
 * Në mobile pyetjet bëhen "kartëla" qendrore me timer të madh dhe
 * butona të mëdhenj me kontrast të mjaftueshëm.
 */
#q-timer {
    font-variant-numeric: tabular-nums;
}
#q-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
#q-options button {
    min-height: 48px;
    line-height: 1.4;
    transition: transform .12s, background .12s;
}
#q-options button:focus-visible {
    outline: 3px solid var(--edtech-primary);
    outline-offset: 2px;
}
#q-options button:hover {
    background: var(--edtech-primary-soft) !important;
    border-color: var(--edtech-primary) !important;
}

@media (max-width: 640px) {
    #quiz-runner {
        position: relative;
    }
    #q-timer {
        position: sticky;
        top: 8px;
        font-size: 28px !important;
        padding: 6px 14px;
        background: var(--edtech-danger-soft);
        color: var(--edtech-danger-ink) !important;
        border-radius: 999px;
        z-index: 5;
    }
    #q-card {
        padding: 16px !important;
    }
    #q-text {
        font-size: 16px !important;
    }
    #q-options {
        gap: 10px !important;
    }
    #q-options button {
        font-size: 15px !important;
        padding: 14px !important;
    }
}

/* Klasa korrekte / gabim për përgjigje */
#q-options button.is-correct {
    background: var(--edtech-success-soft) !important;
    border-color: var(--edtech-success) !important;
    color: var(--edtech-success-ink) !important;
}
#q-options button.is-wrong {
    background: var(--edtech-danger-soft) !important;
    border-color: var(--edtech-danger) !important;
    color: var(--edtech-danger-ink) !important;
}

/* ---------- 5. Skill Radar SVG — responsive viewBox ------------------------
 * Wrapper që mban radar 6-akshe me ratio konstante, plotësisht përgjegjës.
 */
.skill-radar-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}
.skill-radar-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 480px) {
    .skill-radar-wrap { max-width: 100%; }
}

/* ---------- 6. Skill badges — bronze / silver / gold / platinum ------------ */
.skill-badge-tier { color: #fff; font-weight: 700; }
.skill-badge-bronze   { background: var(--tier-bronze); }
.skill-badge-silver   { background: var(--tier-silver); color: #0f172a; }
.skill-badge-gold     { background: var(--tier-gold);   color: #78350f; }
.skill-badge-platinum { background: var(--tier-platinum); color: #1e293b; }

/* ---------- 7. CV — A4 print + mobile preview ------------------------------
 * Ruan layout A4 në print (210x297mm) dhe ofron preview të lexueshëm në mobile.
 */
@media screen and (max-width: 640px) {
    body.cv-render-page {
        margin: 12px auto !important;
        padding: 0 12px !important;
    }
    body.cv-render-page h1 { font-size: 22px !important; }
    body.cv-render-page h2 { font-size: 14px !important; }
    body.cv-render-page .grid { grid-template-columns: 1fr !important; }
    body.cv-render-page .actions { text-align: center !important; }
    body.cv-render-page .actions .btn { display: block; margin: 6px 0; }
}

@media print {
    @page {
        size: A4;
        margin: 12mm 14mm;
    }
    body.cv-render-page {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        background: #fff !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.cv-render-page .no-print,
    body.cv-render-page nav,
    body.cv-render-page .navbar,
    body.cv-render-page .actions { display: none !important; }
    body.cv-render-page section { break-inside: avoid; }
    body.cv-render-page h2 { break-after: avoid; }
}

/* ---------- 8. Forum threads — depth max 3 në mobile -----------------------
 * Indenti zvogëlohet progresivisht në mobile dhe ndalet në nivelin 3.
 */
.lcs-thread-card { border-color: var(--edtech-border) !important; }

.lcs-reply-depth-1 { margin-left: 32px; }
.lcs-reply-depth-2 { margin-left: 64px; }
.lcs-reply-depth-3 { margin-left: 96px; }
.lcs-reply-depth-4,
.lcs-reply-depth-5,
.lcs-reply-depth-6 { margin-left: 96px; } /* deeper collapsed to depth 3 */

@media (max-width: 768px) {
    .lcs-reply-depth-1 { margin-left: 14px; }
    .lcs-reply-depth-2 { margin-left: 24px; }
    .lcs-reply-depth-3,
    .lcs-reply-depth-4,
    .lcs-reply-depth-5,
    .lcs-reply-depth-6 { margin-left: 32px; }
}

/* ---------- 9. Glossary — grid responsive + filter alphabetic mobile ------- */
.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
@media (max-width: 640px) {
    .glossary-grid { grid-template-columns: 1fr; }
}

/* Filter alphabetic — A-Z bar */
.glossary-az {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 0 0 16px;
    padding: 8px;
    background: var(--edtech-surface-2);
    border: 1px solid var(--edtech-border);
    border-radius: 12px;
    position: sticky;
    top: 8px;
    z-index: 4;
}
.glossary-az button {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--edtech-border);
    background: var(--edtech-surface);
    color: var(--edtech-ink-2);
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.glossary-az button:hover,
.glossary-az button.is-active {
    background: var(--edtech-primary);
    color: #fff;
    border-color: var(--edtech-primary);
}
.glossary-az button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
@media (max-width: 480px) {
    .glossary-az { gap: 2px; padding: 6px; }
    .glossary-az button { min-width: 28px; height: 28px; font-size: 12px; }
}

/* Glossary card hide kur filter aktiv */
.glossary-card.is-hidden { display: none !important; }

/* ---------- 10. Pagination — uniformizim + WCAG AA -------------------------- */
.lcs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 8px;
}
.lcs-pagination a, .lcs-pagination span.page {
    padding: 8px 12px;
    border: 1px solid var(--edtech-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--edtech-ink);
    background: var(--edtech-surface);
    font-weight: 500;
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lcs-pagination a:hover {
    background: var(--edtech-primary-soft);
    border-color: var(--edtech-primary);
    color: var(--edtech-primary-ink);
}
.lcs-pagination .is-active {
    background: var(--edtech-primary);
    color: #fff;
    border-color: var(--edtech-primary);
    font-weight: 700;
}

/* ---------- 11. Cards / Forum / Lab list / Quiz list ----------------------- */
@media (max-width: 640px) {
    /* Listat me grid auto-fill rrëzojnë në një kolonë */
    .container [style*="grid-template-columns:repeat(auto-fill"],
    .container [style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- 12. Tap targets — 44px min, focus visible (WCAG 2.5.5) -------- */
button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--edtech-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 13. Color contrast helpers — WCAG AA --------------------------- */
.txt-success-aa { color: var(--edtech-success-ink) !important; }
.txt-danger-aa  { color: var(--edtech-danger-ink) !important; }
.txt-gold-aa    { color: var(--edtech-gold-ink) !important; }
.txt-primary-aa { color: var(--edtech-primary-ink) !important; }

.bg-success-aa { background: var(--edtech-success-soft); color: var(--edtech-success-ink); }
.bg-danger-aa  { background: var(--edtech-danger-soft);  color: var(--edtech-danger-ink); }
.bg-gold-aa    { background: var(--edtech-gold-soft);    color: var(--edtech-gold-ink); }
.bg-primary-aa { background: var(--edtech-primary-soft); color: var(--edtech-primary-ink); }

/* ---------- 14. Header/nav mobile — më pak overflow ------------------------ */
@media (max-width: 640px) {
    .navbar .container { padding-left: 12px; padding-right: 12px; }
    .nav-brand span { display: none; } /* mban vetëm ikonën në mobile shumë të vogël */
}
@media (min-width: 380px) and (max-width: 640px) {
    .nav-brand span { display: inline; font-size: 0.95rem; }
}

/* ---------- 15. Leaderboard / Bookmarks tables ----------------------------- */
@media (max-width: 768px) {
    .leaderboard-table th:nth-child(n+5),
    .leaderboard-table td:nth-child(n+5) { display: none; }
}

/* ---------- 16. Print — gjithçka jashtë CV nuk printohet ------------------- */
@media print {
    body:not(.cv-render-page) .navbar,
    body:not(.cv-render-page) .mobile-menu,
    body:not(.cv-render-page) footer,
    body:not(.cv-render-page) .nav-actions { display: none !important; }
}

/* ---------- 17. Safe-area iOS notch ---------------------------------------- */
@supports(padding: max(0px)) {
    .navbar, .main-content, footer, .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* ---------- 18. Reduced motion (a11y) -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}