/*
 * College van Toezicht — foundation.
 *
 * Pixel-identiek aan het oude thema "CVT" (2015, style.css). Kleuren komen uit Automatic.css
 * (primary = #0787c1, secondary = #4b494d, tertiary = #a6a8a9, base = #646567, zie
 * cms/acss/brand-settings.json); maten die niet op de ACSS-schaal vallen staan hier als
 * projecttokens (--cvt-*), zodat componenten nooit losse getallen herhalen.
 *
 * Dit bestand is globaal (niet tree-shaken): het bevat alles wat Etch niet als
 * klasse-stijl kan uitleveren — de opmaak van editor-HTML (.cvt-entry) en de body.
 */

:root {
	/* Breedtes (gemeten op de oude site, border-box: 940 = 280 citaatruimte + 660 inhoud) */
	--cvt-frame: 940px;              /* container */
	--cvt-aside: 280px;              /* ruimte links voor het citaat */
	--cvt-aside-box: 294px;          /* citaatkolom, incl. 50px/40px binnenruimte */

	/* Kleuren die nét afwijken van de ACSS-hoofdkleuren (letterlijk uit het oude thema) */
	--cvt-ink-content: #636466;      /* tekst in het witte vlak */
	--cvt-accordion: #1e73be;        /* kopbalk jaarverslagen (Accordions-plugin) */
	--cvt-accordion-ink: #454545;    /* chevron in die balk */
	--cvt-accordion-body: #333;

	/* Typografie */
	--cvt-font: "Lato", Helvetica, sans-serif;
	--cvt-serif: Georgia, serif;
	--cvt-text: 14px;
	--cvt-lh: 18px;
}

/* Etch' reset reserveert ruimte voor de scrollbalk; het oude thema niet (alles schoof 7,5px op). */
:root {
	scrollbar-gutter: auto;
}

/* Basis: zelfde als "Normalized Styles" in het oude thema. `html body` wint van ACSS' `body`. */
html body {
	margin: 0;
	font: var(--cvt-text) / var(--cvt-lh) var(--cvt-font);
	color: var(--base);
	background: var(--tertiary);
	-webkit-text-size-adjust: none;
	/* ACSS zet antialiased (dunnere letters); het oude thema liet dit aan de browser */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	max-width: none;
	box-shadow: none;
	/*
	 * Etch' reset maakt body een flexkolom van minstens 100svh. Ingelogd zet WordPress er
	 * html { margin-top: 32px } (admin-balk) bovenop, waardoor elke pagina 32px te hoog werd
	 * en altijd scrolde. Het oude thema had gewoon een blok-body zonder minimale hoogte.
	 */
	display: block;
	min-block-size: 0;
}

