/*
 * "Use cases" dropdown in the marketing pages' top nav (partials/nav-use-cases.php).
 * Uses the --pa-* tokens every marketing page defines, so it follows light and dark.
 */
.pa-nav-usecases { position: relative; }
.pa-nav-usecases summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .25rem;
    color: var(--pa-muted); font-weight: 600; font-size: .9rem;
}
.pa-nav-usecases summary::-webkit-details-marker { display: none; }
.pa-nav-usecases summary:hover,
.pa-nav-usecases details[open] summary { color: var(--pa-text); }
.pa-nav-usecases summary i { font-size: .85rem; transition: transform .2s ease; }
.pa-nav-usecases details[open] summary i { transform: rotate(180deg); }

.pa-nav-usecases-menu {
    position: absolute; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%);
    min-width: 240px; display: grid; padding: .4rem;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: .85rem;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .45);
}
.pa-nav-links .pa-nav-usecases-menu a {
    color: var(--pa-text); padding: .55rem .75rem; border-radius: .55rem; white-space: nowrap;
}
.pa-nav-links .pa-nav-usecases-menu a:hover,
.pa-nav-links .pa-nav-usecases-menu a[aria-current="page"] {
    background: var(--pa-accent-soft); color: var(--pa-accent);
}

@media (prefers-reduced-motion: reduce) {
    .pa-nav-usecases summary i { transition: none; }
}