/* ==========================================================================
   Artemis Blue — CSS voor de binnenpagina's
   --------------------------------------------------------------------------
   Aanvulling op style.css (designsysteem) en patterns.css (secties van de
   homepage, header, footer, kruimelpad). Hier staat UITSLUITEND wat op de
   binnenpagina's nieuw is en nergens anders al bestaat:

     1. paginakop        .ab-pagehead
     2. sublabel         .ab-sublabel
     3. dienstblokken    .ab-diensten-lijst / .ab-dienst
     4. fasen            .ab-fases / .ab-fase
     5. lopende tekst    .ab-prose        (privacyverklaring, voorwaarden)
     6. inhoudsopgave    .ab-toc
     7. conceptmelding   .ab-alert--concept

   Regels die hier gelden — gelijk aan patterns.css:
     - Alles begint op 320px. Precies twee breekpunten: 48rem en 64rem, en die
       voegen alleen toe (mobile first, BRIEF R2).
     - Geen enkele nieuwe kleurwaarde: alles verwijst naar tokens uit style.css.
     - Niets herhalen wat style.css of patterns.css al doet. Kaarten, lijsten,
       knoppen, rasters, formulieren en het CTA-blok komen daarvandaan.

   Let op bij het lezen van de marges: de blokindeling van WordPress zet zijn
   afstanden met specificiteit 0 (`:where(body .is-layout-flow) > *`). Elke
   elementregel uit style.css wint daarvan. De ruimte hieronder wordt dus
   bewust met eigen marges gezet, niet door de indeling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paginakop
   De hero van een binnenpagina: rustiger dan de homepage-hero (geen raster,
   geen watermerk) zodat de kruimel erboven en de inhoud eronder leidend zijn.
   -------------------------------------------------------------------------- */

.ab-pagehead {
	padding-block: var(--sp-6) var(--sp-7);
	border-bottom: 1px solid var(--ab-line);
}

/* Iets ruimer dan de 20ch van style.css: een binnenpagina-H1 benoemt een
   onderwerp en is daardoor langer dan de kernbelofte op de homepage. */
.ab-pagehead__title {
	max-width: 24ch;
	margin-bottom: var(--sp-4);
}

.ab-pagehead .ab-lead {
	margin-bottom: 0;
}

.ab-pagehead__actions.wp-block-buttons {
	margin-block: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   2. Sublabel
   Kort kopje bóven een lijstje ("Voor wie", "Jij levert"). Het is een echte
   kop in de koppenstructuur; alleen de vormgeving is die van een label.
   -------------------------------------------------------------------------- */

.ab-sublabel {
	margin: 0 0 var(--sp-3);
	max-width: none;
	color: var(--ab-text-muted);
	font-family: var(--ab-font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Dienstblokken op /diensten/
   Drie blokken onder elkaar in plaats van drie kaarten naast elkaar: er staat
   per dienst te veel in om op 320px in een kolom te persen.
   -------------------------------------------------------------------------- */

.ab-diensten-lijst {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-7);
}

.ab-diensten-lijst > * {
	margin-block: 0;
}

.ab-dienst {
	padding-top: var(--sp-6);
	border-top: 2px solid var(--ab-line);
}

.ab-dienst > :last-child {
	margin-bottom: 0;
}

.ab-dienst__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	margin-block: var(--sp-5);
}

.ab-dienst__split > * {
	margin-block: 0;
}

.ab-dienst__actions.wp-block-buttons {
	margin-block: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   4. Fasen op /werkwijze/
   Hergebruikt de teller en het stapnummer van .ab-steps/.ab-step uit
   patterns.css; hier staat alleen wat een fase méér heeft dan een stap:
   volle breedte, bodytekst en twee kolommen met "jij levert / je krijgt".
   -------------------------------------------------------------------------- */

.ab-fases {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-7);
}

.ab-fases > * {
	margin-block: 0;
}

.ab-fase p {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body);
}

.ab-fase__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

.ab-fase__split > * {
	margin-block: 0;
}

