/* Kleuren. CHM.js zet data-theme op <html> bij een vaste keuze; zonder data-theme volgt de pagina het systeem. */
:root {
	color-scheme:light;
	--tekst:#404040;
	--kop:#171717;
	--achtergrond:#fff;
	--balk:#fff;
	--rand:#ccc;
	--rand-tabel:#BBBBBB;
	--rij-oneven:rgb(246, 248, 250);
	--kop-tabel:rgb(217, 217, 217);
	--code:#d9d9d9;
	--hover:#f0f0f0;
	--accent:#55268A;
	--actief:#efe7f8;
	--toc-hover:#f7f3fc;
	--link:#0066cc;
	--schaduw:rgba(0, 0, 0, 0.15);
	--logo-van:#55268A;
	--logo-tot:#3B1C63;
}

:root[data-theme="dark"] {
	color-scheme:dark;
	--tekst:#c9d1d9;
	--kop:#e6edf3;
	--achtergrond:#0d1117;
	--balk:#161b22;
	--rand:#30363d;
	--rand-tabel:#30363d;
	--rij-oneven:#161b22;
	--kop-tabel:#21262d;
	--code:#161b22;
	--hover:#21262d;
	--accent:#B88AF0;
	--actief:#2a2140;
	--toc-hover:#1b1726;
	--link:#58a6ff;
	--schaduw:rgba(0, 0, 0, 0.5);
	--logo-van:#e6edf3;
	--logo-tot:#e6edf3;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme:dark;
		--tekst:#c9d1d9;
		--kop:#e6edf3;
		--achtergrond:#0d1117;
		--balk:#161b22;
		--rand:#30363d;
		--rand-tabel:#30363d;
		--rij-oneven:#161b22;
		--kop-tabel:#21262d;
		--code:#161b22;
		--hover:#21262d;
		--accent:#B88AF0;
		--actief:#2a2140;
		--toc-hover:#1b1726;
		--link:#58a6ff;
		--schaduw:rgba(0, 0, 0, 0.5);
		--logo-van:#e6edf3;
		--logo-tot:#e6edf3;
	}
}

html, * {
	box-sizing:border-box;
	font-family:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
	font-weight:400;
	font-size:11pt;
	line-height:1.4em;
}

body {
	padding:0;
	margin:0;
	outline:0;
	color:var(--tekst);
	background-color:var(--achtergrond);
}

small {
	font-size:8pt;	
	font-weight:400;
}

h1, h2, h3, h4, h5 {
	color:var(--kop);
	font-size:1.8em;
	font-weight:600;
	
	padding-top:84px; /* header */
}

#header {
	padding-left:5px;
	font-size:18pt;
	font-weight:500;
	background-color:var(--balk);
	border-bottom:1px solid var(--rand);

	height:84px; /* header */

	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index:30; /* boven de tekst die eronder door scrolt en boven de open inhoudsopgave */
}

#header table {
	padding-top:10px;
	height:100%;
	width:100%;
}

#header td {
	font-size:18pt;
	font-weight:500;
	text-align:left;
	vertical-align:middle;
}

/* De svg dient als masker, zodat de kleur het gekozen thema volgt; een <img> kan de themavariabelen niet zien. */
#header .logo {
	display:inline-block;
	width:22px;
	height:28px;
	margin-right:4px;
	vertical-align:-5px;
	background:linear-gradient(to right, var(--logo-van), var(--logo-tot));
	-webkit-mask:url('exsion.svg') center / contain no-repeat;
	mask:url('exsion.svg') center / contain no-repeat;
}

#header a, #header a:visited, #header a:link {
	font-size:14pt;
	font-weight:500;
	color:var(--kop);
	text-decoration: none;
}

/* De titel krijgt de ruimte die overblijft en wordt zo nodig afgekapt; de knoppen passen altijd. */
#header td:first-child {
	width:100%;
	max-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

#header #teamviewer {
	width:1%;
	white-space:nowrap;
	padding-right:12px;
}

