/* ── Global footer ─────────────────────────────────────────────────────── */
footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 30px 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.22);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
footer a { color: inherit; text-decoration: none; transition: color 0.18s; }
footer a:hover { color: rgba(255,255,255,0.45); }
html.light footer { border-top-color: rgba(0,0,30,0.08); color: rgba(0,0,30,0.32); }
html.light footer a:hover { color: rgba(0,0,30,0.6); }

/* ── Scroll-to-top button ──────────────────────────────────────────────── */
.scroll-top {
    position: fixed;
    bottom: 28px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(122,232,255,0.12);
    border: 1px solid rgba(122,232,255,0.25);
    color: #7ae8ff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s, background 0.18s;
    backdrop-filter: blur(8px);
}
.scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: rgba(122,232,255,0.22); border-color: rgba(122,232,255,0.45); }
html.light .scroll-top { background: rgba(0,122,181,0.08); border-color: rgba(0,122,181,0.2); color: #007ab5; }
html.light .scroll-top:hover { background: rgba(0,122,181,0.15); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 48px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.32);
    flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.18s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.75); }
.breadcrumb .bc-sep { opacity: 0.3; font-size: 0.65rem; }
.breadcrumb .bc-current { color: rgba(255,255,255,0.55); }
html.light .breadcrumb { color: rgba(0,0,30,0.32); }
html.light .breadcrumb a { color: rgba(0,0,30,0.38); }
html.light .breadcrumb a:hover { color: rgba(0,0,30,0.7); }
html.light .breadcrumb .bc-current { color: rgba(0,0,30,0.55); }
@media (max-width: 768px) { .breadcrumb { padding: 8px 20px 0; } }

/* ── Mobile Navigation ─────────────────────────────────────────────────── */

nav { position: relative; } /* ensure dropdown positions relative to nav */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); }
.nav-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,0.75);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}
html.light .nav-hamburger { background: rgba(0,0,30,0.05); border-color: rgba(0,0,30,0.12); }
html.light .nav-hamburger span { background: rgba(0,0,30,0.6); }
html.light .nav-hamburger:hover { background: rgba(0,0,30,0.09); }

/* Animated X when open */
nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-hamburger { display: flex; }

    /* Hide nav-links on mobile — !important overrides inline <style> display:flex */
    .nav-links { display: none !important; }

    /* Dropdown when nav is open */
    nav.nav-open .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 18, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 8px 0 16px;
        gap: 0;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        box-shadow: 0 12px 40px rgba(0,0,0,0.5);
        z-index: 200;
    }

    html.light nav.nav-open .nav-links {
        background: rgba(240,242,255,0.98);
        border-bottom-color: rgba(0,0,30,0.08);
        box-shadow: 0 12px 40px rgba(0,0,30,0.1);
    }

    nav.nav-open .nav-links a {
        width: 100%;
        font-size: 0.95rem !important;
        font-weight: 600;
        padding: 13px 24px !important;
        color: rgba(255,255,255,0.75) !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        box-shadow: none !important;
        letter-spacing: 0.02em;
    }

    html.light nav.nav-open .nav-links a {
        color: rgba(0,0,30,0.7) !important;
        border-bottom-color: rgba(0,0,30,0.06) !important;
    }

    nav.nav-open .nav-links a:last-of-type { border-bottom: none !important; }
    nav.nav-open .nav-links a:hover { color: #fff !important; background: rgba(255,255,255,0.04); }
    html.light nav.nav-open .nav-links a:hover { color: #0d0d1a !important; background: rgba(0,0,30,0.04); }

    nav.nav-open .nav-links a.nav-active {
        color: #7ae8ff !important;
        border-left: 2px solid #7ae8ff;
        padding-left: 22px !important;
    }
    html.light nav.nav-open .nav-links a.nav-active { color: #007ab5 !important; border-left-color: #007ab5; }

    /* Lang select and theme toggle in dropdown */
    nav.nav-open .nav-links .lang-select,
    nav.nav-open .nav-links #themeToggle {
        margin: 12px 24px 0;
    }
}