/*
 * Stylesheet MijnOverheid Zakelijk (MOZa)
 *
 * Gebruikt design tokens uit twee lagen:
 * - _rijkshuisstijl.css: visuele opties vanuit de Rijkshuisstijl
 * - _toepassing.css: toepassing van die opties op componenten
 *
 */

/* Importeer rijkshuisstijl design tokens */
@import "_rijkshuisstijl.css";

/* Importeer toegepaste design tokens */
@import "_toepassing.css";

/* CSS reset */
@import "_reset.css";

/* Rijks Sans webfont */
@font-face {
	font-family: "RijksSansVF";
	font-style: normal;
	font-weight: 100 900;
	src: url("../assets/fonts/RijksSansVF-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "RijksSansVF";
	font-style: italic;
	font-weight: 100 900;
	src: url("../assets/fonts/RijksSansVF-Italic.ttf") format("truetype");
}

/* -- PAGINA-LAYOUT -- */

body {
	background: var(--toepassing-color-background-subtle);
	color: var(--toepassing-color-text-default);
	display: flex;
	flex-direction: column;
	font-family: var(--toepassing-text-font-family-body), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	min-block-size: 100vh;
	min-block-size: 100dvh; /* Fallback: vh voor browsers zonder dvh-ondersteuning */
}

header {
	background: var(--toepassing-color-background-default);
	border-block-end: var(--toepassing-border-pageheader-border);
	box-shadow: var(--toepassing-box-shadow-default);
	margin-block-end: var(--toepassing-space-layout-md);
	@media (max-width: 799px) {
		margin-block-end: var(--toepassing-space-layout-xs);
	}
	.logo {
		align-items: center;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		margin-block: 0 var(--toepassing-space-layout-sm);
		margin-inline: auto;
		max-inline-size: var(--toepassing-page-max-inline-size);
		padding-inline: var(--toepassing-space-padding-md);
		figure {
			grid-column: 2;
		}
		img {
			inline-size: var(--toepassing-size-logo-width);
		}
	}
	.language-switch {
		grid-column: 3;
		justify-self: end;
		text-decoration: none;
	}
	.user-menu {
		display: flex;
		gap: var(--toepassing-space-layout-md);
	}
	/* Toon fallback-naam als accountwisselaar verborgen is, anders verbergen */
	.account-switcher-fallback {
		display: none;
	}
	.account-switcher[hidden] ~ .account-switcher-fallback {
		display: inline-flex;
	}
}
.page-head {
	align-items: last baseline;
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	padding-block-end: var(--toepassing-space-padding-sm);
	padding-inline: var(--toepassing-space-padding-md);
	.page-title {
		font: var(--toepassing-text-heading-h2);
	}
}

main {
	flex: 1;
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	@media (min-width: 800px) {
		display: grid;
		grid-template-columns: auto 1fr;
	}
	> article:first-of-type {
		container-type: inline-size;
		inline-size: 100%;
		margin-block-end: var(--toepassing-space-margin-lg);
		padding-inline: var(--toepassing-space-padding-md);
	}
	/* Decoratief (logo) blok onder de content */
	&::after {
		background: var(--toepassing-color-logo-background);
		block-size: var(--toepassing-size-sm);
		content: "";
		display: block;
		grid-column: 1 / -1;
		inline-size: var(--toepassing-size-logo-width);
		margin-inline: auto;
	}
}

aside {
	max-inline-size: min-content;
	@media (min-width: 800px) {
		min-inline-size: var(--toepassing-size-subnav-width);
	}
	@media (max-width: 799px) {
		max-inline-size: 100%;
	}
}

footer {
	background: var(--toepassing-color-footer-background);
	color: var(--toepassing-color-text-inverse);
	padding: var(--toepassing-space-padding-xl) var(--toepassing-space-padding-md);
}

article, hgroup, form, ul, ol {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-xs);
}

/* -- TYPOGRAFIE -- */

/* Titels en kopteksten, uitgebreid met heading-stijlklassen: visueel als een ander niveau, semantisch het juiste element */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font: var(--toepassing-text-heading-h1);
	-webkit-line-clamp: 2;
	line-clamp: 2; /* Beperkt titels en kopteksten tot maximaal twee regels tekst */
}
h2, .h2 {
	font: var(--toepassing-text-heading-h2);
}
h3, .h3 {
	font: var(--toepassing-text-heading-h3);
}
h4, .h4 {
	font: var(--toepassing-text-heading-h4);
}
h5, .h5 {
	font: var(--toepassing-text-heading-h5);
}
h6, .h6 {
	font: var(--toepassing-text-heading-h6);
}

p {
	font: var(--toepassing-text-paragraph-default);
	&.intro {
		font: var(--toepassing-text-paragraph-intro);
	}
}

small {
	font: var(--toepassing-text-smalltext-default);
}

strong, b {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
em, i {
	font-style: italic;
}

a {
	color: var(--toepassing-color-interactive-default-text);
	text-decoration: var(--toepassing-text-decoration-hyperlink);
	text-decoration-color: currentcolor;
	text-decoration-skip-ink: auto;
	text-underline-offset: 3px;
	transition: var(--toepassing-transition-default);
	&:hover, &:focus-visible {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration-color: transparent;
	}
	&:active {
		color: var(--toepassing-color-interactive-active-text);
	}
}

code, kbd, pre, samp, var {
	background: var(--toepassing-color-background-subtle);
	font: var(--toepassing-text-code);
}
pre {
	padding: var(--toepassing-space-padding-sm);
}

.text-muted {
	color: var(--toepassing-color-text-subtle-1);
}
.metadata {
	color: var(--toepassing-color-text-subtle-2);
	font-size: var(--toepassing-text-size-body-sm);
}

/* -- TOEGANKELIJKHEID -- */

.skip-link {
	margin-block-start: var(--toepassing-space-margin-sm);
	margin-inline-start: var(--toepassing-space-margin-sm);
	position: absolute;
	translate: -200% 0%;
	&:focus-visible {
		translate: 0 0;
	}
}

/* Visueel verborgen maar toegankelijk voor screenreaders */
.visually-hidden {
	block-size: 1px;
	clip: rect(0, 0, 0, 0);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* -- ICONOGRAFIE -- */

.icon-xs {
	inline-size: var(--toepassing-size-icon-xs);
}
.icon-sm {
	inline-size: var(--toepassing-size-icon-sm);
}
.icon-md {
	inline-size: var(--toepassing-size-icon-md);
}
.icon-lg {
	inline-size: var(--toepassing-size-icon-lg);
}
.icon-xl {
	inline-size: var(--toepassing-size-icon-xl);
}

.icon-color-inverse {
	fill: var(--toepassing-color-text-inverse);
}

/* Links en labels voorzien van SVG iconen */
.icon-link, .icon-label {
	align-items: center;
	display: inline-flex;
	gap: var(--toepassing-space-layout-3xs);
	text-decoration-color: transparent;
	svg {
		block-size: var(--toepassing-size-icon-sm);
	}
}
.icon-link {
	&:hover {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: var(--toepassing-text-decoration-hyperlink) !important;
	}
}

/* -- INTERACTIE -- */

/* Generieke hover-interactie op alle interactieve elementen */
:is(a, button, summary, [type="checkbox"], [type="radio"], label:has(input)) {
	transition: var(--toepassing-transition-default);
	&::before, &::after {
		transition: var(--toepassing-transition-default);
	}
	&:hover, &:active, &:focus-visible {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration-color: transparent;
	}
}

/* Opacity i.p.v. specifieke kleuren: past automatisch aan bij donker/licht/hoog-contrast modus */
[aria-disabled], [disabled] {
	opacity: var(--toepassing-opacity-interactive-disabled);
}

/* Focus: zichtbaar voor toetsenbord/spraak/switch, verborgen voor muis */
:focus:not(:focus-visible) {
	outline: none;
}
:focus-visible {
	outline: var(--toepassing-focus-outline);
	outline-offset: var(--toepassing-focus-outline-offset-md);
	&[aria-disabled] {
		outline-color: var(--toepassing-color-interactive-disabled-border);
	}
	&.negative {
		outline-color: var(--toepassing-color-feedback-error-border);
	}
}

/* Bevestigde opties (niet meer wijzigbaar, gemarkeerd met vinkje, wordt gebruikt voor Aangesloten organisaties onder Contactgegevens) */
li.option--confirmed {
	&::before {
		background-color: var(--toepassing-color-feedback-success-icon);
		block-size: var(--toepassing-size-icon-md);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-md);
		margin-inline-end: var(--toepassing-space-margin-2xs);
		mask-image: url("../assets/icons/icon-succes.svg");
		vertical-align: middle;
	}
}

/* Ongelezen staat */
.is-unread {
	h3, .berichtenbox-row-sender {
		font-weight: var(--toepassing-text-font-weight-bold);
		position: relative;
	}
	.berichtenbox-row-sender {
		&::before {
			margin-inline-start: calc(-1 * var(--toepassing-space-margin-sm));
		}
	}
}

.dynamic-list {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-md);
	&:empty { /* Dynamisch gevulde container: verberg uit de layout zolang er nog geen content in zit */
		display: none;
	}
}

