/* ═══════════════════════════════════════════════════════════════
   BrainiaClub — Navigation refresh (all pages with the top menu)
   • Menu links: lift + glow on hover, a sliding gold underline,
     a navy gradient pill for the current page, a soft press on click
   • Bell / dark-mode / language / profile buttons: lift on hover,
     the bell gives a little ring
   • Notification, language and profile drop-downs share ONE look:
     frosted glass with the navy→gold top edge (like the site's
     pop-ups) and the same spring-in animation
   Loaded after popups.css. Remove this file to roll back.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --nv-glass:    rgba(255, 255, 255, 0.62);
    --nv-border:   rgba(255, 255, 255, 0.75);
    --nv-line:     rgba(27, 50, 94, 0.08);
    --nv-hover:    rgba(27, 50, 94, 0.07);
    --nv-text:     #2f3542;
    --nv-muted:    #6b7385;
    --nv-accent:   #1B325E;
    --nv-shadow:   0 22px 50px -12px rgba(17, 27, 48, 0.28), 0 2px 6px rgba(17, 27, 48, 0.06);
    --nv-grad:     linear-gradient(135deg, #1B325E, #3B5A92);
    --nv-gold:     #f5b042;
    --nv-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark-mode, html.dark, body.dark-mode, body.dark {
    --nv-glass:    rgba(30, 33, 52, 0.72);
    --nv-border:   rgba(255, 255, 255, 0.09);
    --nv-line:     rgba(255, 255, 255, 0.07);
    --nv-hover:    rgba(255, 255, 255, 0.06);
    --nv-text:     #eef2fb;
    --nv-muted:    #9aa3b8;
    --nv-accent:   #8fb0ff;
    --nv-shadow:   0 22px 50px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --nv-grad:     linear-gradient(135deg, #2B4470, #4b6db0);
}

/* ── Menu links ─────────────────────────────────────────────── */
html body .nav-links a {
    overflow: hidden;
    transition: transform 0.35s var(--nv-ease), box-shadow 0.35s var(--nv-ease),
                color 0.25s ease, background 0.35s ease;
}
html body .nav-links a::after {               /* gold underline that slides in */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--nv-gold);
    transform: translateX(-50%);
    transition: width 0.35s var(--nv-ease);
}
html body .nav-links a i { transition: transform 0.35s var(--nv-ease), color 0.25s ease; }
html body .nav-links a:hover {
    transform: translateY(-2px);
    color: var(--primary-accent);
    box-shadow: var(--neumorphic-shadow), 0 10px 18px -10px rgba(27, 50, 94, 0.45);
}
html body .nav-links a:hover::after { width: 34%; }
html body .nav-links a:hover i { transform: translateY(-1px) rotate(-8deg) scale(1.12); }
html body .nav-links a:active { transform: translateY(0) scale(0.96); transition-duration: 0.1s; }
html body .nav-links a.active,
html body .nav-links a.active:hover {
    color: #fff;
    background: var(--nv-grad);
    box-shadow: 0 10px 22px -10px rgba(27, 50, 94, 0.7);
}
html body .nav-links a.active i { color: #fff; }
html body .nav-links a.active::after { width: 18px; }

/* ── Icon buttons (bell, dark mode, language, profile) ──────── */
html body .notification-btn,
html body .dark-mode-toggle,
html body .language-btn,
html body .profile-pic {
    transition: transform 0.35s var(--nv-ease), box-shadow 0.35s var(--nv-ease), color 0.25s ease;
}
html body .notification-btn:hover,
html body .dark-mode-toggle:hover,
html body .language-btn:hover,
html body .profile-pic:hover {
    transform: translateY(-2px);
    box-shadow: var(--neumorphic-shadow), 0 10px 18px -10px rgba(27, 50, 94, 0.45);
    color: var(--primary-accent);
}
html body .notification-btn:active,
html body .dark-mode-toggle:active,
html body .language-btn:active,
html body .profile-pic:active { transform: scale(0.94); transition-duration: 0.1s; }
html body .notification-btn:hover i { animation: nv-bell 0.7s ease; transform-origin: 50% 10%; }
html body .dark-mode-toggle:hover i { animation: nv-spin 0.6s var(--nv-ease); }
html body .notification-btn[aria-expanded="true"],
html body .language-btn[aria-expanded="true"] {
    color: var(--primary-accent);
    box-shadow: var(--neumorphic-inset);
    transform: none;
}

/* ── Drop-downs: one frosted-glass look ─────────────────────── */
html body .notification-dropdown,
html body .language-dropdown,
html body .profile-dropdown {
    margin-top: 14px;
    padding: 6px;
    color: var(--nv-text);
    background: linear-gradient(90deg, #1B325E, #5b7fc4 55%, #f5b042) top / 100% 3px no-repeat, var(--nv-glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--nv-border);
    border-radius: 20px;
    box-shadow: var(--nv-shadow);
    transform-origin: top right;
}
html body .notification-dropdown.active,
html body .language-dropdown.active,
html body .profile-dropdown.active {
    /* uses `translate`/`scale` so it never fights the mobile centring transform */
    animation: nv-drop-in 0.32s var(--nv-ease) both;
}
@keyframes nv-drop-in {
    from { opacity: 0; translate: 0 -10px; scale: 0.96; }
    to   { opacity: 1; translate: 0 0;     scale: 1; }
}

/* Rows inside the drop-downs: rounded, same hover everywhere */
html body .language-option,
html body .notif-item,
html body .profile-action-btn {
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--nv-ease);
}
html body .language-option { padding: 10px 12px; margin: 2px 0; color: var(--nv-text); }
html body .language-option:hover,
html body .notif-item:hover,
html body .profile-action-btn:hover {
    background: var(--nv-hover);
    color: var(--nv-accent);
    transform: translateX(3px);
}
html body .language-option img { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
html body .notif-header {
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--nv-line);
}
html body .notif-header h4,
html body .notif-header strong,
html body .notif-header span { color: var(--nv-text); }
html body .notif-item { border-bottom: none; margin: 2px 0; padding: 10px; }
html body .notif-item.unread { background: rgba(91, 127, 196, 0.12); }
html body .notif-item.unread:hover { background: rgba(91, 127, 196, 0.2); }
html body .notif-settings-panel { background: var(--nv-hover); border-radius: 12px; margin: 6px 0; }
html body .notif-settings-panel.active { border-bottom-color: transparent; }
html body .notif-actions { border-top: 1px solid var(--nv-line); padding: 8px 4px 2px; }
html body .notif-action-btn { border-radius: 10px; }
html body .profile-dropdown-inner { padding: 10px; }
html body .profile-dropdown-divider { background: var(--nv-line); }
html body .profile-action-btn {
    background: transparent;
    box-shadow: none;
    margin-bottom: 2px;
    color: var(--nv-text);
}
html body .profile-action-btn i { color: var(--nv-accent); }

@keyframes nv-bell {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
}
@keyframes nv-spin { from { transform: rotate(-90deg) scale(0.8); } to { transform: rotate(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    html body .nav-links a, html body .nav-links a i,
    html body .notification-btn, html body .dark-mode-toggle,
    html body .language-btn, html body .profile-pic { transition: none; }
    html body .nav-links a:hover, html body .notification-btn:hover,
    html body .dark-mode-toggle:hover, html body .language-btn:hover,
    html body .profile-pic:hover { transform: none; }
    html body .notification-btn:hover i, html body .dark-mode-toggle:hover i { animation: none; }
    html body .notification-dropdown.active, html body .language-dropdown.active,
    html body .profile-dropdown.active { animation: none; }
}