/* CodyHouse dropdown integration for the WordPress header. */
.header .dropdown__menu {
  list-style: none;
  margin: 0;
  width: 16rem;
  max-width: calc(100vw - 2rem);
}

.header .dropdown__item {
  white-space: normal;
}

.header .dropdown__item[aria-current="page"],
.header .dropdown__item:focus-visible {
  color: var(--color-primary);
}

.header .dropdown__wrapper:focus-within > .dropdown__menu,
.header .dropdown__sub-wrapper:focus-within > .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.header .dropdown__sub-wrapper:focus-within > .dropdown__menu {
  left: 100%;
}

.header .dropdown__sub-wrapper:focus-within > .dropdown__menu--left {
  left: -100%;
}

/* Keep every destination accessible without hover on small/touch screens. */
@media (max-width: 63.999rem), (pointer: coarse), (pointer: none) {
  .header .dropdown__menu {
    position: static;
    width: auto !important;
    max-width: none;
    margin-top: var(--space-2xs);
    padding: 0 0 0 var(--space-sm);
    border-left: 1px solid var(--color-contrast-lower);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .header .dropdown__trigger-icon,
  .header .dropdown__sub-wrapper > .dropdown__item .icon {
    display: none;
  }
}