/* Give the bookable city the same accent as each drawer's ticket card. */
#mobile-nav .cv-city-chips .apocv-city-guide {
  gap: .35em;
  color: #f8e46c;
  border-color: currentColor;
}
#mobile-menu.ac-mj-drawer .apocv-travel-menu .apocv-city-guide {
  color: var(--sand, #e3c97a);
}

/* The native header buttons already operate the drawers at every width. */
@media (min-width: 900px) {
  body[class*="vm-page-"] header.site-header.vm-attraction-header:has(> .menu-toggle) {
    /* The logo uses container-relative type, so it needs a definite column. */
    grid-template-columns: clamp(168px, 16vw, 192px) minmax(0, 1fr) 44px !important;
    column-gap: 8px;
  }
  body[class*="vm-page-"] header.site-header.vm-attraction-header > .menu-toggle[aria-controls="mobile-menu"] {
    grid-area: 1 / 3;
  }
  body[class*="vm-page-"] header.site-header.vm-attraction-header:has(> .menu-toggle) .desktop-nav {
    gap: clamp(4px, calc(4vw - 32px), 24px);
  }
  body:is(.cv-home, .apocv-main-site) .header-actions #menu-toggle,
  body[class*="vm-page-"] header.vm-attraction-header .menu-toggle[aria-controls="mobile-menu"] {
    display: inline-grid !important;
    flex: none;
    align-self: center;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  body[class*="vm-page-"] header.vm-attraction-header .menu-toggle[aria-controls="mobile-menu"] span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0;
    background: #fff;
  }
  body:is(.cv-home, .apocv-main-site) #mobile-nav.mm:not([hidden]),
  body:is(.cv-home, .apocv-main-site) .cv-menu-scrim:not([hidden]),
  body[class*="vm-page-"] #mobile-menu.ac-mj-drawer:not([hidden]),
  body[class*="vm-page-"] .ac-mj-scrim:not([hidden]) {
    display: block !important;
  }
  body:is(.cv-home, .apocv-main-site) #mobile-nav.mm[hidden],
  body[class*="vm-page-"] #mobile-menu.ac-mj-drawer[hidden] {
    display: none !important;
  }
}