/*
 * 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
 *
 * Layout spacing gebruikt --toepassing-space-layout-* tokens via twee mechanismes:
 * - > * + * met margin: voor content flow (geen flex/grid nodig)
 * - gap met flex/grid: voor component-layouts met alignment of richting-wisseling
 *
 * Alle properties gebruiken CSS logical properties (inline/block i.p.v. left/right/top/bottom).
 */

@import "_rijkshuisstijl.css";
@import "_toepassing.css";
@import "_reset.css";

/* Lettertype */

@font-face {
	font-family: "RijksSansVF";
	font-style: normal;
	font-weight: 400;
	src: url("../assets/fonts/RijksSansVF-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "RijksSansVF";
	font-style: italic;
	font-weight: 400;
	src: url("../assets/fonts/RijksSansVF-Italic.ttf") format("truetype");
}

/* Pagina-layout */

body {
	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 */
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}

header {
	position: relative;
	.logo {
		text-align: center;
		img {
			inline-size: var(--toepassing-size-logo-width);
		}
		nav {
			li {
				display: inline-block;
			}
		}
	}
	.user-menu {
		align-items: center;
		display: flex;
		gap: var(--toepassing-space-layout-md);
	}
	/* Toon fallback-naam als accountwisselaar verborgen is, verberg anders */
	.account-switcher-fallback {
		display: none;
	}
	.account-switcher[hidden] ~ .account-switcher-fallback {
		display: inline-flex;
	}
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}
.page-head {
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	padding-inline: var(--toepassing-space-padding-md);
	.page-title {
		font: var(--toepassing-text-heading-h2);
	}
}

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

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

footer {
	background: var(--toepassing-color-component-footer-background);
	color: var(--toepassing-color-text-inverse);
	margin-block-start: 0; /* Compensatie voor layout-spacing op body */
	padding: var(--toepassing-space-padding-xl) var(--toepassing-space-padding-md);
}

/* MijnOverheid Zakelijk specifiek */

body.moza {
	background: var(--toepassing-color-background-subtle);
}

.moza header {
	background: var(--toepassing-color-background-default);
	border-block-end: var(--toepassing-border-component-pageheader-border);
	box-shadow: var(--toepassing-box-shadow-default);
}

.moza article {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
}

/* Landing (uitgelogde staat) */

.landing {
	max-inline-size: 40rem;
	margin-inline: auto;
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}

.landing-hero {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
}

.landing-features {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
}

.landing-feature-list {
	display: grid;
	gap: var(--toepassing-space-layout-sm);
	list-style: none;
	padding: 0;
	@media (min-width: 30em) {
		grid-template-columns: 1fr 1fr;
	}
	li {
		background: var(--toepassing-color-background-default);
		border-radius: var(--toepassing-border-radius-md);
		box-shadow: var(--toepassing-border-card-default);
		padding: var(--toepassing-space-component-card-padding);
		> * + * {
			margin-block-start: var(--toepassing-space-layout-2xs);
		}
	}
}

/* Typografie */

hgroup {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-2xs);
	}
}
h1 {
	font: var(--toepassing-text-heading-h1);
}
h2 {
	font: var(--toepassing-text-heading-h2);
}
h3 {
	font: var(--toepassing-text-heading-h3);
}
h4 {
	font: var(--toepassing-text-heading-h4);
}
h5 {
	font: var(--toepassing-text-heading-h5);
}
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-bold);
}
em,
i {
	font-style: italic;
}

a {
	color: var(--toepassing-color-interactive-default-text);
	text-decoration: var(--toepassing-text-text-decoration-hyperlink);
	text-underline-offset: 3px;
	text-decoration-skip-ink: auto;
	transition: var(--toepassing-transition-default);
	&:hover,
	&:focus-visible {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: none;
		transition: var(--toepassing-transition-default);
	}
	&: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);
}

/* 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;
}

/* Interactie */

