/* Header menu (desktop, 769px and wider) for every page.
   Home page header: #main-nav .menu        Inner pages (WordPress theme header): #header-nav-menu
   - all 23 top-level items fit in 2 rows (smaller text, tighter spacing, lower rows)
   - dropdowns open directly under their item, above the rest of the menu and the page, smaller text */

@media (min-width: 769px) {
  #main-nav,
  .header__content { padding-left: 20px !important; padding-right: 20px !important; }

  #main-nav .menu,
  #header-nav-menu { margin: 0 !important; padding: 4px 0 !important; text-align: center; }

  /* top-level items */
  #main-nav .menu > .menu-item,
  #header-nav-menu > li { margin: 0 12px !important; z-index: 9; }
  #main-nav .menu > .menu-item:hover, #main-nav .menu > .menu-item:focus-within,
  #header-nav-menu > li:hover, #header-nav-menu > li:focus-within { z-index: 60 !important; }

  #main-nav .menu > .menu-item, #header-nav-menu > li,
  #main-nav .menu > .menu-item > a, #header-nav-menu > li > a { height: auto !important; }
  #main-nav .menu > .menu-item > a,
  #header-nav-menu > li > a { font-size: 11px !important; line-height: 42px !important; letter-spacing: .2px; }
  #main-nav .menu > .menu-item > a .fa,
  #header-nav-menu > li > a .fa { font-size: 11px !important; }

  /* dotted separators, centred in the gap between items */
  #main-nav .menu > .menu-item::before,
  #header-nav-menu > li::before { right: -14px !important; left: auto !important; top: 50% !important; height: 13px !important; margin-top: -6px !important; }

  /* first-level dropdown: right under the item, on top of everything */
  #main-nav .menu > .menu-item > .sub-menu,
  #header-nav-menu > li > .sub-menu {
    top: 100% !important; left: 0 !important; margin: 0 0 0 -12px !important;
    width: max-content !important; min-width: 230px !important; max-width: 340px !important;
    z-index: 70 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
  }
  /* set by header-menu.js when a dropdown would run past the right edge of the screen */
  #main-nav .menu > .menu-item > .sub-menu.dbjc-align-right,
  #header-nav-menu > li > .sub-menu.dbjc-align-right { left: auto !important; right: 0 !important; margin: 0 -12px 0 0 !important; }
  /* third level opens to the side */
  #main-nav .sub-menu .sub-menu,
  #header-nav-menu .sub-menu .sub-menu {
    top: 0 !important; left: 100% !important; margin: -7px 0 0 1px !important; z-index: 71 !important;
    width: max-content !important; min-width: 230px !important; max-width: 340px !important;
    max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  }
  #main-nav .sub-menu .sub-menu.dbjc-open-left,
  #header-nav-menu .sub-menu .sub-menu.dbjc-open-left { left: auto !important; right: 100% !important; margin: -7px 1px 0 0 !important; }

  /* dropdown items: smaller text, never cut */
  #main-nav .sub-menu > li:first-child,
  #header-nav-menu .sub-menu > li:first-child { padding-top: 6px !important; }
  #main-nav .sub-menu > li:last-child,
  #header-nav-menu .sub-menu > li:last-child { padding-bottom: 6px !important; }
  #main-nav .sub-menu > li > a,
  #header-nav-menu .sub-menu > li > a {
    font-size: 12.5px !important; line-height: 18px !important; padding: 8px 14px !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; height: auto !important;
  }
}

/* narrower desktops / landscape tablets: tighter still */
@media (min-width: 769px) and (max-width: 1279px) {
  #main-nav, .header__content { padding-left: 10px !important; padding-right: 10px !important; }
  #main-nav .menu > .menu-item, #header-nav-menu > li { margin: 0 7px !important; }
  #main-nav .menu > .menu-item::before, #header-nav-menu > li::before { right: -9px !important; }
  #main-nav .menu > .menu-item > a, #header-nav-menu > li > a { font-size: 10.5px !important; letter-spacing: 0; }
  #main-nav .menu > .menu-item > .sub-menu, #header-nav-menu > li > .sub-menu { margin-left: -7px !important; }
}
@media (min-width: 769px) and (max-width: 991px) {
  #main-nav .menu > .menu-item, #header-nav-menu > li { margin: 0 5px !important; }
  #main-nav .menu > .menu-item::before, #header-nav-menu > li::before { right: -7px !important; }
  #main-nav .menu > .menu-item > a, #header-nav-menu > li > a { font-size: 10px !important; line-height: 38px !important; }
  #main-nav .sub-menu > li > a, #header-nav-menu .sub-menu > li > a { font-size: 12px !important; }
}

/* home page: the header takes its real height instead of being laid over the slider
   (it used to overlap the slider when the menu wrapped, hiding dropdowns behind it) */
@media (min-width: 769px) {
  .site-header { position: relative !important; }
  .banner { margin-top: 0 !important; }
}

/* while the menu is in use, the header (and its dropdowns) is above the fixed "Admission open" box;
   photo lightboxes still open above everything */
@media (min-width: 769px) {
  .site-header:hover, .site-header:focus-within,
  .header-holder:hover, .header-holder:focus-within { z-index: 1000000 !important; }
}