/* =================================================================
   MENU
   Mega Menu slide-in hover underline.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Mega Menu hover underline — replicates the classic Nav Menu
   widget's "underline / slide" pointer (e--pointer-underline +
   e--animation-slide) on the Nested Mega Menu widget, which has no
   pointer options of its own.

   Add .underline-menu to the Mega Menu widget (Advanced > CSS
   Classes). Mechanics copied from the classic widget: a 2px bar
   parked just past the item's right edge (width 10px, opacity 0)
   sweeps in to full width on hover, using the same
   cubic-bezier(0.58, 0.3, 0.005, 1) timing.

   Colour: defaults to currentColor — the title's text colour, so
   it matches the hover state styled in Elementor (same behaviour
   as the classic widget's pointer). Override in one line if the
   client wants a fixed colour instead:
     .underline-menu { --menu-underline-color: var(--ipg-cobalt); }

   NOTE: uses ::before, NOT ::after — Elementor reserves
   .e-n-menu-title::after for the item divider on every item except
   the last (that widget-scoped rule out-specifies ours, which is
   why an ::after underline only worked on the last item).
--------------------------------------------------------------- */
.underline-menu .e-n-menu-title {
    position: relative;
}
.underline-menu .e-n-menu-title::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 100%;
    width: 10px;
    height: 2px;
    background: var(--menu-underline-color, currentColor);
    opacity: 0;
    transition: 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
    pointer-events: none;
}
.underline-menu .e-n-menu-title:hover::before,
.underline-menu .e-n-menu-title:focus-within::before,
.underline-menu .e-n-menu-item:has([aria-expanded="true"]) .e-n-menu-title::before {
    width: 100%;
    left: 0;
    opacity: 1;
}

/* Reduced motion: underline appears/disappears without the sweep */
@media (prefers-reduced-motion: reduce) {
    .underline-menu .e-n-menu-title::before { transition: opacity 0.2s ease; }
}

/* ---------------------------------------------------------------
   Nav Menu underline that fits the TEXT — add .underline-fit to any
   classic WordPress "Nav Menu" widget (the sub-menus inside the mega
   menu dropdowns). The widget's own Underline pointer + Slide
   animation are kept; the only change is that the link box shrinks
   to its text instead of filling the column, so the bar (drawn
   relative to the link) runs under the words. A link that wraps to
   two lines fills the column again (fit-content = the available
   width once it wraps), so it gets one full-width underline, never
   two. The bar is 2px to match the mega menu's.
--------------------------------------------------------------- */
.underline-fit .elementor-nav-menu--main .elementor-item {
    width: fit-content;
    max-width: 100%;
}
.underline-fit .elementor-nav-menu--main .elementor-item::before,
.underline-fit .elementor-nav-menu--main .elementor-item::after {
    height: 2px;
}