/* 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);
	&[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) */
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);
		mask-image: url("../assets/icons/icon-succes.svg");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		margin-inline-end: var(--toepassing-space-margin-2xs);
		vertical-align: middle;
	}
}

/* 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-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);
	}
	&.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;
}

/* Formulieren: labels */

legend,
label {
	display: block;
	font: var(--toepassing-text-label);
}

.form-field-helper-text {
	color: var(--toepassing-color-text-subtle-1);
	font: var(--toepassing-text-smalltext-default);
}

/* Actiegroep: kolom op mobiel, rij op desktop */

.action-group {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-xs);
	margin-block-start: var(--toepassing-space-margin-sm);
	button,
	a.btn-cta {
		inline-size: 100%;
	}
	@media (min-width: 30em) {
		flex-direction: row;
		button,
		a.btn-cta {
			inline-size: initial;
		}
	}
	.share-topic {
		align-items: center;
		display: inline-flex;
		gap: var(--toepassing-space-layout-3xs);
		svg {
			block-size: var(--toepassing-size-icon-sm);
			fill: currentColor;
			inline-size: var(--toepassing-size-icon-sm);
		}
	}
}

/* Knoppen */

button,
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 {
		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;
}

/* 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;
	min-inline-size: unset;
	padding: 0;
	&:hover,
	&:focus,
	&:focus-visible,
	&:active {
		background: inherit !important;
		color: inherit !important;
	}
}
.btn-close {
	display: flex;
	margin-inline-start: auto;
	min-block-size: var(--toepassing-pointer-target-min-size);
	min-inline-size: var(--toepassing-pointer-target-min-size);
	i {
		display: none;
	}
	&::after {
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		block-size: var(--toepassing-size-icon-sm);
		background-color: currentColor;
		margin-inline-start: auto;
		mask: url("../assets/icons/icon-sluiten.svg") no-repeat top right / contain;
	}
}

/* Formulieren: zoekveld met knop */

[type="search"]:has(+ button) {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	+ button {
		display: inline-block;
		margin-inline-start: -2px;
	}
}

textarea {
	resize: block; /* Alleen verticaal resizen zodat de breedte-layout intact blijft */
}

/* Formulieren: checkboxes en radio's (custom appearance) */

ul.selection {
	list-style: none;
	padding: 0;
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
	.selection {
		padding-inline-start: var(--toepassing-space-padding-md);
	}
}
[type="checkbox"],
[type="radio"] {
	appearance: none;
	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-md);
	cursor: pointer;
	display: inline-grid;
	block-size: var(--toepassing-size-icon-md);
	inline-size: var(--toepassing-size-icon-md);
	place-content: center;
	transition: var(--toepassing-transition-default);
	vertical-align: top;
	/* Vinkje/bolletje: standaard verborgen via scale(0) */
	&::before,
	&[data-indeterminate]::before {
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		transform: scale(0);
		transition: var(--toepassing-transition-transform);
	}
	&:checked {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-background);
		transition: var(--toepassing-transition-default);
		&::before {
			transform: scale(1);
			transition: var(--toepassing-transition-transform);
		}
	}
	&:hover {
		border-color: var(--toepassing-color-interactive-hover-border);
		transition: var(--toepassing-transition-default);
		&:checked {
			background: var(--toepassing-color-interactive-hover-background);
			border-color: var(--toepassing-color-interactive-hover-background);
			transition: var(--toepassing-transition-default);
		}
	}
	+ label {
		display: inline-block;
		padding-inline: var(--toepassing-space-padding-xs);
	}
	&[aria-disabled] + label {
		color: var(--toepassing-color-interactive-disabled-text);
	}
}
[type="checkbox"] {
	&::before {
		background-color: var(--toepassing-color-text-inverse);
		mask: url("../assets/icons/icon-vink.svg") no-repeat center / contain;
	}
	/* Tri-state: indeterminate (min-icoon) */
	&[data-indeterminate] {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-background);
		&::before {
			transform: scale(1);
			mask: url("../assets/icons/icon-minus.svg") no-repeat center / contain;
		}
	}
}
[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 */
		transition: var(--toepassing-transition-default);
		&:hover {
			background: var(--toepassing-color-interactive-hover-background);
			transition: var(--toepassing-transition-default);
		}
	}
}

