/* =========================================================================
   BX TOPBAR NAV — hover-reveal sub-sections.
   ------------------------------------------------------------------------
   Replaces the permanent second bar (.ap-subnav). The 6 main sections live
   in ONE bar; each reveals its sub-sections as a flyout on hover / focus.
   Token-driven, loaded last, no !important.
   ========================================================================= */

.ap-nav-group { position: relative; display: inline-flex; }

.ap-nav-flyout {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 208px;
    padding: 6px;
    background: var(--bx-surface-1);
    border: 1px solid var(--bx-border);
    border-radius: var(--bx-r-card);
    box-shadow: var(--bx-shadow-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--bx-dur-hover) var(--bx-ease),
                transform var(--bx-dur-hover) var(--bx-ease);
    z-index: var(--bx-z-drawer);
}
/* hover bridge: keep the flyout open while the cursor travels the gap */
.ap-nav-flyout::before {
    content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.ap-nav-group:hover .ap-nav-flyout,
.ap-nav-group:focus-within .ap-nav-flyout {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(2px);
}

.ap-nav-flyitem {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center;
    width: 100%; padding: 8px 12px;
    background: transparent; border: 0; border-radius: var(--bx-r-control);
    color: var(--bx-ink-2); font-family: var(--bx-font-text);
    font-size: var(--bx-text-13); font-weight: var(--bx-weight-medium);
    letter-spacing: var(--bx-tracking-text);
    text-align: start; white-space: nowrap; cursor: pointer;
    transition: background-color var(--bx-dur-hover) var(--bx-ease),
                color var(--bx-dur-hover) var(--bx-ease);
}
.ap-nav-flyitem:hover { background: var(--bx-surface-2); color: var(--bx-ink-1); }
.ap-nav-flyitem.is-active { background: var(--bx-accent-soft); color: var(--bx-accent); }
.ap-nav-flyitem:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: -2px; }