#header #language {
	white-space:nowrap;
	width:1%;
	padding-right:20px;
}

#header #language label {
	display:inline-flex;
	vertical-align:middle;
	margin-right:6px;
	color:var(--kop);
	cursor:pointer;
}

#header #language select {
	font-size:12pt;
	padding:4px 8px;
	border:1px solid var(--rand);
	border-radius:4px;
	background-color:var(--achtergrond);
	color:var(--kop);
	cursor:pointer;
	vertical-align:middle;
}

#header #language {
	position:relative;
}

#themaknop {
	display:inline-flex;
	vertical-align:middle;
	margin-left:8px;
	padding:5px;
	background:transparent;
	border:1px solid var(--rand);
	border-radius:4px;
	color:var(--kop);
	cursor:pointer;
}

#themaknop:hover {
	background-color:var(--hover);
}

#themamenu {
	position:absolute;
	top:100%;
	right:20px;
	z-index:20;
	min-width:160px;
	padding:4px;
	background-color:var(--achtergrond);
	border:1px solid var(--rand);
	border-radius:6px;
	box-shadow:0 4px 12px var(--schaduw);
}

#themamenu[hidden] {
	display:none;
}

#themamenu button {
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	padding:6px 10px;
	background:transparent;
	border:none;
	border-radius:4px;
	color:var(--kop);
	font-size:11pt;
	text-align:left;
	cursor:pointer;
}

#themamenu button:hover {
	background-color:var(--hover);
}

#themamenu button[aria-checked="true"] {
	color:var(--accent);
	font-weight:600;
}

#sitebar {
	padding:5px;

	width:var(--sitebar, 20em); /* CHM.js past --sitebar aan bij slepen */

	border-right:1px solid var(--rand);

	position:fixed;
	top:84px; /* header */
	left:0px;
	bottom:0px;
	overflow:auto;
}

/* De plaatjes en video's zijn gemaakt op 1024px; op een smaller vlak schalen ze mee. */
#content {
	max-width:1024px;
}

/* De rand scheidt een screenshot met een witte achtergrond van de pagina. */
#content img {
	max-width:100%;
	height:auto;
	border:1px solid var(--rand);
	padding:6px;
	background-color:var(--achtergrond);
}

/* De video schaalt mee met de breedte van de content. */
#content iframe {
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
}

#content .video {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	aspect-ratio:16 / 9;
	padding:0;
	border:none;
	background-color:#000;
	background-size:cover;
	background-position:center;
	cursor:pointer;
}

/* Het gewone plaatje is 4:3 met zwarte balken boven en onder; 135% hoog valt de 16:9-video precies in het vlak. */
#content .video-4x3 {
	background-size:auto 135%;
}

#content .video svg {
	opacity:0.85;
}

#content .video:hover svg, #content .video:focus-visible svg {
	opacity:1;
}

#wrapper {
	padding:5px;
	margin-left:var(--sitebar, 20em);
	margin-bottom:36px; /* footer */
}

/* Sleeprand om de breedte van de inhoudsopgave aan te passen. */
#sitebar-rand {
	position:fixed;
	top:84px; /* header */
	bottom:36px; /* footer */
	left:var(--sitebar, 20em);
	width:8px;
	margin-left:-4px;
	cursor:col-resize;
	z-index:5;
}

#sitebar-rand:hover, #sitebar-rand:focus, body.slepen #sitebar-rand {
	background-color:var(--accent);
	opacity:0.4;
	outline:none;
}

body.slepen {
	cursor:col-resize;
	user-select:none;
}

#menuknop {
	display:none;
	background:transparent;
	border:none;
	border-radius:4px;
	padding:4px;
	margin-right:8px;
	color:var(--kop);
	cursor:pointer;
	vertical-align:middle;
}

#menuknop:hover {
	background-color:var(--hover);
}