/* Media */

video {
	aspect-ratio: 16 / 9;
	background: var(--mox-color-background-subtle);
	inline-size: 100%;
}

/* Navigatie: generiek */

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: none;
	}
	[aria-current],
	a:hover {
		text-decoration: var(--toepassing-text-text-decoration-hyperlink);
		text-underline-offset: 8px;
	}
	[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);
	cursor: pointer;
	display: none;
	gap: var(--toepassing-space-layout-xs);
	position: absolute;
	inset-block-start: var(--toepassing-space-padding-sm);
	&::before {
		content: "";
		background-color: currentColor;
		block-size: var(--toepassing-size-icon-xs);
		mask: url("../assets/icons/icon-menu.svg") no-repeat center / contain;
		transition: var(--toepassing-transition-transform);
		inline-size: var(--toepassing-size-icon-sm);
	}
	&:hover,
	&:active,
	&:focus,
	&:focus-visible,
	&:focus-within {
		background: inherit;
		color: inherit;
	}
	&[aria-expanded="true"]::before {
		mask-image: url("../assets/icons/icon-chevron.svg");
		inline-size: var(--toepassing-size-icon-xs);
		transform: rotate(180deg);
	}
	@media (max-width: 799px) {
		align-items: baseline;
		display: flex;
	}
}
.side-nav ul {
	@media (max-width: 799px) {
		background: var(--toepassing-color-background-default);
		display: none;
		margin-block-end: var(--toepassing-space-margin-lg);
		padding: var(--toepassing-space-padding-md);
		inline-size: 100%;
	}
	li {
		inline-size: 100%;
	}
}
.side-nav-toggle[aria-expanded="true"] + ul {
	display: block;
}
.side-nav {
	padding-inline: var(--toepassing-space-padding-md);
	> li + li {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
	li {
		a {
			align-items: center;
			background: var(--toepassing-color-interactive-alternate-default-background);
			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-sm);
			padding-block: var(--toepassing-space-padding-2xs);
			padding-inline: var(--toepassing-space-padding-md);
			text-decoration: none;
			&:hover,
			&:focus {
				background: var(--toepassing-color-interactive-alternate-hover-background);
				color: var(--toepassing-color-interactive-alternate-default-text);
			}
			&:active {
				background: var(--toepassing-color-interactive-alternate-active-background);
				color: var(--toepassing-color-interactive-alternate-active-text);
			}
		}
		[aria-current] {
			background: var(--toepassing-color-interactive-alternate-selected-background);
			color: var(--toepassing-color-interactive-alternate-selected-text);
			font-weight: var(--toepassing-text-font-weight-semi-bold);
		}
		svg {
			block-size: var(--toepassing-size-icon-md);
			flex-shrink: 0;
		}
	}
}
.side-nav-group--start {
	margin-block-start: var(--toepassing-space-margin-sm);
}

/* Navigatie: kruimelpad */

.breadcrumb {
	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 {
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		list-style: none;
		> * + * {
			margin-block-start: 0;
		}
	}
	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);
		text-decoration: none;
	}
	a {
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background);
		}
		&:focus-visible {
			outline: var(--toepassing-focus-outline);
			outline-offset: var(--toepassing-focus-outline-offset);
		}
	}
	[aria-current="page"] {
		background: var(--toepassing-color-interactive-selected-background);
		border-color: var(--toepassing-color-interactive-selected-border);
		color: var(--toepassing-color-text-inverse);
		font-weight: var(--toepassing-text-font-weight-semi-bold);
	}
}

/* Navigatie: footer */

