/**
 * Menu — Sprint 5b.
 * Submenu styles, hover animations, mega menu layout (v1:
 * grid columns on .ls-mega-enabled .sub-menu).
 */
.primary-menu, .mobile-menu, .secondary-menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.primary-menu .sub-menu, .secondary-menu .sub-menu {
    list-style: none; padding: 0.5rem 0; margin: 0;
    min-width: var(--ls-menu-submenu-width, 220px);
    background: var(--ls-color-bg, #fff);
    border: 1px solid var(--ls-color-border, #E2E8F0);
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: absolute; top: 100%; left: 0; z-index: 50;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu,
.secondary-menu li:hover > .sub-menu, .secondary-menu li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
}

/* Hover animation variants. */
.ls-menu-hover-fade .sub-menu { transform: translateY(0); }
.ls-menu-hover-slide .sub-menu { transform: translateY(-6px); }
.ls-menu-hover-slide li:hover > .sub-menu { transform: translateY(0); }
.ls-menu-hover-none .sub-menu { transition: none; }

/* Indicators (chevron). */
.ls-menu-has-indicator .menu-item-has-children > a::after {
    content: ""; display: inline-block; width: 0.5em; height: 0.5em;
    margin-left: 0.4em; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

/* Mega menu (v1 — grid columns when .ls-mega-enabled). */
.ls-mega-enabled .sub-menu {
    display: grid;
    grid-template-columns: repeat(var(--ls-menu-mega-cols, 4), minmax(0, 1fr));
    width: var(--ls-menu-mega-width, var(--ls-layout-container, 1200px));
    max-width: calc(100vw - 2rem);
    padding: 1rem 1.5rem;
    gap: 1rem;
}
.ls-mega-enabled .sub-menu li { padding: 0.25rem 0; }

/* Divider below menu bar. */
.ls-menu-divider + .main-navigation { border-bottom: 1px solid var(--ls-color-border, #E2E8F0); padding-bottom: 0.5rem; }

@media (max-width: 900px) {
    .primary-menu, .secondary-menu { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .primary-menu .sub-menu, .secondary-menu .sub-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; }
    .ls-mega-enabled .sub-menu { grid-template-columns: 1fr; width: 100%; }
}