/* sur:component-navigation; only the declared root */
#main-menu[hidden],
#main-menu [data-sur-panel][hidden] {
  display: none !important
}

:where(#main-menu) {
  list-style: none;
  margin: 0;
  padding: 0
}

:where(#main-menu .navigation) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap
}

:where(#main-menu .nav-item>a) {
  color: inherit
}

:where(#main-menu .nav-item .subnav ul) {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  max-width: calc(100vw - 16px);
  padding: 0;
  list-style: none;
  background: var(--sur-panel-bg, white);
  color: var(--sur-panel-color, black);
  z-index: 10
}

:where(#main-menu .nav-item .subnav ul a) {
  display: block;
  overflow-wrap: anywhere;
  color: inherit
}

:where(#main-menu [data-sur-align=end] .subnav ul) {
  left: auto;
  right: 0
}

:where(#main-menu .nav-item details:not([open])>ul) {
  display: none
}

:where(#main-menu .nav-item .subnav summary) {
  cursor: pointer;
  color: var(--sur-nav-trigger-color, inherit);
  background: none;
  border: 0;
  font: inherit
}

:where(#main-menu .nav-item .subnav summary .subnav-chevron) {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg)
}

:where(#main-menu .nav-item[data-sur-open] .subnav summary .subnav-chevron) {
  transform: rotate(225deg)
}

:where(#main-menu a:focus-visible),
:where(#main-menu .nav-item .subnav summary:focus-visible) {
  outline: 2px solid var(--sur-focus, currentColor);
  outline-offset: 2px
}

@media(max-width:1023px) {
  :where(#main-menu .navigation) {
    display: block
  }

  :where(#main-menu .nav-item .subnav ul) {
    position: static;
    max-width: 100%
  }

  :where(.menu-toggle),
  :where(#main-menu [data-sur-menu-close]) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px
  }
}

/* sur:standard-navigation-layout=2 */
#main-menu {
  --sur-nav-layout-version: 2
}

:where(#main-menu .nav-item) {
  display: grid;
  grid-template-columns: var(--sur-nav-start-reserve, 0px) minmax(0, 1fr) calc(var(--sur-nav-control-size, 44px) + var(--sur-nav-edge-gap, .5rem));
  grid-template-rows: auto;
  align-items: stretch;
  position: relative
}

:where(#main-menu .nav-item>a) {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: var(--sur-nav-row-height, 3rem);
  padding-block: var(--sur-nav-block-gap, .5rem);
  padding-inline: var(--sur-nav-edge-gap, .5rem) var(--sur-nav-label-gap, .5rem);
  box-sizing: border-box
}

:where(#main-menu .nav-item:not(:has(.subnav summary))) {
  grid-template-columns: 1fr
}

:where(#main-menu .nav-item:not(:has(.subnav summary))>a) {
  grid-column: 1
}

:where(#main-menu .nav-item details),
:where(#main-menu .nav-item details)::details-content {
  display: contents
}

:where(#main-menu .nav-item .subnav summary) {
  position: static;
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--sur-nav-control-size, 44px) + var(--sur-nav-edge-gap, .5rem));
  height: auto;
  min-height: 44px;
  padding: 0 var(--sur-nav-edge-gap, .5rem) 0 0;
  margin: 0;
  list-style: none;
  line-height: 1
}

:where(#main-menu .nav-item .subnav summary)::-webkit-details-marker {
  display: none
}

:where(#main-menu .nav-item .subnav summary .subnav-chevron) {
  display: block;
  flex: none;
  box-sizing: border-box;
  transform-origin: center
}

:where(#main-menu .nav-item .subnav ul) {
  grid-column: 1/-1;
  grid-row: 2;
  margin: 0
}

@media(max-width:1023px) {
  :where(#main-menu .nav-item:has(.subnav summary)>a) {
    margin-inline-end: 0
  }

  :where(#main-menu .nav-item .subnav summary) {
    min-width: 44px;
    min-height: 44px
  }
}

@media(min-width:0px) and (max-width:1023px) {
  :where(#main-menu .nav-item) {
    --sur-nav-start-reserve: 0px
  }

  :where(#main-menu .nav-item>a) {
    justify-content: flex-start;
    text-align: start;
    padding-inline: var(--sur-nav-edge-gap, .5rem) var(--sur-nav-label-gap, .5rem)
  }
}

@media(min-width:1024px) and (max-width:20000px) {
  :where(#main-menu .nav-item) {
    --sur-nav-start-reserve: calc(var(--sur-nav-control-size, 44px) + var(--sur-nav-edge-gap, .5rem))
  }

  :where(#main-menu .nav-item>a) {
    justify-content: center;
    text-align: center;
    padding-inline: var(--sur-nav-label-gap, .5rem)
  }
}

/* sur:component-style=1; first row paint is independent of the submenu */
:where(#main-menu) {
  --sur-nav-style-version: 1
}

:where(#main-menu .nav-item) {
  isolation: isolate;
  --sur-nav-active-bg: transparent;
  --sur-nav-active-color: inherit;
  --sur-nav-row-bg: var(--sur-nav-active-bg);
  --sur-nav-row-color: var(--sur-nav-active-color)
}

:where(#main-menu .nav-item)::before {
  content: "";
  grid-column: 1/-1;
  grid-row: 1;
  align-self: stretch;
  z-index: -1;
  pointer-events: none;
  background: var(--sur-nav-row-bg)
}

:where(#main-menu .nav-item:has(>a[aria-current="page"])) {
  --sur-nav-active-bg: var(--sur-nav-current-bg, transparent);
  --sur-nav-active-color: var(--sur-nav-current-color, inherit)
}

:where(#main-menu .nav-item:hover) {
  --sur-nav-row-bg: var(--sur-nav-hover-bg, var(--sur-nav-active-bg));
  --sur-nav-row-color: var(--sur-nav-hover-color, var(--sur-nav-active-color))
}

:where(#main-menu .nav-item[data-sur-open]) {
  --sur-nav-row-bg: var(--sur-nav-open-bg, var(--sur-nav-hover-bg, var(--sur-nav-active-bg)));
  --sur-nav-row-color: var(--sur-nav-open-color, var(--sur-nav-hover-color, var(--sur-nav-active-color)))
}

:where(#main-menu .nav-item>a, #main-menu .nav-item .subnav summary) {
  color: var(--sur-nav-row-color);
  background: transparent
}

:where(#main-menu .nav-item .subnav summary) .subnav-chevron {
  transition: transform 200ms ease;
  transform-origin: center
}

@media(prefers-reduced-motion:reduce) {
  :where(#main-menu .nav-item .subnav summary) .subnav-chevron {
    transition: none
  }
}

#main-menu[hidden],
#main-menu [data-sur-panel][hidden] {
  display: none !important
}