/* ── Nav dropdown (Research ▾ → Studies · Testing & Validation) ──────────────
   Shared by every page that carries the top nav. Desktop: opens on hover or
   keyboard focus. Phones (<=640px): the two items sit indented under Research
   inside the hamburger panel, always visible — no second tap needed. */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-caret { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.2s, opacity 0.2s; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); opacity: 1; }

.nav-dd-menu {
    position: absolute; top: 100%; left: 50%;
    min-width: 270px; padding: 8px;
    margin-top: 14px;
    background: rgba(14, 14, 14, 0.96);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    z-index: 120;
}
/* invisible bridge so the menu doesn't close while the pointer crosses the gap */
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.nav-links .nav-dd-menu a {
    display: block; padding: 11px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
    color: var(--text-bright); transition: background 0.15s;
}
.nav-links .nav-dd-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.nav-dd-menu a small {
    display: block; margin-top: 2px;
    font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--text-dim);
}
.nav-links .nav-dd-menu a.active { color: var(--accent); }

:root[data-theme="light"] .nav-dd-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(18, 24, 33, 0.10);
    box-shadow: 0 18px 48px rgba(18, 24, 33, 0.14);
}
:root[data-theme="light"] .nav-links .nav-dd-menu a:hover { background: rgba(18, 24, 33, 0.04); }

/* Phones — inline, indented, always open inside the hamburger panel */
@media (max-width: 640px) {
    .nav-dd { display: flex; flex-direction: column; align-items: stretch; }
    .nav-dd-caret { display: none; }
    .nav-dd-menu,
    .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
        position: static; transform: none; opacity: 1; visibility: visible;
        min-width: 0; margin: 0 0 4px 14px; padding: 0 0 0 10px;
        background: none !important; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
        transition: none;
    }
    .nav-dd-menu::before { display: none; }
    .nav-links .nav-dd-menu a { padding: 9px 14px; font-size: 14px; font-weight: 500; }
    .nav-dd-menu a small { display: none; }
    :root[data-theme="light"] .nav-dd-menu { border-left-color: rgba(18, 24, 33, 0.14); }
}