/* ============================================================
   calc_nav.css — styles for the nav bar calc_nav.js injects.

   Split out from calc.css because several pages this nav also needs
   to appear on (birth_chart.html, kundali_match.html, transit_wheel.html,
   the regional match pages) use birth_chart.css / match_common.js
   instead of calc.css, and calc.css sets its own `body { background }`
   that would fight theirs on load order. This file only ever defines
   .site-nav / .theme-toggle / .calc-nav-dropdown*, so it is safe to
   include everywhere calc_nav.js runs, regardless of which other
   stylesheet the page loads.
   ============================================================ */

.site-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}
body.light .site-nav {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.theme-toggle {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: .15s;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #7dd3fc;
}
.theme-toggle:hover { border-color: #38bdf8; }
body.light .theme-toggle {
    background: rgba(255,255,255,.8);
    border-color: rgba(8,145,178,.35);
    color: #0891b2;
}
.calc-nav-dropdown-wrap { position: relative; }
.calc-nav-dropdown {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    min-width: 220px; max-height: 70vh; overflow-y: auto;
    background: rgba(4, 10, 26, .97); border: 1px solid rgba(6, 182, 212, .3);
    border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
}
.calc-nav-dropdown.hidden { display: none; }
.calc-nav-dropdown-item {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; color: #e2e8f0; text-decoration: none;
    white-space: nowrap;
}
.calc-nav-dropdown-item:hover { background: rgba(6, 182, 212, .15); color: #67e8f9; }
body.light .calc-nav-dropdown {
    background: rgba(255,255,255,.98); border-color: rgba(8,145,178,.3);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
body.light .calc-nav-dropdown-item { color: #0f172a; }
body.light .calc-nav-dropdown-item:hover { background: rgba(8,145,178,.12); color: #0e7490; }