/* ==========================================================================
   Patty Bakker — juridische pagina's (privacy, algemene voorwaarden)
   ==========================================================================
   Lange lopende tekst, dus de opmaak doet hier bewust weinig: één kolom van
   zo'n 68 tekens breed, ruime regelafstand en duidelijke tussenkoppen. Geen
   kaders en geen strepen tussen de onderdelen - de ruimte doet het werk,
   zoals op de rest van de site.

   Genummerde artikelen komen uit de HTML zelf (een <ol>), niet uit CSS
   counters: zo blijft de nummering staan als iemand later een blok in Bricks
   verplaatst of de tekst ergens anders plakt.
   ========================================================================== */

/* Geen eigen breedte: `.pb-main > .section` in pb-common.css zet de pagina al
   op 1240px met 32px binnenmarge, en op mobiel op 18px. Zette ik hier
   `max-width:none`, dan begon de tekst op 32px in plaats van op dezelfde 132px
   als elke andere pagina. */
.pb-main .pb-jur{
	padding-top: 8px;
	padding-bottom: clamp(56px, 7vw, 90px);
}

/* ---- kop van de pagina -------------------------------------------------- */

/* De maat komt uit --pb-h1 in pb-common.css (dezelfde als elke paginatitel);
   familie, kleur en regelafstand staan hier, zoals bij de andere pagina's in
   hun eigen paginabestand. */
.pb-main .pb-jur-kop h1{
	margin: 6px 0 0;
	color: var(--brown);
	font-family: Fraunces, Georgia, serif;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.03em;
}

.pb-main .pb-jur-kop{
	max-width: 62ch;
	margin: 0 0 clamp(28px, 4vw, 44px);
}

.pb-main .pb-jur-kop p{
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
}

.pb-main .pb-jur-datum{
	display: inline-block;
	margin-top: 18px;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: #f6eee7;
	color: var(--brown);
	font-family: Manrope, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}

/* ---- de tekst ----------------------------------------------------------- */

.pb-main .pb-jur-tekst{
	max-width: 68ch;
}

.pb-main .pb-jur-tekst h2{
	margin: clamp(34px, 4vw, 52px) 0 12px;
	color: var(--brown);
	font-family: Fraunces, Georgia, serif;
	font-size: clamp(23px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.pb-main .pb-jur-tekst h2:first-child{ margin-top: 0 }

.pb-main .pb-jur-tekst h3{
	margin: 26px 0 8px;
	color: var(--brown);
	font-family: Manrope, system-ui, sans-serif;
	font-size: 15.5px;
	font-weight: 850;
	line-height: 1.35;
}

.pb-main .pb-jur-tekst p,
.pb-main .pb-jur-tekst li{
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.78;
}

.pb-main .pb-jur-tekst p{ margin: 0 0 14px }
.pb-main .pb-jur-tekst p:last-child{ margin-bottom: 0 }

.pb-main .pb-jur-tekst ul,
.pb-main .pb-jur-tekst ol{
	margin: 0 0 16px;
	padding-left: 22px;
}

.pb-main .pb-jur-tekst li{ margin-bottom: 7px }
.pb-main .pb-jur-tekst li:last-child{ margin-bottom: 0 }

.pb-main .pb-jur-tekst strong{ color: var(--brown); font-weight: 800 }

.pb-main .pb-jur-tekst a{
	color: var(--brown);
	border-bottom: 1px solid var(--accent);
}
.pb-main .pb-jur-tekst a:hover{ color: var(--accent) }

/* ---- de artikelen van de voorwaarden ------------------------------------
   Eén <ol> met per artikel een <li>. Het nummer komt van de lijst zelf. */

.pb-main .pb-jur-artikelen{
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: artikel;
}

.pb-main .pb-jur-artikelen > li{
	margin: 0 0 clamp(30px, 3.6vw, 44px);
	counter-increment: artikel;
}

.pb-main .pb-jur-artikelen > li:last-child{ margin-bottom: 0 }

.pb-main .pb-jur-artikelen > li > h2::before{
	content: counter(artikel) ". ";
	color: var(--accent);
}

/* ---- gelabelde regels (privacyverklaring, "welke gegevens") ------------
   Dit was een tabel van drie kolommen. Die is vervangen door kopjes met
   gelabelde regels, omdat een rich-text-veld in Bricks de data-attributen
   wegfiltert die de mobiele weergave van die tabel nodig had. Op een telefoon
   leest deze vorm trouwens beter dan een omgeklapte tabel. */

.pb-main .pb-jur-tekst .pb-jur-regel{
	margin: 0 0 6px;
	padding-left: 14px;
	border-left: 2px solid #f0e2d6;
}

.pb-main .pb-jur-tekst .pb-jur-regel:last-of-type{ margin-bottom: 18px }

/* ---- inhoudsopgave ------------------------------------------------------ */

.pb-main .pb-jur-inhoud{
	margin: 0 0 clamp(30px, 4vw, 46px);
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 28px;
}

.pb-main .pb-jur-inhoud li{ margin-bottom: 7px; break-inside: avoid }

.pb-main .pb-jur-inhoud a{
	color: var(--brown);
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.45;
	border-bottom: 0;
}
.pb-main .pb-jur-inhoud a:hover{ color: var(--accent) }

/* ==========================================================================
   MOBIEL
   ========================================================================== */

@media (max-width:767px){
	.pb-main .pb-jur-inhoud{ columns: 1 }

	.pb-main .pb-jur-tekst p,
	.pb-main .pb-jur-tekst li{ font-size: 15px; line-height: 1.75 }

}