/* Buttons Multiple (academia_buttons_multiple)
 *
 * Meerdere knoppen op een regel. De filled- en border-varianten hergebruiken de
 * bestaande .button-classes (pink_button / pink_inverse) uit general.css; hier
 * staat alleen de rij-indeling en de tekstlink-variant, die nog niet bestond.
 */

.academia-buttons {
    display: flex;
    flex-wrap: wrap;
    /* Centreert de tekstlink vanzelf op dezelfde hoogte als de knoppen ernaast. */
    align-items: center;
    gap: 16px;
}

.academia-buttons--left {
    justify-content: flex-start;
}

.academia-buttons--center {
    justify-content: center;
}

.academia-buttons--right {
    justify-content: flex-end;
}

/* Tekstlink: geen knop, dus geen padding, rand of achtergrond. Typografie en
   kleur komen van .secondary_link uit general.css -- die class zet de handler
   erbij, zodat de tekstlink hier exact hetzelfde oogt als de secundaire link in
   de hero-header. */
.academia-buttons__link--text {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Binnen .entry-content kleurt page-default.css elke link roze en zet
   general.css de knoptekst wit. Voor de knopvarianten her-declareren we dat
   hier, met dezelfde opzet als button.css. */
.page-default-surface .academia-buttons .button,
.page-default-surface .academia-buttons .button:hover,
.page-default-surface .academia-buttons .button:focus {
    color: #fff;
    text-decoration: none;
}

/* De border-variant is roze op transparant, maar vult zich bij hover met
   donkerroze; dan hoort de tekst wit te zijn (zoals .pink_inverse:hover in
   general.css al regelt). Alleen de rusttoestand hoeft hier terug. */
.page-default-surface .academia-buttons .pink_inverse {
    color: var(--pink, #E4087E);
}

/* Tekstlink: .secondary_link levert font, letterspatiering en uppercase, maar
   verliest zijn kleur en gewicht aan .page-default-surface .entry-content a (die
   elke link roze en 700 maakt). Beide zetten we hier terug op de waarden van
   .secondary_link. */
.page-default-surface .academia-buttons .academia-buttons__link--text {
    color: var(--font-color, #0A2636);
    font-weight: 600;
}

.page-default-surface .academia-buttons .academia-buttons__link--text:hover,
.page-default-surface .academia-buttons .academia-buttons__link--text:focus {
    color: var(--pink, #E4087E);
    text-decoration: none;
}

/* Onder 500px is er geen ruimte voor knoppen naast elkaar: de filled- en
   border-varianten gaan over de volle breedte onder elkaar staan, de tekstlink
   blijft een link maar staat gecentreerd. box-sizing is nodig omdat .button in
   general.css geen border-box heeft: met 24px padding (en 2px rand bij de
   border-variant) zou width: 100% anders buiten de kolom vallen. */
@media (max-width: 499px) {
    .academia-buttons .academia-buttons__link {
        box-sizing: border-box;
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
    }
}