/* Smal scherm: de inhoudsopgave schuift over de tekst in plaats van ernaast te staan. */
@media (max-width: 1000px) {
	#menuknop {
		display:inline-flex;
	}

	#sitebar {
		display:none;
		background-color:var(--achtergrond);
		z-index:10;
		box-shadow:4px 0 12px var(--schaduw);
		max-width:85vw;
		bottom:36px; /* footer */
	}

	body.menu-open #sitebar {
		display:block;
	}

	#wrapper {
		margin-left:0;
	}

	#sitebar-rand {
		display:none;
	}
}

/* Klein scherm of telefoon/tablet (ook liggend breder dan 850px): geen TEAMVIEWER, die is voor Windows. */
@media (max-width: 850px), (pointer: coarse) and (hover: none) {
	#header #teamviewer {
		display:none;
	}
}

/* Telefoon: de kop past alleen nog op één regel met kleinere letters en zonder TEAMVIEWER. */
@media (max-width: 600px) {
	#header td {
		font-size:13pt;
		white-space:nowrap;
	}

	#header #language {
		padding-right:8px;
	}

	#header #language label, #header #teamviewer {
		display:none;
	}

	#header #language select {
		font-size:10pt;
		padding:3px 4px;
		max-width:110px;
	}

	#themaknop, #printknop {
		margin-left:4px;
		padding:3px;
	}

	#menuknop {
		margin-right:4px;
	}

	/* Lange namen (EXSION365_SAMENVOEGEN) mogen afbreken, anders wordt de pagina breder dan het scherm. */
	#content {
		overflow-wrap:anywhere;
	}

	#content table td.nowrap {
		white-space:normal;
	}

	/* Door het afbreken overal mag de eerste kolom smaller worden dan één woord; de tekst ernaast kreeg dan alle ruimte. */
	#content td:first-child, #content th:first-child {
		width:35%;
	}
}

#footer {
	padding:5px;
	background-color:var(--balk);
	border-top:1px solid var(--rand);
	
	font-size:0.8em;
	
	height:36px; /* footer */

	position:fixed;
	bottom:0px;
	left:0px;
	right:0px;
	z-index:30;
}

#footer table {
	height:100%;
	width:100%;
}

#footer td {
	font-size:10pt;
	font-weight:500;
	color:var(--kop);
	text-align:center;
	vertical-align:middle;
}

pre {
	margin:0px;
	padding:5px;
	background:var(--code);
	border:1px solid var(--rand-tabel);
	font-size:10pt;
	font-family:'Courier New (Western)';

	/* Een lange coderegel maakt anders de hele pagina breder, en dan schuiven de vaste kop en voet op een telefoon mee. */
	overflow-x:auto;
}

#content table {
	width:100%;
	border:1px solid var(--rand-tabel);
	border-collapse:collapse;
}

#content tr:nth-child(odd) {
	background-color:var(--rij-oneven);
}

#content td {
	border:1px solid var(--rand-tabel);
}

#content th {
	border:1px solid var(--rand-tabel);
	
	vertical-align:bottom;
	padding:5px;
	text-align:left;
	background:var(--kop-tabel);
	font-weight:bold;
}

#content td {
	vertical-align:top;
	padding:5px;
}

#content td.wrap {
	font-weight:bold;
}

#content td.nowrap {
	white-space:nowrap;
	font-weight:bold;
}

#sitebar ul {
	list-style-type:none;
	margin-left:1em;
	padding:0;
}

#sitebar a, #sitebar a:active, #sitebar a:hover, #sitebar a:link, #sitebar a:visited {
	display:block;
	padding:0.3em 0 0.3em 18px;
	text-indent:-18px; /* een tweede regel begint onder de tekst, niet onder het pijltje */
	color:var(--kop);
	text-decoration:none;
}

/* De schaduw trekt het vlak over de volle breedte van de inhoudsopgave, ongeacht hoe diep het hoofdstuk inspringt;
   clip-path houdt hem binnen de hoogte van de regel. */
#sitebar a:hover {
	background-color:var(--toc-hover);
	box-shadow:0 0 0 100vmax var(--toc-hover);
	clip-path:inset(0 -100vmax);
}

