@layer components {
  /* The phone menu under the hamburger: the pages, the language menu and the call to action.
     Open, it fills the screen and scrolls, so nothing in it is cut off however long it gets. */
  header:has(.mobile-menu.show) {
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu {
    position: absolute;
    inset-inline: 0;
    z-index: 1000;
    display: none;
    min-block-size: 100%;
    padding: calc(var(--space-block) / 4) calc(var(--space-block) * 1.25) calc(var(--space-block) * 2);
    background: var(--color-surface);
    font-size: calc(var(--text-normal) * 1.125);

    > a {
      display: block;
      padding-block: calc(var(--space-block) * 0.75);
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink);
      text-decoration: none;
    }

    .contact-btn {
      margin-block-start: calc(var(--space-block) * 1.5);
      text-align: center;
    }
  }
}