/* Primary navigation, including keyboard- and touch-accessible submenus. */
html { scroll-padding-top: 96px; }
.ms-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar .ms-header { top: 32px; }
html:has(body.admin-bar) { scroll-padding-top: 128px; }
.ms-header-inner { position: relative; }
.ms-nav { flex-wrap: nowrap; }
.ms-nav-group { position: relative; }
.ms-nav-group-head { display: flex; align-items: center; gap: 1px; }
.ms-menu-toggle { display: inline-grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ms-menu-toggle span { display: block; margin-top: -5px; font-size: 22px; line-height: 1; transition: transform .2s; }
.ms-nav-group.is-open .ms-menu-toggle span { transform: rotate(180deg) translateY(-4px); }
.ms-menu-toggle:hover, .ms-menu-toggle:focus-visible { color: var(--ms-lime); }
.ms-menu-toggle:focus-visible, .ms-mobile-menu-toggle:focus-visible { outline: 2px solid var(--ms-lime); outline-offset: 3px; }
.ms-submenu { position: absolute; top: 100%; left: 50%; z-index: 60; width: min(430px, 90vw); max-height: min(72vh, 620px); overflow-y: auto; padding: 12px; border: 1px solid #3f3f46; border-radius: 16px; background: #111; box-shadow: 0 24px 50px #0009; visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s, visibility .18s; }
.ms-nav-group.is-open .ms-submenu { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ms-submenu-blog { left: auto; right: 0; transform: translateY(8px); }
.ms-nav-group.is-open .ms-submenu-blog { transform: translateY(0); }
.ms-submenu a { display: block; padding: 12px 14px; border-radius: 10px; text-transform: none; letter-spacing: 0; }
.ms-submenu a:hover, .ms-submenu a:focus-visible { background: #242424; color: #fff; }
.ms-submenu strong { display: block; color: #f4f4f5; font-size: 14px; }
.ms-submenu a:hover strong, .ms-submenu a:focus-visible strong { color: var(--ms-lime); }
.ms-submenu small { display: block; margin-top: 4px; color: #a1a1aa; font-size: 12px; font-weight: 400; line-height: 1.35; }
.ms-mobile-menu-toggle { display: none; }

@media (max-width: 800px) {
  .ms-header-inner { min-height: 68px; align-items: center; padding-block: 0; }
  .ms-mobile-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; border: 1px solid #52525b; border-radius: 8px; background: transparent; cursor: pointer; }
  .ms-mobile-menu-toggle span { width: 19px; height: 2px; background: #fff; }
  .ms-nav { display: none; position: absolute; top: 100%; left: -16px; right: -16px; max-height: calc(100dvh - 68px); overflow-y: auto; padding: 15px 16px 26px; border-top: 1px solid #27272a; background: #0b0b0b; box-shadow: 0 18px 30px #0008; }
  body.admin-bar .ms-nav { max-height: calc(100dvh - 100px); }
  .ms-header.is-nav-open .ms-nav { display: flex; align-items: stretch; flex-direction: column; gap: 0; }
  .ms-nav > a, .ms-nav-group-head { min-height: 46px; border-bottom: 1px solid #2d2d2d; }
  .ms-nav > a { display: flex; align-items: center; font-size: 14px; }
  .ms-nav-group-head > a { display: flex; align-items: center; flex: 1; font-size: 14px; }
  .ms-menu-toggle { width: 44px; height: 44px; }
  .ms-submenu { display: none; position: static; width: 100%; max-height: none; overflow: visible; padding: 5px 0 10px 10px; border: 0; border-radius: 0; box-shadow: none; background: #151515; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .ms-nav-group.is-open .ms-submenu { display: block; transform: none; }
  .ms-submenu a { padding: 11px 14px; }
  .ms-submenu strong { font-size: 13px; }
}

@media (max-width: 782px) {
  body.admin-bar .ms-header { top: 46px; }
  body.admin-bar .ms-nav { max-height: calc(100dvh - 114px); }
  html:has(body.admin-bar) { scroll-padding-top: 138px; }
}
@media (max-width: 600px) {
  /* Keep WordPress's toolbar aligned with the sticky header while signed in. */
  body.admin-bar #wpadminbar { position: fixed; }
}