/* ============================================================
   ACCESSIBLE PRIMARY + SECTION MENUS

   Accessible Menu owns expanded state, keyboard interaction, focus return,
   hover intent, and mobile disclosure behavior. Bootstrap still supplies the
   visual language for links and dropdown panels, but Bootstrap's dropdown JS
   is intentionally not used for these two navigation systems.

   Markup contract for an expandable item:
     <li class="nav-item dropdown">
       <a class="nav-link|dropdown-item" href="...">Real destination</a>
       <button class="dropdown-toggle menu-submenu-toggle">...</button>
       <ul class="dropdown-menu">...</ul>
     </li>
   ============================================================ */

.mainmenu .dropdown,
.section-menu-list .dropdown {
  position: relative;
}

/* The sibling button controls only the submenu. The adjacent link remains a
   normal destination, so touch and keyboard users do not have to choose
   between opening a submenu and following the parent link. */
.menu-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 2.25rem;
  margin: 0;
  padding: 0 .55rem;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}

.menu-submenu-toggle::after {
  margin: 0;
  transition: transform var(--anim-speed) ease;
}

.menu-submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.mainbar:is(.menu-light, .menu-white) .mainmenu > .dropdown > .menu-submenu-toggle {
  color: var(--bs-white);
}

.mainbar.menu-dark .mainmenu > .dropdown > .menu-submenu-toggle {
  color: var(--bs-body-color);
}

.mainbar:is(.menu-light, .menu-white) .mainmenu > .dropdown > .menu-submenu-toggle:hover {
  color: var(--uaa-gold);
}

.mainbar.menu-dark .mainmenu > .dropdown > .menu-submenu-toggle:hover {
  color: var(--bs-link-hover-color);
}

/* Two-color focus treatment remains visible over both the transparent hero
   header and the scrolled theme surface. */
.mainmenu :is(a, button):focus-visible,
.section-menu :is(a, button):focus-visible {
  position: relative;
  z-index: 2;
  outline: 0;
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--bs-focus-ring-box-shadow);
}

/* Prevent a flash of every submenu before Accessible Menu finishes adding
   its state classes. Submenus are hidden by default and are not allowed to
   paint until the root list receives .uaa-menu-ready from the initializer. */
.mainmenu .dropdown-menu,
.section-menu-list .dropdown-menu {
  display: none;
  visibility: hidden;
  pointer-events: none;
  color: var(--bs-dropdown-color, var(--bs-body-color));
  background: var(--bs-dropdown-bg, var(--bs-body-bg));
  border-color: var(--bs-dropdown-border-color, var(--bs-border-color-translucent));
  border-radius: var(--bs-dropdown-border-radius, var(--bs-border-radius));
  box-shadow: var(--bs-dropdown-box-shadow, var(--bs-box-shadow));
  opacity: 0;
  transform: translateY(-.35rem);
  transition:
    opacity var(--anim-speed) ease,
    transform var(--anim-speed) ease;
}

/* Once initialization is complete, Accessible Menu's open and transition
   classes control visibility. This keeps the normal open/close animation but
   prevents the initial page-load close animation from being visible. */
.mainmenu.uaa-menu-ready .dropdown-menu.am-open,
.mainmenu.uaa-menu-ready .dropdown-menu.am-transitioning,
.section-menu-list.uaa-menu-ready .dropdown-menu.am-open,
.section-menu-list.uaa-menu-ready .dropdown-menu.am-transitioning {
  display: block;
  visibility: visible;
  pointer-events: auto;
}

.mainmenu.uaa-menu-ready .dropdown-menu.am-open,
.section-menu-list.uaa-menu-ready .dropdown-menu.am-open {
  opacity: 1;
  transform: translateY(0);
}

.mainmenu.uaa-menu-ready .dropdown-menu.am-transitioning.am-closed,
.section-menu-list.uaa-menu-ready .dropdown-menu.am-transitioning.am-closed {
  opacity: 0;
  transform: translateY(-.35rem);
}

.mainmenu.uaa-menu-ready .dropdown-menu.am-closed:not(.am-transitioning),
.section-menu-list.uaa-menu-ready .dropdown-menu.am-closed:not(.am-transitioning) {
  display: none;
}

/* ============================================================
   DESKTOP FLYOUTS
   ============================================================ */
