/* ─────────────────────────────────────────────────────────────
   Techwish — Salient parent visual overrides.

   ALL CSS in this file targets markup that the SALIENT PARENT THEME
   renders (sticky header, sf-menu navigation, .nectar-mobile-menu,
   #header-outer chrome). It is enqueued LAST in the cascade so its
   declarations beat anything Salient ships.

   Rules of the road for this file:
   • Selectors are scoped to a Salient root (#header-outer, .nectar-*,
     .woocommerce inside Salient layouts) so we never leak into our own
     template-parts.
   • !important is allowed here (and only here) because Salient's own
     stylesheet uses high-specificity rules that we'd otherwise have to
     match with a comparable chain. Keeping all !important in one file
     makes the cascade story easy to audit.
   • Anything Techwish-owned (our .tw-* templates) stays out — those
     live in components.css / header-footer.css / homepage.css.
   ───────────────────────────────────────────────────────────── */

/* ───── Main navigation in Salient header (top_nav) ─────
   Tuned to the v3 mockup: 14px Space Grotesk, ink-2 color, mint hover,
   2px mint underline beneath the active / hovered item. */
#header-outer #top nav > ul > li > a,
#header-outer .sf-menu > li > a {
  font-family: var(--tw-display, "Space Grotesk", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tw-ink-2, #2A2F2C);
  transition: color var(--tw-dur-fast, .18s) ease;
}
#header-outer #top nav > ul > li > a:hover,
#header-outer .sf-menu > li.current-menu-item > a,
#header-outer .sf-menu > li.sfHover > a {
  color: var(--tw-mint-600, #1FB37C);
}

/* Salient draws its own underline (::before pseudo) — recolor + thin
   it to match the mockup. !important needed because Salient sets it
   inline / via a higher-specificity rule. */
#header-outer .sf-menu > li > a::before,
#header-outer #top nav > ul > li > a::before {
  background-color: var(--tw-mint, #2DCE92) !important;
  height: 2px !important;
}

/* Subtle caret on items with children (visual cue, not interactive). */
#header-outer .sf-menu > li.menu-item-has-children > a .sf-sub-indicator,
#header-outer .sf-menu > li.megamenu > a .sf-sub-indicator {
  opacity: .55;
}

/* ───── Utility menu items in Salient nav (Sale / Outlet) ─────
   These are tagged via _tw_nav_role=utility meta → CSS class on the <li>.
   Salient's <a> color rules win without !important, so we use it here
   and only here. */
#header-outer .sf-menu li.tw-nav-role-utility > a,
#header-outer .sf-menu li.tw-nav-role-utility > a:visited,
.nectar-mobile-menu li.tw-nav-role-utility > a {
  color: var(--tw-mint-600, #1FB37C) !important;
  font-weight: 600;
}
#header-outer .sf-menu li.tw-nav-role-utility > a:hover,
.nectar-mobile-menu li.tw-nav-role-utility > a:hover {
  color: var(--tw-mint, #2DCE92) !important;
}

/* ───── Mega menu container constraint inside Salient dropdown ─────
   Salient wraps mega menus in .sf-mega — we constrain our .tw-mm grid
   to match the rest of the site container width. */
#header-outer .sf-menu li.megamenu > .sf-mega .tw-mm,
#header-outer .sf-menu li .sf-mega .tw-mm {
  margin: 0 auto;
  max-width: var(--tw-container-max, 1320px);
}