/* -- FORMULIEREN -- */

fieldset {
	border: 0;
	padding: 0;
}

/* Formulieren: gedeelde stijlen voor alle invoerelementen */
button, [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea, .btn, .btn-cta {
	align-self: flex-start; /* Voorkomt full-width in flex containers */
	background: var(--toepassing-color-interactive-default-surface);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-interactive-default-border);
	border-radius: var(--toepassing-border-radius-sm);
	font: inherit;
	min-block-size: var(--toepassing-pointer-target-min-size);
	min-inline-size: var(--toepassing-pointer-target-min-size);
	padding-block: var(--toepassing-space-padding-sm);
	padding-inline: var(--toepassing-space-padding-md);
	transition: var(--toepassing-transition-default);
	&:hover {
		border-color: var(--toepassing-color-interactive-hover-border);
	}
	&:active {
		border-color: var(--toepassing-color-interactive-active-border);
	}
	&[aria-invalid] {
		border-color: var(--toepassing-color-feedback-error-border);
		outline-color: var(--toepassing-color-feedback-error-border);
	}
	&.negative {
		border-color: var(--toepassing-color-feedback-error-border);
	}
}
.btn-cta::after {
	background-color: currentcolor;
	block-size: var(--toepassing-size-icon-xs);
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-xs);
	margin-inline-start: var(--toepassing-space-margin-2xs);
	mask: url("../assets/icons/icon-link-intern.svg") no-repeat center / contain;
	vertical-align: middle;
}
.btn-cta[rel~="external"]::after {
	mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
	vertical-align: baseline;
}

/* Extern-link icoon achter overige externe links */
a[rel~="external"]:not(.btn-cta, .content-link)::after {
	background-color: currentcolor;
	block-size: var(--toepassing-size-icon-xs);
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-xs);
	margin-inline-start: var(--toepassing-space-margin-3xs);
	mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
	vertical-align: baseline;
}

/* Formulieren: labels */
legend, label, dt {
	color: var(--toepassing-color-text-subtle-1);
	display: block;
	font: var(--toepassing-text-label);
	margin-block-end: var(--toepassing-space-margin-3xs);
}
label {
	cursor: pointer;
}

.form-field-helper-text {
	color: var(--toepassing-color-text-subtle-1);
	font: var(--toepassing-text-smalltext-default);
	margin-block-end: var(--toepassing-space-margin-2xs);
}

/* Formulieren: tekst-invoer elementen */
[type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {
	border: var(--toepassing-border-width-xs) solid var(--toepassing-color-interactive-default-border);
	inline-size: 100%;
	~ .feedback, ~ * .feedback {
		margin-block-start: var(--toepassing-space-margin-2xs);
	}
	&[readonly] {
		background: var(--toepassing-color-interactive-disabled-background);
		cursor: not-allowed;
	}
}
textarea {
	resize: block; /* Alleen verticaal resizen zodat de breedte-layout intact blijft */
}

/* Formulieren: inline feedback bij invoervelden */
.form-field-error {
	color: var(--toepassing-color-feedback-error-icon);
	font: var(--toepassing-text-smalltext-default);
	margin-block-start: var(--toepassing-space-margin-3xs);
	&[hidden] {
		display: none;
	}
}

/* Formulieren: zoekveld met knop */
[type="search"]:has(+ button) {
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	+ button {
		display: inline-block;
		margin-inline-start: -2px; /* Pixelwaarde om zoek-knop aan te laten sluiten op zoekveld */
	}
}

/* Formulieren: (custom) checkboxes en radio button's */
ul.selection {
	list-style: none;
	padding: 0;
}
[type="checkbox"], [type="radio"] {
	appearance: none;
	background: var(--toepassing-color-interactive-default-surface);
	block-size: var(--toepassing-size-icon-md);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-interactive-default-border);
	border-radius: var(--toepassing-border-radius-md);
	cursor: pointer;
	display: inline-grid;
	inline-size: var(--toepassing-size-icon-md);
	place-content: center;
	transition: var(--toepassing-transition-default);
	vertical-align: top;
	&::before, &[data-indeterminate]::before {
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		transform: scale(0); /* Vinkje/bolletje: standaard verborgen met scale(0) */
		transition: var(--toepassing-transition-transform);
	}
	&:checked {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-border);
		&::before {
			transform: scale(1);
		}
	}
	&:hover {
		border-color: var(--toepassing-color-interactive-hover-border);
		&:checked {
			background: var(--toepassing-color-interactive-hover-background);
			border-color: var(--toepassing-color-interactive-hover-border);
		}
	}
	+ label {
		display: inline-block;
		padding-inline: var(--toepassing-space-padding-xs);
	}
	&[aria-disabled] + label {
		color: var(--toepassing-color-interactive-disabled-text);
		cursor: unset;
	}
}
[type="checkbox"] {
	&::before {
		background-color: var(--toepassing-color-text-inverse);
		mask: url("../assets/icons/icon-vink.svg") no-repeat center / contain;
	}
	&[data-indeterminate] {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-border);
		&::before {
			mask: url("../assets/icons/icon-minus.svg") no-repeat center / contain;
			transform: scale(1);
		}
	}
}
[type="radio"] {
	border-radius: var(--toepassing-border-radius-round);
	&::before {
		border-radius: var(--toepassing-border-radius-round);
	}
	&:checked {
		background: var(--toepassing-color-interactive-default-background);
		outline: 2px solid var(--toepassing-color-interactive-default-surface);
		outline-offset: -4px; /* Inset ring voor radio-bolletje effect */
		&:hover {
			background: var(--toepassing-color-interactive-hover-background);
		}
	}
	&:focus-visible {
		outline: var(--toepassing-focus-outline);
		outline-offset: calc(2 * var(--toepassing-focus-outline-offset-md));
		&::before {
			outline: 2px solid var(--toepassing-color-interactive-default-surface);
		}
	}
}