html body a {
	color: var(--primary);
	text-decoration: none;
	transition: all 0.3s;

	/* Zelfde kleur bij hover, alleen onderstrepen (ACSS' link-color-hover is via WP-CLI niet te zetten). */
	&:hover {
		color: var(--primary);
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------------ */
/* Editor-HTML in het witte inhoudsvlak (was .entry in het oude thema) */
/* ------------------------------------------------------------------ */

.cvt-entry {
	inline-size: 100%;

	& :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, figure, dl, dd, pre) {
		margin: 0;
		padding: 0;
	}

	/* ACSS zet text-wrap: pretty; het oude thema brak gewoon af (andere regelval). */
	& :where(p, li, td, th, blockquote, figcaption) {
		text-wrap: wrap;
	}

	/*
	 * Etch' reset (@layer etch-reset) maakt links buiten p/span/li/strong… én alle media
	 * tot blok, laat lange woorden afbreken en zet clear op .aligncenter. In de oude
	 * inhoud waren dat gewone inline-elementen (bijv. een link in <u>: andere regelval).
	 * Ongelaagde regels winnen altijd van een @layer, dus dit herstelt het origineel.
	 */
	& a {
		display: inline;
		max-inline-size: none;
		height: auto;
	}

	& :where(img, picture, video, canvas, svg) {
		display: inline;
	}

	/* Op de oude site kregen alle afbeeldingen vertical-align: middle (plugin-CSS die overal laadde). */
	& img {
		vertical-align: middle;
	}

	& :where(p, h1, h2, h3, h4, h5, h6) {
		overflow-wrap: normal;
	}

	& .aligncenter {
		clear: none;
	}

	/* ACSS geeft p een eigen regelhoogte; het oude thema erfde 1.4em van het witte vlak. */
	& :where(p, td, th, dd, dt, figcaption) {
		line-height: inherit;
	}

	& p {
		margin: 0 0 14px;
	}

	& :where(h1, h2, h3, h4, h5, h6) {
		margin: 0 0 12px;
		font-family: var(--cvt-font);
		font-weight: bold;
		line-height: 1em;
		color: var(--primary);
		letter-spacing: normal;
		text-wrap: wrap;
		max-inline-size: none;
	}

	& h1 { font-size: 30px; }
	& h2 { font-size: 26px; }
	& h3 { font-size: 24px; }
	& h4 { font-size: 22px; }
	& h5 { font-size: 20px; }
	& h6 { font-size: 18px; }

	& strong, & b { font-weight: bold; }
	& em, & i { font-style: italic; }
	& del { text-decoration: line-through; }

	& ul {
		margin: 0 0 20px;
		padding: 0 0 0 30px;
	}

	& ol {
		margin: 0 0 20px;
		padding: 0 0 0 30px;
	}

	& :is(ul, ol) :is(ul, ol) {
		margin: 0;
	}

	& ul li { list-style-type: disc; line-height: 1.5em; }
	& ul ul li { list-style-type: circle; }
	& ul li ol li { list-style-type: decimal; }
	& ol li { list-style-type: decimal; line-height: 1.5em; }
	& ol li ol li { list-style-type: lower-alpha; }
	& ol li ul li { list-style-type: disc; }

	& table {
		inline-size: 100%;
		margin: 0 0 15px;
		border: 1px solid #ccc;
		border-collapse: collapse;
		border-spacing: 0;
	}

	& :is(td, th) {
		padding: 5px;
		border: 1px solid #ccc;
		vertical-align: top;
	}

	& th {
		font-weight: normal;
		text-align: left;
		background: #eee;
	}

	& blockquote {
		display: block;
		margin: 15px 0 20px;
		padding: 0 15px 0 40px;
		border: 0;
		background: url("../assets/images/bgr_blockquote.png") no-repeat;
		font-size: inherit;
		quotes: none;

		&::before,
		&::after {
			content: none;
		}

		& cite {
			display: block;
			margin: 5px 0 0;
		}
	}

	& :is(acronym, abbr) {
		border-bottom: 1px dashed #dfcfba;
		cursor: help;
	}

	& :is(pre, code) {
		display: block;
		margin: 0 0 20px;
		padding: 20px;
		overflow: auto;
		border: 1px solid #eee;
		font-family: mono-space, monospace;
		font-size: 12px;
		line-height: 20px;
		white-space: pre;
	}

	& code {
		padding: 1px 20px 0;
		border-block: 0;
		background: #f6f6f6 url("../assets/images/bgr_code.gif") repeat 0 0;
	}

	& sup { position: relative; top: -5px; font-size: 75%; line-height: 0; vertical-align: baseline; }
	& sub { position: relative; top: 5px; font-size: 75%; line-height: 0; vertical-align: baseline; }

	& img {
		max-inline-size: 100%;
		block-size: auto;
	}

	/* WordPress-uitlijning */
	& .alignnone { margin: 0; }
	& .aligncenter { display: block; margin: 5px auto; }
	& .alignright { float: right; margin: 5px 0 20px 20px; }
	& .alignleft { float: left; margin: 5px 20px 20px 0; }

	& .wp-caption {
		max-inline-size: 96%;
		padding: 5px 3px 10px;
		border: 1px solid #f0f0f0;
		background: #fff;
		text-align: center;

		& img {
			max-inline-size: 98.5%;
			inline-size: auto;
			margin: 0;
			padding: 0;
			border: 0;
		}

		& .wp-caption-text {
			margin: 0;
			padding: 5px 4px 0;
			font-size: 11px;
			line-height: 17px;
		}
	}

	& .clearleft { clear: left; }

	/* Na de inhoud: floats afsluiten (was <div class="clear">) */
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}