.menu {
  width: 100%;
}

.menu__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.menu-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

.menu-arrow svg {
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

@media (min-width: 1200px) {
  .menu.menu__mobile {
    display: none;
  }

  .menu__list {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .menu.menu__top .menu__list {
    justify-content: flex-end;
  }

  .menu.menu__bottom .menu__list {
    padding: 0 var(--wrap);
    justify-content: space-between;
  }

  .menu__list > .menu-item > .menu-row > .menu-arrow {
    display: none !important;
  }

  .menu-item {
    position: relative;
  }

  .menu-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .menu-arrow {
    margin-left: 6px;
    pointer-events: none;
  }

  .menu.menu__top .menu-item:hover .menu__link {
    color: var(--color-text-primary);
  }

  .menu-item:hover > .menu-row .menu-arrow svg,
  .menu-item:has(:focus-visible) > .menu-row .menu-arrow svg {
    transform: rotate(180deg);
  }

  .menu__link span {
    position: relative;
    text-align: center;
  }

  .menu__link span::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .menu-item:hover > .menu-row .menu__link span::before {
    transform: scaleX(1);
  }


  .sub-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* Drops from the menu item it belongs to rather than rising towards it. */
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
    position: absolute;
    min-width: 320px;
    background: var(--color-surface-card);
    border: 1px solid rgba(var(--color-ink--rgb), 0.05);
    padding: 0;
    z-index: 100;
    flex-direction: column;
    box-shadow: none;
    top: 100%;
    left: 0;
  }

  /* The item's row is as tall as the bar, so its dropdown hangs right from
     the bar's edge with no gap to bridge. The items used to reach 15px past
     the bar for that, and the invisible strip took the clicks meant for what
     lies just under the header (the tab of the section bar). */
  .menu__list > .menu-item > .sub-menu {
    top: 100%;
  }

  .menu__bottom .sub-menu {
    background: var(--color-blue-200);
    color: var(--color-white);
    left: 0;
    right: auto;
    border: none;
  }

  /* Items on the right side of the menu should open dropdowns to the left */
  .menu__list > .menu-item:nth-last-child(-n+3) > .sub-menu {
    right: 0;
    left: auto;
  }

  /* A keyboard user tabbing into a section opens its submenu the same way the
     pointer does; :focus-visible keeps a mouse click from pinning it open. */
  .menu-item:hover > .sub-menu,
  .menu-item:has(:focus-visible) > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sub-menu .menu-item {
    width: 100%;
    border-bottom: 1px solid rgba(var(--color-ink--rgb), 0.05);
    position: relative;
  }
  
  .sub-menu .menu-item:hover {
    background-color: rgba(var(--color-ink--rgb), 0.04);
  }

  .menu__bottom .sub-menu .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sub-menu .menu-item:last-child {
    border-bottom: none;
  }

  .sub-menu .menu-row {
    width: 100%;
    padding: 0;
  }

  .sub-menu .menu__link {
    font-size: 0.9rem;
    flex-grow: 1;
    padding: 5px 15px;
    width: auto;
    color: inherit;
  }

  .sub-menu .menu__link span {
    text-align: left;
    display: block;
  }

  .sub-menu .menu-arrow {
    margin-left: auto;
    padding-right: 15px;
  }

  .sub-menu .sub-menu {
    top: 0 !important;
    bottom: auto !important;
    left: 100%;
    right: auto;
    overflow-y: auto;
    max-height: calc(100vh - 40px);
    overscroll-behavior: contain;
    background-color: var(--color-bg-secondary);
    transition: top 0.2s ease-out;
  }
  
  .menu__bottom .sub-menu .sub-menu {
    background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
    background-color: var(--color-blue-200);
  }

  /* 3rd level sub-menus on the right side of the screen should open to the left */
  .menu__list > .menu-item:nth-last-child(-n+3) .sub-menu .sub-menu {
    right: 100%;
    left: auto;
  }


}

@media (max-width: 1199px) {
  .menu.menu__top,
  .menu.menu__bottom {
    display: none;
  }

  .menu.menu__mobile {
    color: var(--color-white);
    font-size: 1.1rem;
    line-height: 1.4;
    display: block;
    width: 100%;
    overflow-x: hidden;
    margin-top: 0;
  }

  .menu__mobile .menu-item-has-children > a::after,
  .menu__mobile .menu-item-has-children > a::before {
    content: none !important;
    display: none !important;
  }

  .menu__mobile .menu-item {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu__mobile .menu-row {
    display: flex;
    width: 100%;
    min-height: 50px;
    background: transparent;
    position: relative;
    z-index: 2;
    align-items: stretch;
    transition: background-color 0.3s ease;
  }

  .menu__mobile .menu__link {
    flex: 1;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    word-break: break-word;
    hyphens: auto;
  }

  .menu__mobile .menu__link span {
    display: block;
    width: 100%;
  }

  .menu__mobile .menu-arrow {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    background: transparent;
  }

  .menu__mobile .menu-item._open > .menu-row {
    background: rgba(255, 255, 255, 0.05);
  }

  .menu__mobile .menu-item._open > .menu-row .menu-arrow svg {
    transform: rotate(180deg);
  }

  .menu__mobile .sub-menu {
    display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0 !important;
  }

  .menu__mobile .menu-item._open > .sub-menu {
    display: block;
    animation: mobileSlideDownFade 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  
  @keyframes mobileSlideDownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .menu__mobile .sub-menu .menu-row {
    min-height: 40px;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  }

  .menu__mobile .sub-menu .menu__link {
    padding: 12px 15px 12px 20px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0;
    transition: background 0.2s, color 0.2s, padding-left 0.3s ease;
  }
  
  .menu__mobile .sub-menu .menu__link:hover,
  .menu__mobile .sub-menu .menu__link:active {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding-left: 25px;
  }

  .menu__mobile .sub-menu .sub-menu {
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 !important;
    margin-top: 0;
  }

  .menu__mobile .sub-menu .sub-menu .menu-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  }

  .menu__mobile .sub-menu .sub-menu .menu-item:last-child .menu-row {
    border-bottom: none;
  }

  .menu__mobile .sub-menu .sub-menu .menu__link {
    padding: 10px 15px 10px 25px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 0;
  }
  
  .menu__mobile .sub-menu .sub-menu .menu__link:hover,
  .menu__mobile .sub-menu .sub-menu .menu__link:active {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    padding-left: 30px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}