/* Formulieren: verificatiecode (6-cijferige code-invoer) */
.verificationcode-input {
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	margin-block-end: var(--toepassing-space-margin-xs);
	.verificationcode-verify-digit {
		font-family: monospace;
		font-size: var(--toepassing-text-size-body-sm);
		font-weight: var(--toepassing-text-font-weight-bold);
		inline-size: var(--toepassing-size-md);
		text-align: center;
	}
}

#verify-code-feedback {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-xs);
}

/* -- KNOPPEN -- */

button, a.btn, a.btn-cta {
	background: var(--toepassing-color-interactive-default-background);
	color: var(--toepassing-color-text-inverse);
	cursor: pointer;
	transition: var(--toepassing-transition-default);
	@container (max-inline-size: 280px) {
		inline-size: 100%;
		text-align: center;
	}
	span {
		display: inline-block;
	}
	&.secondary, &[type="reset"] {
		background: var(--toepassing-color-interactive-default-surface);
		border-color: var(--toepassing-color-interactive-default-border);
		color: var(--toepassing-color-interactive-default-text);
	}
	&:hover, &:focus-visible {
		background: var(--toepassing-color-interactive-hover-background);
		border-color: var(--toepassing-color-interactive-hover-border);
		color: var(--toepassing-color-text-inverse);
	}
	&:active {
		background: var(--toepassing-color-interactive-active-background);
		border-color: var(--toepassing-color-interactive-active-border);
	}
	&[aria-disabled] {
		cursor: not-allowed;
	}
	&.negative {
		background: var(--toepassing-color-feedback-error-default);
		&:hover, &:focus-visible {
			background: var(--toepassing-color-feedback-error-emphasis);
			border-color: var(--toepassing-color-feedback-error-border);
		}
		&:active {
			background: var(--toepassing-color-interactive-active-background);
			border-color: var(--toepassing-color-interactive-active-border);
		}
	}
}
a.btn-cta {
	display: inline-block;
	text-decoration: none;
}

/* Actiegroep (kolom op mobiel, rij op desktop) */
.action-group {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-xs);
	position: relative;
	button, a.btn-cta {
		inline-size: 100%;
	}
	@media (min-width: 30em) {
		flex-direction: row;
		button, a.btn-cta {
			inline-size: initial;
		}
	}
}

/* Knoppen zonder visuele knop-stijl (links en iconen die als button functioneren) */
.link-button, .icon-button {
	background: none;
	border: none;
	color: var(--toepassing-color-interactive-default-text);
	cursor: pointer;
	min-block-size: unset;
	padding: 0;
	&:hover, &:focus-visible, &:active {
		background: inherit !important;
		color: inherit !important;	
	}	
}
.icon-button {
	display: flex;
	&[hidden] {
		display: none;
	}
	svg {
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-margin-2xs);
	}
}
.btn-close {
	display: flex;
	margin-inline-start: auto;
	min-block-size: var(--toepassing-pointer-target-min-size);
	&[hidden] {
		display: none;
	}
	i {
		display: none;
	}
	&::after {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-start: auto;
		mask: url("../assets/icons/icon-sluiten.svg") no-repeat top right / contain;
	}
}

/* -- MEDIA -- */

p svg {
	block-size: var(--toepassing-size-icon-sm);
	margin-block-start: 1px;
	margin-inline-end: calc(-1 * var(--toepassing-space-margin-3xs));
	vertical-align: text-top;
}

video {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
}

/* -- NAVIGATIE -- */

nav {
	ol, ul {
		list-style: none;
		padding: 0;
	}
}

/* Navigatie: hoofdnavigatie (horizontale balk) */
.main-nav {
	background-color: var(--toepassing-color-interactive-active-background);
	ul {
		margin-inline: auto;
		max-inline-size: var(--toepassing-page-max-inline-size);
	}
	li {
		display: inline-block;
	}
	a {
		color: var(--toepassing-color-text-inverse);
		display: inline-block;
		font: var(--toepassing-text-nav-main-nav);
		padding: var(--toepassing-space-padding-md);
		text-decoration-color: transparent;
	}
	[aria-current], a:hover {
		text-decoration: var(--toepassing-text-decoration-hyperlink);
	}
	[aria-current] {
		font-weight: var(--toepassing-text-font-weight-bold);
	}
}

/* Navigatie: sub-navigatie (sidebar, responsive hamburger op mobiel) */
button.side-nav-toggle {
	align-items: center;
	background: var(--toepassing-color-background-default);
	color: var(--toepassing-color-interactive-default-text);
	display: none;
	gap: var(--toepassing-space-layout-xs);
	inset-block-start: var(--toepassing-space-padding-sm);
	position: absolute;
	&::before {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-xs);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		mask: url("../assets/icons/icon-menu.svg") no-repeat center / contain;
		transition: var(--toepassing-transition-transform);
	}
	&:hover, &:active, &:focus-visible {
		background: inherit;
		color: inherit;
	}
	&[aria-expanded="true"]::before {
		inline-size: var(--toepassing-size-icon-xs);
		mask-image: url("../assets/icons/icon-chevron.svg");
		transform: rotate(180deg);
	}
	@media (max-width: 799px) {
		align-items: baseline;
		display: flex;
	}
}
.side-nav-toggle[aria-expanded="true"] + ul {
	display: block;
}
.side-nav {
	padding-inline: var(--toepassing-space-padding-md);
	ul {
		@media (max-width: 799px) {
			background: var(--toepassing-color-background-default);
			display: none;
			margin-block-end: var(--toepassing-space-margin-md);
			padding: var(--toepassing-space-padding-md);
		}
	}
	li {
		a {
			align-items: center;
			border-radius: var(--toepassing-border-radius-md);
			color: var(--toepassing-color-interactive-alternate-default-text);
			display: flex;
			font: var(--toepassing-text-nav-side-nav);
			gap: var(--toepassing-space-layout-2xs);
			padding-block: var(--toepassing-space-padding-2xs);
			padding-inline: var(--toepassing-space-padding-md);
			text-decoration: none;
			&:hover, &:focus-visible, &:active {
				background: var(--toepassing-color-interactive-alternate-hover-background);
				color: inherit;
			}
			&:active {
				background: var(--toepassing-color-interactive-alternate-active-background);
			}
		}
		[aria-current] {
			background: var(--toepassing-color-interactive-alternate-selected-background);
			font-weight: var(--toepassing-text-font-weight-semi-bold);
		}
		svg {
			align-self: first baseline;
			block-size: var(--toepassing-size-icon-md);
			flex-shrink: 0;
		}
		.badge {
			margin-inline-start: auto;
		}
	}
}
.side-nav-group--start {
	margin-block-start: var(--toepassing-space-margin-sm);
}

