/* Aggregator sheet — the component loader (includes/component-loader.php)
   enqueues ONLY <name>.css per folder, so the wide-panel variant sheet is
   @imported here to ride the same request. This is its ONLY front-end load
   path: on the front end hzostudio_enqueue_components() REPLACES the whole-file
   primitives.css enqueue, so primitives.css's own @import of mega-menu-wide.css
   loads in the block-editor context only. Without this @import the wide mega
   menu (featured card, column grid) renders UNSTYLED on the front end. (Same
   fix pattern as footer.css @importing footer-typography + footer-chrome.)
   @imports must precede all rules — keep this first. */
@import './mega-menu-wide.css?ver=1787769613';

/* ─── Dropdown (mega menu) ─────────────────────────────────────────
   Centered under the parent nav item. Fades + slides in on hover/open.
   Uses opacity+visibility+transform so it animates cleanly both ways. */
.hzo-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 220px;
    background: var(--nav-dropdown-bg, var(--surface, #fff));
    border-top: var(--border-2) solid var(--accent);
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    box-shadow: var(--nav-dropdown-shadow, 0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden; /* clip link hover backgrounds to the rounded corners */
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.hzo-nav-item:hover > .hzo-mega-menu,
.hzo-nav-item.is-open > .hzo-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.hzo-mega-menu__list { list-style: none; margin: 0; padding: 0; }
/* !important on color: fights a:visited. Matching :visited rule at bottom-of-file. */
.hzo-mega-menu__link {
    display: block;
    padding: 14px var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--fs-100);
    font-weight: var(--fw-500, 500);
    color: var(--nav-link) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color 200ms ease, background-color 200ms ease;
}
.hzo-mega-menu__link:hover {
    color: var(--nav-link-hover) !important;
    background: var(--nav-dropdown-link-hover-bg, var(--bg-alt));
}
/* INSET focus ring (offset -2px) so the ring hugs inside the dropdown row rather
   than painting outside/clipping the panel edge (the global base.css ring is
   +2px outset). Restored from OURS during the unified merge. */
.hzo-mega-menu__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Reduced-motion: kill the dropdown fade/slide + link color transitions (belt-
   and-braces on top of mega-menu-wide.css's own .hzo-mega-cta kill — per the
   convention the aggregator ends with a transition-kill; mirrors footer.css). */
@media (prefers-reduced-motion: reduce) {
    .hzo-mega-menu,
    .hzo-mega-menu__link { transition: none; }
}