/* ==========================================================================
   dikkebirdpics — Alfabetische lijst ([dbp_alfabetisch])
   Tekstlijst met letterkoppen + A–Z sprongnavigatie, Poppins, in stijl met
   de rest van de site. Vrij aanpasbaar via de variabelen.
   ========================================================================== */

.dbp-alf {
    --dbp-alf-cols:   3;        /* kolommen binnen een lettergroep (desktop) */
    --dbp-alf-gap:    .25rem 2.5rem;  /* rij- en kolomafstand tussen namen */
    --dbp-alf-maxw:   1100px;   /* leesbare breedte */
    --dbp-alf-accent: currentColor; /* kleur van letterkop/streep */

    max-width: var(--dbp-alf-maxw);
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
    box-sizing: border-box;
}

/* --- A–Z sprongnavigatie --- */
.dbp-alf-az {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .4rem;
    justify-content: center;
    position: sticky;
    top: 0;
    padding: .9rem 0;
    margin-bottom: 1.5rem;
    background: inherit;
    z-index: 5;
}
.dbp-alf-az a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .3rem;
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    border-radius: 3px;
    opacity: .7;
    transition: opacity .2s ease, background .2s ease;
}
.dbp-alf-az a:hover {
    opacity: 1;
    background: rgba(127,127,127,.18);
}

/* --- Lettergroep --- */
.dbp-alf-groep {
    margin-bottom: 2.25rem;
    scroll-margin-top: 4.5rem;  /* zodat sticky nav de kop niet bedekt */
}
.dbp-alf-letter {
    font-weight: 500;
    font-size: 1.6rem;
    margin: 0 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(127,127,127,.25);
    scroll-margin-top: 4.5rem;
}

/* --- Namenlijst in kolommen --- */
.dbp-alf-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: var(--dbp-alf-cols);
    column-gap: 2.5rem;
}
.dbp-alf-lijst li {
    break-inside: avoid;
    margin: 0;
    padding: .18rem 0;
}
.dbp-alf-lijst a {
    font-weight: 300;          /* light, zoals Squarespace bodytekst */
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity .15s ease;
    opacity: .85;
}
.dbp-alf-lijst a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dbp-alf-leeg {
    text-align: center;
    padding: 4rem 1rem;
    opacity: .6;
}

/* --- Responsive --- */
@media (max-width: 800px) {
    .dbp-alf { --dbp-alf-cols: 2; }
}
@media (max-width: 500px) {
    .dbp-alf { --dbp-alf-cols: 1; }
    .dbp-alf-az { font-size: .9rem; }
}