/**
 * Martis unified nav system — from nav-unify pack.
 * !important on item-level interaction props only.
 * BOUNCE: do NOT set background on .navbar / .nav-menu / .primary-menu bar chrome.
 */
/**
 * Martis unified main-nav interaction system (structure only).
 * Load AFTER Martis core / site chrome. Accent files set the vars.
 *
 * Scope: main + city menu blocks. Does NOT restyle account menu.
 * Eng: prefer replacing duplicate late !important piles with this file once.
 */

/* -------------------------------------------------------------------------- */
/* Token defaults (overridden by TARGET-JD.css / TARGET-CYB.css)               */
/* -------------------------------------------------------------------------- */
:root {
  --menu-deep: #111111;
  --menu-brand: #555555;
  --menu-mid: #666666;
  --menu-leaf: #888888;
  --menu-hover: #999999;
  --menu-active: #aaaaaa;
  --menu-soft: #f5f5f5;
  --menu-ink: #111111;
  --menu-on-accent: #ffffff;
  --menu-border: #000000;
  --menu-focus: var(--menu-brand);
  --menu-duration: 200ms;
  --menu-ease: ease;
  --menu-radius: 10px;
  --menu-pad-y: 0.65rem;
  --menu-pad-x: 1rem;
  --menu-gap: 0.4rem;
  --menu-underline: 2px;
  --menu-min-tap: 44px;
}

/* City + main menu roots (single selector family — do not fork per city color) */
:is(
  .header #main-menu,
  .header #block-martis-main-menu,
  .header [id^="block-martis-menu"],
  .header #block-martis-houston-menu,
  .header #block-martis-jerseyvillagemenu,
  .header #block-martis-spring-menu,
  .header #block-martis-tomball-menu,
  .header #block-martis-menukaty,
  .header #block-martis-menu-cypress,
  .header .mega-menu,
  .header .primary-menu
) {
  /* local alias so nested rules stay short */
  --_accent: var(--menu-brand);
}