footer {
	a {
		color: inherit;
		display: inline-block;
		font: var(--toepassing-text-nav-footer);
		padding-block: var(--toepassing-space-padding-xs);
		text-decoration: none;
		&:hover {
			color: inherit;
		}
	}
}
/* Kolom op mobiel, rij op desktop */
.footer-links {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-md);
	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;
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
	}
}

/* Lijsten */

.list-plain {
	list-style: none;
	padding: 0;
	margin-block-end: var(--toepassing-space-margin-xs);
	li {
		border: 0 !important;
	}
}
ul,
ol {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-2xs);
	}
}
li li {
	margin-block-start: var(--toepassing-space-layout-xs);
}

/* Tabellen */

table {
	inline-size: 100%;
}
tr {
	vertical-align: top;
}
th,
td {
	border-block-end: var(--toepassing-border-default);
	padding-block: var(--toepassing-space-padding-xs);
	text-align: start;
	.feedback {
		margin-block-end: var(--toepassing-space-margin-xs);
	}
}
caption {
	caption-side: bottom;
	caption-side: block-end; /* Logical property; caption-side: bottom als fallback */
	padding-block-start: var(--toepassing-space-padding-sm);
	text-align: end;
}

.data-overview {
	th {
		inline-size: calc(var(--toepassing-size-xl) * 2);
	}
}

/* Uitklapblok (details/summary) */

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

/* 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-component-card-padding);
	section {
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
		&:not(:last-of-type) {
			border-block-end: var(--toepassing-border-default);
			padding-block-end: var(--toepassing-space-padding-lg);
		}
	}
	h2,
	h3,
	h4 {
		font-size: var(--toepassing-text-size-title-xl);
		a {
			color: var(--toepassing-color-interactive-default-text);
		}
	}
	h4 {
		font-size: var(--toepassing-text-size-title-lg);
	}
	a:not(.btn-cta) {
		text-decoration: none;
		p {
			color: var(--toepassing-color-text-default);
		}
		&:hover {
			h3,
			h4 {
				color: var(--toepassing-color-interactive-hover-text);
				text-decoration: underline;
			}
		}
		/* Onzichtbare link die de hele card klikbaar maakt */
		&:focus-visible .card-link {
			outline: var(--toepassing-focus-outline);
		}
	}
	.list-content-links {
		list-style: none;
		padding: 0;
		li {
			padding-block-end: var(--toepassing-space-padding-md);
			position: relative;
			&:not(:last-child) {
				border-block-end: var(--toepassing-border-default);
				.content-link {
					padding-block-end: 0;
				}
			}
			> * + * {
				margin-block-start: var(--toepassing-space-layout-2xs);
			}
		}
		li:has(.status-unread) {
			border-inline-start: var(--toepassing-border-width-md) solid var(--toepassing-color-feedback-info-border);
			padding-inline-start: var(--toepassing-space-padding-sm);
		}
		.status-unread h3 {
			font-weight: var(--toepassing-text-font-weight-bold);
		}
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
	}
	/* Extern-link icoon achter headings */
	.content-link {
		&[rel="external"] h3::after {
			content: "";
			display: inline-block;
			inline-size: var(--toepassing-size-icon-sm);
			block-size: var(--toepassing-size-icon-sm);
			margin-inline-start: var(--toepassing-space-margin-2xs);
			background-color: currentColor;
			mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
		}
	}
}
/* Onzichtbare overlay-link voor klikbare cards */
.card-link {
	block-size: 100%;
	inline-size: 100%;
	inset-block-start: 0;
	outline-offset: var(--toepassing-focus-outline-offset-2);
	position: absolute;
}

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

/* 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);
	}
	> * + * {
		margin-block-start: var(--toepassing-space-layout-3xs);
	}
}

/* Iconen */

.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: none;
	svg {
		block-size: var(--toepassing-size-icon-sm);
	}
}
.icon-link {
	&:hover {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: underline !important;
	}
}

