:root {
    --site-background-fallback: #26384b;
}

html {
    min-height: 100%;
    background-color: var(--site-background-fallback);
}

body {
    direction: rtl;
    font-family: Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    /* Keep the first and last component margins inside the painted body area. */
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 100vh;
    isolation: isolate;
    background-color: var(--site-background-fallback) !important;
    background-image: url("../images/home-bg.4094d845157a.png") !important;
    background-image: image-set(
        url("../images/home-bg.eb4f86d6672a.avif") type("image/avif"),
        url("../images/home-bg.e5c8bcb3b644.webp") type("image/webp"),
        url("../images/home-bg.4094d845157a.png") type("image/png")
    ) !important;
    background-size: cover !important;
    /* Keep the top visible when `cover` crops a wide/full-screen viewport. */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.legal-bg::before,
body.engineering-bg::before,
body.exam-bg::before,
body.home-bg::before {
    content: none;
}

/* Legacy template elements are inactive; the body is the single image layer. */
#static-bg {
    display: none !important;
}

/*
 * Shared interaction for action buttons inside navigation and user boxes.
 * Color remains controlled by each Bootstrap variant; motion and feedback
 * are intentionally consistent across pages.
 */
.button-bar .btn,
.dark-mode-bar .btn,
.user-status-actions .btn,
.category-buttons .btn,
.header-buttons a {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease !important;
    will-change: transform;
}

.button-bar .btn:not(:disabled):not(.disabled):hover,
.dark-mode-bar .btn:not(:disabled):not(.disabled):hover,
.user-status-actions .btn:not(:disabled):not(.disabled):hover,
.category-buttons .btn:not(:disabled):not(.disabled):hover,
.header-buttons a:hover {
    transform: translateY(-2px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22) !important;
}

/* The four primary home actions are larger, so their feedback can be stronger. */
.category-buttons .btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-4px) scale(1.025);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3) !important;
}

.button-bar .btn:not(:disabled):not(.disabled):active,
.dark-mode-bar .btn:not(:disabled):not(.disabled):active,
.user-status-actions .btn:not(:disabled):not(.disabled):active,
.category-buttons .btn:not(:disabled):not(.disabled):active,
.header-buttons a:active {
    transform: translateY(0);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18) !important;
}

.button-bar .btn:focus-visible,
.dark-mode-bar .btn:focus-visible,
.user-status-actions .btn:focus-visible,
.category-buttons .btn:focus-visible,
.header-buttons a:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.72);
    outline-offset: 3px;
}

body.dark-mode .button-bar .btn:not(:disabled):not(.disabled):hover,
body.dark-mode .dark-mode-bar .btn:not(:disabled):not(.disabled):hover,
body.dark-mode .user-status-actions .btn:not(:disabled):not(.disabled):hover,
body.dark-mode .category-buttons .btn:not(:disabled):not(.disabled):hover {
    box-shadow: 0 8px 22px rgba(96, 165, 250, 0.24) !important;
}

body.dark-mode .category-buttons .btn:not(:disabled):not(.disabled):hover {
    box-shadow: 0 12px 30px rgba(96, 165, 250, 0.32) !important;
}

@media (prefers-reduced-motion: reduce) {
    .button-bar .btn,
    .dark-mode-bar .btn,
    .user-status-actions .btn,
    .category-buttons .btn,
    .header-buttons a {
        transition-duration: 0.01ms !important;
    }

    .button-bar .btn:hover,
    .dark-mode-bar .btn:hover,
    .user-status-actions .btn:hover,
    .category-buttons .btn:hover,
    .header-buttons a:hover {
        transform: none;
    }
}