/* ==========================================================================
   Accessible dropdown menu
   Overrides for masters-theme desktop nav (.header-bar)
   ========================================================================== */

/* Toggle only exists for the desktop nav; mobile menu has its own tap handling */
.submenu-toggle {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 992px) {

  /* Fixed header: make sure focused elements scroll clear of it (WCAG 2.4.11) */
  html {
    scroll-padding-top: 170px;
  }

  /* Nothing in the nav should clip the focus ring */
  .header-bar nav,
  .header-bar ul,
  .header-bar ul > li {
    overflow: visible;
  }

  /* Dropdown never taller than the space under the header; scrolls internally (WCAG 1.4.10) */
  .header-bar ul > li ul.sub-menu {
    max-height: calc(100dvh - var(--header-h, 160px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;   /* offsets the padding so text stays where it was */
  }

  .header-bar ul > li ul.sub-menu a {
    padding: 2px 4px;
  }
 
  /* Keep the parent's reserved space for the icon, drop its ::after chevron */
  .header-bar ul > li.menu-item-has-children {
    padding-right: 30px;
  }
  .header-bar ul > li.menu-item-has-children::after {
    display: none;
  }

  /* The toggle button (WCAG 2.5.8: 24 x 24 minimum) */
  .header-bar .submenu-toggle {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 8px;
    right: 0;
    cursor: pointer;
    color: #FFF !important;
    border-radius: 3px;
  }

  /* Chevron, always white */
  .header-bar .submenu-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s;
  }
  .header-bar li.menu-active .submenu-toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }

  /* Focus ring drawn inside the button so nothing can clip it */
  .header-bar .submenu-toggle:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: -2px;
  }
}

/* Short viewports (zoomed in): let the fixed header scroll away with the page */
@media (min-width: 992px) and (max-height: 600px) {
  .header {
    position: absolute;
  }
}