/* Favoriet toggle (checkbox gestyled als hartje) en optie om topic te verbergen/verwijderen */
.save-favorite,
.hide-topic,
.delete-topic,
.show-topic,
.mark-relevant,
.mark-irrelevant {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font: var(--toepassing-text-smalltext);
	color: var(--toepassing-color-interactive-default-icon);
	position: relative; /* Boven de card-link overlay */
	input {
		appearance: none;
		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: 0;
		margin-inline-end: var(--toepassing-space-margin-3xs);
		mask: url("../assets/icons/icon-favoriet-outline.svg") no-repeat center / contain;
		padding: 0;
		transition: var(--toepassing-transition-default);
		vertical-align: middle;
		&:hover {
			color: var(--toepassing-color-feedback-favorite-hover);
			background-color: var(--toepassing-color-feedback-favorite-hover);
		}
		&:checked {
			mask-image: url("../assets/icons/icon-favoriet.svg");
			color: var(--toepassing-color-feedback-favorite-icon);
			background-color: var(--toepassing-color-feedback-favorite-icon);
			&:hover {
				background-color: var(--toepassing-color-feedback-favorite-hover);
			}
			& ~ .favorite-label {
				font-size: 0;
				&::after {
					content: "Bewaard";
					font: var(--toepassing-text-smalltext);
				}
			}
		}
	}
	&:hover {
		color: var(--toepassing-color-interactive-hover-text);
	}
}
.hide-topic,
.delete-topic,
.show-topic,
.mark-relevant,
.mark-irrelevant {
	&::before {
		background-color: currentColor;
		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;
	}
}
.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);
	}
}
.show-topic {
	&::before {
		mask: url("../assets/icons/icon-tonen.svg") no-repeat center / contain;
	}
}
.mark-relevant {
	&::before {
		mask: url("../assets/icons/icon-vink.svg") no-repeat center / contain;
	}
	&[aria-pressed="true"] {
		color: var(--toepassing-color-feedback-success-icon);
		&::before {
			background-color: var(--toepassing-color-feedback-success-icon);
		}
	}
}
.mark-irrelevant {
	&::before {
		mask: url("../assets/icons/icon-sluiten.svg") no-repeat center / contain;
	}
	&[aria-pressed="true"] {
		color: var(--toepassing-color-feedback-error-icon);
		&::before {
			background-color: var(--toepassing-color-feedback-error-icon);
		}
	}
}

#saved-groups section {
	margin-block-end: var(--toepassing-space-layout-sm);
	padding-block-end: 0;
}

/* Badge (teller/label naast headings of in navigatie) */
.badge {
	background: var(--toepassing-color-component-badge-background);
	min-block-size: var(--toepassing-size-icon-sm);
	border-radius: var(--toepassing-border-radius-round);
	color: var(--toepassing-color-component-badge-text);
	font: var(--toepassing-text-component-text-badge);
	margin-inline-start: auto;
	min-inline-size: var(--toepassing-size-icon-xs);
	padding: 0 var(--toepassing-space-padding-xs);
	text-align: center;
}
h1,
h2,
h3,
h4 {
	.badge {
		margin-inline-start: var(--toepassing-space-margin-2xs);
		vertical-align: text-top;
	}
}

/* Notificaties (feedback banners) */

