/*
 * Het ruime zoekveld.
 *
 * Het zoekformulier komt op twee maten voor. In de header is het een smalle pil
 * met een verborgen knop; die opmaak staat in main.css, want de header staat op
 * elke pagina. Op het blogoverzicht en de zoekresultaten is het een breed veld
 * met een zichtbare knop erin, en dat is wat hier staat.
 *
 * De twee lijken sinds de header wit is sterk op elkaar: allebei een lichte
 * vulling met een rand eromheen. Ze blijven gescheiden omdat de maten
 * verschillen — 40 tegen 52 pixels hoog, en een knop die daar altijd in beeld
 * 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;
}

/*
 * Het kruisje dat het veld leegmaakt staat vóór de loep, en die is hier 38
 * pixels breed in plaats van de 30 uit de header. De basisopmaak van het
 * kruisje staat in main.css; hier staan alleen de maten die met dat bredere
 * veld te maken hebben.
 */
.zoekFormulierRuim .zoekWissen {
    right: 50px;
    width: 30px;
    height: 30px;
}

.zoekFormulierRuim .zoekWissen svg {
    width: 10px;
    height: 10px;
}

.zoekFormulierRuim.zoekGevuld .zoekVeld {
    padding-right: 88px;
}