/* Navigatie: kruimelpad */
.breadcrumb {
	ol {
		flex-direction: row;
	}
	li {
		display: inline-block;
		&:not(:last-child)::after {
			content: " /";
			margin-inline: var(--toepassing-space-padding-2xs);
		}
		&[aria-current="page"] {
			font-weight: var(--toepassing-text-font-weight-semi-bold);
		}
	}
}

/* Navigatie: paginering */
.pagination {
	ol {
		flex-direction: row;
	}
	a, [aria-current="page"] {
		align-items: center;
		border: var(--toepassing-border-width-xs) solid var(--toepassing-color-border-subtle);
		border-radius: var(--toepassing-border-radius-sm);
		display: inline-flex;
		justify-content: center;
		min-block-size: var(--toepassing-pointer-target-min-size);
		min-inline-size: var(--toepassing-pointer-target-min-size);
		padding-inline: var(--toepassing-space-padding-sm);
	}
	a {
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background);
		}
	}
	[aria-current="page"] {
		background: var(--toepassing-color-interactive-selected-background);
		border-color: var(--toepassing-color-interactive-selected-border);
		color: var(--toepassing-color-text-inverse);
	}
}

/* Navigatie: Links */
a[href$=".pdf"]::after {
	background-color: currentcolor;
	block-size: var(--toepassing-size-icon-sm);
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-sm);
	margin-inline-start: var(--toepassing-space-layout-3xs);
	mask: url("../assets/icons/icon-document-pdf.svg") no-repeat center / contain;
	vertical-align: middle;
}

/* Navigatie: Link terug */
.back-link {
	display: inline-block;
	text-decoration-color: transparent;
	&::before {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-xs);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-xs);
		margin-inline-end: var(--toepassing-space-layout-3xs);
		mask: url("../assets/icons/icon-link-intern.svg") no-repeat center / contain;
		transform: rotate(180deg);
		vertical-align: middle;
	}
	&:hover {
		text-decoration: var(--toepassing-text-decoration-hyperlink);
	}
}

/* Navigatie: footer */
footer {
	a {
		color: inherit !important;
		display: inline-block;
		font: var(--toepassing-text-nav-footer);
		padding-block: var(--toepassing-space-padding-xs);
		text-decoration-color: transparent;
		&:hover {
			color: inherit;
			text-decoration: var(--toepassing-text-decoration-hyperlink) !important;
		}
	}
}
/* Kolom op mobiel, rij op desktop */
.footer-links {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-lg);
	justify-content: flex-end;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	@media (min-width: 799px) {
		flex-direction: row;
	}
	nav {
		max-inline-size: 12rem;
		h4 {
			margin-block-end: var(--toepassing-space-layout-xs);
		}
	}
}

/* -- LIJSTEN -- */

ul, ol {
	gap: var(--toepassing-space-margin-2xs);
}
li li {
	margin-block-start: var(--toepassing-space-layout-xs);
}

dd {
	margin-inline-start: 0;
}
dd + dt {
	margin-block-start: var(--toepassing-space-margin-xs);
}

dl.data-overview div {
	margin-block-end: var(--toepassing-space-margin-xs);
}

.list-plain {
	list-style: none;
	margin-block-end: var(--toepassing-space-margin-xs);
	padding: 0;
	li {
		border: 0 !important;
	}
}

.list-indent {
	padding-inline-start: var(--toepassing-space-padding-sm);
	::marker {
		color: var(--toepassing-color-text-subtle-2);
		font-size: var(--toepassing-text-size-body-md);
	}
}

.list-separation {
	inline-size: var(--toepassing-size-3xs);
}

/* -- TABELLEN -- */

table {
	inline-size: 100%;
}
th {
	color: var(--toepassing-color-text-subtle-1);
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
tr {
	vertical-align: top;
}
th, td {
	padding-block: var(--toepassing-space-padding-xs);
	text-align: start;
	.feedback {
		margin-block-end: var(--toepassing-space-margin-xs);
	}
}
caption {
	caption-side: bottom; /* Logical property wordt nog niet ondersteund */
	padding-block-start: var(--toepassing-space-padding-sm);
	text-align: end;
}

/* -- CARDS -- */

.card {
	background: var(--toepassing-color-background-default);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-border-card-default);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-sm);
	padding: var(--toepassing-space-card-padding);
	section {
		display: flex;
		flex-direction: column;
		gap: var(--toepassing-space-margin-sm);
	}
	h2, h3, h4 {
		font-size: var(--toepassing-text-size-title-2xl);
		a {
			color: var(--toepassing-color-interactive-default-text);
		}
	}
	h3, h4 {
		font-size: var(--toepassing-text-size-title-xl);
	}
	a:not(.btn-cta) {
		text-decoration: none;
		&:hover {
			h3, h4 {
				color: var(--toepassing-color-interactive-hover-text);
				text-decoration: var(--toepassing-text-decoration-hyperlink);
				transition: var(--toepassing-transition-default);
			}
		}
		/* Onzichtbare link die de hele card klikbaar maakt */
		&:focus-visible .card-link {  
			outline: var(--toepassing-focus-outline);
			outline-offset: var(--toepassing-focus-outline-offset-lg);
		}
	}
	.list-content-links {
		gap: var(--toepassing-space-margin-md);
		list-style: none;
		padding: 0;
		li {
			padding-block-end: var(--toepassing-space-padding-md);
			position: relative;
			&[hidden] {
				display: none;
				margin: 0;
				padding: 0;
			}
			&.remove-item {
				animation: var(--toepassing-animation-fade-fade-out);
			}
			&.restore-item {
				animation: var(--toepassing-animation-fade-fade-in);
			}
		}
		.data-overview {
			margin-block: var(--toepassing-space-margin-xs);
		}
	}
	/* Extern-link icoon achter headings */
	.content-link {
		&[rel="external"] h3::after {
			background-color: currentcolor;
			block-size: var(--toepassing-size-icon-sm);
			content: "";
			display: inline-block;
			inline-size: var(--toepassing-size-icon-sm);
			margin-inline-start: var(--toepassing-space-margin-2xs);
			mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
		}
	}
}
.card-topic {
	padding-block-end: 0 !important;
	.content-link {
		text-decoration: none;
		h3, h4 {
			text-decoration: var(--toepassing-text-decoration-hyperlink);
			text-decoration-color: transparent;
			transition: var(--toepassing-transition-default);
		}
		&:hover h3, &:hover h4 {
			text-decoration-color: currentcolor;
		}
	}
}
.topic-options {
	background: var(--toepassing-color-background-subtle);
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
}
/* Onzichtbare overlay-link voor klikbare cards */
.card-link {
	block-size: 100%;
	border-radius: var(--toepassing-border-radius-sm);
	inline-size: 100%;
	inset-block-start: 0;
	position: absolute;
}

