/* Let touch users explore the project links in a native horizontal rail. */
@media (max-width: 800px) {
  body.sober-home #projets nav.project-directory {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(224px, 78%, 300px);
    gap: 10px;
    inline-size: auto;
    margin-inline: -6px;
    padding: 6px 6px 11px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
  }

  body.sober-home #projets .project-directory a {
    grid-template-areas: "mark name arrow" "mark topic arrow";
    grid-template-columns: 26px minmax(0, 1fr) 12px;
    column-gap: 10px;
    min-block-size: 76px;
    padding-inline: 12px;
    border-radius: 12px;
    font-size: 14px;
    scroll-snap-align: start;
  }

  body.sober-home #projets .project-directory a:last-child {
    scroll-snap-align: end;
  }

  body.sober-home #projets .project-directory__topic {
    font-size: .875rem;
  }

  body.sober-home #projets .project-directory a:focus-visible {
    outline-offset: 2px;
  }

  /* Keep snap positions from overriding the keyboard focus scroll. */
  body.sober-home #projets nav.project-directory:has(a:focus-visible) {
    scroll-snap-type: none;
  }
}

/* The chevron sits in its own column at the right of the whole menu target. */
body.sober-home .site-header .project-switcher > summary > .project-switch-chevron {
  display: none;
}

@media (max-width: 900px) {
  body.home-page.sober-home .site-header .project-switcher > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    align-content: center;
    column-gap: 8px;
    min-block-size: 44px;
    padding-inline: 4px;
  }

  body.sober-home .site-header .project-switcher > summary > svg:not(.project-switch-chevron) {
    display: none;
  }

  body.sober-home .site-header .project-switcher > summary > svg.project-switch-chevron {
    display: block;
    grid-area: 1 / 2;
    justify-self: center;
    inline-size: 16px;
    block-size: 16px;
    fill: none;
    opacity: 1;
    transform: none;
  }

  body.sober-home .site-header .project-switcher[open] > summary > .project-switch-chevron {
    transform: rotate(180deg);
  }

  body.sober-home .site-header[data-project-theme="cetelem"] .project-switcher > summary.has-project-identity {
    grid-template-columns: minmax(0, 1fr) max-content 16px;
    column-gap: 6px;
  }

  body.sober-home .site-header[data-project-theme="cetelem"] .project-switcher > summary.has-project-identity > .project-switch-chevron {
    grid-column: 3;
    min-inline-size: 16px;
  }
}

@media (max-width: 359px) {
  body.sober-home .site-header .desktop-nav {
    flex-basis: 92px;
  }
}

@media (max-width: 360px) {
  body.sober-home .site-header[data-project-theme="cetelem"].has-project-identity .desktop-nav {
    flex-basis: 124px;
  }
}