/*
menu.css
all css related to horizontal/vertical menu, dropdowns, tabs, overlay, search result
 */

.menu-dropdown-shell {
    position: relative;
}

.menu-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-decoration: none;
    cursor: pointer;
}

.menu-dropdown-toggle:focus {
    outline: none;
}

.menu-dropdown-panel {
    min-width: 240px;
    margin-top: 0.75rem;
    padding: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--color-text-main) 8%, transparent);
    border-radius: var(--radius-xl);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    box-shadow: var(--shadow-md);
}

.menu-dropdown-panel.dropdown-menu {
    border: 1px solid color-mix(in srgb, var(--color-text-main) 8%, transparent);
    border-radius: var(--radius-xl);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    box-shadow: var(--shadow-md);
}

.menu-dropdown-panel::before {
    display: none;
}

.menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    color: var(--color-text-main);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.menu-dropdown-item:hover,
.menu-dropdown-item:focus,
.menu-dropdown-item.active {
    background: var(--color-bg-surface-soft);
    color: var(--color-primary);
    text-decoration: none;
    transform: none;
}

.menu-dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    font-size: 1.1rem;
    color: var(--color-text-soft);
}

.menu-dropdown-item-icon img {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
}

.menu-dropdown-divider {
    margin: 0.4rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-text-main) 8%, transparent);
}

/* Open the dropdown panel on hover (desktop) */
.menu-dropdown-shell:hover > .menu-dropdown-panel {
    display: block;
}

/* Transparent bridge on the panel that fills the gap between the toggle and
   the panel, so the dropdown stays open while moving the mouse across the gap.
   Rendered only while the panel is visible, so it won't open on approach. */
.menu-dropdown-panel::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 0.9rem;
}

.menu-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-soft);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}