/* De kop van een binnenpagina, en de kleine dingen die alleen op
   tekstpagina's voorkomen: vragenlijst en tabel. */

@layer components {
  .page-header {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-xl);
    background: var(--gradient-dark);
    color: #ffffff;
  }

  .page-header::after {
    content: '';
    position: absolute;
    right: -10rem;
    top: -14rem;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, #7c3aed 0%, transparent 65%);
    filter: blur(70px);
    opacity: 0.5;
  }

  .page-header__inner {
    position: relative;
    z-index: 1;
    max-width: 44rem;
  }

  .page-header h1 {
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .page-header p {
    margin-block-start: var(--space-s);
    color: rgb(255 255 255 / 0.75);
    font-size: var(--step-1);
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-m);
  }

  /* Veelgestelde vragen ------------------------------------------- */
  .faq {
    display: grid;
    gap: var(--space-2xs);
  }

  .faq details {
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: #ffffff;
  }

  .faq summary {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    cursor: pointer;
  }

  .faq details p {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Rij van koppelingen per categorie ------------------------------ */
  .tool-group {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-card);
  }

  .tool-group h3 {
    font-size: var(--step-1);
    font-weight: 700;
  }

  .tool-group p {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .tool-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tool-group li {
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--step--1);
    font-weight: 600;
  }
}