/* Shared nav dropdown styling for the marketing header, used across every page
   that carries the top .nav bar. Factored out so 26 duplicated header blocks
   don't each carry their own copy of this rule set to drift out of sync. */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { width: 9px; height: 9px; transition: transform 0.15s; }
.nav-item:hover .nav-caret, .nav-item.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
    position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%);
    min-width: 230px; padding: 0.5rem; border-radius: 10px;
    background: #0d1117; border: 1px solid var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 200;
}
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown a { display: block; padding: 0.55rem 0.75rem; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; color: var(--text-secondary, #9ba3af); text-decoration: none; }
.nav-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--text-primary, #fff); }