/* Publieke site: vlakke, rustige opmaak (okt 2026). Wordt als laatste geladen in _Layout.
   Goedgekeurd door de eigenaar: schaduwen weg (alleen wat over de pagina zweeft houdt er een),
   leesbaarheid, formulieren, tikvlakken op mobiel. Iconen en illustraties blijven ongemoeid. */

:root {
    --pv-groen: #005b41;
    --pv-rand: #dbe2de;
    --pv-rand-veld: #c9d3cf;
    --pv-tekst-zacht: #5f6b66;
}

/* ---------- 1. Schaduwen: vaste onderdelen vlak ---------- */
header.header-nav,
.shadow:not(#cookieBanner),
.shadow-sm,
.card,
.mosque-card,
.type-card,
.facility-card,
.category-card,
.card-with-badge,
.badge,
.form_grid,
.login-card {
    box-shadow: none !important;
}
/* Wat zijn schaduw verliest, krijgt een dunne rand zodat het zich blijft onderscheiden */
.mosque-card,
.type-card,
.category-card,
.login-card,
.form_grid,
.card-with-badge,
.card.shadow,
.card.shadow-sm,
.card.facility-card {
    border: 1px solid var(--pv-rand) !important;
}
/* Witte balken (kruimelpad, zoek/filter) scheiden met een lijn in plaats van een schaduw */
.container-fluid.shadow.bg-white,
.pv-balk {
    border-bottom: 1px solid var(--pv-rand);
}

/* ---------- 2. Leesbaarheid ---------- */
/* Grijze labels en hulpteksten: donkerder grijs (contrast >= 4,5:1) */
label,
.form-label,
.info-label,
.text-muted {
    color: var(--pv-tekst-zacht);
}
label.text-black,
.form-label.text-black {
    color: #000;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pv-tekst-zacht);
}
::placeholder {
    color: #6b7671;
    opacity: 1;
}

/* Te kleine tekst op kaarten (mobiel stond op 9,5-11,5px): minimaal 12px */
@media (max-width: 767.98px) {
    .type-chip { font-size: 12px !important; }
    #mosque-container .position-relative > .badge { font-size: 12px !important; }
    #mosque-container .card-text { font-size: 13px !important; }
    #mosque-container .card-body .btn-success { font-size: 13px !important; }
    .col-md-6.col-lg-3[data-category] .category-badge { font-size: 12px !important; }
    .badge.bg-success.text-dark { font-size: 12px !important; }
}

/* ---------- 3. Formulieren ---------- */
/* Witte velden met een dunne rand in plaats van grijze vlakken */
.custom-input,
.mosque-text-input,
.facility-input,
.form_grid .form-control,
#contactForm .form-control {
    background-color: #fff !important;
    border: 1px solid var(--pv-rand-veld) !important;
}
.custom-input:focus,
.mosque-text-input:focus,
.facility-input:focus,
.form_grid .form-control:focus,
#contactForm .form-control:focus {
    border-color: var(--pv-groen) !important;
    outline: 2px solid var(--pv-groen);
    outline-offset: 1px;
    box-shadow: none !important;
}
/* Op mobiel minimaal 16px in invoervelden, anders zoomt een iPhone automatisch in */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
    select,
    textarea,
    .select2-container .select2-selection__rendered {
        font-size: 16px !important;
    }
}

/* ---------- 4. Tikvlakken op mobiel (minimaal 44px) ---------- */
@media (max-width: 767.98px) {
    .footer_qlink_widget li a { display: inline-block; padding: 11px 0; }
    .footer_social_widget a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    #closeFilter { min-width: 44px; min-height: 44px; }
    #acceptCookies, #rejectCookies { min-height: 44px; }
    #resetFiltersMobile { min-height: 44px; }
    #mosque-container .card-body .btn-success { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .wizard .backButton, .wizard .nextButton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .form-check { min-height: 44px; display: flex; align-items: center; }
    .form-check-label { padding: 10px 6px; }
}

/* ---------- 5. Restpunten na de tweede meting ---------- */
/* Pagina's die zelf --text-muted (#949494) zetten: donkerder via de body (dichterbij dan :root) */
/* Standaard tekstkleur van het oude thema was #777 (4,48:1, net onder de norm): iets donkerder */
body {
    color: #4b5853;
    --text-muted: #5f6b66;
}
.stad-kop p {
    color: var(--pv-tekst-zacht);
}
body .info-label,
body .text-secondary,
body .text-muted {
    color: var(--pv-tekst-zacht) !important;
}
/* Lijst/Kaart-knop: tekst volgt de knop (actief = wit via script, niet-actief = donkergrijs) */
.sidebar-btn {
    color: #4b5853;
}
.sidebar-btn span,
.sidebar-btn i {
    color: inherit;
}
/* Labels op organisatiekaarten: ook op de computer minimaal 12px */
body .col-md-6.col-lg-3[data-category] .category-badge,
body .badge.bg-success.text-dark {
    font-size: 12px !important;
}
@media (max-width: 767.98px) {
    .close-banner { min-width: 44px; min-height: 44px; }
    .banner-btn, .tab-button, #useMyLocationMobile { min-height: 44px; }
    .pagination .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .kebab-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Keuzelijsten in de aanmeldformulieren: zelfde witte velden als de tekstvelden */
.mosque-field-group select,
.mosque-field-group .form-select {
    background-color: #fff !important;
    border: 1px solid var(--pv-rand-veld) !important;
}