#sitebar a.actief {
	background-color:var(--actief);
	box-shadow:0 0 0 100vmax var(--actief);
	clip-path:inset(0 -100vmax);
	color:var(--accent);
	font-weight:600;
}

#sitebar a:focus-visible {
	outline-offset:-2px;
}

#sitebar .item {
	display:inline-block;
	width:18px;
	text-indent:0;
}

#sitebar .treeitem {
	display:inline-block;
	width:18px;
	text-indent:0;
}

#sitebar .treeitem-close {
	display: none;
}

/* Pijltje van twee randen: -45 graden wijst naar rechts, 45 graden naar beneden. */
#sitebar .treeitem:before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 2px 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	vertical-align: middle;
	cursor: pointer;
}

#sitebar .treeitem-down:before {
	transform: rotate(45deg);
}

b {
	font-weight:bold;
}

/* Even ingetogen als de andere knoppen in de kop. */
#teamviewer a, #teamviewer a:active, #teamviewer a:hover, #teamviewer a:link, #teamviewer a:visited {
	display:inline-block;
	padding:5px 12px;
	background:transparent;
	border:1px solid var(--rand);
	border-radius:4px;
	color:var(--kop);
	font-size:11pt;
	cursor:pointer;
}

#teamviewer a:hover {
	background-color:var(--hover);
}

tmp_img {
  max-width: 100%;
  height: auto;
}

#content a, #content a:visited {
	color:var(--link);
}

/* Alleen zichtbaar op papier, bijvoorbeeld de link onder een video. */
.alleen-print {
	display:none;
}

#printknop {
	display:inline-flex;
	vertical-align:middle;
	margin-left:8px;
	padding:5px;
	background:transparent;
	border:1px solid var(--rand);
	border-radius:4px;
	color:var(--kop);
	cursor:pointer;
}

#printknop:hover {
	background-color:var(--hover);
}

/* Afdrukken en opslaan als pdf: alleen de tekst, altijd licht. Staat achteraan zodat het vóór alles gaat. */
@media print {
	@page {
		margin:15mm;
	}

	:root, :root[data-theme], :root:not([data-theme]) {
		color-scheme:light;
		--tekst:#404040;
		--kop:#171717;
		--achtergrond:#fff;
		--balk:#fff;
		--rand:#ccc;
		--rand-tabel:#BBBBBB;
		--rij-oneven:rgb(246, 248, 250);
		--kop-tabel:rgb(217, 217, 217);
		--code:#d9d9d9;
		--hover:#f0f0f0;
		--accent:#55268A;
		--actief:#efe7f8;
		--toc-hover:#f7f3fc;
		--link:#0066cc;
		--schaduw:rgba(0, 0, 0, 0.15);
		--logo-van:#55268A;
		--logo-tot:#3B1C63;
	}

	#header, #footer, #sitebar, #sitebar-rand, #themamenu, #content iframe, #content .video {
		display:none !important;
	}

	.alleen-print {
		display:block;
	}

	#wrapper {
		margin:0;
		padding:0;
	}

	#content {
		max-width:none;
	}

	/* De ruimte boven een kop is er voor de vaste kop op het scherm. */
	h1, h2, h3, h4, h5 {
		padding-top:0;
		break-after:avoid;
	}

	#content > h1 {
		break-before:page;
	}

	#content > h1:first-of-type {
		break-before:auto;
	}

	img, tr, pre {
		break-inside:avoid;
	}

	/* Op papier kan niet gescrold worden. */
	pre {
		white-space:pre-wrap;
		overflow-x:visible;
	}

	/* Grijze tabelkoppen en -rijen ook afdrukken. */
	#content th, #content tr {
		print-color-adjust:exact;
		-webkit-print-color-adjust:exact;
	}

	#content a[href^="http"]::after {
		content:" (" attr(href) ")";
		font-size:9pt;
		word-break:break-all;
	}
}