/* ========================================= */
/* [CORE SETTINGS & ORIGINAL SPA] */
/* ========================================= */
:root {
    --bg-main: #020202;
    --red-main: #4A4A4A;
    --red-glow: rgba(74, 74, 74, 0.4);
    --font-heading: 'Space Grotesk', sans-serif;
    --wine-main: rgba(90, 16, 35, 0.78);
    --text-dim: #8b8b8b;
    --border-dim: rgba(255, 255, 255, 0.06);
    --blood: #da291c;
    /* Update void to match typical IDE dark mode background */
    --void: #0a0a0a;
    --text-main: #ffffff;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Tahoma, 'Microsoft YaHei', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans SC', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --primary: #8b0000;
    --border-color: rgba(255, 255, 255, 0.05);
    --header-height: 80px;
    --glass-bg: rgba(10, 10, 10, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Unified Palette */
    --muted: #555;
    --dark-gray: #1a1b1e;
    --elegant-red: #da291c;


    /* Luxury Refinement */
    --luxury-red: #8b0000;
    --luxury-gray: #121212;
    --luxury-border: rgba(255, 255, 255, 0.05);
    --gh-orange: #c2410c;
}

/* Logo visibility on profile */
/* Hide main header on profile */
body.prof-active header {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus-visible {
    outline: 2px solid var(--accent-btn, #00ff41);
    outline-offset: 2px;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background-color: #000000 !important;
}

body.view-home-active {
    scroll-snap-type: y proximity;
}

html:has(body.view-home-active) {
    scroll-snap-type: y proximity;
}

/* Class-based scroll-snap kill — toggled by JS per view */
html.snap-disabled,
html.snap-disabled body {
    scroll-snap-type: none !important;
}

body {
    font-family: var(--font-main);
    color: var(--text-main);
    line-height: 1.6;
    font-size-adjust: 0.508;
}

::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blood);
}

/* SPA ROUTING */
.spa-view {
    display: none;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    content-visibility: auto;
}

.spa-view.active {
    display: block;
    content-visibility: visible;
}

.spa-view.pad-top {
    padding-top: 100px;
}

/* Lazy-loaded modal CSS can arrive after markup; keep inactive overlays out of flow. */
.bs-roe-overlay:not(.active),
.bs-contact-overlay:not(.active),
.bs-pathways-overlay:not(.active),
.bs-terrain-overlay:not(.active) {
    display: none !important;
}

/* Menu language dropdown must be available before modal styles lazy-load. */
.lang-switcher-container {
    position: relative;
    display: inline-block;
}

.lang-dropdown-box {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 180px;
    background: var(--glass-bg, rgba(10, 10, 10, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.5rem;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-main) !important;
}

.lang-dropdown-box.active {
    display: flex;
}

.lang-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-main) !important;
    font-size: 0.85rem;
    color: var(--text-dim, #8b8b8b);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, color 0.2s;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main, #ffffff);
}

.lang-option.active {
    background: var(--primary, #8b0000);
    color: #ffffff;
    font-weight: 500;
}

/* ========================================= */
/* [RTL SUPPORT OVERRIDES FOR ARABIC] */
/* ========================================= */
[dir="rtl"] {
    text-align: right;
    --font-main: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-heading: 'Cairo', 'Space Grotesk', sans-serif !important;
}

[dir="rtl"] body {
    direction: rtl;
    font-family: var(--font-main) !important;
}

[dir="rtl"] .logo {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .map-toggle-btn {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .menu-columns {
    flex-direction: row-reverse;
}

[dir="rtl"] .menu-sidebar {
    transform: translateX(-30px);
}

[dir="rtl"] .menu-overlay.active .menu-sidebar {
    transform: translateX(0);
}

[dir="rtl"] .nav-num {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .menu-label::before {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .lang-dropdown-box {
    left: auto;
    right: 0;
}

[dir="rtl"] .lang-option {
    text-align: right;
}

[dir="rtl"] .auth-btn svg {
    transform: scaleX(-1);
}

[dir="rtl"] .auth-btn:hover svg {
    transform: scaleX(-1) translateX(-4px);
}

/* ========================================= */
/* [CSS CONTENT TRANSLATIONS] */
/* ========================================= */
/* Translation of "Back" in login active close button */
[lang="es"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0Atrás" !important; }
[lang="hi"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0पीछे" !important; }
[lang="de"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0Zurück" !important; }
[lang="zh"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0返回" !important; }
[lang="ru"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0Назад" !important; }
[lang="ar"] body.view-login-active .header-close-btn::before { content: "\f060\00a0\00a0رجوع" !important; }

/* Translation of "Delete" in delete button */
[lang="es"] .delete-button::before { content: "Eliminar"; }
[lang="hi"] .delete-button::before { content: "हटाएं"; }
[lang="de"] .delete-button::before { content: "Löschen"; }
[lang="zh"] .delete-button::before { content: "删除"; }
[lang="ru"] .delete-button::before { content: "Удалить"; }
[lang="ar"] .delete-button::before { content: "حذف"; }

/* Translation of "Edit" in edit button */
[lang="es"] .edit-button::before { content: "Editar"; }
[lang="hi"] .edit-button::before { content: "संपादित करें"; }
[lang="de"] .edit-button::before { content: "Bearbeiten"; }
[lang="zh"] .edit-button::before { content: "编辑"; }
[lang="ru"] .edit-button::before { content: "Редактировать"; }
[lang="ar"] .edit-button::before { content: "تعديل"; }

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/jetbrains-mono-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/cairo-400.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/cairo-500.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/cairo-600.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/cairo-700.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:800;font-display:swap;src:url('../vendor/fonts/cairo-800.woff2') format('woff2');}