/* Data-overview: lange lijsten met <div>-wrappers vloeien over 2 kolommen op
   brede viewports. Drempel is 5 paren: bij gebalanceerde verdeling belanden er
   dan minimaal 2 in kolom 2. Smal scherm valt automatisch terug naar 1 kolom. */
.data-overview:has(> div:nth-of-type(5)) {
	column-gap: var(--toepassing-space-layout-md);
	columns: 2 22rem;
	> div {
		break-inside: avoid;
	}
}

/* Tiles: 2-koloms grid, 1 kolom op smal scherm */
.tiles {
	display: grid;
	gap: var(--toepassing-space-layout-xs);
	grid-template-columns: repeat(2, 1fr);
	@container (max-inline-size: 624px) {
		grid-template-columns: 1fr;
	}
	.card {
		.btn-cta {
			margin-block-start: auto; /* Duw CTA naar onderkant van card */
		}
	}
}

/* -- FEEDBACK -- */

.feedback {
	background: var(--toepassing-color-feedback-neutral-subtle);
	border: var(--toepassing-border-default);
	border-color: var(--toepassing-color-feedback-neutral-border);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	padding: var(--toepassing-space-padding-md);
	&[hidden] {
		display: none;
	}
	h2, h3, h4, h5, h6 {
		font: var(--toepassing-text-heading-h6);
		margin-block-end: var(--toepassing-space-margin-3xs);
	}
	p + p {
		margin-block-start: var(--toepassing-space-margin-2xs);
	}
	.btn-close {
		min-block-size: auto;
	}
	svg {
		align-self: first baseline;
		flex-shrink: 0;
		inline-size: var(--toepassing-size-icon-md);
	}
}
.feedback-info {
	background: var(--toepassing-color-feedback-info-subtle);
	border-color: var(--toepassing-color-feedback-info-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-info-icon);
	}
}
.feedback-success {
	background: var(--toepassing-color-feedback-success-subtle);
	border-color: var(--toepassing-color-feedback-success-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-success-icon);
	}
}
.feedback-warning {
	background: var(--toepassing-color-feedback-warning-subtle);
	border-color: var(--toepassing-color-feedback-warning-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-warning-icon);
	}
}
.feedback-error {
	background: var(--toepassing-color-feedback-error-subtle);
	border-color: var(--toepassing-color-feedback-error-border);
	svg path:not(.icon-color-inverse), svg circle:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-error-icon);
	}
}
.feedback-page-banner {
	inline-size: 100%;
	margin-block-end: var(--toepassing-space-margin-md);
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	padding: var(--toepassing-space-padding-md);
}

dd .feedback {
	margin-block-end: var(--toepassing-space-margin-xs);
}

/* -- BERICHTENBOX -- */
[data-berichtenbox-toolbar] {
	.metadata {
		margin-block-end: var(--toepassing-space-margin-xs);
	}
}
.berichtenbox-search {
	input {
		inline-size: 100%;
	}
}
.berichtenbox-content {
	table {
		border-collapse: collapse;
	}
	th {
		font-weight: var(--toepassing-text-font-weight-semi-bold);
	}
	tr {
		background: var(--toepassing-color-background-default);
		border-block-end: var(--toepassing-border-subtle);
		position: relative;
		transition: var(--toepassing-transition-default);
		a::after {
			content: "";
			inset: 0;
			position: absolute;
		}
		&:hover a {
			text-decoration: var(--toepassing-text-decoration-hyperlink);
		}
	}
	tbody {
		tr {
			&:hover {
				background: var(--toepassing-color-interactive-alternate-hover-background);
				transition: var(--toepassing-transition-default);
			}
		}
	}
	th, td {
		padding: var(--toepassing-space-padding-sm);
	}
	.metadata {
		font-size: var(--toepassing-text-size-body-sm);
	}
	.action-group {
		font-size: var(--toepassing-text-size-body-sm);
	}
}
.berichtenbox-row-sender {
	inline-size: 25%;
}
.berichtenbox-row-subject {
	inline-size: 50%;
}
.berichtenbox-row-date {
	color: var(--toepassing-color-text-subtle-2);
	font-size: var(--toepassing-text-size-body-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.berichtenbox-row-attachment svg {
	fill: var(--toepassing-color-interactive-default-background);
}
.berichtenbox-row-folder-label {
	display: none; /* Tijdelijke de Map kolom verbergen */
}


/* Berichtenbox ongelezen status */
.berichtenbox-row.is-unread .berichtenbox-row-sender, .berichtenbox-row.is-unread .berichtenbox-row-subject {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}

/* Berichtenbox animatie bij nieuw bericht */
@media (prefers-reduced-motion: no-preference) {
	.berichtenbox-row.is-new {
		animation: var(--toepassing-animation-fade-fade-in);
	}
}

.berichtenbox-folder-user {
	a {
		color: var(--toepassing-color-text-subtle-2);
	}
	[aria-selected="true"] {
		color: var(--toepassing-color-interactive-default-text);
	}
}

/* Berichtenbox: bericht-pagina */
.berichtenbox-detail-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--toepassing-space-md);
	margin-block: var(--toepassing-space-md);
}
.berichtenbox-attachments-loading {
	color: var(--toepassing-color-text-subtle-1);
	font-style: italic;
}

/* Berichtenbox: verplaats bericht naar map paneel */
.berichtenbox-move-panel {
	background: var(--toepassing-color-background-raised);
	border: 1px solid var(--toepassing-color-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-xs);
	padding: var(--toepassing-space-md);
	ul {
		list-style: none;
		padding-inline-start: var(--toepassing-space-padding-xs);
	}
	[type="text"] {
		inline-size: 50%;
	}
	.action-group {
		margin-block-start: var(--toepassing-space-margin-xs);
	}
}

/* -- DIGITALE ASSISTENT */

