/**
 * Nieuws (blog) styling — overgenomen van vectorizer.
 *
 * Tailwind-utilities, het primary/secondary kleurenpalet en de
 * Plus Jakarta Sans / Inter fonts worden al site-breed geladen
 * (zie functions.php). Dit bestand levert enkel de custom
 * component-classes die de nieuws-templates gebruiken.
 *
 * Alleen ingeladen op de Nieuws-overzichtspagina en losse posts.
 */

/* ─── Display heading scale ─── */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	max-width: 768px;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #181d27;
	font-weight: 800;
	text-wrap: balance;
}
.display-1 { font-size: 2.5rem;   line-height: 1.1;  letter-spacing: -0.02em; }
.display-2 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.02em; }
.display-3 { font-size: 1.5rem;   line-height: 1.2;  letter-spacing: -0.02em; }
.display-4 { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.28px; }
.display-5 { font-size: 1.125rem; line-height: 1.5rem;  letter-spacing: -0.2px; }
.display-6 { font-size: 1rem;     line-height: 1.375rem; letter-spacing: -0.16px; }
@media (min-width: 1024px) {
	.display-1 { font-size: 3.75rem; }
	.display-2 { font-size: 2.25rem; }
	.display-3 { font-size: 1.875rem; }
	.display-4 { font-size: 1.625rem; line-height: 2.125rem; }
	.display-5 { font-size: 1.375rem; line-height: 1.75rem; }
	.display-6 { font-size: 1.125rem; line-height: 1.5rem; }
}

/* ─── Lijst-reset voor niet-prose lijsten (breadcrumb, inhoudsopgave, CTA-USP's) ───
   bouw draait Tailwind met preflight uit, dus _s' globale
   `ul,ol { margin: 0 0 1.5em 3em }` laat deze flex-lijsten links inspringen.
   Scope = .site-main (single.php-content) → raakt NOOIT de header/footer-nav.
   :where() houdt 0-specificiteit zodat .prose-article-lijsten (met eigen
   list-style + padding-left) altijd winnen. */
.site-main :where(ul, ol, menu) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ─── Border-reset (Tailwind-preflight-equivalent) voor nieuws-content ───
   bouw draait Tailwind preflight-loos: `border`/`border-t`-utilities zetten
   wél border-width maar de `border-style` blijft `none` → randen onzichtbaar
   (reacties-wrapper-scheidingslijn, formulier-, input- en kaart-randen, CTA-kaart).
   :where() = 0-specificiteit zodat .card/.prose-article hun eigen randen houden;
   scope .site-main sluit header/footer uit. box-sizing op #comments voorkomt dat
   w-full inputs mét rand overlopen. */
:where(.site-main *) {
	border-width: 0;
	border-style: solid;
	border-color: #e5e7eb;
}
#comments,
#comments * {
	box-sizing: border-box;
}

/* ─── Form-control reset (Tailwind-preflight-equivalent) ───
   Zonder preflight houden <button>/<input>/<textarea> hun UA-uiterlijk:
   de native knop heeft een eigen background-image-gradient die óver
   bg-secondary-500 (goud) heen ligt → knop oogt grijs/native, en gebruikt
   de systeemfont i.p.v. Inter. De utility-classes (bg/tekst/padding) zijn
   !important en winnen; dit herstelt font-inherit + normaliseert de knop. */
.site-main button,
.site-main input,
.site-main select,
.site-main textarea {
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}
.site-main button,
.site-main select {
	text-transform: none;
}
.site-main button {
	padding: 0;
	border-width: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	-webkit-appearance: button;
	cursor: pointer;
}

/* ─── Blue gradient background ─── */
.gradient-primary {
	background: radial-gradient(ellipse at 50% 50%, #3358C4 0%, #1E3680 100%);
}

/* ─── Card component ─── */
.card {
	background: #fff;
	border-radius: 0.75rem;
	border: 1px solid #e9eaeb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ─── Card hover animation ─── */
.card-hover-animation {
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-hover-animation:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ─── Kaart- & filterlinks: geen thema-underline of blauw/paars ─── */
/* Preflight staat uit op de Tailwind-CDN (functions.php), dus de kale <a>
   die elke nieuwskaart omhult erft de Underscores-thema-defaults:
   browser-underline + a:visited #800080. Daardoor krijgt de kaarttekst een
   (na bezoek paarse) onderstreping. Neutraliseer dat op de kaart-wrapper —
   de gekleurde kind-elementen bepalen zelf hun kleur. De pseudo-classes
   staan expliciet in de selector zodat de specificiteit (0,2,1) altijd
   boven de globale a:visited (0,1,1) uitkomt, ongeacht de laadvolgorde.
   Artikel-body links (.prose-article a, hieronder) houden bewust hun
   underline + blauw. */
.card a,
.card a:link,
.card a:visited,
.card a:hover,
.card a:focus,
.card a:active {
	color: inherit;
	text-decoration: none;
}

/* Categorie-filter tabs: zelfde underline/paars-probleem, maar behoud de
   Tailwind-tekstkleur (utility) in de normale staat; enkel underline weg
   en de paarse visited-kleur neutraliseren. */
nav[aria-label="Nieuwscategorieën"] a,
nav[aria-label="Nieuwscategorieën"] a:visited,
nav[aria-label="Nieuwscategorieën"] a:hover,
nav[aria-label="Nieuwscategorieën"] a:focus {
	text-decoration: none;
}
nav[aria-label="Nieuwscategorieën"] a:visited {
	color: inherit;
}

/* ─── Hide scrollbar utility ─── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Line clamp utilities ─── */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Content flow (prose spacing) ─── */
.content.flow > * + * { margin-top: 1em; }
.content.flow p { color: #535862; line-height: 1.625; }

/* ─── Article prose styling ─── */
.prose-article h2 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 2rem;
	color: #181d27;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	letter-spacing: -0.36px;
}
.prose-article h3 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: #181d27;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.prose-article p {
	color: #535862;
	line-height: 1.75;
	margin-bottom: 1rem;
}
.prose-article ul, .prose-article ol {
	color: #535862;
	line-height: 1.75;
	margin-bottom: 1rem;
	padding-left: 1.5rem;
}
.prose-article ul { list-style-type: disc; }
.prose-article ol { list-style-type: decimal; }
.prose-article li { margin-bottom: 0.25rem; }
.prose-article a {
	color: #3358C4;
	text-decoration: underline;
}
.prose-article a:hover { color: #2B4AA8; }
.prose-article img {
	border-radius: 0.75rem;
	margin: 1.5rem 0;
	max-width: 100%;
	height: auto;
}
.prose-article blockquote {
	border-left: 4px solid #3358C4;
	padding: 1rem 1.5rem;
	margin: 1.5rem 0;
	background: #eef3ff;
	border-radius: 0 0.5rem 0.5rem 0;
	color: #414651;
	font-style: italic;
}
.prose-article strong { color: #181d27; }
.prose-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}
.prose-article th, .prose-article td {
	border: 1px solid #e9eaeb;
	padding: 0.75rem;
	text-align: left;
}
.prose-article th {
	background: #f5f5f5;
	font-weight: 600;
	color: #181d27;
}
@media (min-width: 1024px) {
	.prose-article h2 { font-size: 2rem; line-height: 2.5rem; }
	.prose-article h3 { font-size: 1.5rem; line-height: 2rem; }
}