/**
 * @file
 * Third-level flyout menus for the main navigation.
 *
 * Enabled by the "Third-level menu items" theme setting, which adds
 * .menu--flyout-hover or .menu--flyout-click to the main menu.
 *
 * Breakpoints follow the ucsbweb base theme (scss/_overrides.scss):
 *   max-width: 768px    mobile; navbar collapsed ($screen-sm)
 *   max-width: 1038px   dropdown columns stack into one list
 *   min-width: 1039px   dropdown columns sit side by side
 * Flyouts open to the side only at 1039px and up. Below that, the third
 * level is a vertical accordion. menu-flyout.js uses the same 1039px value.
 */

/*
 * Stacking order, kept below Bootstrap's modal backdrop (1040):
 *   1000  Bootstrap .dropdown-menu, .navbar-static-top, secondary nav
 *   1035  header#navbar while a flyout-enabled dropdown is open
 *   1036  the open mega dropdown panel
 *   1037  third-level flyout (within the panel's stacking context)
 */
:root {
  --ucsbweb-z-nav-open: 1035;
  --ucsbweb-z-dropdown-open: 1036;
  --ucsbweb-z-flyout: 1037;
}

/* Lift the whole header so later siblings at z-index 1000 can't cover it. */
header#navbar:has(.menu--flyout-hover > li.dropdown.open),
header#navbar:has(.menu--flyout-click > li.dropdown.open) {
  z-index: var(--ucsbweb-z-nav-open);
}
.menu--flyout-hover > li.dropdown.open > .dropdown-menu,
.menu--flyout-click > li.dropdown.open > .dropdown-menu {
  z-index: var(--ucsbweb-z-dropdown-open);
}

/* Underline on hover instead of bold, so link width doesn't change. */
.dropdown-menu ul li a:hover,
.dropdown-menu ul li a:focus {
  font-weight: normal;
  text-decoration: underline;
}

/* Chevron toggle button next to the second-level link. */
.dropdown-submenu > .submenu-toggle {
  background: none;
  border: 0;
  color: #005aa3;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin-left: 4px;
  padding: 0;
  position: relative;
  vertical-align: middle;
  width: 24px;
}
/* Chevron drawn from two borders, rotated per layout below. */
.dropdown-submenu > .submenu-toggle::before {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
  height: 8px;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: transform 0.15s ease;
  width: 8px;
}
.dropdown-submenu > .submenu-toggle:hover,
.dropdown-submenu > .submenu-toggle:focus {
  color: #0076d6;
}
.dropdown-submenu > .submenu-toggle:focus-visible {
  outline: 2px solid #0076d6;
  outline-offset: 1px;
}

/* Third-level list. Overrides the column styles of .dropdown-menu ul. */
.dropdown-menu ul.submenu-flyout {
  display: none;
  margin: 0;
}
.dropdown-menu ul.submenu-flyout li {
  font-family: inherit;
  font-weight: normal;
}
.dropdown-submenu.submenu-open > ul.submenu-flyout {
  display: block;
}

/*
 * Side-by-side columns: the third level flies out, to the right by default.
 * menu-flyout.js adds .flyout-left when there isn't room on the right.
 */
@media all and (min-width: 1039px) {
  /* Shrink to the link and arrow, so the flyout starts right at the arrow
     rather than at the column's widest link. */
  .dropdown-submenu {
    position: relative;
    width: fit-content;
  }
  /* Bring the active item above neighboring positioned items in the panel. */
  .dropdown-submenu.submenu-open,
  .menu--flyout-hover .dropdown-submenu:hover {
    z-index: 1;
  }
  .dropdown-menu ul.submenu-flyout {
    background-color: #e8ecf0;
    box-shadow: 0 0 8px #b2b3b3;
    min-width: 220px;
    padding: 8px 20px;
    left: 100%;
    position: absolute;
    top: 0;
    z-index: var(--ucsbweb-z-flyout);
  }
  .dropdown-menu ul.submenu-flyout li {
    padding: 8px 0;
  }
  .dropdown-submenu.flyout-left > ul.submenu-flyout {
    left: auto;
    right: 100%;
  }
  /* Chevron points toward the side the flyout opens on. */
  .dropdown-submenu > .submenu-toggle::before {
    margin: -5px 0 0 -7px;
    transform: rotate(45deg);
  }
  .dropdown-submenu.flyout-left > .submenu-toggle::before {
    margin-left: -3px;
    transform: rotate(-135deg);
  }
}

@media (hover: hover) and (min-width: 1039px) {
  .menu--flyout-hover .dropdown-submenu:hover > ul.submenu-flyout {
    display: block;
  }
}

/*
 * Stacked columns (and mobile): the third level is a vertical accordion
 * beneath its parent, opened with the toggle. The chevron points down, and
 * up when open.
 */
@media all and (max-width: 1038px) {
  .dropdown-submenu {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
  .dropdown-menu ul.submenu-flyout {
    border-left: 2px solid #c4d3e3;
    flex-basis: 100%;
    margin-top: 6px;
    padding: 0 0 0 14px;
  }
  .dropdown-menu ul.submenu-flyout li {
    padding: 8px 0;
  }
  .dropdown-submenu > .submenu-toggle::before {
    margin: -7px 0 0 -5px;
    transform: rotate(135deg);
  }
  .dropdown-submenu.submenu-open > .submenu-toggle::before {
    margin-top: -3px;
    transform: rotate(-45deg);
  }
}

/*
 * Stacked panel on a horizontal navbar: the panel can be taller than the
 * viewport, so cap it to the space below its top edge (set by
 * menu-flyout.js) and scroll inside it. The base theme displays the open
 * panel as a table, which ignores max-height, so switch it to block.
 */
@media all and (min-width: 769px) and (max-width: 1038px) {
  body:not(.toolbar-tray-open) .nav.menu--flyout-hover > li.dropdown.open > .dropdown-menu,
  body:not(.toolbar-tray-open) .nav.menu--flyout-click > li.dropdown.open > .dropdown-menu {
    display: block;
    max-height: var(--ucsbweb-submenu-max-height, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Mobile: larger tap targets (at least 44 x 44px, WCAG 2.5.5). */
@media all and (max-width: 768px) {
  /* The 44px link and toggle replace the base theme's li padding, keeping
     rows with a toggle the same height as plain rows. */
  .dropdown-menu ul li.dropdown-submenu {
    padding-bottom: 1px;
    padding-top: 1px;
  }
  /* .dropdown-menu prefix outranks the base theme's .dropdown-menu ul li a. */
  .dropdown-menu .dropdown-submenu > a {
    flex: 1 1 0;
    min-height: 44px;
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: normal;
  }
  .dropdown-submenu > .submenu-toggle {
    flex: 0 0 auto;
    height: 44px;
    margin-left: 8px;
    width: 44px;
  }
  .dropdown-submenu > .submenu-toggle::before {
    height: 10px;
    margin: -8px 0 0 -6px;
    width: 10px;
  }
  .dropdown-submenu.submenu-open > .submenu-toggle::before {
    margin-top: -4px;
  }
  .dropdown-menu ul.submenu-flyout li {
    padding: 0;
  }
  .dropdown-menu ul.submenu-flyout li a {
    display: block;
    min-height: 44px;
    padding: 12px 0;
    white-space: normal;
  }
}