.nav-group {
  position: relative;
}

.nav-group summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::marker {
  content: "";
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  min-width: 245px;
  padding: 0.65rem 1rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px rgba(16, 37, 61, 0.13);
  transform: translateX(-50%);
}

.nav-submenu a {
  display: block;
  padding: 0.45rem 0;
  white-space: nowrap;
}

.nav-submenu a + a {
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  header {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    padding: 1rem 5vw;
  }

  #menu {
    display: block;
    padding: 0.55rem 0.8rem;
    background: none;
    border: 1px solid var(--line);
  }

  nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0;
  }

  nav.open {
    display: flex;
  }

  .nav-group {
    width: 100%;
  }

  .nav-group summary {
    padding: 0.25rem 0;
  }

  .nav-submenu {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0.5rem 0.85rem;
    box-shadow: none;
    transform: none;
  }

  .nav-submenu a {
    white-space: normal;
  }
}