/* ================================================================
   1. ROOT VARIABLES
   ================================================================ */
:root {
    --mainColor: #520303;
    --thumbBG: #520303;
    --scrollbarBG: transparent;
}

/* ================================================================
   2. HERO AREA
   ================================================================ */
.hero-banner-area {
    background: url("/assets/img/bg.png") center/cover no-repeat !important;
}

/* ================================================================
   3. ACCENT COLOR
   ================================================================ */
.accent-color {
    color: var(--mainColor) !important;
}

/* ================================================================
   4. VOID LOGO — ALWAYS DARK RED (#520303)
   ================================================================ */
.void-logo {
    color: #520303 !important;
    font-weight: 800;
    text-shadow: none !important;
}

/* Dark mode subtle glow */
body.dark-mode .void-logo {
    color: #520303 !important;
    text-shadow: 0 0 16px rgba(82, 3, 3, 0.9) !important;
}

/* Hover stays red */
.navbar-brand:hover .void-logo {
    color: #520303 !important;
}

/* ================================================================
   5. LAYOUT & CONTAINERS
   ================================================================ */
.white-container {
    background-color: white !important;
}

body.dark-mode .white-container {
    background-color: #181818 !important;
}

/* ================================================================
   6. DARK MODE GLOBAL TEXT
   ================================================================ */
body.dark-mode *,
body.dark-mode .sub-title,
body.dark-mode .sub-text,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .par-white,
body.dark-mode .faq-accordion .accordion * {
    color: white !important;
}

body.dark-mode hr,
body.dark-mode .accordion-item {
    border-color: rgba(255, 255, 255, 0.125) !important;
}

body.dark-mode .btn-outline-dark {
    color: white !important;
    border-color: white !important;
}

/* ================================================================
   7. NAVBAR
   ================================================================ */
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .dropdown-toggle {
    color: white !important;
}

body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .dropdown-toggle:hover {
    color: #cccccc !important;
}

/* ACTIVE NAV LINK SHOULD BE WHITE IN DARK MODE */
body.dark-mode .navbar .nav-link.active,
body.dark-mode .navbar .dropdown-toggle.active {
    color: white !important;
}

/* Also enforce for navbar-dark / navbar-light skins */
body.dark-mode .navbar-dark .nav-link,
body.dark-mode .navbar-dark .dropdown-toggle,
body.dark-mode .navbar-light .nav-link,
body.dark-mode .navbar-light .dropdown-toggle {
    color: white !important;
}

/* ================================================================
   8. CUSTOM SCROLLBAR
   ================================================================ */
body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border: 3px solid var(--scrollbarBG);
    border-radius: 10px;
}

/* ================================================================
   9. ROLE LABELS
   ================================================================ */
.role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
}

.role-label {
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 12px;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.1s ease;
}

.role-label:hover {
    transform: scale(1.05);
}

/* ================================================================
   10. FOOTER
   ================================================================ */
footer {
    background-color: white !important;
    color: black !important;
}

body.dark-mode footer {
    background-color: #121212 !important;
    color: white !important;
}

.footer-bottom-area {
    border: none !important;
}

/* ================================================================
   11. MOBILE MENU (MEAN MENU)
   ================================================================ */
body.dark-mode .mean-container .mean-nav ul,
body.dark-mode .mean-container .mean-nav ul li,
body.dark-mode .mean-container .mean-nav ul li ul {
    background: #111111 !important;
}

body.dark-mode .mean-container .mean-nav > ul > li > a {
    color: white !important;
    border-top: 1px solid #333 !important;
}

body.dark-mode .mean-container .mean-nav ul ul li ul a {
    color: #bbbbbb !important;
    background: #0a0a0a !important;
}

body.dark-mode .mean-container a.mean-expand {
    color: white !important;
}

body.dark-mode .mean-container .mean-nav ul li a.active {
    color: white !important;
    font-weight: bold;
}

body.dark-mode .mean-container * {
    box-shadow: none !important;
}