/*
 * Fortuna UI — venster (modal) 2026: zelfde vorm als het zoekvenster (search-dialog.css), voor de uitleg van een woord uit de woordenlijst
 * en elk ander <dialog class="fu-dialog"> dat js/dialog.js maakt. Zet de oude opmaak van dialog.css om; alleen geladen met het nieuwe theme (bundel fu-site).
 *   kop: titel + sluitknop | tekst | voet: knoppen
 */
.fu-dialog {
	width: min(var(--fu-venster-breedte), calc(100% - var(--fu-space-8)));
	max-width: none;
	max-height: min(var(--fu-zoek-hoogte), calc(100dvh - var(--fu-space-24)));
	border-radius: var(--fu-r-lg);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-base);
	box-shadow: var(--fu-shadow-lg), 0 0 0 var(--fu-lijn) var(--fu-c-line);
}

.fu-dialog[open] { animation: fu-sd-in var(--fu-beweging-paneel); }

.fu-dialog::backdrop {
	background: var(--fu-scrim-sterk);
	-webkit-backdrop-filter: blur(var(--fu-blur-s));
	backdrop-filter: blur(var(--fu-blur-s));
}

.fu-dialog .fu-dialog__head {
	align-items: center;
	gap: var(--fu-space-3);
	padding: var(--fu-space-4) var(--fu-space-3) var(--fu-space-4) var(--fu-space-5);
	border-bottom: var(--fu-lijn) solid var(--fu-c-line);
}

.fu-dialog .fu-dialog__heading { padding-top: 0; }

.fu-dialog h2.fu-dialog__title {
	color: var(--fu-c-fg);
	font: var(--fu-display-weight) var(--fu-fs-xl) / 1.2 var(--fu-font-display);
	font-stretch: var(--fu-display-stretch);
	letter-spacing: var(--fu-track-display);
}

.fu-dialog .fu-badge {
	margin-top: var(--fu-space-1-5);
	padding: var(--fu-space-0-5) var(--fu-space-2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg-sub);
	font-size: var(--fu-fs-xs);
}

.fu-dialog .fu-dialog__status { padding: var(--fu-space-3-5) var(--fu-space-5) 0; color: var(--fu-c-fg-sub); font-weight: 400; }
.fu-dialog .fu-dialog__status:empty { display: none; }
.fu-dialog .fu-dialog__body { padding: var(--fu-space-4) var(--fu-space-5) var(--fu-space-5); line-height: 1.6; }
.fu-dialog .fu-dialog__body:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: calc(var(--fu-focus-breedte) * -1); }

.fu-dialog .fu-dialog__foot {
	align-items: center;
	padding: var(--fu-space-3) var(--fu-space-5);
	border-top: var(--fu-lijn) solid var(--fu-c-line);
	background: var(--fu-c-surface-sub);
}

/* Knoppen van dialog.js (oude namen) in de knoppen van 2026. */
.fu-dialog .fu-btn.fu-btn { border-radius: var(--fu-r-pill); font-family: var(--fu-font-text); font-size: var(--fu-fs-base); }
.fu-dialog .fu-btn.fu-btn--primary { background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.fu-dialog .fu-btn.fu-btn--primary:hover { background: var(--fu-c-brand-strong); color: var(--fu-c-on-brand); }
.fu-dialog .fu-btn.fu-btn--ghost { border-color: var(--fu-c-line-strong); background: transparent; color: var(--fu-c-fg); }
.fu-dialog .fu-btn.fu-btn--ghost:hover { border-color: var(--fu-c-fg); background: transparent; color: var(--fu-c-fg); }

.fu-dialog .fu-btn.fu-btn--close {
	flex: none;
	width: var(--fu-control-s);
	min-width: var(--fu-control-s);
	height: var(--fu-control-s);
	min-height: var(--fu-control-s);
	padding: 0;
	border-color: transparent;
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg);
}

.fu-dialog .fu-btn.fu-btn--close:hover { background: var(--fu-zand-100); color: var(--fu-c-fg); }
.fu-dialog .fu-btn--close svg { width: var(--fu-icoon-m); height: var(--fu-icoon-m); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Woordenboek: de uitlegtekst. */
.fu-dialog.fw-dialog .fw-lemma p { color: var(--fu-c-fg); }
.fu-dialog.fw-dialog .fw-lemma strong { color: var(--fu-c-fg); font-weight: 700; }
.fu-dialog.fw-dialog .fw-lemma a { color: var(--fu-c-link); text-underline-offset: 0.2em; }
.fu-dialog.fw-dialog .fw-loading,
.fu-dialog.fw-dialog .fw-dash-ring { color: var(--fu-c-brand); }
.fu-dialog.fw-dialog .fw-loading__label { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-base); }

@media (max-width: 599.98px) {
	.fu-dialog { width: calc(100% - var(--fu-space-4)); max-width: none; }
	.fu-dialog .fu-dialog__foot .fu-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.fu-dialog[open] { animation: none; }
}