/**
 * @file
 * Main navigation (WeMegaMenu) overrides for the Upmarkit theme.
 *
 * WHY A SEPARATE FILE
 * app.css uses Tailwind v4 PostCSS nesting (&). The PostCSS nesting resolver
 * concatenates selectors without spaces — e.g. ".navbar-we-mega-menunav" —
 * producing invalid CSS. All rules here use flat selectors and are loaded at
 * weight 200 (after style.css at 100 and WeMegaMenu module CSS).
 *
 * WHY background-image FOR THE UNDERLINE
 * The ::after bottom:-Xpx approach is clipped by Bootstrap's overflow on
 * .navbar and .we-mega-menu-ul. A background-image gradient that lives
 * entirely inside the <a> boundary cannot be clipped by any ancestor.
 *
 * LOADED ORDER (libraries.yml global-styling entry):
 *   99  default-skin.css  (design tokens)
 *  100  style.css         (Tailwind compiled)
 *  200  mega-menu.css     ← this file
 */

/* =============================================================================
   PART 1 — Top-level navigation bar
   ============================================================================= */

/* 1a. Typography resets + kill browser/Drupal default underlines entirely.
   text-decoration: none is set explicitly here so no grey browser
   underline can ever bleed through, regardless of WeMegaMenu or
   Drupal core CSS.
   padding-left/right: reduce from Bootstrap/WeMegaMenu default (~20px)
   to tighten the gap between items. Items WITHOUT a submenu get
   symmetrical 14px. Items WITH a submenu (.dropdown-menu on the <li>)
   need extra right padding to clear the arrow — see rule 1a2 below. */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li {
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* 1a2. Submenu-parent items carry a WeMegaMenu arrow (::before pseudo-element,
   position:absolute, width:11px, default right:15px from the edge).
   Two changes:
   (a) padding-right is bumped to 18px so text clears the arrow's left edge.
   (b) The arrow itself is moved to right:4px, saving ~11px of dead space
       between the arrow and the container edge.
   Result: text | 1px gap | 11px arrow | 4px | edge
   This selector is MORE specific than 1a (adds .dropdown-menu), so it
   wins the !important tie. */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li {
  padding-right: 22px !important;
}

/* Move the WeMegaMenu arrow pseudo-elements (both dark and hover-white)
   closer to the right edge to eliminate dead space. */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li::before,
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li::after,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li::before,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li::after {
  right: 4px !important;
}

/* 1b. Gradient underline.
   background-image gradient is immune to:
   - parent overflow:hidden clipping (it lives inside the <a> boundary)
   - browser/Drupal text-decoration conflicts (entirely separate property)
   background-size 0%→100% centred = grow-from-centre animation.
   background-position: center bottom = flush at the nav bar bottom edge,
   which is the position the user confirmed looks correct. */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li {
  background-image: linear-gradient(
    var(--color-primary-light, #5EEAD4),
    var(--color-primary-light, #5EEAD4)
  ) !important;
  background-repeat: no-repeat !important;
  background-position: center top 47px !important;
  background-size: 0% 2.5px !important;
  transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 1c. Hover — underline grows from centre */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li:hover > a.we-mega-menu-li,
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li:hover,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li:hover > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li:hover {
  background-size: 100% 2.5px !important;
}

/* 1d. Active / active-trail / open / is-active — primary colour, always shown */
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.active > a.we-mega-menu-li,
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.active-trail > a.we-mega-menu-li,
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li.open > a.we-mega-menu-li,
.primary-nav nav.navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li.is-active,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.active > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.active-trail > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li.open > a.we-mega-menu-li,
.primary-nav .navbar-we-mega-menu .we-mega-menu-ul > li > a.we-mega-menu-li.is-active {
  background-image: linear-gradient(
    var(--color-primary, #2DD4BF),
    var(--color-primary, #2DD4BF)
  ) !important;
  background-size: 100% 2.5px !important;
  transition: none !important;
}

/* =============================================================================
   PART 2 — Expanded dropdown menu items
   ============================================================================= */

/* 2a. Base — set resting font-size/letter-spacing and declare full transition
       (the transition must be on the base so the return animation is smooth). */
.primary-nav .we-mega-menu-submenu a,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li > a {
  font-size: 0.95rem !important;
  letter-spacing: 0em !important;
  transition:
    font-size        0.4s cubic-bezier(0.4, 0, 0.2, 1),
    letter-spacing   0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2b. Hover — subtle growth + green text */
.primary-nav .we-mega-menu-submenu a:hover,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li > a:hover {
  font-size: 0.99rem !important;        /* ≈ +4% — subtle, intentional reflow */
  letter-spacing: 0.015em !important;
  color: var(--color-primary-strong) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* 2c. Active state (current page) — tint + deep green + rounded corners.
   Uses `background` shorthand (not background-color) to beat the
   `background: transparent !important` that app.css sets on these links.
   Covers all Drupal active-class patterns: is-active on <a>, and
   active / active-trail on the parent <li>.
   NO `transition` override here — rule 2a's full 4-property transition
   (font-size, letter-spacing, color, background-color) applies unchanged. */
.primary-nav .we-mega-menu-submenu a.is-active,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li > a.is-active,
.primary-nav .we-mega-menu-submenu li.active > a,
.primary-nav .we-mega-menu-submenu li.active-trail > a,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li.active > a,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li.active-trail > a {
  font-size: 0.95rem !important;
  letter-spacing: 0em !important;
  color: var(--color-primary-deep) !important;
  background: var(--color-primary-pale) !important;
  border-radius: var(--radius-md) !important;
}

/* 2d. Active + hover — keep the tint, but let the hover typography
   effects (font-size growth, letter-spacing) apply normally. */
.primary-nav .we-mega-menu-submenu a.is-active:hover,
.primary-nav .we-mega-menu-submenu .we-mega-menu-li > a.is-active:hover,
.primary-nav .we-mega-menu-submenu li.active > a:hover,
.primary-nav .we-mega-menu-submenu li.active-trail > a:hover {
  background: var(--color-primary-pale) !important;
  color: var(--color-primary-strong) !important;
  font-size: 0.99rem !important;
  letter-spacing: 0.015em !important;
}