/* One component, one file, named after the partial it styles. That is
   what keeps search_files and edit_file useful as the site grows. */

@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: 0.7rem;
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--color-line);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
  }

  .brand__mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  /* Vast, niet vloeiend: het woordmerk hoort in de balk niet mee te
     groeien met het scherm. */
  .brand__word {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .brand__word strong {
    font-weight: 800;
  }

  .site-header__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Menu-items staan onder de tekstgrootte van de pagina: navigatie
     hoort te wijzen, niet mee te schreeuwen met de inhoud. */
  .site-nav a {
    color: var(--color-ink);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav a:hover {
    color: var(--color-accent);
  }

  .site-nav a[aria-current='page'] {
    color: var(--color-accent);
  }

  /* Topniveau: een lijntje in het merkverloop dat zichzelf tekent.
     Hetzelfde gebaar voor hover, toetsenbord en de actieve pagina. */
  .site-nav__list > .site-nav__item > a {
    position: relative;
  }

  .site-nav__list > .site-nav__item > a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -0.4rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-text);
    scale: 0 1;
    transform-origin: 0 50%;
    transition: scale var(--motion);
  }

  .site-nav__list > .site-nav__item > a:hover::after,
  .site-nav__list > .site-nav__item > a:focus-visible::after,
  .site-nav__list > .site-nav__item > a[aria-current='page']::after {
    scale: 1 1;
  }

  .site-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .site-header__actions .button {
    padding: 0.5em 1.05em;
    font-size: 0.9rem;
  }

  /* Mobiel menu ---------------------------------------------------- */
  .nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    cursor: pointer;
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 1rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  .nav-toggle__bars {
    position: relative;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .nav-toggle__bars::before { top: -5px; }
  .nav-toggle__bars::after { top: 5px; }

  /* Open toestand: de drie balkjes worden een kruis. */
  .nav-toggle__bars {
    transition: background var(--motion);
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    transition: translate var(--motion), rotate var(--motion);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
    translate: 0 5px;
    rotate: 45deg;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
    translate: 0 -5px;
    rotate: -45deg;
  }

  @media (max-width: 60rem) {
    .nav-toggle {
      display: inline-flex;
    }

    .site-header__panel {
      display: none;
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-m);
      padding-block: var(--space-m) var(--space-s);
    }

    .site-header__panel[data-open] {
      display: flex;
      max-height: calc(100dvh - 3.6rem);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Open menu gedraagt zich als een laag: de pagina eronder
       scrolt niet mee. */
    body[data-nav-open] {
      overflow: hidden;
    }

    @media (prefers-reduced-motion: no-preference) {
      .site-header__panel[data-open] {
        transition: opacity var(--motion-entrance), translate var(--motion-entrance);
      }

      @starting-style {
        .site-header__panel[data-open] {
          opacity: 0;
          translate: 0 -0.5rem;
        }
      }
    }

    /* Menuregels als rijen met een scheidingslijn, zoals een lijst
       op een telefoon hoort te lezen. */
    .site-nav__list {
      flex-direction: column;
      gap: 0;
    }

    .site-nav__item {
      border-block-end: 1px solid var(--color-line);
    }

    .site-nav__item:last-child {
      border-block-end: 0;
    }

    .site-nav__item > a {
      display: block;
      padding-block: 0.8rem;
      font-size: var(--step-0);
    }

    /* Geen zwevende onderstreping in de rijenlijst. */
    .site-nav__list > .site-nav__item > a::after {
      display: none;
    }

    .site-header__actions .button {
      flex: 1;
      justify-content: center;
      font-size: var(--step-0);
    }
  }
}