/*
 * Het ruime zoekveld.
 *
 * Het zoekformulier komt op twee maten voor. In de blauwe headerbalk is het een
 * smalle pil met een verborgen knop; die opmaak staat in main.css, want de
 * header staat op elke pagina. Op een witte pagina — het blogoverzicht en de
 * zoekresultaten — is het een breed veld met een zichtbare knop erin, en dat is
 * wat hier staat.
 *
 * Gedeeld door home.css en search.css: wie op /blog/ zoekt, komt op de
 * zoekpagina uit en hoort daar hetzelfde veld terug te zien.
 *
 * Aanzetten door de klasse mee te geven aan het formulier:
 *
 *     get_search_form(['samitKlasse' => 'zoekFormulierRuim']);
 */

.zoekFormulierRuim {
    position: relative;
    display: block;
    max-width: 430px;
}

.zoekFormulierRuim .zoekVeld {
    width: 100%;
    padding: 14px 56px 14px 22px;
    border: 1px solid var(--kleurLijn);
    box-shadow: var(--schaduwZacht);
    font-size: var(--tekstBasis);
    transition:
        border-color var(--duurSnel) ease,
        box-shadow var(--duurSnel) ease;
}

.zoekFormulierRuim .zoekVeld:hover {
    border-color: #c2ccd6;
}

.zoekFormulierRuim .zoekVeld:focus-visible {
    border-color: var(--kleurBlauw);
    outline: 2px solid var(--kleurBlauw);
    outline-offset: 1px;
}

/*
 * In de header is de zoekknop visueel verborgen tot hij focus krijgt; hier hoort
 * hij gewoon in beeld te staan. Dat betekent alles terugzetten wat main.css
 * weghaalt — inclusief de :focus-visible-regel daar, vandaar de derde klasse in
 * de laatste selector.
 */
.zoekFormulierRuim .zoekKnop {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--randRond);
    background-color: var(--kleurBlauw);
    clip-path: none;
    color: var(--kleurWit);
    cursor: pointer;
    overflow: visible;
    place-items: center;
    transform: translateY(-50%);
    transition: background-color var(--duurSnel) ease;
}

.zoekFormulierRuim .zoekKnop:hover {
    background-color: var(--kleurOranje);
}

.zoekFormulierRuim .zoekKnop:focus-visible {
    position: absolute;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    outline: 2px solid var(--kleurBlauwDonker);
    outline-offset: 2px;
}