.chat-container {
	gap: var(--toepassing-space-padding-sm);
}
.chat-header {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--toepassing-space-padding-md);
	justify-content: space-between;
}
.chat-status {
	color: var(--toepassing-color-text-subtle-1);
	font: var(--toepassing-text-smalltext);
	ul {
		flex-direction: row;
		gap: var(--toepassing-space-padding-md);
	}
	.chat-status-connected svg, .chat-status-disconnected svg {
		block-size: var(--toepassing-size-icon-sm);
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-padding-2xs);
		vertical-align: text-top;
	}
	.chat-status-connected svg {
		color: var(--toepassing-color-feedback-success-icon);
	}
	.chat-status-disconnected svg {
		color: var(--toepassing-color-feedback-error-icon);
	}
	p {
		margin-block-end: var(--toepassing-space-padding-2xs);
	}
}
.chat-status-warning {
	color: var(--toepassing-color-feedback-warning-border);
	font-style: italic;
}
.chat-messages {
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-padding-md);
	inline-size: 100%;
	overflow-y: auto;
	padding: var(--toepassing-space-padding-md);
}
.chat-message, .chat-suggestions button {
	border-radius: var(--toepassing-border-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-margin-xs);
	margin-block-end: var(--toepassing-space-margin-xs);
	max-inline-size: 80%;
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
	position: relative;
	p {
		margin-block-end: 0;
	}
	&::before {
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		inset-block-end: calc(-1 * var(--toepassing-size-icon-sm));
		position: absolute;
	}
}
.chat-message-assistant, .chat-message-loading {
	align-self: flex-start;
	background: var(--toepassing-color-background-subtle);
	filter: drop-shadow( 1px  0 0 var(--toepassing-color-border-subtle))
		drop-shadow(-1px  0 0 var(--toepassing-color-border-subtle))
		drop-shadow( 0  1px 0 var(--toepassing-color-border-subtle))
		drop-shadow( 0 -1px 0 var(--toepassing-color-border-subtle));
	&::before {
		background: var(--toepassing-color-background-subtle);
		clip-path: shape(from 0% 0%, line to 100% 0%, line to 20% 80%, curve to 0% 80% with 0% 100%);
		inset-inline-start: var(--toepassing-size-2xs);
	}
}
.chat-message-user, .chat-suggestions button.secondary {
	align-self: flex-end;
	background: var(--toepassing-color-interactive-default-background);
	color: var(--toepassing-color-text-inverse);
	&::before {
		background: var(--toepassing-color-interactive-default-background);
		clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 80%, curve to 80% 80% with 100% 100%);
		inset-inline-end: var(--toepassing-size-2xs);
	}
}
.chat-suggestions {
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
	button {
		margin-block-end: var(--toepassing-space-margin-sm);
		&:nth-child(even) {
			justify-self: end;
		}
		&:hover, &:focus-visible {
			background: var(--toepassing-color-interactive-hover-background);
		}
		&:active {
			background: var(--toepassing-color-interactive-active-background);
		}
	}
}
.chat-message-thinking .thinking-text::before {
	animation: spin 0.8s linear infinite;
	block-size: var(--toepassing-size-icon-md);
	border: var(--toepassing-border-width-lg) solid var(--toepassing-color-interactive-active-border);
	border-block-start-color: transparent;
	border-radius: 50%;
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-md);
	margin-inline-end: var(--toepassing-space-margin-xs);
	vertical-align: middle;
}

#chat-input {
	min-block-size: 6rem;
}

/* -- OVERIGE COMPONENTEN -- */

/* Uitklapblok (details/summary) */
details {
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	&[open] {
		border-color: var(--toepassing-color-interactive-alternate-selected-border);
		summary {
			background: var(--toepassing-color-interactive-alternate-selected-background);
			&:hover, &:focus-visible {
				background: var(--toepassing-color-interactive-alternate-hover-background);
			}
			&::before {
				transform: rotate(90deg);
				transition: var(--toepassing-transition-transform);
			}
		}
	}
	&:has(summary:hover) {
		border-color: var(--toepassing-color-interactive-alternate-hover-border);
	}
	&:has(summary:focus-visible) {
		border-color: var(--toepassing-color-interactive-alternate-focus-border);
	}
	&:has(summary:active) {
		border-color: var(--toepassing-color-interactive-alternate-active-border);
	}
}
summary {
	background: var(--toepassing-color-background-subtle);
	cursor: pointer;
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	padding: var(--toepassing-space-padding-sm);
	transition: var(--toepassing-transition-default);
	&:hover, &:focus-visible, &:active {
		background: var(--toepassing-color-interactive-alternate-hover-background);
		color: var(--toepassing-color-text-default);
	}
	&:active {
		background: var(--toepassing-color-interactive-alternate-active-background);
	}
	&::before {
		content: url("../assets/icons/icon-chevron.svg");
		flex-shrink: 0;
		inline-size: var(--toepassing-size-icon-xs);
		transform: rotate(0deg);
		transition: var(--toepassing-transition-transform);
	}
}

/* Accordion (o.a. FAQ-lijst met uitklapbare vragen) */
.accordion {
	list-style: none;
	padding: 0;
	h3, h4, h5, h6 {
		font-size: var(--toepassing-text-size-body-md);
	}
	p {
		padding: var(--toepassing-space-padding-sm);
	}
}

/* Tab interface */
[role="tablist"] {
	border-block-end: var(--toepassing-border-tabs-tab-inactive);
	flex-direction: row;
	a {
		border-block-end: var(--toepassing-border-tabs-tab-inactive);
		border-radius: var(--toepassing-border-radius-md) var(--toepassing-border-radius-md) 0 0;
		display: inline-flex;
		margin-block-end: calc(-1 * var(--toepassing-border-width-md));
		padding: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-md);
		&:hover, &:focus-visible {
			background: var(--toepassing-color-interactive-alternate-hover-background);
			border-block-end: var(--toepassing-border-tabs-tab-hover);
		}
		svg {
			margin-inline-end: var(--toepassing-space-margin-3xs);
			vertical-align: text-top;
		}
	}
	[aria-selected="true"] {
		background: var(--toepassing-color-interactive-alternate-selected-background);
		border-block-end: var(--toepassing-border-tabs-tab-selected);
	}
}

/* Topic opties */
.save-topic, .share-topic, .hide-topic, .delete-topic, .restore-topic {
	align-items: center;
	border-radius: var(--toepassing-border-radius-sm);
	color: var(--toepassing-color-interactive-default-icon);
	cursor: pointer;
	display: inline-flex;
	font: var(--toepassing-text-smalltext);
	font-weight: var(--toepassing-text-font-weight-semi-bold);
	margin-inline-end: var(--toepassing-space-margin-3xs);
	&:has(input:focus-visible) {
		outline: var(--toepassing-focus-outline);
	}
	input, svg {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-sm);
		border: none;
		cursor: pointer;
		display: inline-block;
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-margin-3xs);
		mask: url("../assets/icons/icon-bewaar-outline.svg") no-repeat center / contain;
		transition: var(--toepassing-transition-default);
		&:hover {
			background-color: var(--toepassing-color-feedback-favorite-hover);
			color: var(--toepassing-color-feedback-favorite-hover);
			mask-image: url("../assets/icons/icon-bewaar.svg");
		}
		&:checked {
			animation: var(--toepassing-animation-icon-pop);
			background-color: var(--toepassing-color-feedback-favorite-icon);
			color: var(--toepassing-color-feedback-favorite-icon);
			mask-image: url("../assets/icons/icon-bewaar.svg");
			&:hover {
				background-color: var(--toepassing-color-feedback-favorite-hover);
			}
			& ~ .favorite-label {
				font-size: 0;
				&::after {
					content: "Bewaard";
					font: var(--toepassing-text-smalltext);
				}
			}
		}
	}
	&::before {
		background-color: var(--toepassing-color-interactive-default-icon);
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-margin-2xs);
		mask: url("../assets/icons/icon-verbergen.svg") no-repeat center / contain;
		vertical-align: middle;
	}
	&:hover::before, &:focus-visible::before {
		background-color: var(--toepassing-color-interactive-hover-icon);
	}
	&:active::before {
		animation: var(--toepassing-animation-icon-pop);
	}
}
.save-topic::before {
	content: none;
}
.share-topic {
	&::before {
		mask: url("../assets/icons/icon-delen.svg") no-repeat center / contain;
	}
}
.delete-topic {
	&::before {
		background-color: var(--toepassing-color-feedback-error-icon);
		mask: url("../assets/icons/icon-verwijderen.svg") no-repeat center / contain;
	}
	&:hover::before {
		background-color: var(--toepassing-color-feedback-error-emphasis);
	}
}
.restore-topic {
	&::before {
		mask: url("../assets/icons/icon-feedback-outline.svg") no-repeat center / contain;
	}
	&:hover {
		color: var(--toepassing-color-feedback-success-icon);
		&::before {
			background-color: var(--toepassing-color-feedback-success-icon);
			mask: url("../assets/icons/icon-feedback.svg") no-repeat center / contain;
		}
	}
}

