/*
 * ozk-kerkkaart.css — styling voor de view ozk_kerk_olievlek (kerk-olievlekken).
 *
 * Eigen bestand met opzet: ozk-intra-lijsten.css verklaart zichzelf exclusief
 * eigendom van de T13-chipsessie, en twee sessies die in hetzelfde bestand
 * schrijven overschrijven elkaars werk.
 */

/* ── Kerk-olievlekken: bel per kerk met het aantal erin ────────────────────
 * View ozk_kerk_olievlek tekent één punt per kerk; het aantal deelnemers en
 * leiding uit die kerk staat in de marker zelf, zodat de olievlek leesbaar is
 * zonder te klikken. Roze #c13c61 is een huisstijlkleur uit de bron van de
 * ontwerper en heeft wit als verplichte tekstkleur.
 */
.ozk-kerkbel {
	display: flex;
	align-items: center;
	justify-content: center;
	/* De afmeting komt van leaflet (iconSize), die per kerk wordt berekend uit
	 * het aantal personen - zie maak_views.php, veld bel_px. De bel vult die
	 * container, zodat de grootte de olievlek weergeeft. */
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, .45);
	background: #c13c61;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* ── Kerk-olievlekken: clusterbel van MEERDERE kerken ──────────────────────
 * Leaflet.markercluster kleurt clusters standaard groen/geel/rood naar grootte.
 * Op deze kaart vertroebelt dat het beeld: de losse kerkbellen tonen een AANTAL
 * PERSONEN, terwijl een clusterbel het aantal KERKEN telt. Dezelfde vormtaal in
 * een opvallender kleur leest dan als "hele grote kerk", wat het niet is.
 *
 * Daarom: alle drie de clustergroottes in één donkere kleur (huisstijl paars
 * #663399, wit erop = 8,41:1) en vierkanter dan de ronde kerkbel, zodat een
 * cluster als groepje leesbaar blijft en niet als kerk.
 *
 * Bewust gescoped op deze view: de kampkaart (charts_kaart) gebruikt dezelfde
 * markercluster-classes en moet ongemoeid blijven.
 */
/* De halo (de buitenste div) is wat het beeld vertroebelt: een grote diffuse
 * cirkel die over de omliggende kerkbellen valt. Die gaat helemaal weg; alleen
 * de compacte bel blijft over. */
.view-id-ozk_kerk_olievlek .marker-cluster,
.view-id-ozk_kerk_olievlek_contact .marker-cluster,
.view-id-ozk_kerk_olievlek .marker-cluster-small,
.view-id-ozk_kerk_olievlek_contact .marker-cluster-small,
.view-id-ozk_kerk_olievlek .marker-cluster-medium,
.view-id-ozk_kerk_olievlek_contact .marker-cluster-medium,
.view-id-ozk_kerk_olievlek .marker-cluster-large,
.view-id-ozk_kerk_olievlek_contact .marker-cluster-large {
	background: transparent;
	width: 30px;
	height: 30px;
}

.view-id-ozk_kerk_olievlek .marker-cluster div,
.view-id-ozk_kerk_olievlek_contact .marker-cluster div,
.view-id-ozk_kerk_olievlek .marker-cluster-small div,
.view-id-ozk_kerk_olievlek .marker-cluster-medium div,
.view-id-ozk_kerk_olievlek .marker-cluster-large div,
.view-id-ozk_kerk_olievlek_contact .marker-cluster-large div {
	width: 30px;
	height: 30px;
	margin: 0;
	background: #663399;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 6px;                    /* vierkanter dan een kerkbel */
	font-weight: 700;
	box-shadow: 0 0 4px rgba(0, 0, 0, .45);
}

.view-id-ozk_kerk_olievlek .marker-cluster span,
.view-id-ozk_kerk_olievlek_contact .marker-cluster span,
.view-id-ozk_kerk_olievlek .marker-cluster-small span,
.view-id-ozk_kerk_olievlek .marker-cluster-medium span,
.view-id-ozk_kerk_olievlek .marker-cluster-large span,
.view-id-ozk_kerk_olievlek_contact .marker-cluster-large span {
	color: #fff;
	line-height: 26px;
	font-size: .8rem;
}


/* ── Kerklijsten: leesbare, duidelijk klikbare kolomkoppen ─────────────────
 * De tabelkoppen zijn sorteerlinks (klikken sorteert op aantal), maar de
 * linktekst rendert donker op de donkere kopbalk en is dan onleesbaar.
 *
 * Bootstrap 5 zet cel-achtergrond en -tekst via de variabelen --bs-table-bg en
 * --bs-table-color op `.table > :not(caption) > * > *`. Een losse `color`-regel
 * verliest daarvan of wordt teruggezet; daarom hier de VARIABELEN overschrijven
 * (dat werkt met Bootstrap mee in plaats van ertegen) plus de linkkleur expliciet.
 */
.view-id-ozk_kerk_olievlek table thead th,
.view-id-ozk_kerk_olievlek_contact table thead th {
	/* Bootstrap 5 kleurt cellen NIET met background-color maar met een inset
	 * box-shadow van 9999px in --bs-table-accent-bg. Een eigen background-color
	 * wordt daardoor overdekt: de tekst werd wel wit, de balk bleef licht. Door
	 * die box-shadow zelf te zetten werkt het mee met Bootstrap in plaats van
	 * ertegen. */
	--bs-table-bg: #3c3c3b;
	--bs-table-color: #fff;
	--bs-table-accent-bg: #3c3c3b;
	box-shadow: inset 0 0 0 9999px #3c3c3b;
	background-color: #3c3c3b;
	color: #fff;
	border-color: #575756;
}

.view-id-ozk_kerk_olievlek table thead th a,
.view-id-ozk_kerk_olievlek table thead th a:visited,
.view-id-ozk_kerk_olievlek_contact table thead th a,
.view-id-ozk_kerk_olievlek_contact table thead th a:visited {
	color: #fff;
	text-decoration: none;
}

.view-id-ozk_kerk_olievlek table thead th a:hover,
.view-id-ozk_kerk_olievlek table thead th a:focus,
.view-id-ozk_kerk_olievlek_contact table thead th a:hover,
.view-id-ozk_kerk_olievlek_contact table thead th a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Het sorteerpijltje van views (svg/span.tablesort) meekleuren, anders staat er
 * een donker icoontje op de donkere balk. */
.view-id-ozk_kerk_olievlek table thead th .tablesort,
.view-id-ozk_kerk_olievlek_contact table thead th .tablesort {
	fill: #fff;
	color: #fff;
}

/* Aantallen rechts uitlijnen: getallenkolommen lezen zo sneller. */
.view-id-ozk_kerk_olievlek table td.views-field-contact-id,
.view-id-ozk_kerk_olievlek table th.views-field-contact-id,
.view-id-ozk_kerk_olievlek_contact table td.views-field-id,
.view-id-ozk_kerk_olievlek_contact table th.views-field-id {
	text-align: right;
}