/* Light-mode navigation: pearl, emerald and charcoal with explicit badge contrast. */
body.light-mode #menuOverlay {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, .95), transparent 43%),
        radial-gradient(ellipse at 110% 32%, rgba(109, 218, 162, .58), transparent 49%),
        linear-gradient(157deg, #d8e6dc 0%, #73a78c 27%, #25583f 53%, #101e19 78%, #090d0b 100%);
    border-left: 1px solid rgba(202, 232, 214, .3);
    box-shadow: -16px 0 48px rgba(9, 24, 17, .24);
    overflow-y: auto;
}
body.light-mode #menuOverlay::before { background: none; animation: none; }
body.light-mode #menuOverlay .menu-link {
    background: rgba(13, 34, 25, .9);
    border: 1px solid rgba(216, 239, 224, .26);
    color: #f3f6ef;
    box-shadow: 0 3px 12px rgba(3, 18, 10, .08);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
body.light-mode #menuOverlay .menu-link .menu-text {
    color: inherit;
    font-weight: 500;
    letter-spacing: .015em;
}
body.light-mode #menuOverlay .menu-link::before {
    color: #e3f4e8;
    background: #294c39;
    border: 1px solid #739d81;
    font-weight: 600;
    transform: none;
}
body.light-mode #menuOverlay .menu-link:is(:hover, :focus-visible, .active) {
    background: #dbefdf;
    color: #122b1d;
    border-color: #eaf6ec;
    box-shadow: 0 4px 18px rgba(7, 24, 15, .12);
    transform: none;
}
/* Set both colors explicitly: light mode makes the old primary-green variable black. */
body.light-mode #menuOverlay .menu-link:is(:hover, :focus-visible, .active)::before {
    background: #163d29;
    color: #ffffff;
    border-color: #163d29;
    transform: none;
}
body.light-mode #menuOverlay .menu-footer {
    border-top: 1px solid rgba(221, 242, 229, .25);
}
body.light-mode #menuOverlay .menu-contact-link {
    background: rgba(10, 28, 18, .83);
    color: #edf4ee;
    border: 1px solid rgba(205, 237, 216, .32);
    font-weight: 500;
    box-shadow: none;
}
body.light-mode #menuOverlay .menu-contact-link:is(:hover, :focus-visible) {
    background: #dbefdf;
    border-color: #dbefdf;
    color: #122b1d;
    transform: none;
    box-shadow: none;
}
body.light-mode #menuOverlay :is(.menu-link, .menu-contact-link):focus-visible {
    outline: 2px solid #effff1;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    body.light-mode #menuOverlay :is(.menu-link, .menu-contact-link) { transition: none; }
}