.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-xs);
	padding: var(--toepassing-space-padding-md);
	&[hidden] {
		display: none;
	}
	svg {
		align-self: self-start;
		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 {
		fill: var(--toepassing-color-feedback-info-icon);
	}
}
.feedback-succes {
	background: var(--toepassing-color-feedback-success-subtle);
	border-color: var(--toepassing-color-feedback-success-border);
	svg {
		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 {
		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 {
		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);
}

/* Accountwisselaar */

.account-switcher {
	position: relative;
}
.account-switcher-toggle {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	&::after {
		border-block-start: 0.35em solid currentColor;
		border-inline: 0.3em solid transparent;
		content: "";
		margin-inline-start: var(--toepassing-space-padding-2xs);
	}
	&:hover,
	&:focus {
		background: none !important;
		color: inherit !important;
	}
}
.account-switcher-label strong {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
.account-switcher-menu {
	background: var(--toepassing-color-background-default);
	border: var(--toepassing-border-default);
	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: 20rem;
	padding: var(--toepassing-space-padding-xs);
	position: absolute;
	z-index: 100;
	a {
		align-items: baseline;
		border-radius: var(--toepassing-border-radius-sm);
		color: inherit;
		display: flex;
		justify-content: space-between;
		gap: var(--toepassing-space-padding-sm);
		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);
		}
	}
	span {
		color: var(--toepassing-color-text-subtle-2);
		font: var(--toepassing-text-smalltext-default);
	}
	> * + * {
		margin-block-start: 0;
	}
	.account-switcher-group-label {
		color: var(--toepassing-color-text-subtle-1);
		font: var(--toepassing-text-smalltext-default);
		font: var(--toepassing-text-heading-h5);
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		&:not(:first-child) {
			border-block-start: var(--toepassing-border-default);
			margin-block-start: var(--toepassing-space-padding-xs);
			padding-block-start: var(--toepassing-space-padding-sm);
		}
	}
}

/* Feature flags toggle-paneel */

.feature-flags-toggle {
	background: var(--toepassing-color-feedback-neutral-emphasis);
	border: none;
	border-radius: var(--toepassing-border-radius-md) var(--toepassing-border-radius-md) 0 0;
	color: var(--toepassing-color-text-inverse);
	cursor: pointer;
	font: var(--toepassing-text-smalltext-default);
	font-weight: var(--toepassing-text-font-weight-semi-bold);
	inset-block-end: 0;
	inset-inline-end: var(--toepassing-space-padding-lg);
	padding-block: var(--toepassing-space-padding-2xs);
	padding-inline: var(--toepassing-space-padding-sm);
	position: fixed;
	z-index: 1000;
	&:hover {
		background: var(--toepassing-color-interactive-hover-background);
	}
}

/* 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-default);
	border: var(--toepassing-border-default);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-box-shadow-default);
	font: var(--toepassing-text-smalltext-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: 1000;
	.feature-flags-heading {
		font: var(--toepassing-text-heading-h3);
		margin-block-end: var(--toepassing-space-padding-sm);
	}
	.feature-flags-group-heading {
		border-block-start: var(--toepassing-border-default);
		color: var(--toepassing-color-text-subtle-1);
		font: var(--toepassing-text-heading-h4);
		margin-block: var(--toepassing-space-padding-sm);
		padding-block-start: var(--toepassing-space-padding-sm);
	}
	ul {
		list-style: none;
		padding: 0;
	}
	label {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: var(--toepassing-space-padding-xs);
		padding-block: var(--toepassing-space-padding-2xs);
	}
	.settings-radio-group {
		border: none;
		display: flex;
		align-items: center;
		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 {
			display: flex;
			align-items: center;
			gap: var(--toepassing-space-padding-2xs);
			padding: 0;
		}
	}
	.settings-field {
		margin-block: var(--toepassing-space-padding-2xs);
		label {
			display: flex;
			flex-direction: column;
			gap: 2px;
			font-weight: var(--toepassing-text-font-weight-semi-bold);
			padding-block: 0;
		}
		input[type="password"],
		input[type="text"] {
			border: var(--toepassing-border-default);
			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-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);
		}
	}
}

/* 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: 280px;
	inset-block-start: 0;
	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-origin: center;
	transform: rotate(45deg);
	&:hover {
		background: var(--toepassing-color-feedback-success-emphasis);
		color: var(--toepassing-color-text-inverse);
	}
}

/* Doorkijkjes navigatie */
.temp-moza-subnav-preview {
	display: flex;
	/* opacity: var(--toepassing-opacity-interactive-disabled); */
	a {
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-md);
		inline-size: 100%;
	}
	&:not(:has(~ .temp-moza-subnav-preview)) {
		border-block-end: var(--toepassing-border-default);
		border-color: var(--toepassing-color-interactive-disabled-border);
		margin-block-end: var(--toepassing-space-margin-xs);
	}
}
.temp-moza-subnav-preview-heading {
	border-block-end: var(--toepassing-border-default);
	border-color: var(--toepassing-color-interactive-disabled-border);
	font-style: italic;
	margin-block-start: 1rem;
	padding: 0.5rem;
}
.temp-moza-disabled {
	opacity: var(--toepassing-opacity-interactive-disabled);
}

