/* ============================================================
   Bestand: public_html/assets/modules/stad/css/prikbord.css
   ============================================================

   Het prikbord voor leden (v014.11.471): de foto op een briefje, en in het formulier de regel met het account,
   het fotoveld en de uitleg. Eén blad voor elk thema: het algemene sjabloon (stad-*) en de vier dorpen (fr-*).
   De kleuren komen uit de --fr-variabelen van het thema, met een neutrale terugval, net als public.css; een thema
   hoeft er niets voor te doen.

   Alleen de prik-klassen: de velden, knoppen en meldingen zelf houden de stijl van hun thema.
   ============================================================ */

/* De foto op een briefje: over de hele breedte, niet hoger dan het briefje breed is, met de hoeken van het thema. */
.prik-foto {
    margin: 0.55rem 0 0.2rem;
    padding: 0;
}

.prik-foto picture {
    display: block;
}

.prik-foto-beeld {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--fr-hoek-klein, 6px);
    border: 1px solid var(--fr-rand, rgba(0, 0, 0, 0.12));
    background-color: var(--fr-tint, #f4f2ec);
}

/* Het account in het formulier: vooraf ingevuld en alleen te lezen. */
.prik-lid input[readonly] {
    background: color-mix(in srgb, var(--fr-rand, #d9d5ca) 35%, transparent);
    color: var(--fr-stil, #5c574d);
    cursor: default;
}

.prik-uitleg {
    margin: 0.15rem 0 0.7rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fr-stil, #5c574d);
    max-width: none;
}

.prik-uitleg a {
    color: var(--fr-blauw, #1f4f8a);
    font-weight: 600;
}

/* Het fotoveld: een bestandskiezer is in de meeste browsers breder dan een telefoon. */
.prik-fotoveld input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 0.9375rem;
}

.prik-aanmelden {
    margin-top: 0.4rem;
}