/* Dynamic primary-navigation menus. Behavior remains in navigation-menus.js. */
.mpt-nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.mpt-nav-group-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  font-size: .95rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mpt-nav-group-toggle::after {
  content: '▾';
  font-size: .72em;
  transition: transform .15s ease;
}

/* Dropdown visibility is controlled only by the explicit .open state.
   Do not use :hover or :focus-within here: touch-capable browsers can latch
   those pseudo states and display the wrong sibling menu after a tap. */
.mpt-nav-group.open > .mpt-nav-group-toggle::after {
  transform: rotate(180deg);
}

.mpt-nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--mp-border,#dfd7e5);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px color-mix(in srgb,var(--mp-blue-dark) 16%,transparent);
}

.mpt-nav-group.open > .mpt-nav-submenu {
  display: grid;
}

.mpt-nav-submenu a {
  display: block !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border-radius: 9px;
  color: var(--mp-blue-dark) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  white-space: normal !important;
  line-height: 1.25;
}

.mpt-nav-submenu a:hover,
.mpt-nav-submenu a:focus-visible {
  background: var(--mp-blue-light);
  color: var(--mp-blue) !important;
  text-decoration: none !important;
}

.mpt-nav-submenu .portal-theme-toggle,
.mpt-nav-submenu .town-context-control {
  width: 100%;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px !important;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
}

.mpt-nav-submenu .portal-theme-toggle:hover,
.mpt-nav-submenu .portal-theme-toggle:focus-visible,
.mpt-nav-submenu .town-context-control:hover,
.mpt-nav-submenu .town-context-control:focus-visible {
  background: var(--mp-blue-light);
}

.mpt-nav-group-label {
  display: none;
}

html[data-theme="dark"] .mpt-nav-submenu,
body.theme-dark .mpt-nav-submenu {
  background: #231b2a;
  border-color: color-mix(in srgb,var(--mp-blue) 30%,#4a3d53);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .mpt-nav-submenu a,
body.theme-dark .mpt-nav-submenu a {
  color: #f8fafc !important;
}

html[data-theme="dark"] .mpt-nav-submenu a:hover,
html[data-theme="dark"] .mpt-nav-submenu a:focus-visible,
body.theme-dark .mpt-nav-submenu a:hover,
body.theme-dark .mpt-nav-submenu a:focus-visible,
html[data-theme="dark"] .mpt-nav-submenu .portal-theme-toggle:hover,
html[data-theme="dark"] .mpt-nav-submenu .portal-theme-toggle:focus-visible,
body.theme-dark .mpt-nav-submenu .town-context-control:hover,
body.theme-dark .mpt-nav-submenu .town-context-control:focus-visible {
  background: color-mix(in srgb,var(--mp-blue) 18%,#231b2a);
  color: var(--mp-gold) !important;
}

@media (min-width: 861px) {
  /* Explore and More sit against the right side of the global header on
     tablet/desktop widths. Anchor their panels inward so opening them never
     expands the document width or shifts the page horizontally. */
  .mpt-nav-group[data-nav-group="explore"] > .mpt-nav-submenu,
  .mpt-nav-group[data-nav-group="more"] > .mpt-nav-submenu {
    left: auto;
    right: 0;
  }

  .mpt-nav-group[data-nav-group="more"] > .mpt-nav-submenu {
    width: min(340px, calc(100vw - 32px));
  }
}

@media (max-width: 860px) {
  .mpt-nav-group {
    display: block;
    width: 100%;
    padding: 4px 0 7px;
  }

  .mpt-nav-group-toggle {
    width: 100%;
    min-height: 44px;
    padding: 12px 8px !important;
    font-weight: 800 !important;
    cursor: default;
    pointer-events: none;
  }

  .mpt-nav-group-toggle::after {
    display: none;
  }

  /* Match the MPT mobile menu layout: group labels are headings and their
     submenu destinations are visible in the opened mobile navigation panel. */
  .mpt-nav-submenu,
  .mpt-nav-group.open > .mpt-nav-submenu {
    position: static;
    display: grid;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mpt-nav-submenu a {
    min-height: 42px !important;
    padding: 10px 8px !important;
    font-weight: 650 !important;
  }

  .mpt-nav-submenu .portal-theme-toggle,
  .mpt-nav-submenu .town-context-control {
    min-height: 42px;
    padding: 10px 8px !important;
  }

  html[data-theme="dark"] .mpt-nav-submenu,
  body.theme-dark .mpt-nav-submenu {
    background: transparent;
    box-shadow: none;
  }

  #portal-nav.town-context-menu,
  #town-context-menu.town-context-menu {
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    max-height: calc(var(--mpt-visual-viewport-height, 100dvh) - 84px);
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    scroll-padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}