/* Nieuwe header (logo + hulpmiddelen + menubalk) en footer, nov 2026. HTML: functions/layout.php.
   Kleuren per domein komen als CSS-variabelen uit SiteConfig() (style-attribuut op header/footer):
   --sh-accent, --sh-donker, --sh-licht, --sh-op-accent. */

.sh, .sf { --sh-groen: #1E7B5A; --sh-inkt: #1D2433; --sh-zacht: #5A6375; --sh-lijn: #D7DCE4; font-family: Arial, "Segoe UI", sans-serif; }

/* ---------- Header ---------- */
.sh { background: #fff; border-bottom: 3px solid var(--sh-accent); position: relative; z-index: 1000; text-align: left; }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1300px; margin: 0 auto; padding: 14px 16px 6px; }
.sh-logo img { height: 44px; width: auto; display: block; }
.sh-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sh-leessimpel img { height: 30px; width: auto; display: block; }
.sh-inloggen { background: var(--sh-accent); color: var(--sh-op-accent) !important; font-weight: 700; font-size: 14px;
  padding: 6px 14px; border-radius: 6px; text-decoration: none; }
.sh-inloggen:hover, .sh-inloggen:focus-visible { filter: brightness(1.08); }

.sh-nav { max-width: 1300px; margin: 0 auto; padding: 0 16px 4px; }
.sh-nav .navbar-collapse { justify-content: center; }
.sh-nav .nav-link { color: var(--sh-inkt) !important; font-weight: 700; font-size: 15px; padding: 10px 16px !important; border-radius: 6px; }
.sh-nav .nav-link:hover, .sh-nav .nav-link:focus-visible, .sh-nav .nav-link.show { background: var(--sh-licht); }
.sh-nav .dropdown-menu { border: 1px solid var(--sh-lijn); border-radius: 10px; box-shadow: 0 14px 30px rgba(20,30,50,.18); padding: 8px; min-width: 260px; }
.sh-nav .dropdown-item { border-radius: 6px; padding: 7px 10px; white-space: nowrap; color: var(--sh-inkt); }
.sh-nav .dropdown-item:hover, .sh-nav .dropdown-item:focus { background: var(--sh-licht); color: var(--sh-inkt); }
.sh-nav .dropdown-header { font-size: 12px; color: var(--sh-zacht); padding: 10px 10px 4px; border-top: 1px solid var(--sh-lijn); margin-top: 6px; }
.sh-nav .sh-chatlink { background: var(--sh-groen); color: #fff; font-weight: 700; }
.sh-nav .sh-chatlink:hover, .sh-nav .sh-chatlink:focus { background: #17664A; color: #fff; }
.sh a:focus-visible, .sh button:focus-visible, .sf a:focus-visible { outline: 3px solid var(--sh-accent); outline-offset: 2px; }

.sh-toggler { display: block; margin: 0 0 6px auto; border: 1px solid var(--sh-lijn) !important; font-weight: 700; font-size: 15px; padding: 8px 14px; color: var(--sh-inkt); }

/* Telefoon / smal: menu klapt uit onder de balk, uitklapmenu's als lijst eronder */
@media (max-width: 991.98px) {
  .sh-nav { display: block; }
  .sh-nav .navbar-nav { padding: 6px 0 10px; margin: 0; }
  .sh-nav .nav-link { border-bottom: 1px solid var(--sh-lijn); border-radius: 0; }
  .sh-nav .dropdown-menu { box-shadow: none; border: 0; padding: 4px 0 8px 10px; }
  .sh-nav .dropdown-item { white-space: normal; }
}
@media (max-width: 575.98px) {
  .sh-logo img { height: 36px; }
  .sh-tools { gap: 8px; }
  .sh-leessimpel img { height: 26px; }
}

/* ---------- Home (functions/home.php) ---------- */
.hn { --sh-groen: #1E7B5A; --sh-inkt: #1D2433; --sh-zacht: #5A6375; --sh-lijn: #D7DCE4; --hn-tegelbalk: #D9961A;
  max-width: 1300px; margin: 0 auto; padding: 22px 16px 10px; display: grid; gap: 22px; text-align: left;
  font-family: Arial, "Segoe UI", sans-serif; color: var(--sh-inkt); }
.hn h1, .hn h2, .hn h3 { color: var(--sh-inkt); margin: 0; }
.hn [hidden] { display: none !important; }

/* 1. Zoekblok */
.hn-zoek { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.hn-links { display: flex !important; flex-direction: column; } .hn-links .hn-chat { flex: 1 1 auto; align-content: start; } /* even hoog als Veelgezocht */
.hn-links { display: grid; gap: 16px; min-width: 0; }
.hn-waar { background: #fff; border: 2px solid var(--sh-accent); border-radius: 12px; padding: 16px 20px; display: grid; gap: 10px; }
.hn-waar .hn-zoekkop { font-size: 26px; font-weight: 700; margin: 0; }
.hn-wpuitleg { margin: 0; font-size: 14px; color: var(--sh-zacht); }
.hn-chat { background: #fff; border: 2px solid var(--sh-donker); border-radius: 12px; padding: 18px 20px; display: grid; gap: 12px; }
.hn-chatkop { font-size: 21px; font-weight: 700; margin: 0; color: var(--sh-donker); }
.hn-paginakop { font-size: 28px; font-weight: 700; margin: 0 0 -6px !important; }
.hn-wp { background: #FFF8E1; border-radius: 8px; padding: 10px 12px; }
.hn-wp label { display: block; font-size: 15px; margin-bottom: 4px; color: #7A5500; }
.hn-wp p { margin: 0; }
.hn-melding { margin: 6px 0 0; padding: 8px 12px; background: #FFF3CD; border-left: 4px solid #E6AC00; border-radius: 3px; font-size: 14px; font-weight: 700; color: #7A5500; }
.hn-uitleg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sh-inkt); }
.hn-chat .aichat .ac-berichten { background: #fff; }
.hn-disclaimer { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sh-zacht); border-top: 1px solid var(--sh-lijn); padding-top: 10px; }
.hn-veelgezocht { background: #fff; border: 1px solid var(--sh-lijn); border-radius: 12px; padding: 16px 18px; }
.hn-veelgezocht h2 { font-size: 21px; font-weight: 700; color: var(--sh-donker); margin: 0 0 12px; }
.hn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hn-chip { font-size: 15px; padding: 7px 13px; border-radius: 999px; background: #EEF1F5; border: 1px solid var(--sh-lijn); color: var(--sh-inkt) !important; text-decoration: none !important; }
.hn-chip:hover, .hn-chip:focus-visible { border-color: var(--sh-donker); background: #fff; }
.hn-meerchips { margin-top: 10px; background: none; border: 0; padding: 6px 0; font-weight: 700; font-size: 15px; color: var(--sh-donker); cursor: pointer; text-decoration: underline; }

/* 2. Alles in <gemeente> */
.hn-gemeente { background: #fff; border: 2px solid var(--sh-accent); border-radius: 12px; padding: 14px 18px; display: grid; gap: 10px; }
.hn-gemeente h2 { font-size: 19px; }
.hn-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.hn-knoppen a { background: #fff; color: #2B3A55 !important; text-decoration: none !important; font-weight: 700; font-size: 15px;
  padding: 10px 16px; border-radius: 8px; box-shadow: 0 2px 6px rgba(20,30,50,.18); border-bottom: 5px solid var(--hn-tegelbalk); }
.hn-knoppen a:hover, .hn-knoppen a:focus-visible { box-shadow: 0 4px 10px rgba(20,30,50,.25); }
.hn-gemeentehint { margin: 0; font-size: 15px; color: #7A5500; background: #FFF8E1; border-radius: 8px; padding: 10px 14px; }

/* 3. Onderwerpen: 5 tegels */
.hn-onderwerpen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hn-tegel { display: grid; gap: 8px; background: #fff; border-radius: 8px; padding: 10px 10px 8px; text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(20,30,50,.2); border-bottom: 10px solid var(--hn-tegelbalk); }
.hn-tegel span { text-align: center; font-weight: 700; font-size: 15px; color: #2B3A55; }
.hn-tegel img { width: 100%; height: auto; display: block; border-radius: 3px; }
.hn-tegel:hover, .hn-tegel:focus-visible { box-shadow: 0 6px 14px rgba(20,30,50,.28); }

/* 4. Cijfers */
.hn-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 8px 0; text-align: center; color: var(--sh-zacht); font-size: 15px; }
.hn-cijfers > * { background: #fff; border: 1px solid var(--sh-lijn); border-radius: 10px; padding: 22px 12px 18px; }
.hn-cijfers b { display: block; font-size: 32px; line-height: 1.15; margin-bottom: 4px; color: var(--sh-donker); font-variant-numeric: tabular-nums; }

/* 5. Organisaties */
.hn-org { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sh-donker); color: #fff; border-radius: 10px; padding: 16px 20px; }
.hn-org p { margin: 0; font-size: 16px; }
.hn-org a { background: var(--sh-accent); color: var(--sh-op-accent) !important; font-weight: 700; padding: 10px 18px; border-radius: 8px; text-decoration: none !important; }

/* 6. Landelijke overzichten */
.hn-overzichten { background: #fff; border: 1px solid var(--sh-lijn); border-radius: 12px; padding: 16px 20px; display: grid; gap: 12px; }
.hn-overzichten h2 { font-size: 19px; }
.hn-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hn-kolommen h3 { font-size: 16px; font-weight: 700; color: var(--sh-inkt); margin-bottom: 6px; }
.hn-kolommen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.hn-kolommen a { color: #2B3A55; }

@media (max-width: 991.98px) {
  .hn-zoek { grid-template-columns: 1fr; }
  .hn-onderwerpen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .hn { padding: 14px 12px 6px; gap: 16px; }
  .hn-chat, .hn-waar { padding: 14px; }
  .hn-waar .hn-zoekkop { font-size: 22px; }
  .hn-chatkop { font-size: 19px; }
  .hn-paginakop { font-size: 23px; }
  .hn-cijfers { grid-template-columns: 1fr 1fr; }
  .hn-cijfers b { font-size: 24px; }
  .hn-kolommen { grid-template-columns: 1fr; }
}

/* ---------- Zoekresultaten (functions/resultaten.php) ---------- */
.rk { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left;
  background: #fff; border: 1px solid #D7DCE4; border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer; }
.rk:hover { border-color: #2B3A55; }
.rk-logo { width: 72px; height: 56px; border-radius: 6px; background: #fff; border: 1px solid #D7DCE4; display: grid; place-items: center; overflow: hidden; }
.rk-logo img { max-width: 64px; max-height: 48px; object-fit: contain; }
.rk-leeg { background: #EEF1F5; font: 700 18px Arial, sans-serif; color: #5A6375; }
.rk-tekst { display: grid; gap: 4px; min-width: 0; }
.rk-titel { font-weight: 700; font-size: 16px; color: #2B3A55 !important; text-decoration: none !important; }
.rk-titel:hover, .rk-titel:focus-visible { text-decoration: underline !important; }
.rk-org { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; color: #5A6375; }
.rk-org a { color: #5A6375 !important; text-decoration: underline; text-underline-offset: 2px; }
.rk-plaats::before { content: "· "; }
.rk-label { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 9px; border: 1px solid #D7DCE4; color: #1D2433; }
.rk-hier { background: #DDF0E7; color: #1E7B5A; border-color: transparent; }
.rk-regio { background: #FCEFD6; color: #8A5A00; border-color: transparent; }
.rk-doel { margin: 0; font-size: 14px; color: #1D2433; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rkWeergave { display: inline-flex; border: 1px solid #D7DCE4; border-radius: 8px; overflow: hidden; vertical-align: middle; margin-left: 6px; }
.rkWeergave button { padding: 6px 12px; font: 700 14px Arial, sans-serif; background: #fff; color: #1D2433; border: 0; cursor: pointer; }
.rkWeergave button[aria-pressed="true"] { background: #2B3A55; color: #fff; }
.rkKaartMelding { margin: 8px 0; padding: 8px 12px; background: #FFF8E1; border-left: 4px solid #F0A500; border-radius: 4px; font-size: 14px; text-align: left; }
.rkKaartMelding[hidden] { display: none; }
.rk-kaartstand #resultatenLijst, .rk-kaartstand .meerBlok { display: none !important; }
.rk-kaartvak[hidden] { display: none; }
.rkSorteer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 10px; }
.rkSorteer select { font: inherit; padding: 5px 8px; border: 1px solid #D7DCE4; border-radius: 6px; background: #fff; }
/* "Je zoekt op": actieve filters als knopjes, elk met ✕ (ResultaatFilterChips) */
.rkChips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; font-size: 14px; }
.rkChipsKop { color: #5B6574; margin-right: 2px; }
.rkChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #FDEFD2; color: #1F2733 !important;
  text-decoration: none !important; border: 1px solid transparent; line-height: 1.3; }
.rkChip span[aria-hidden] { font-size: 11px; color: #5B6574; }
a.rkChip:hover, a.rkChip:focus-visible { border-color: #B07800; background: #fff; }
.rkChip.rkVast { background: #EEF1F5; }
.rk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zpKlein { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.resultKnoppen { flex-wrap: wrap; align-items: center; }
.resultKnoppen .verfijnKnop { white-space: nowrap; }
@media (max-width: 575.98px) {
  .rkChips { font-size: 13px; gap: 5px; }
  .rkChip { padding: 3px 9px; }
  .rkSorteer { margin: 0; }
  .rkSorteer > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rk { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .rk-logo { width: 52px; height: 44px; } .rk-logo img { max-width: 46px; max-height: 38px; }
}

/* Venster (js/resultaten.js) */
.rkv { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: Arial, "Segoe UI", sans-serif; text-align: left; }
.rkv[hidden] { display: none; }
.rkv-achter { position: absolute; inset: 0; background: rgba(20,24,26,.5); }
.rkv-paneel { position: relative; background: #fff; width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 14px; padding: 22px 24px 20px; box-shadow: 0 18px 40px rgba(0,0,0,.3); display: grid; gap: 14px; color: #1D2433; }
.rkv-sluit { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #EEF1F5; font-size: 16px; cursor: pointer; }
.rkv-inhoud { display: grid; gap: 14px; }
.rkv-kop { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding-right: 36px; }
.rkv-logo { width: 72px; height: 56px; border-radius: 6px; border: 1px solid #D7DCE4; display: grid; place-items: center; overflow: hidden; background: #fff; }
.rkv-logo img { max-width: 64px; max-height: 48px; object-fit: contain; }
.rkv-koptekst { display: grid; gap: 4px; min-width: 0; }
.rkv-titel { font-size: 20px; margin: 0; color: #2B3A55 !important; }
.rkv-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.rkv-knop { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; font-weight: 700; font-size: 14px;
  background: #2B3A55; color: #fff !important; text-decoration: none !important; }
.rkv-licht { background: #EEF1F5; color: #1D2433 !important; }
.rkv-blok { border-top: 1px solid #D7DCE4; padding-top: 10px; display: grid; gap: 4px; font-size: 15px; }
.rkv-blok h3, .rkv-uitklap summary { font: 700 12px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5A6375; margin: 0 0 2px; }
.rkv-uitklap summary { cursor: pointer; }
.rkv-blok p { margin: 0; white-space: pre-line; line-height: 1.5; }
.rkv-ingekort { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rkv-leesverder { justify-self: start; background: none; border: 0; padding: 4px 0; font-weight: 700; color: #2B3A55; cursor: pointer; text-decoration: underline; }
.rkv-km { color: #1E7B5A; font-weight: 700; font-size: 13px; }
.rkv-blok a, .rkv-voet a { color: #2B3A55; }
.rkv-voet { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid #D7DCE4; padding-top: 10px; font-size: 14px; }
body.rkv-open { overflow: hidden; }
@media (max-width: 575.98px) {
  .rkv { align-items: flex-end; padding: 0; }
  .rkv-paneel { border-radius: 16px 16px 0 0; max-height: 92vh; padding: 18px 16px; }
  .rkv-kop { grid-template-columns: 52px minmax(0, 1fr); }
  .rkv-logo { width: 52px; height: 44px; }
}

/* ---------- Footer ---------- */
.sf { background: #E6EBF0; color: #3A4558; font-size: 14px; margin-top: 30px; text-align: left; }
.sf-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1300px; margin: 0 auto; padding: 24px 16px; }
.sf-kol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sf-kol h2 { font-size: 15px; font-weight: 700; color: var(--sh-inkt); margin: 0 0 4px; }
.sf-kol .sf-tweede { margin-top: 12px; }
.sf a { color: #2B3A55; }
.sf a:hover { color: var(--sh-accent); }
.sf-logo img { width: 170px; max-width: 100%; height: auto; }
.sf-eu { width: 160px; max-width: 100%; height: auto; margin-top: 6px; }
.sf-app img { width: 135px; max-width: 100%; height: auto; }
.sf-copyright { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; text-align: center;
  padding: 12px 16px; border-top: 1px solid #CBD3DC; font-size: 13px; }
@media (max-width: 860px) { .sf-kolommen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sf-kolommen { grid-template-columns: 1fr; } }

/* ---------- Aanpassingen na feedback telefoon (nov 2026) ---------- */
/* Logo's: in een vierkant vak, nooit afgesneden (de oude site-CSS rekte img's soms op) */
.rk-logo img, .rkv-logo img { width: auto !important; height: auto !important; }
.rkv-logo { width: 64px; height: 64px; }
.rkv-logo img { max-width: 56px; max-height: 56px; }
.rkv-kop { grid-template-columns: 64px minmax(0, 1fr); }
/* Contactknoppen compacter, zodat Bel / Website / Mail naast elkaar passen */
.rkv-acties { gap: 6px; }
.rkv-knop { padding: 8px 11px; font-size: 14px; white-space: nowrap; }
/* Twee links onderaan naast elkaar */
.rkv-voet { flex-wrap: nowrap; }
.rkv-voet a { white-space: nowrap; }

/* Header op tablet/telefoon: logo en Menu-knop op één regel, hulpmiddelen daaronder op één regel */
@media (max-width: 991.98px) {
  .sh-nav { position: static !important; }
  .sh-toggler { position: absolute; top: 12px; right: 12px; margin: 0; }
  .sh-logo { max-width: calc(100% - 120px); }
  .sh-tools { flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; }
  .sh-nav .navbar-collapse { margin-top: 4px; }
}
@media (max-width: 575.98px) {
  .sh-top { padding: 12px 12px 8px; gap: 8px; }
  .sh-logo img { height: 30px; }
  .sh-tools { gap: 8px; }
  .sh-leessimpel img { height: 24px; }
  .sh-inloggen { padding: 5px 10px; font-size: 13px; }
  .sh-toggler { top: 10px; right: 10px; padding: 6px 12px; font-size: 14px; }
  .rkv-logo { width: 52px; height: 52px; } .rkv-logo img { max-width: 46px; max-height: 46px; }
  .rkv-kop { grid-template-columns: 52px minmax(0, 1fr); }
}

/* =========================================================================
   Organisatiepagina (voorstel scherm 3): kop over de volle breedte, daaronder de voorzieningen als tegels
   ========================================================================= */
.contentZoekPane.ogPagina { display: block !important; height: auto !important; min-height: 0; overflow: visible !important; }
.ogPagina .dbsResultPane { width: auto !important; margin-left: 0 !important; float: none !important; }
.og { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; margin: 10px 0 22px; font-size: 15px; color: #1F2733; }
.og-intro { display: grid; gap: 16px; min-width: 0; }
.og-titel { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.og-logo { width: 150px; height: 84px; background: #fff; border: 1px solid #D7DCE4; border-radius: 10px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.og-logo img { max-width: 136px; max-height: 72px; width: auto !important; height: auto !important; object-fit: contain; }
.og-logo.rk-leeg { width: 84px; font-size: 26px; }
.og-naam { display: grid; gap: 6px; min-width: 0; }
.og-naam h1 { font-size: 28px; font-weight: 700; margin: 0; color: #1F2733; line-height: 1.2; }
.og-subnaam { color: #5B6574; }
.og-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.og-blok h2, .og-contact h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6574; margin: 0 0 6px; }
.og-blok p { margin: 0 0 8px; line-height: 1.6; }
.og-blok p:last-child { margin-bottom: 0; }
.og-contact { background: #fff; border: 1px solid #D7DCE4; border-radius: 12px; padding: 16px 18px; display: grid; gap: 12px; }
.og-regel { margin: 0; line-height: 1.55; }
.og-regel a, .og-blok a, .og-klein a { color: var(--sh-donker, #3A6693); }
.og-klein { margin: 0; font-size: 14px; color: #5B6574; border-top: 1px solid #E3E7ED; padding-top: 10px; }
.og-lijstkop { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: #1F2733; }
.ogPagina *:has(> .rk-og) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ogPagina *:has(> .rk-og) > :not(.rk-og) { grid-column: 1 / -1; }
.rk.rk-og { grid-template-columns: minmax(0, 1fr); margin: 0 !important; }
@media (max-width: 760px) {
  .og { grid-template-columns: 1fr; }
  .ogPagina *:has(> .rk-og) { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .og-naam h1 { font-size: 23px; }
  .og-logo { width: 110px; height: 64px; } .og-logo img { max-width: 100px; max-height: 54px; }
}
.rk-og .rk-plaats::before { content: none !important; }
.ogPagina .meerBlok:not(:has(.meerWeergeven)) { display: none; } /* alles getoond: het aantal staat al in de kop */

/* =========================================================================
   Voorzieningpagina (voorstel scherm 4, functions/voorziening.php)
   ========================================================================= */
.vz { display: grid; gap: 12px; margin: 8px 0 24px; font-size: 15px; color: #1F2733; text-align: left; }
.vz-terug { justify-self: start; font-size: 14px; color: var(--sh-donker, #3A6693) !important; }
.vz-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vz-hoofd { display: grid; gap: 16px; min-width: 0; }
.vz-titel { display: grid; gap: 8px; }
.vz-titel h1 { font-size: 28px; font-weight: 700; margin: 0; line-height: 1.2; color: #1F2733; }
.vz-sub { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 15px; }
.vz-sub a { color: var(--sh-donker, #3A6693); font-weight: 700; }
.vz-extra { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.vz-extra button { background: none; border: 0; padding: 4px 0; color: #5B6574; cursor: pointer; font: inherit; }
.vz-extra button:hover, .vz-extra button:focus-visible { color: #1F2733; text-decoration: underline; }
.vz-extra .rsbtn { margin: 0 !important; }
.vz-gedeeld { color: #1E7B4F; font-weight: 700; }
.vz-blok { display: grid; gap: 6px; }
.vz-blok h2, .vz-zijkant h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6574; margin: 0; }
.vz-tekst p, .vz-blok > p { margin: 0 0 8px; line-height: 1.6; }
.vz-tekst p:last-child { margin-bottom: 0; }
.vz-tekst a, .vz-blok a { color: var(--sh-donker, #3A6693); }
.vz-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vz-meer { display: inline-block; justify-self: start; border: 1px solid #D7DCE4; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 14px; background: #fff; text-decoration: none !important; }
.vz-meer:hover { border-color: var(--sh-donker, #3A6693); }
.vz-waar .lokItem { background: #fff; border: 1px solid #D7DCE4; border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; line-height: 1.55; }
.vz-waar .lokItem > br:last-child { display: none; }
.vz-waar .lokMelding { border-radius: 4px; border: 0; border-left: 4px solid #F0A500; background: #FFF8E1; color: #5A4500; }
.vz-waar .lokMeerKnop { border: 1px solid #D7DCE4; border-radius: 8px; padding: 7px 12px; background: #fff; font-weight: 700; cursor: pointer; }
.vz-hulp { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #5B6574; border-top: 1px solid #E3E7ED; padding-top: 10px; }
.vz-hulp a { color: var(--sh-donker, #3A6693); }
.vz-oud { background: #FFF3CD; color: #7A5500; border-radius: 4px; padding: 1px 6px; }
.vz-zijkant { display: grid; gap: 14px; }
.vz-kaartje { background: #fff; border: 1px solid #D7DCE4; border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.vz-kaartje a { color: var(--sh-donker, #3A6693); }
.vz-kaartje .og-logo { width: 140px; height: 74px; }
.vz-klein { margin: 0; font-size: 14px; color: #5B6574; line-height: 1.5; }
.vz-kaartje #lokKaart { height: 260px; margin: 0; border-radius: 8px; }
.vz-afbeelding { max-width: 100%; border-radius: 8px; }
.vz-fout { padding: 20px 0; }
@media (max-width: 760px) {
  .vz-body { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .vz-titel h1 { font-size: 23px; }
}

/* Zoekpagina: geen eigen scrollvenster meer (vervolg.css vulde "de rest van het scherm", met de hoge footer bleef
   daar weinig van over en leek de footer vast te staan). De pagina scrollt zelf; de filterkolom blijft in beeld. */
.contentZoekPane { height: auto !important; min-height: 0 !important; overflow: visible !important; }
@media (min-width: 761px) {
  .contentZoekPane .dbsZoekPane { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
}

/* =========================================================================
   Informatiepagina's (/informatie/...): één leesbare kolom, zonder zijmenu
   ========================================================================= */
.info { max-width: 820px; margin: 14px auto 32px; padding: 0 4px; }
.info-tekst { background: #fff; border: 1px solid #D7DCE4; border-radius: 12px; padding: 24px 28px; font-size: 16px; line-height: 1.65; color: #1F2733; text-align: left; }
.info-tekst h1 { font-size: 28px; font-weight: 700; margin: 0 0 12px; color: #1F2733; line-height: 1.2; }
.info-tekst h2 { font-size: 20px; font-weight: 700; margin: 26px 0 8px; color: var(--sh-donker, #3A6693); line-height: 1.3; }
.info-tekst h3 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; }
.info-tekst p { margin: 0 0 12px; }
.info-tekst ul, .info-tekst ol { margin: 0 0 12px; padding-left: 22px; }
.info-tekst li { margin-bottom: 6px; }
.info-tekst a { color: var(--sh-donker, #3A6693); }
.info-intro { font-size: 18px; color: #3B4556; }
.info-tekst img { max-width: 100%; height: auto; }
/* Oude teksten in tabellen: gewoon onder elkaar, niet breder dan het scherm */
.info-tekst table, .info-tekst tbody, .info-tekst tr, .info-tekst td { display: block; width: auto !important; max-width: 100%; }
.info-tekst td { padding: 0 !important; }
.info-tekst .rsbtn { float: none !important; display: inline-block; margin: 0 0 14px !important; }
@media (max-width: 575.98px) {
  .info { margin-top: 8px; }
  .info-tekst { padding: 16px 16px; font-size: 15px; }
  .info-tekst h1 { font-size: 23px; }
  .info-tekst h2 { font-size: 18px; }
}
.info-tekst p, .info-tekst li, .info-tekst td, .info-tekst span, .info-tekst font { font-size: inherit !important; line-height: inherit; }
.info-tekst .info-intro { font-size: 18px !important; }
@media (max-width: 575.98px) { .info-tekst .info-intro { font-size: 16px !important; } }
/* Aantal + tip op één regel; "Je zoekt op" alleen op de telefoon (op de computer staan de filters er links naast) */
.aantalRegel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.aantalRegel .zoekTip { display: inline; font-weight: 400; color: #5B6574; margin: 0; }
@media (min-width: 761px) { .rkChips { display: none; } }
/* Gezocht op een woord: regel boven de resultaten met "Zoekwoord wissen" (op de telefoon staat het bij "Je zoekt in") */
.rkZoekwoord { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 4px; padding: 8px 12px; background: #FFF8E1; border-left: 4px solid #F0A500; border-radius: 4px; font-size: 14px; color: #1F2733; }
.rkZoekwoordWis { font-weight: 700; color: var(--sh-donker, #3A6693) !important; white-space: nowrap; }
.rkZoekwoordHint { flex-basis: 100%; color: #5A4500; }
@media (max-width: 760px) { .rkZoekwoord { display: none; } }

/* Balk boven de resultaten: aantal (en tip) links, Sorteer op en Lijst | Kaart rechts */
.resultKnoppen.rkBalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 10px; }
.rkBalk .aantalRegel { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14px; color: var(--sh-donker, #3A6693); }
.rkBalk .rkSorteer { margin: 0; }
.rkBalk .rkWeergave { margin-left: auto; }
@media (max-width: 760px) {
  .rkBalk .aantalRegel { flex-basis: 100%; }
}
/* Onderaan geen tweede "x voorzieningen gevonden" als alles al getoond wordt (wel bij "Meer weergeven") */
.meerBlok:not(:has(a)) { display: none; }

/* Gezocht op een woord: regel boven de resultaten met "Zoekwoord wissen" (op de telefoon staat het bij "Je zoekt in") */
.rkZoekwoord { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 4px; padding: 8px 12px; background: #FFF8E1; border-left: 4px solid #F0A500; border-radius: 4px; font-size: 14px; color: #1F2733; }
.rkZoekwoordWis { font-weight: 700; color: var(--sh-donker, #3A6693) !important; white-space: nowrap; }
.rkZoekwoordHint { flex-basis: 100%; color: #5A4500; }
@media (max-width: 760px) { .rkZoekwoord { display: none; } }

/* Geen logo (of het logo laadt niet): heel licht icoontje van een gebouw i.p.v. letters of een leeg vak */
.rk-leeg, .rkv-logo.rk-leeg, .og-logo.rk-leeg {
  color: transparent !important; font-size: 0 !important;
  background: #F3F5F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C1CD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E") center / 42% no-repeat !important;
}
.rk-leeg > span { display: none; }
.og-logo.rk-leeg { width: 84px; }

/* Tekst onderaan de home en gemeentepagina's: wit kader, even breed als de home */
.hnTekst { max-width: 1300px; margin: 0 auto; padding: 0 16px 28px; text-align: left; font-family: Arial, "Segoe UI", sans-serif; }
.hnTekst-in { background: #fff; border: 1px solid #D7DCE4; border-radius: 12px; padding: 20px 24px; color: #1D2433; }
.hnTekst-tekst { max-width: 860px; font-size: 15px; line-height: 1.6; }
.hnTekst-tekst h1, .hnTekst-tekst h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--sh-donker, #3A6693); }
.hnTekst-tekst h3 { font-size: 16px; font-weight: 700; margin: 16px 0 4px; color: #1D2433; }
.hnTekst-tekst h3 a { color: inherit; }
.hnTekst-tekst p { margin: 0 0 10px; }
.hnTekst-tekst ol, .hnTekst-tekst ul { margin: 0 0 10px; padding-left: 22px; }
.hnTekst-tekst a { color: var(--sh-donker, #3A6693); }
@media (max-width: 575.98px) { .hnTekst { padding: 0 12px 20px; } .hnTekst-in { padding: 16px; } }
.info-klein { font-size: 14px !important; color: #5B6574; margin-top: 20px; }

/* Footer: kolommen naar het aantal (4 of 5), minder ruimte bovenin; donkere variant voor DiSK */
.sf-kolommen { grid-template-columns: repeat(var(--sf-kolommen, 4), minmax(0, 1fr)); padding-top: 18px; }
@media (max-width: 860px) { .sf-kolommen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sf-kolommen { grid-template-columns: 1fr; } }
.sf { margin-top: 20px; }
.sf.sf-donker { background: var(--sh-donker); color: #E6EEF0; }
.sf.sf-donker .sf-kol h2 { color: #fff; }
.sf.sf-donker a { color: #fff; }
.sf.sf-donker a:hover, .sf.sf-donker a:focus-visible { color: #FFD7D7; }
.sf.sf-donker .sf-copyright { border-top-color: rgba(255,255,255,.2); color: #E6EEF0; }
/* Korte pagina: geen leeg vlak onder de footer (de schaduw vult de rest van het scherm in de footerkleur; geeft geen extra scroll) */
.sf { box-shadow: 0 50vh 0 50vh #E6EBF0; }
.sf.sf-donker { box-shadow: 0 50vh 0 50vh var(--sh-donker); }
/* Veelgezocht niet op telefoon en iPad (daar staat alles onder elkaar) */
@media (max-width: 991.98px) { .hn-veelgezocht { display: none; } } /* telefoon en iPad: niet tonen */

/* Landelijke overzichten links naast de tekst onderaan de home/gemeentepagina */
.hnTekst { --sh-inkt: #1D2433; --sh-zacht: #5A6375; --sh-lijn: #D7DCE4; }
.hnTekst-rij.metOverzichten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.hnTekst-rij .hn-overzichten h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--sh-donker, #3A6693); }
.hnTekst-rij .hn-kolommen { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.hnTekst-rij .hn-kolommen h3 { margin: 0 0 6px; }
.hnTekst-rij .hnTekst-tekst { max-width: none; }
@media (max-width: 991.98px) { .hnTekst-rij.metOverzichten { grid-template-columns: 1fr; } }
.hnTekst-rij .hn-overzichten { align-content: start; }
.hnTekst-tekst > :first-child { margin-top: 0 !important; }

/* Meldformulier "Klopt er iets niet?" in het venster (js/resultaten.js, melding_versturen.php) */
.rkv-terug { justify-self: start; display: block; width: max-content; text-align: left; background: none; border: 0; padding: 0; margin: 0 0 8px; color: var(--sh-donker, #3A6693); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.rkm-over { margin: 4px 0 14px; color: #3B4556; }
.rkm { display: grid; gap: 14px; }
.rkm-soort { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rkm-soort legend { font-weight: 700; font-size: 15px; margin-bottom: 6px; padding: 0; float: none; width: auto; }
.rkm-soort label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.rkm-veld { display: grid; gap: 4px; font-size: 15px; }
.rkm-veld > span { font-weight: 700; }
.rkm-veld small { font-weight: 400; color: #5B6574; }
.rkm-veld textarea, .rkm-veld input { font: inherit; padding: 9px 11px; border: 1px solid #B9C1CD; border-radius: 8px; width: 100%; box-sizing: border-box; background: #fff; }
.rkm-veld textarea:focus, .rkm-veld input:focus { outline: 3px solid rgba(58,102,147,.35); border-color: var(--sh-donker, #3A6693); }
.rkm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rkm-fout { margin: 0; padding: 8px 12px; background: #FDECEC; border-left: 4px solid #C0392B; border-radius: 4px; color: #7A1F17; font-size: 14px; }
.rkm-knoppen .rkv-knop { border: 0; cursor: pointer; font-size: 15px; padding: 10px 18px; }
.rkm-knoppen .rkv-knop[disabled] { opacity: .7; cursor: wait; }
.rkm-privacy { margin: 0; font-size: 13px; color: #5B6574; }

/* Pagina van een lokaal netwerk (/over/<code>.html, PrintCoalitieNieuw) */
.hn-coalitie { display: grid; gap: 10px; justify-items: start; }
.hn-coalitie .hn-paginakop { margin: 0 !important; }
.hn-coalitietekst { max-width: 860px; font-size: 16px; line-height: 1.6; }
.hn-coalitietekst p { margin: 0 0 8px; }
.hn-ledenrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hn-lid { display: grid; place-items: center; height: 76px; padding: 8px; background: #fff; border: 1px solid var(--sh-lijn); border-radius: 10px; text-decoration: none !important; }
.hn-lid img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.hn-lid:hover, .hn-lid:focus-visible { border-color: var(--sh-donker); box-shadow: 0 2px 8px rgba(20,30,50,.12); }
.hn-lid-naam { font-size: 14px; font-weight: 700; color: var(--sh-inkt) !important; text-align: center; line-height: 1.3; }
@media (max-width: 575.98px) { .hn-ledenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Leeg tekstvak onderaan (bv. op een netwerkpagina): niet tonen */
.hnTekst-rij:not(.metOverzichten) > .hnTekst-in:empty { display: none; }
.hnTekst-rij.metOverzichten > .hn-overzichten { order: 2; } /* tekst links, landelijke overzichten rechts */