/* ─── Dropdown / menu ──────────────────────────────────────────────────
   Menu-button popup (account menu, nav dropdown, row actions). A transient
   popup, NOT an overlay — no focus trap, no background inert. dropdown.js
   (this component's widget behavior) manages aria-expanded, roving arrow-key
   focus, Esc + click-outside close, and focus return; options ride as
   data-hzo-dropdown-* attributes on the root (see dropdown.js header).
   Markup contract: component-patterns
   §35. Anchored to the trigger; --right aligns the menu to the trigger's right
   edge. Reuses existing tokens; zero new tokens. */
.hzo-dropdown { position: relative; display: inline-block; }
.hzo-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-popover);
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-base) ease, transform var(--transition-base) ease, visibility var(--transition-base);
}
.hzo-dropdown__menu--right { left: auto; right: 0; }
/* G8: auto-flip when the viewport would clip the menu (dropdown.js toggles these). */
.hzo-dropdown__menu--flip { top: auto; bottom: calc(100% + 6px); }
.hzo-dropdown__menu--flip-x { left: auto; right: 0; }
.hzo-dropdown.is-open .hzo-dropdown__menu { opacity: 1; visibility: visible; transform: none; }

.hzo-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-100);
    line-height: 1.3;
    color: var(--text-body) !important;   /* fights a:visited when authored as <a> */
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base) ease, color var(--transition-base) ease;
}
.hzo-dropdown__item:hover,
.hzo-dropdown__item:focus {
    background: var(--bg-alt);
    color: var(--text-heading) !important;
    outline: none;
}
.hzo-dropdown__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.hzo-dropdown__item[aria-disabled="true"] { color: var(--text-muted) !important; cursor: default; }
.hzo-dropdown__item[aria-disabled="true"]:hover { background: transparent; }
.hzo-dropdown__sep { height: 1px; margin: 6px 4px; background: var(--border); }

@media (prefers-reduced-motion: reduce) {
    .hzo-dropdown__menu { transition: none; }
}