/* Opaque, bright syntax colors stay legible on the purple background. */
.highlight {
  --first-tone: #8be9b1;
  --second-tone: #c4b5fd;
  --comment: #b9b3ce;
}

/* Reveal the first keyboard stop without moving the page layout. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--background);
  border: 2px solid var(--accent);
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus {
  transform: translateY(0);
}

/* Keep native menu buttons visually consistent with the theme's triggers. */
.menu button.menu__trigger {
  font: inherit;
  line-height: inherit;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
}
.menu--mobile button.menu__trigger,
.menu--language-selector button.menu__trigger {
  border: 2px solid var(--accent);
  padding: 3px 8px;
}
.menu__dropdown[hidden] {
  display: none;
}

/* Keep section links reachable by keyboard as well as on hover. */
.hanchor {
  visibility: visible;
  opacity: 0;
}
:is(h1, h2, h3, h4, h5, h6):hover .hanchor,
.hanchor:focus {
  opacity: 1;
}

/* Let mobile menu labels fit while keeping the dropdown within the viewport. */
@media (max-width: 684px) {
  .menu--mobile .menu__dropdown {
    width: max-content;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
  }
}

/* Compact reference directory, scoped to Handy Utilities. */
.utilities .post-content h2 {
  margin-top: 3rem;
}
.utilities .post-content h3 {
  margin: 1.75rem 0 .4rem;
  font-size: 1rem;
}
.utilities .post-content h3::before {
  content: none;
}
.utilities .post-content h3 + p {
  margin-top: .4rem;
  color: var(--light-color, #b8b8b8);
}
.utilities .post-content p {
  overflow-wrap: anywhere;
}
.utilities .post-content pre {
  max-width: 100%;
  overflow-x: auto;
}