#saved-groups section:not(:last-of-type) {
	margin-block-end: var(--toepassing-space-margin-sm);
	padding-block-end: var(--toepassing-space-padding-xl);
}

/* Badge */
.badge {
	align-items: center;
	align-self: flex-start;
	background: var(--toepassing-color-badge-background);
	border-radius: var(--toepassing-border-radius-round);
	color: var(--toepassing-color-badge-text);
	display: inline-flex;
	font: var(--toepassing-text-badge);
	justify-content: center;
	min-block-size: var(--toepassing-size-icon-sm);
	min-inline-size: var(--toepassing-size-icon-sm);
	padding-inline: var(--toepassing-space-padding-2xs)

}
h1, h2, h3, h4, h5, h6, a, button {
	.badge {
		margin-inline: var(--toepassing-space-margin-3xs) calc(-1 * var(--toepassing-space-margin-3xs));
		vertical-align: text-top;
	}
}

/* Accountwisselaar */
.account-switcher {
	position: relative;
}
.account-switcher-toggle {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	&::after {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-xs);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		mask: url("../assets/icons/icon-chevron.svg") no-repeat center / contain;
		transform: rotate(90deg);
		transition: var(--toepassing-transition-transform);
	}
	&:hover, &:focus-visible {
		background: none !important;
		color: inherit !important;
	}
}
.account-switcher-menu {
	background: var(--toepassing-color-background-default);
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-box-shadow-default);
	inset-block-start: 100%;
	inset-inline-end: 0;
	list-style: none;
	min-inline-size: 24rem;
	opacity: 1;
	padding: var(--toepassing-space-padding-md);
	position: absolute;
	transition: var(--toepassing-transition-opacity) allow-discrete;
	z-index: 1;
	@starting-style {
		opacity: 0;
	}
	&[hidden] {
		opacity: 0;
		transition: var(--toepassing-transition-opacity) allow-discrete;
	}
	a {
		align-items: baseline;
		border-radius: var(--toepassing-border-radius-md);
		color: inherit;
		display: flex;
		gap: var(--toepassing-space-padding-sm);
		justify-content: space-between;
		margin-block-end: var(--toepassing-space-margin-2xs);
		padding: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-sm);
		text-decoration: none;
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background);
		}
		&[aria-current="true"] {
			background: var(--toepassing-color-interactive-alternate-selected-background);
			font-weight: var(--toepassing-text-font-weight-semi-bold)
		}
	}
	span {
		color: var(--toepassing-color-text-subtle-2);
		font: var(--toepassing-text-smalltext-default);
	}
	.account-switcher-group-label {
		color: var(--toepassing-color-text-subtle-2);
		font: var(--toepassing-text-heading-h5);
		padding: var(--toepassing-space-padding-2xs) var(--toepassing-space-padding-sm) var(--toepassing-space-padding-sm);
		&:not(:first-child) {
			border-block-start: var(--toepassing-border-subtle);
			margin-block-start: var(--toepassing-space-padding-sm);
			padding-block-start: var(--toepassing-space-padding-md);
		}
	}
}

/* Voortgangsbalk */
.feedback-progress {
	background: var(--toepassing-color-feedback-success-subtle);
	border: var(--toepassing-border-subtle);
	border-color: var(--toepassing-color-feedback-success-border);
	border-radius: var(--toepassing-border-radius-sm);
	padding: var(--toepassing-space-md);
	.progress-bar {
		margin-block-start: var(--toepassing-space-margin-xs);
	}
}
.progress-bar {
	background: var(--toepassing-color-background-raised);
	block-size: var(--toepassing-size-2xs);
	border: var(--toepassing-border-default);
	border-radius: var(--toepassing-border-radius-round);
	overflow: hidden;
}
.progress-bar-fill {
	align-items: center;
	background: var(--toepassing-color-feedback-success-emphasis);
	block-size: 100%;
	border: var(--toepassing-border-default);
	border-radius: var(--toepassing-border-radius-round);
	color: var(--toepassing-color-text-inverse);
	display: flex;
	font: var(--toepassing-text-badge);
	justify-content: center;
	min-inline-size: fit-content;
	white-space: nowrap;
}

/* -- ANIMATIES -- */

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes icon-pop {
	50% {
		scale: 1.25;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		translate: 0 -1rem;
	}
}
@keyframes fade-out {
	to {
		block-size: 0;
		margin-block: 0;
		opacity: 0;
		overflow: hidden;
		padding-block: 0;
		translate: 0 -1rem;
	}
}

/* -- PROTOTYPING-ONLY -- */

/* Feature flags */
.feature-flags-toggle {
	border-start-start-radius: var(--toepassing-border-radius-md);
	inset-block-end: 0;
	inset-inline-end: 0;
	opacity: 0;
	position: fixed;
	transition: var(--toepassing-transition-opacity);
	z-index: 2;
	&:hover {
		opacity: 1;
		transition: var(--toepassing-transition-opacity);
	}
}