/* -------------------------------------------------------------------------- */
/* Desktop bar                                                                */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Bar/chrome background intentionally untouched (Row 16 bounce). */

  .header #main-menu ul.menu.menu-parent,
  .header #main-menu ul.nav.menu.menu-parent,
  .header #block-martis-main-menu ul.nav.menu.menu-parent,
  .header [id^="block-martis-menu"] ul.nav.menu.menu-parent,
  .header .mega-menu > ul.menu.menu-parent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header #main-menu .menu-item,
  .header #block-martis-main-menu .menu-item,
  .header [id^="block-martis-menu"] .menu-item,
  .header .mega-menu > ul > li.menu-item {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
  }

  .header #main-menu .menu-item > a,
  .header #block-martis-main-menu .menu-item > a,
  .header [id^="block-martis-menu"] .menu-item > a,
  .header .mega-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--menu-min-tap);
    padding: var(--menu-pad-y) var(--menu-pad-x);
    color: var(--menu-on-accent) !important;
    background: transparent;
    border: 0 solid transparent;
    border-radius: var(--menu-radius);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 0 transparent;
    transition:
      color var(--menu-duration) var(--menu-ease),
      background-color var(--menu-duration) var(--menu-ease),
      box-shadow var(--menu-duration) var(--menu-ease),
      border-color var(--menu-duration) var(--menu-ease),
      opacity var(--menu-duration) var(--menu-ease);
  }

  /* Hover — soft leaf wash + underline (NOT the active pill) */
  .header #main-menu .menu-item > a:hover,
  .header #block-martis-main-menu .menu-item > a:hover,
  .header [id^="block-martis-menu"] .menu-item > a:hover,
  .header .mega-menu > ul > li > a:hover {
    color: var(--menu-on-accent) !important;
    background-color: var(--menu-hover) !important;
    box-shadow: inset 0 calc(-1 * var(--menu-underline)) 0 0 var(--menu-on-accent) !important;
  }

  /* Active trail — distinct from hover: solid active tint + stronger underline */
  .header #main-menu .menu-item--active-trail > a,
  .header #main-menu .menu-item--active-trail > a:hover,
  .header #main-menu a.is-active,
  .header #block-martis-main-menu .menu-item--active-trail > a,
  .header #block-martis-main-menu a.is-active,
  .header [id^="block-martis-menu"] .menu-item--active-trail > a,
  .header .mega-menu > ul > li.menu-item--active-trail > a {
    color: var(--menu-on-accent) !important;
    background-color: var(--menu-active) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 calc(-1 * var(--menu-underline)) 0 0 var(--menu-on-accent) !important;
  }

  /* Focus-visible — ring, never rely on hover alone */
  .header #main-menu .menu-item > a:focus-visible,
  .header #block-martis-main-menu .menu-item > a:focus-visible,
  .header [id^="block-martis-menu"] .menu-item > a:focus-visible,
  .header .mega-menu > ul > li > a:focus-visible {
    outline: 3px solid var(--menu-focus);
    outline-offset: 2px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile drawer (.show)                                                      */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #main-menu.collapse.show,
  #main-menu.show,
  .header #main-menu.collapse.show,
  .header #main-menu.show,
  #main-menu.navbar-collapse.collapse.show {
    display: block !important;
    /* Panel/chrome background left to pre-Row-16 chrome (bounce). */
    color: var(--menu-on-accent) !important;
    padding: 0.5rem 0.75rem 0.85rem;
  }

  #main-menu.show .menu-item,
  #main-menu.collapse.show .menu-item,
  #block-martis-main-menu .menu-item,
  .header [id^="block-martis-menu"] .menu-item {
    width: 100%;
    margin: 0 0 var(--menu-gap);
    padding: 0;
    list-style: none;
    background: transparent;
    border-bottom: 0;
  }

  #main-menu.show .menu-item > a,
  #main-menu.show a,
  #block-martis-main-menu .menu-item > a,
  .header [id^="block-martis-menu"] .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--menu-min-tap);
    padding: 0.75rem 1rem;
    color: var(--menu-on-accent) !important;
    background: var(--menu-leaf) !important;
    background-color: var(--menu-leaf) !important;
    border: 2px solid var(--menu-border);
    border-radius: var(--menu-radius);
    text-decoration: none;
    text-align: center;
    transition:
      background-color var(--menu-duration) var(--menu-ease),
      color var(--menu-duration) var(--menu-ease),
      border-color var(--menu-duration) var(--menu-ease);
  }

  /* Mobile: no hover-only affordance — use :active + focus-visible + aria-expanded */
  #main-menu.show .menu-item > a:active,
  #block-martis-main-menu .menu-item > a:active {
    background-color: var(--menu-hover) !important;
  }

  #main-menu.show .menu-item--active-trail > a,
  #main-menu.show a.is-active,
  #block-martis-main-menu .menu-item--active-trail > a,
  #block-martis-main-menu a.is-active {
    background: var(--menu-active) !important;
    background-color: var(--menu-active) !important;
    color: var(--menu-on-accent) !important;
    font-weight: 700 !important;
  }

  #main-menu.show .menu-item > a:focus-visible,
  #block-martis-main-menu .menu-item > a:focus-visible {
    outline: 3px solid var(--menu-focus);
    outline-offset: 2px;
  }

  /* Parent open state via Bootstrap aria-expanded on toggler — keep visible */
  .navbar-toggler.nav-button[aria-expanded="true"] {
    outline: 2px solid var(--menu-focus);
    outline-offset: 2px;
  }
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .header #main-menu .menu-item > a,
  .header #block-martis-main-menu .menu-item > a,
  .header [id^="block-martis-menu"] .menu-item > a,
  .header .mega-menu > ul > li > a,
  #main-menu.show .menu-item > a {
    transition: none !important;
  }
}