/*
 * bedankt.css — de bedankpagina na het contactformulier.
 *
 * Hoort bij bedankt.php en wordt alleen op die template ingeladen (baserules
 * regel 8), na reset.css en main.css.
 *
 * De maten komen van /bedankt-contact/ op sam-it-services.nl: een kolom van
 * 400 pixels midden op de pagina, 100 pixels lucht erboven en eronder, een kop
 * van 50 en een knop met 17,5 bij 50 pixels padding.
 *
 * Klassenamen zijn camelCase (regel 2).
 */

.bedanktPagina {
    padding-bottom: 100px;
}

/*
 * 100 pixels onder de header, net als daar. De standaardmarge van het
 * inhoudsgebied is 40, dus die moet hier weg.
 */
.siteInhoud {
    padding-top: 100px;
}

.bedanktKolom {
    max-width: 400px;
    margin-inline: auto;
    text-align: center;
}

.bedanktKop {
    margin-bottom: 50px;
    color: var(--kleurTekst);
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
}

.bedanktTekst {
    color: var(--kleurTekst);
    font-size: 15px;
    line-height: 27px;
}

/*
 * 52,5 pixels: 50 tussen de twee widgets op de bestaande site plus de 2,5 die
 * daar van de eigen ondermarge van de alinea overblijft. Zie dezelfde
 * berekening bij .contactIntro in contact.css.
 */
.bedanktKnopRegel {
    margin-top: 52.5px;
}

.bedanktKnop {
    display: inline-block;
    padding: 17.5px 50px;

    /* 3 pixels en niet de 7 van de rest van de site: dat is de afronding die
       de knop daar heeft, want er staat geen eigen waarde op. */
    border-radius: 3px;
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    transition: background-color var(--duurMd) var(--versnelling);
}

.bedanktKnop:hover,
.bedanktKnop:focus-visible {
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}