/* box-sizing reset: without this, any element combining width + padding/border
   overflows its container by that amount - the cause of several real mobile
   horizontal-scroll bugs (quiz question card, bagrut page, ...). */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Any component rule that sets `display: flex/grid/inline-flex` on an element
   (buttons, toggled sections, ...) has the same specificity as the browser's
   built-in `[hidden] { display: none }` rule, and since it's an author rule
   loaded after the UA stylesheet, it wins - so the element stays visible even
   with the `hidden` attribute set. This has already needed one-off fixes in
   admin.css/dashboard.css; make `hidden` unconditionally win everywhere instead. */
[hidden] {
    display: none !important;
}

/* --- Design tokens: single source of truth for every stylesheet --- */
:root {
    --mm-bg: #0f172a;
    --mm-surface: #141c30;
    --mm-border: rgba(255, 255, 255, 0.08);
    --mm-text: #e2e8f0;
    --mm-text-dim: #94a3b8;
    --mm-accent: #60a5fa;
    --mm-accent-strong: #3b82f6;
    --mm-accent-deep: #2563eb;
    --mm-font: 'Rubik', 'Segoe UI', Tahoma, sans-serif;
    --mm-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

body.light-mode {
    --mm-bg: #f8fafc;
    --mm-surface: #ffffff;
    --mm-border: rgba(15, 23, 42, 0.08);
    --mm-text: #1e293b;
    --mm-text-dim: #64748b;
    --mm-accent: #2563eb;
    --mm-accent-strong: #1d4ed8;
    --mm-accent-deep: #1e40af;
    background-color: var(--mm-bg);
    color: #282a35;
}

/* Distinguishes an admin's username wherever it's shown (navbar, leaderboard,
   forum) - independent of whichever badge they've chosen to display next to
   it (including opting out of the crown entirely), so admin status is never
   tied to that choice. Same gold used by the crown badge/admin panel accents. */
.mm-admin-name {
    color: #fbbf24;
    font-weight: 700;
}

body.light-mode .mm-admin-name {
    color: #b45309;
}

body {
    margin: 0;
    background-color: var(--mm-bg);
    color: white;
    animation: fadeInPage 0.5s ease-out;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(8px); /* Subtle lift effect */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.light-mode .hero
 {
    color: #282a35;
}

body.light-mode .back-btn {
    background-color: #282a35;
    color: white;
}

/* --- Shared button system (used by home + 404; other pages compose
   their own accent/shape variants on top of this base) --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: none;
    border-radius: 10px;
    font-family: var(--mm-font);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-arrow {
    transition: transform 0.2s ease;
}

.btn-primary {
    background: var(--mm-accent-strong);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
    background: var(--mm-accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
}

.btn-primary:hover .btn-arrow {
    transform: translateX(-4px);
}

.btn-secondary {
    background: transparent;
    color: var(--mm-text);
    border: 1px solid var(--mm-border);
}

.btn-secondary:hover {
    border-color: var(--mm-accent);
    color: var(--mm-accent);
    transform: translateY(-2px);
}

body.light-mode .btn-primary {
    color: #ffffff;
}

main {
    flex: 1;
    margin-bottom: 0;
}

main > :last-child {
    margin-bottom: 0 !important;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

/*pages list*/
ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}


/*back button*/
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 24px 40px 0 0; /* Align with the navbar padding */
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05); /* Very subtle glass */
    backdrop-filter: blur(5px);
    color: #60a5fa; /* Theme Blue */
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(96, 165, 250, 0.3); /* Dim blue border */
    border-radius: 12px;
    transition: all 0.3s ease;
    width: fit-content;
    position: relative; /* or absolute */
    z-index: 1
}

.back-btn:hover {
    background: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa;
    color: white;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
    transform: translateX(-5px); /* Moves it slightly to the right for RTL */
}

/* Light Mode Version */
body.light-mode .back-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(37, 99, 235, 0.2);
    color: #2563eb;
}

body.light-mode .back-btn:hover {
    background: #2563eb;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}