/* dvlopcore base: the page skeleton only (docs/architecture/css-architecture.md, section 1): typography from
   the tokens, the regions, screen-reader-only text, headings, links, images and tables in content.
   No component rule lives here; each component has its own stylesheet in components/<name>/. */
@layer base {
	body {
		max-inline-size: var(--page-width);
		margin-inline: auto;
		font-family: var(--font-family);
		font-size: var(--font-size-body);
		line-height: var(--font-line-height);
		color: var(--color-text);
		background: var(--color-background);
	}

	a {
		color: var(--color-link);
	}

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

	:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}

	a:focus-visible {
		font-weight: bold;
		color: var(--color-focus-text);
		background: var(--color-focus-background);
	}

	/* Text for screen readers only. It stays in the text flow (no position: absolute): taken out of the
	   flow, NVDA in Firefox reads the hidden words and the visible text beside them as two lines.
	   The one such class; a component writes it on a sibling span, never on a wrapper. */
	.sr-only {
		display: inline-block;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Content */

	main {
		display: flow-root;
		padding: 1% var(--content-padding) 5%;
	}

	main:focus {
		outline: none;
	}

	h1,
	h2,
	h3 {
		line-height: 1.2;
	}

	h1 {
		text-align: center;
	}

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

	video {
		inline-size: 100%;
	}

	table {
		border-collapse: collapse;
	}

	th,
	td {
		padding-inline: var(--space-3);
		border: 2px solid;
	}

	/* Images in markdown (docs/afbeeldingen_referentie.md). :where() keeps this rule weak, so the classes below win. */
	:where(.markdown > img, .markdown > p > img, .markdown figure) {
		float: inline-end;
		inline-size: var(--image-width);
		margin: 0 0 var(--space-3) var(--space-3);
	}

	.markdown figure img {
		inline-size: 100%;
	}

	.quarterWidthImage {
		inline-size: 25%;
	}

	.fullWidthImage {
		float: none;
		inline-size: 100%;
		margin-inline: 0;
	}

	.leftImage {
		float: inline-start;
		margin-inline: 0 50px;
	}
}