/* pc9 (Chris, 2026-10-16): the header nav keeps one row at 981 to 1059 px by trimming the item gaps. */
@media (min-width: 981px) and (max-width: 1023px) {
  .et-l--header .et_pb_menu .et-menu > li { padding-left: 6px !important; padding-right: 6px !important; }
}
@media (min-width: 1024px) and (max-width: 1059px) {
  .et-l--header .et_pb_menu .et-menu > li { padding-left: 8px !important; padding-right: 8px !important; }
}
/* pc9b (Chris, 2026-10-16): the mobile menu. Submenus start collapsed behind a toggle (only once the script has marked
   the page, so no-JS visitors keep the open list), and the panel gets a defined edge. Nothing here applies above 980px.
   Specificity note: the header's Theme Builder module sets the panel and row colours with !important from a later
   inline style, so these rules carry !important at a higher specificity. Depth tints are white at 4% and 7% composited
   over the row navy #0F2540. */
@media (max-width: 980px) {
  html.fe-subnav-ready .et-l--header .et_mobile_menu li.menu-item-has-children > ul.sub-menu { display: none !important; }
  html.fe-subnav-ready .et-l--header .et_mobile_menu li.menu-item-has-children.fe-sub-open > ul.sub-menu { display: block !important; }
  .et-l--header .et_pb_menu ul.et_mobile_menu {
    padding: 0 !important;
    background: #0F2540 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-top: 3px solid #D8A83B !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35) !important;
    overflow: hidden !important;
  }
  .et-l--header .et_pb_menu .et_mobile_menu ul.sub-menu { margin: 0 !important; padding: 0 !important; width: 100% !important; left: 0 !important; }
  .et-l--header .et_pb_menu .et_mobile_menu ul.sub-menu > li { margin: 0 !important; padding: 0 !important; }
  .et-l--header .et_pb_menu .et_mobile_menu ul.sub-menu > li > a { padding-left: 36px !important; background: #192E48 !important; }
  .et-l--header .et_pb_menu .et_mobile_menu ul.sub-menu ul.sub-menu > li > a { padding-left: 52px !important; background: #20344D !important; }
  .et-l--header .et_pb_menu .et_mobile_menu li.menu-item-has-children { position: relative !important; }
  .et-l--header .et_pb_menu .et_mobile_menu li.menu-item-has-children > a { padding-right: 56px !important; }
  .et-l--header .et_pb_menu .et_mobile_menu .fe-subtoggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2;
    box-sizing: border-box !important;
    width: 48px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  .et-l--header .et_pb_menu .et_mobile_menu .fe-subtoggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    margin: -5px 0 0 -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .et-l--header .et_pb_menu .et_mobile_menu li.fe-sub-open > .fe-subtoggle::before { transform: translateY(2px) rotate(225deg); }
  .et-l--header .et_pb_menu .et_mobile_menu .fe-subtoggle:focus-visible { outline: 2px solid #fff !important; outline-offset: -4px !important; }
}