@media (min-width: 992px) {
  /* Bootstrap's .navbar-nav class defaults to flex-direction: column. The
     primary menu still uses that class for Bootstrap/Accessible Menu styling,
     so explicitly restore the original horizontal desktop navigation here.
     The mobile media query below changes it back to a vertical accordion. */
  .mainmenu {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    width: auto;
  }

  .mainmenu > .nav-item {
    flex: 0 0 auto;
  }

  /* Top-level items use a two-column layout: destination link + disclosure
     button. This keeps the complete item at the existing header height. */
  .mainmenu > .dropdown {
    display: grid;
    grid-template-columns: minmax(0, auto) 2.15rem;
    grid-template-rows: 100%;
    align-items: stretch;
    height: 100%;
  }

  .mainmenu > .dropdown > .nav-link {
    padding-right: .25rem;
  }

  .mainmenu > .dropdown > .menu-submenu-toggle {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    min-width: 2.15rem;
    padding: 0 .55rem 0 .2rem;
  }

  .mainmenu > .dropdown > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 15rem;
    margin: 0;
  }

  .mainmenu > .menu-align-end > .dropdown-menu,
  .mainmenu > .dropdown > .dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
  }

  /* Nested menu items repeat the same link/button structure. Their submenu
     opens to the right unless JavaScript adds .submenu-flip near the viewport
     edge. */
  .mainmenu .dropdown-menu > .dropdown,
  .section-menu-list .dropdown-menu > .dropdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    align-items: stretch;
  }

  .mainmenu .dropdown-menu > .dropdown > .dropdown-item,
  .section-menu-list .dropdown-menu > .dropdown > .dropdown-item {
    grid-column: 1;
    grid-row: 1;
    padding-right: .5rem;
  }

  .mainmenu .dropdown-menu > .dropdown > .menu-submenu-toggle,
  .section-menu-list .dropdown-menu > .dropdown > .menu-submenu-toggle {
    grid-column: 2;
    grid-row: 1;
    color: var(--bs-dropdown-link-color, var(--bs-body-color));
    min-height: 2.5rem;
  }

  .mainmenu .dropdown-menu > .dropdown > .menu-submenu-toggle::after,
  .section-menu-list .dropdown-menu > .dropdown > .menu-submenu-toggle::after {
    transform: rotate(-90deg);
  }

  .mainmenu .dropdown-menu > .dropdown > .menu-submenu-toggle[aria-expanded="true"]::after,
  .section-menu-list .dropdown-menu > .dropdown > .menu-submenu-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }

  .mainmenu .dropdown-menu .dropdown-menu,
  .section-menu-list .dropdown-menu .dropdown-menu {
    position: absolute;
    top: -.25rem;
    left: calc(100% + .125rem);
    z-index: 1001;
    min-width: 15rem;
    margin: 0;
  }

  /* Third-level and deeper flyouts use the same recursive positioning rule.
     A slightly higher stacking level keeps the newest panel above its parent
     and siblings while still allowing each nested item to flip independently. */
  .mainmenu .dropdown-menu .dropdown-menu .dropdown-menu,
  .section-menu-list .dropdown-menu .dropdown-menu .dropdown-menu {
    z-index: 1002;
  }

  .mainmenu .dropdown-menu .dropdown.submenu-flip > .dropdown-menu,
  .section-menu-list .dropdown-menu .dropdown.submenu-flip > .dropdown-menu {
    right: calc(100% + .125rem);
    left: auto;
  }

  /* Section navigation remains one horizontal bar on desktop. */
  .section-menu .section-menu-header {
    float: left;
  }

  .section-menu-collapse {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 51px;
  }

  .section-menu-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: auto;
  }

  .section-menu-list > .nav-item {
    display: flex;
    align-items: stretch;
  }

  .section-menu-list > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
  }

  .section-menu-list > .dropdown {
    display: grid;
    grid-template-columns: minmax(0, auto) 2.1rem;
    grid-template-rows: 100%;
  }

  .section-menu-list > .dropdown > .nav-link {
    grid-column: 1;
    grid-row: 1;
    padding-right: .25rem !important;
  }

  .section-menu-list > .dropdown > .menu-submenu-toggle {
    grid-column: 2;
    grid-row: 1;
    color: var(--bs-body-color);
    padding-right: .5rem;
    padding-left: .15rem;
  }

  .section-menu-list > .dropdown > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 15rem;
    margin: 0;
  }

  .section-menu-cta {
    align-self: center;
    flex: 0 0 auto;
    margin-left: 1rem;
  }
}

/* ============================================================
   MOBILE ACCORDIONS
   ============================================================ */
@media (max-width: 991.98px) {
  .mainmenu > .dropdown,
  .section-menu-list > .dropdown,
  .mainmenu .dropdown-menu > .dropdown,
  .section-menu-list .dropdown-menu > .dropdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.25rem;
    align-items: stretch;
    width: 100%;
  }

  .mainmenu .dropdown > :is(.nav-link, .dropdown-item),
  .section-menu-list .dropdown > :is(.nav-link, .dropdown-item) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding-right: .5rem;
  }

  .mainmenu .dropdown > .menu-submenu-toggle,
  .section-menu-list .dropdown > .menu-submenu-toggle {
    grid-column: 2;
    grid-row: 1;
    min-width: 3.25rem;
    min-height: 3rem;
    color: var(--bs-body-color);
    border-left: var(--bs-border-width) solid var(--bs-border-color);
  }

  .mainmenu .dropdown > .dropdown-menu,
  .section-menu-list .dropdown > .dropdown-menu {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .mainmenu > .dropdown > .dropdown-menu {
    background: var(--bs-tertiary-bg);
  }

  .mainmenu .dropdown-menu .dropdown-menu,
  .section-menu-list .dropdown-menu .dropdown-menu {
    background: var(--bs-secondary-bg);
  }

  .mainmenu .dropdown-menu .dropdown-item,
  .section-menu-list .dropdown-menu .dropdown-item {
    white-space: normal;
    padding: .75rem 1.25rem;
  }

  .mainmenu .dropdown-menu .dropdown-menu .dropdown-item,
  .section-menu-list .dropdown-menu .dropdown-menu .dropdown-item {
    padding-left: 2rem;
  }

  .mainmenu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item,
  .section-menu-list .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
    padding-left: 2.75rem;
  }

  .section-menu-header {
    min-height: 51px;
  }

  .section-menu-toggler {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.5rem;
    padding: .4rem .75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
  }

  .section-menu-collapse {
    display: none;
    clear: both;
    padding-bottom: .75rem;
  }

  .section-menu-collapse.open {
    display: block;
  }

  .section-menu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .section-menu-list > .nav-item {
    width: 100%;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
  }

  .section-menu-list > .nav-item > .nav-link {
    min-height: 3rem;
    padding: .75rem 1rem !important;
  }

  .section-menu-cta {
    margin-top: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-submenu-toggle::after,
  .mainmenu .dropdown-menu,
  .section-menu-list .dropdown-menu {
    transition: none !important;
  }
}