.ab-fase__col {
	padding: var(--sp-4) var(--sp-5);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-fase__col > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Lopende tekst
   Voor de privacyverklaring en de algemene voorwaarden: langere tekst met
   koppen en opsommingen, waar de kaartvormen van de rest niet passen.
   -------------------------------------------------------------------------- */

.ab-prose {
	max-width: var(--measure);
}

.ab-prose > * {
	max-width: var(--measure);
}

.ab-prose > :first-child {
	margin-top: 0;
}

.ab-prose h2 {
	max-width: 32ch;
	margin-top: var(--sp-7);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-h3);
}

.ab-prose h3 {
	margin-top: var(--sp-5);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-body);
}

.ab-prose p {
	color: var(--ab-text-muted);
}

.ab-prose ul,
.ab-prose ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
	color: var(--ab-text-muted);
}

.ab-prose li {
	margin-bottom: var(--sp-2);
}

.ab-prose li::marker {
	color: var(--ab-blue);
}

.ab-prose li > ul,
.ab-prose li > ol {
	margin-top: var(--sp-2);
}

/* Een e-mailadres in lopende tekst mag op 320px nooit de kolom uit lopen (R10). */
.ab-prose a {
	overflow-wrap: anywhere;
}

/* Afsluiting met versie en datum (standaard §15). */
.ab-prose__foot {
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--ab-line);
}

.ab-prose__foot p {
	margin: 0;
	color: var(--ab-text-subtle);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   6. Inhoudsopgave
   Alleen op de twee juridische pagina's: die zijn lang genoeg om op een
   telefoon niet meer te overzien.
   -------------------------------------------------------------------------- */

.ab-toc {
	margin-bottom: var(--sp-7);
	padding: var(--sp-5);
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--radius);
}

.ab-toc > * {
	margin-block: 0;
}

.ab-toc__list {
	display: grid;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ab-toc;
}

.ab-toc__list li {
	margin: 0;
	color: var(--ab-text-muted);
}

.ab-toc__list a {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	min-height: var(--tap);
	color: var(--ab-text-muted);
	text-decoration: none;
}

/* Het nummer hoort bij de link, niet bij de bullet: zo blijft de rij één
   raakvlak van minimaal 44px hoog. */
.ab-toc__list a::before {
	counter-increment: ab-toc;
	content: counter(ab-toc, decimal-leading-zero);
	flex: none;
	color: var(--ab-text-subtle);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.ab-toc__list a:hover,
.ab-toc__list a:focus-visible {
	color: var(--ab-text);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

/* --------------------------------------------------------------------------
   7. Conceptmelding
   Uitsluitend voor /algemene-voorwaarden/: die pagina is een concept en mag
   niet worden gelezen als geldende voorwaarden. Kleur is hier niet de enige
   drager — er staat een icoon bij en het woord "Concept" in de tekst zelf.
   -------------------------------------------------------------------------- */

.ab-alert--concept {
	align-items: flex-start;
	background-color: var(--ab-danger-bg);
	border-color: var(--ab-danger);
	color: var(--ab-text);
	font-size: var(--fs-body);
}

.ab-alert--concept svg {
	color: var(--ab-danger);
}

.ab-alert--concept p {
	margin: 0 0 var(--sp-2);
	max-width: var(--measure);
}

.ab-alert--concept > div > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   8. Vanaf 48rem (768px)
   ========================================================================== */

@media (min-width: 48rem) {
	.ab-pagehead {
		padding-block: var(--sp-7) var(--sp-8);
	}

	.ab-dienst__split,
	.ab-fase__split {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5);
	}

	.ab-toc__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-1) var(--sp-5);
	}
}

/* ==========================================================================
   9. Vanaf 64rem (1024px)
   ========================================================================== */

@media (min-width: 64rem) {
	.ab-diensten-lijst,
	.ab-fases {
		gap: var(--sp-8);
	}

	.ab-fase__col {
		padding: var(--sp-5) var(--sp-6);
	}
}