/* Feature flags: verborgen elementen moeten altijd hidden respecteren, ook bij expliciete display */
[data-feature][hidden] {
	display: none;
}
.feature-flags-panel {
	background: var(--toepassing-color-background-raised);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-box-shadow-default);
	inset-block-end: 2rem;
	inset-inline-end: var(--toepassing-space-padding-lg);
	max-block-size: 70vh;
	overflow-y: auto;
	padding: var(--toepassing-space-padding-md);
	position: fixed;
	z-index: 1;
	.feature-flags-group-heading {
		border-block-start: var(--toepassing-border-subtle);
		color: var(--toepassing-color-text-subtle-1);
		margin-block: var(--toepassing-space-padding-sm);
		padding-block-start: var(--toepassing-space-padding-sm);
	}
	ul {
		list-style: none;
		padding: 0;
	}
	label {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		padding-block: var(--toepassing-space-padding-2xs);
	}
	.settings-radio-group {
		align-items: center;
		border: none;
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		margin-block: var(--toepassing-space-padding-2xs);
		padding: 0;
		legend {
			font-weight: var(--toepassing-text-font-weight-semi-bold);
			margin-inline-end: var(--toepassing-space-padding-xs);
		}
		.mode-option {
			align-items: center;
			display: flex;
			gap: var(--toepassing-space-padding-2xs);
			padding: 0;
		}
	}
	.settings-field {
		margin-block: var(--toepassing-space-padding-2xs);
		label {
			display: flex;
			flex-direction: column;
			font-weight: var(--toepassing-text-font-weight-semi-bold);
			gap: 2px;
			padding-block: 0;
		}
		input[type="password"], input[type="text"] {
			border: var(--toepassing-border-subtle);
			border-radius: var(--toepassing-border-radius-sm);
			box-sizing: border-box;
			font: inherit;
			font-weight: normal;
			inline-size: 100%;
			padding: var(--toepassing-space-padding-2xs) var(--toepassing-space-padding-xs);
		}
	}
	.feature-flags-fullscreen {
		background: var(--toepassing-color-interactive-default-background);
		border: var(--toepassing-border-default);
		border-radius: var(--toepassing-border-radius-sm);
		color: var(--toepassing-color-text-inverse);
		cursor: pointer;
		font: inherit;
		inline-size: 100%;
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		text-align: start;
		&:hover {
			background: var(--toepassing-color-interactive-hover-background);
			color: var(--toepassing-color-text-inverse);
		}
	}
	.feature-flags-clear {
		background: var(--toepassing-color-feedback-error-default);
		border: none;
		border-radius: var(--toepassing-border-radius-sm);
		color: var(--toepassing-color-text-inverse);
		cursor: pointer;
		font: inherit;
		inline-size: 100%;
		margin-block: var(--toepassing-space-padding-md);
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		&:hover {
			background: var(--toepassing-color-feedback-error-emphasis);
		}
	}
}

/* Inlog-pagina’s */

.page-login {
	article:first-of-type {
		container-type: initial;
	}
	.user-menu {
		display: none;
	}
	main {
		@media (min-width: 800px) {
			grid-template-columns: initial;
		}
		&::after {
			background: none;
		}
		.feedback {
			border: 0;
			margin-block-start: var(--toepassing-space-margin-xs);
		}
		a, .feedback a {
			color: var(--rijkshuisstijl-color-hemelblauw-600);
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}
	.login-selection {
		display: flex;
		flex-direction: column;
		gap: var(--toepassing-space-margin-md);
		section {
			display: flex;
			flex-direction: column;
			gap: var(--toepassing-space-margin-xs);
			inline-size: 32rem;
			max-inline-size: 100%;
		}
		@media (min-width: 800px) {
			align-items: start;
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			> section {
				grid-column: 2;
				margin-block: var(--toepassing-space-margin-md) var(--toepassing-space-margin-3xs);
			}
			> .feedback {
				grid-column: 3;
			}
		}
	}
	.login-own-credentials {
		margin-block: var(--toepassing-space-margin-md);
	}
	.card {
		border: var(--toepassing-border-default);
		border-color: transparent;
		box-shadow: none;
		padding: 0;
		transition: var(--toepassing-transition-default);
		h2 {
			align-items: center;
			display: flex;
			font-size: var(--toepassing-text-size-body-lg);
			font-weight: var(--toepassing-text-font-weight-bold);
			margin: var(--toepassing-space-margin-xs);
			&::after {
				content: url("../assets/icons/icon-chevron.svg");
				display: inline-block;
				inline-size: var(--toepassing-size-icon-xs);
				margin-inline-start: auto;
			}
		}
		img {
			inline-size: var(--toepassing-size-icon-xl);
			margin-inline-end: var(--toepassing-space-margin-2xs);
		}
		&:hover {
			border-color: var(--toepassing-color-interactive-hover-border);
		}
	}
	details {
		border: 0;
		gap: 0;
		summary {
			all: unset;
			cursor: pointer;
			&:hover {
				background: none;
			}
			&:focus-visible {
				background: none;
				outline: var(--toepassing-focus-outline);
				outline-offset: var(--toepassing-focus-outline-offset-md);
			}
			&::before {
				display: none;
			}
			h2 {
				&::after {
					rotate: -270deg;
					transition: var(--toepassing-transition-default);
					transition-property: rotate;
				}
			}
		}
		&.card > div {
			padding: var(--toepassing-space-padding-md);
		}
		ul {
			list-style: none;
			padding: 0;
			a {
				border: var(--toepassing-border-default);
				border-color: var(--rijkshuisstijl-color-hemelblauw-500); /* Niet direct onderdeel van MOZa, dus even direct de rijkshuisstijl tokens toegepast, #007bc7 op #fff haalt overigens net 4.5:1 contrast-ratio… */
				border-radius: var(--toepassing-border-radius-md);
				color: var(--rijkshuisstijl-color-hemelblauw-500);
				display: block;
				padding: var(--toepassing-space-padding-sm);
				&:hover, &:focus-visible {
					border-color: var(--rijkshuisstijl-color-hemelblauw-600);
					color: var(--rijkshuisstijl-color-hemelblauw-600);
				}
				li:nth-child(1 of :not([hidden])) & {
					background: var(--rijkshuisstijl-color-hemelblauw-500);
					color: var(--toepassing-color-text-inverse);
					&:hover, &:focus-visible {
						background: var(--rijkshuisstijl-color-hemelblauw-600);
						border-color: var(--rijkshuisstijl-color-hemelblauw-600);
					}
				}
			}
		}
		&[open] {
			h2::after {
				rotate: -90deg;
			}
		}
	}
	.login-faq {
		display: flex;
		flex-direction: column;
		gap: var(--toepassing-space-margin-xs);
		margin-block: var(--toepassing-space-margin-xs);
		summary {
			font-weight: var(--toepassing-text-font-weight-bold);
			&::before {
				display: inline-block;
				margin-inline: var(--toepassing-space-margin-2xs);
				transform: rotate(90deg);
				transition: var(--toepassing-transition-transform);
			}
		}
		details[open] summary::before {
			transform: rotate(-90deg);
		}
		p {
			margin-inline: var(--toepassing-space-margin-2xs);
			padding-block: var(--toepassing-space-padding-md);
		}
	}
}

/* Tijdelijk: proof-of-concept banner (roterend lint rechtsboven) */
.temp-moza-poc-banner {
	background: var(--toepassing-color-feedback-success-default);
	color: var(--toepassing-color-text-inverse);
	font-weight: var(--toepassing-text-font-weight-bold);
	inline-size: 256px;
	inset-block-start: 3rem;
	inset-inline-end: -4rem;
	padding-block: var(--toepassing-space-padding-sm);
	padding-inline: var(--toepassing-space-padding-lg);
	position: fixed;
	text-align: center;
	text-decoration: none;
	transform: rotate(45deg);
	transform-origin: center;
	z-index: 1;
	&:hover {
		background: var(--toepassing-color-feedback-success-emphasis);
		color: var(--toepassing-color-text-inverse);
	}
}

/* Tijdelijk: datum en tijdstip laatste wijziging */
.poc-date-last-edit {
	color: var(--toepassing-color-text-disabled);
	font-size: var(--toepassing-text-size-body-xs);
	text-align: end;
}