/* ============================================================
   Bestand: public_html/assets/themes/_local_portal/css/search.css
   ============================================================

   Het gedeelde zoekveld en de zoekresultaten van de portalsites.

   Waarom dit een eigen bestand is: een thema met een eigen schil laadt alleen zijn eigen
   theme.css, dus alles wat in _local_portal/css/theme.css staat komt daar nooit aan. De
   zoekpagina kreeg daardoor de standaardvormgeving van de browser midden in een verzorgde
   site. Dit blad wordt door de partial zelf ingeladen, net zoals de modules dat doen, en
   staat er dus altijd als het formulier er staat.

   Alle kleuren gaan via portal-variabelen met een terugval, zodat elk thema hem in zijn
   eigen kleuren krijgt zonder dat dit bestand iets van dat thema hoeft te weten.
   ============================================================ */

.portal-zoek__label {
    display: block;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--portal-muted, #6b7280);
}
.portal-zoek__verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* De drie velden vormen één ding: invoer, plaats, knop. Vandaar één rand eromheen en geen
   losse randjes per veld; dat las als drie losse bedieningen voor één handeling. */
.portal-zoek__rij {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--portal-border, #d5d8de);
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    overflow: hidden;
}
.portal-zoek__rij:focus-within {
    border-color: var(--portal-primary, #14213d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-primary, #14213d) 18%, transparent);
}
.portal-zoek__veld,
.portal-zoek__plaats {
    min-width: 0;
    padding: .6rem .7rem;
    border: 0;
    background: transparent;
    color: var(--portal-text, #1f2430);
    font: inherit;
    font-size: .95rem;
}
.portal-zoek__veld { flex: 1 1 auto; }
.portal-zoek__veld:focus,
.portal-zoek__plaats:focus { outline: none; }
.portal-zoek__plaats {
    flex: 0 0 auto;
    max-width: 42%;
    border-left: 1px solid var(--portal-border, #d5d8de);
    color: var(--portal-muted, #6b7280);
    cursor: pointer;
}
.portal-zoek__knop {
    flex: 0 0 auto;
    padding: 0 .85rem;
    border: 0;
    background: var(--portal-primary, #14213d);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
}
.portal-zoek__knop:hover { filter: brightness(1.12); }
.portal-zoek__uitleg {
    margin: .45rem 0 0;
    color: var(--portal-muted, #6b7280);
    font-size: .8rem;
    line-height: 1.5;
}

/* Op de zoekpagina zelf staat hij ruimer, want daar is hij het onderwerp en niet een hoekje
   van de rail. */
.portal-zoek--pagina { margin: 0 0 1.4rem; }
.portal-zoek--pagina .portal-zoek__veld { font-size: 1.05rem; padding: .75rem .85rem; }

.portal-zoek-telling,
.portal-zoek-melding {
    margin: 0 0 1rem;
    color: var(--portal-muted, #6b7280);
    font-size: .95rem;
}

.portal-zoek-treffers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.portal-zoek-treffer {
    display: grid;
    gap: .3rem;
    padding: 14px 16px;
    border: 1px solid var(--portal-border, #d5d8de);
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.portal-zoek-treffer:hover {
    border-color: var(--portal-primary, #14213d);
    transform: translateY(-1px);
}
.portal-zoek-treffer__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}
.portal-zoek-treffer__titel {
    color: var(--portal-heading, var(--portal-text, #1f2430));
    font-weight: 600;
    font-size: 1.02rem;
}
.portal-zoek-treffer__soort {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--portal-primary-soft, rgba(0, 0, 0, .06));
    color: var(--portal-primary, #14213d);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portal-zoek-treffer__tekst {
    color: var(--portal-text, #1f2430);
    font-size: .92rem;
    line-height: 1.6;
}
.portal-zoek-treffer__plaats {
    color: var(--portal-muted, #6b7280);
    font-size: .8rem;
}

/* Op een telefoon past de plaatskeuze niet meer naast de invoer zonder dat allebei te smal
   worden; dan onder elkaar, nog steeds als één blok. */
@media (max-width: 460px) {
    .portal-zoek__rij { flex-wrap: wrap; }
    .portal-zoek__veld { flex: 1 1 100%; }
    .portal-zoek__plaats {
        flex: 1 1 auto;
        max-width: none;
        border-left: 0;
        border-top: 1px solid var(--portal-border, #d5d8de);
    }
    .portal-zoek__knop { border-top: 1px solid var(--portal-border, #d5d8de); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-zoek-treffer { transition: none; }
    .portal-zoek-treffer:hover { transform: none; }
}

/* ── Over ons: de uitgebreide secties ────────────────────────────────────────
   Staan hier en niet in elk thema-CSS-bestand: de vorm is gedeeld, de kleuren komen uit
   portal-variabelen met een terugval. Zo krijgt elk portalthema hetzelfde blok in zijn eigen
   kleuren zonder dat dit bestand iets van dat thema hoeft te weten. Dit blad wordt geladen
   door het gedeelde zoekformulier, dat op elke portalpagina staat. */
.fr-over-blok { margin: 2.4rem 0 0; }
.fr-over-kop {
    margin: 0 0 .5rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-over-lead { margin: 0 0 1.1rem; color: var(--portal-muted); font-size: .96rem; line-height: 1.6; }

.fr-over-cijferrij {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fr-over-cijfer {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 16px 18px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
    text-decoration: none;
}
a.fr-over-cijfer:hover { border-color: var(--portal-primary); }
.fr-over-cijfer-getal {
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--portal-primary);
}
.fr-over-cijfer-label { color: var(--portal-muted); font-size: .86rem; line-height: 1.45; }

/* Twee kolommen en niet zoveel als er passen. Met vier blokken gaf drie kolommen altijd 3+1,
   met een verdwaald blok op de tweede regel; hetzelfde euvel als bij de knoppen in het
   snelvenster. Twee kolommen geeft bij vier blokken een net vierkant en bij drie een volle
   regel plus een halve. */
.fr-over-waarden {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.fr-over-waarde {
    padding: 18px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-over-waarde h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-over-waarde p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.65; }

.fr-over-stappen { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fr-over-stappen li { display: flex; gap: .9rem; align-items: flex-start; }
.fr-over-stapnr {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--portal-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}
.fr-over-staptekst { display: flex; flex-direction: column; gap: .15rem; }
.fr-over-staptekst strong { color: var(--portal-heading, var(--portal-text)); font-size: 1rem; }
.fr-over-staptekst span { color: var(--portal-text); font-size: .93rem; line-height: 1.6; }

/* Contact: de routekaarten hebben een doorklik onderaan, en de veelgestelde vragen zijn
   uitklapbaar zonder script. */
.fr-contact-routelink { margin: .7rem 0 0; }
.fr-contact-routelink a {
    color: var(--portal-primary);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.fr-contact-routelink a:hover { text-decoration: underline; }

.fr-contact-faq { display: grid; gap: 8px; }
.fr-contact-vraag {
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-contact-vraag > summary {
    padding: 14px 16px;
    color: var(--portal-heading, var(--portal-text));
    font-weight: 600;
    font-size: .96rem;
    cursor: pointer;
    list-style: none;
}
/* Het standaard-driehoekje van de browser staat links en springt; een eigen teken rechts blijft
   op zijn plek en draait netjes mee. */
.fr-contact-vraag > summary::-webkit-details-marker { display: none; }
.fr-contact-vraag > summary::after {
    content: '+';
    float: right;
    margin-left: 1rem;
    color: var(--portal-primary);
    font-weight: 700;
}
.fr-contact-vraag[open] > summary::after { content: '\2212'; }
.fr-contact-vraag > p {
    margin: 0;
    padding: 0 16px 14px;
    color: var(--portal-text);
    font-size: .93rem;
    line-height: 1.65;
}
.fr-contact-verwachting .fr-over-lead { max-width: 62ch; }

/* Historie: de weetjes. Twee kolommen op een breed scherm, één op een telefoon; elk weetje is
   een afgerond blok zodat je er eentje uit kunt pikken zonder de rest te lezen. */
.fr-weetjes-rij {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fr-weetje {
    padding: 18px;
    border: 1px solid var(--portal-border);
    border-left: 3px solid var(--portal-primary);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-weetje h3 {
    margin: 0 0 .4rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-weetje p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.7; }

/* ── Inloggen en registreren ─────────────────────────────────────────────────
   Het formulier en het zijblok naast elkaar, en samen vullen ze de kolom. Eerder stond het
   formulier op 480 pixels midden in een kolom van 832, met aan weerskanten een lege strook. */
.fr-auth-tweeluik {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
}
@media (max-width: 900px) {
    .fr-auth-tweeluik { grid-template-columns: minmax(0, 1fr); }
}
.fr-auth-zij {
    padding: 20px;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: var(--portal-surface-soft, var(--portal-surface, #fff));
}
.fr-auth-zij-kop {
    margin: 0 0 .8rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-auth-voordelen { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .8rem; }
.fr-auth-voordelen li { display: flex; flex-direction: column; gap: .15rem; }
.fr-auth-voordelen strong { color: var(--portal-heading, var(--portal-text)); font-size: .97rem; }
.fr-auth-voordelen span { color: var(--portal-muted); font-size: .89rem; line-height: 1.6; }
.fr-auth-regels h3 {
    margin: 0 0 .5rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-auth-regels ul { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .4rem; }
.fr-auth-regels li { color: var(--portal-text); font-size: .89rem; line-height: 1.6; }
.fr-auth-privacy {
    margin: 0;
    padding-top: .9rem;
    border-top: 1px solid var(--portal-border);
    color: var(--portal-muted);
    font-size: .84rem;
    line-height: 1.6;
}
.fr-auth-kicker { margin: .8rem 0 0; }

/* ── Wachtwoordhulp ──────────────────────────────────────────────────────────
   De eis en het advies zien er met opzet anders uit: alleen de eis krijgt een vinkje en het
   woord "verplicht". Een advies dat eruitziet als een eis liegt over wat de server doet. */
.fr-ww-hulp { margin: .5rem 0 0; }
.fr-ww-eisen, .fr-ww-adviezen { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.fr-ww-eisen li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--portal-text);
    font-size: .88rem;
}
.fr-ww-vink {
    flex: 0 0 auto;
    display: inline-block;
    width: 16px; height: 16px;
    border: 1.5px solid var(--portal-border);
    border-radius: 4px;
    position: relative;
}
.fr-ww-eisen li.is-goed .fr-ww-vink {
    border-color: var(--portal-primary);
    background: var(--portal-primary);
}
.fr-ww-eisen li.is-goed .fr-ww-vink::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fr-ww-verplicht {
    margin-left: auto;
    color: var(--portal-muted);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.fr-ww-advies-kop {
    margin: .8rem 0 .35rem;
    color: var(--portal-muted);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.fr-ww-adviezen li {
    padding-left: 1.1rem;
    position: relative;
    color: var(--portal-muted);
    font-size: .85rem;
    line-height: 1.55;
}
.fr-ww-adviezen li::before { content: '·'; position: absolute; left: .35rem; }
.fr-ww-adviezen li.is-goed { color: var(--portal-text); }

.fr-ww-sterkte { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
.fr-ww-sterkte-balk {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--portal-border);
    overflow: hidden;
}
.fr-ww-sterkte-balk > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--portal-primary);
    transition: width .2s ease;
}
/* Klassen en geen attribuutwaarden: twee regels die alleen in de waarde van hetzelfde attribuut
   verschillen tellen als dezelfde selector zodra je ze normaliseert, en CssDuplicatenTest wees daar
   terecht op. Met klassen zijn het twee echte selectors. */
.fr-ww-sterkte.is-zwak .fr-ww-sterkte-balk > span { background: #b23b3b; }
.fr-ww-sterkte.is-matig .fr-ww-sterkte-balk > span { background: #c07a2c; }
.fr-ww-sterkte-tekst { color: var(--portal-muted); font-size: .78rem; white-space: nowrap; }

/* Meekijken met het wachtwoord: de knop staat ín het veld, dus het veld houdt zijn breedte. */
.fr-ww-wikkel { position: relative; display: block; }
.fr-ww-wikkel > input { width: 100%; padding-right: 5.2rem; }
.fr-ww-kijk {
    position: absolute;
    top: 50%; right: .5rem;
    transform: translateY(-50%);
    padding: .25rem .55rem;
    border: 1px solid var(--portal-border);
    border-radius: 6px;
    /* Doorzichtig en niet var(--portal-surface): die kleur pakt per thema anders uit en gaf op
       julianadorp een donkergevulde knop midden in een wit invoerveld. Hij staat toch al op de
       achtergrond van het veld zelf. */
    background: transparent;
    color: var(--portal-muted);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.fr-ww-kijk:hover { color: var(--portal-primary); border-color: var(--portal-primary); }

@media (prefers-reduced-motion: reduce) {
    .fr-ww-sterkte-balk > span { transition: none; }
}