/* Overige tijdelijke styling */
.card h2 + ul {
	margin-block-start: var(--toepassing-space-margin-xs);
}

/* Digitale Assistent — Chat */

.chat-container {
	gap: var(--toepassing-space-padding-sm);
}
.chat-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--toepassing-space-padding-md);
	flex-wrap: wrap;
}
.chat-switches {
	display: flex;
	gap: var(--toepassing-space-padding-sm);
	flex-shrink: 0;
	align-items: center;
}
.mode-switch {
	border: var(--toepassing-border-default);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	flex-shrink: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
.mode-option {
	cursor: pointer;
	display: flex;
	font: var(--toepassing-text-label);
	margin: 0;
	input {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
	}
	span {
		display: block;
		padding: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-md);
		transition: var(--toepassing-transition-default);
	}
	&:hover span {
		background: var(--toepassing-color-interactive-alternate-hover-background);
	}
	input:checked + span {
		background: var(--toepassing-color-interactive-default-background);
		color: var(--toepassing-color-text-inverse);
	}
	input:focus-visible + span {
		outline: var(--toepassing-focus-outline);
		outline-offset: var(--toepassing-size-5xs);
	}
	input:disabled + span {
		opacity: 0.5;
		cursor: not-allowed;
	}
	&:has(input:disabled) {
		cursor: not-allowed;
	}
}
.chat-status {
	font: var(--toepassing-text-smalltext-default);
	color: var(--toepassing-color-text-subtle-1);
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-md);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		margin: 0;
		&::before {
			display: inline-block;
			margin-inline-end: var(--toepassing-space-padding-2xs);
		}
	}
	.chat-status-connected::before {
		content: "\25CF";
		color: var(--toepassing-color-feedback-success-icon);
	}
	.chat-status-disconnected::before {
		content: "\25CF";
		color: var(--toepassing-color-interactive-disabled-border);
	}
	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-default);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-padding-sm);
	max-block-size: 60vh;
	overflow-y: auto;
	padding: var(--toepassing-space-padding-md);
}
.chat-message {
	border-radius: var(--toepassing-border-radius-md);
	max-inline-size: 85%;
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
	p {
		margin-block-end: 0;
	}
}
.chat-message-assistant,
.chat-message-loading {
	align-self: flex-start;
	background: var(--toepassing-color-background-subtle);
}
.chat-message-user {
	align-self: flex-end;
	background: var(--toepassing-color-interactive-default-background);
	color: var(--toepassing-color-text-inverse);
}
.chat-message-error {
	align-self: flex-start;
	background: var(--toepassing-color-feedback-error-subtle);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-feedback-error-border);
}
.chat-message-loading {
	font-style: italic;
	opacity: var(--toepassing-opacity-interactive-disabled);
}
.chat-message-thinking {
	font-style: italic;
	opacity: var(--toepassing-opacity-interactive-disabled);
	.thinking-text::before {
		content: "";
		display: inline-block;
		inline-size: 0.7em;
		block-size: 0.7em;
		border: 2px solid currentColor;
		border-block-start-color: transparent;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
		margin-inline-end: 0.5em;
		vertical-align: middle;
	}
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.chat-input-form {
	display: flex;
	gap: var(--toepassing-space-padding-sm);
	textarea {
		flex: 1;
		resize: none;
		min-block-size: var(--toepassing-pointer-target-min-size);
		max-block-size: 8rem;
	}
	button {
		align-self: flex-end;
	}
}
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}