/**
 * DPIA Depot – publieke documentpagina.
 *
 * Bewust terughoudend en thema-neutraal opgemaakt: alleen structuur en de
 * duidelijk herkenbare downloadknop met drie toestanden.
 */

/* Praktijk voor Privacy — huisstijl. Op :root gedefinieerd (niet op
   .dpia-document) zodat elk plugin-onderdeel ze kan gebruiken, ook losstaande
   shortcodes zoals [dpia_prijzen] die buiten .dpia-document kunnen renderen.
   Wijzigingen hier gelden dus automatisch overal. */
:root {
	--pvp-primary: #1e2a5a;        /* koppen, hoofdaccenten            */
	--pvp-secondary: #006494;      /* secundaire elementen             */
	--pvp-accent: #0fa2cc;         /* primaire actieknop (highlight)   */
	--pvp-accent-hover: #0c86a8;
	--pvp-bg-light: #e6f2f7;       /* lichte sectie-achtergrond        */
	--pvp-viewer-bg: #f3f4f6;      /* achtergrond documentviewer       */
	--pvp-border: #d1d5db;
	--pvp-border-soft: #e6f2f7;
	--pvp-text: #3a3f4b;           /* body-tekst (dark gray)           */
	--pvp-text-muted: #687280;
	--pvp-success: #108981;        /* vinkjes                          */
	--pvp-radius: 12px;
	--pvp-radius-sm: 8px;
	--pvp-font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pvp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dpia-document {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 80rem; /* ≈ max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	font-family: var(--pvp-font-body);
	color: var(--pvp-text);
	line-height: 1.6;
}

/* De weergave haakt in op `the_content` en zit daardoor in de smalle
   contentkolom die het thema aan een gewoon bericht geeft — te smal voor de
   tweekoloms documentweergave. Zodra er ruimte is voor twee kolommen breken we
   thema-neutraal uit die kolom: het blok krijgt zijn eigen breedte (tot 80rem,
   met marge tot de vensterrand) en centreert zich t.o.v. de viewport i.p.v. de
   krappe kolom. Op smallere schermen is de layout toch één kolom en volgt de
   weergave gewoon de contentkolom. Werkt zolang de contentkolom zelf
   gecentreerd is, wat bij vrijwel elk thema het geval is. */
@media (min-width: 900px) {
	.dpia-document {
		--dpia-doc-width: min(80rem, 100vw - 3rem);
		width: var(--dpia-doc-width);
		max-width: none;
		margin-left: calc(50% - var(--dpia-doc-width) / 2);
		margin-right: 0;
	}
}

/* --- Split layout (twee kolommen op desktop) ----------------------------- */

.dpia-document__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* Mobiel: eerst de belangrijkste info/download (rechterkolom), dan de preview. */
.dpia-document__sidebar {
	order: -1;
}

@media (min-width: 900px) {
	.dpia-document__layout {
		grid-template-columns: 7fr 5fr; /* 12-koloms grid: 7 links, 5 rechts */
		align-items: start;             /* nodig voor sticky rechterkolom    */
	}

	.dpia-document__sidebar {
		order: 0;
	}
}

/* --- Documentviewer (linkerkolom) ---------------------------------------- */

.dpia-document__viewer-wrap {
	position: relative;
}

.dpia-document__viewer {
	max-height: 800px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
	background: var(--pvp-viewer-bg);
	border: 1px solid var(--pvp-border-soft);
	border-radius: var(--pvp-radius);
}

.dpia-document__viewer:focus-visible {
	outline: 2px solid var(--pvp-accent);
	outline-offset: 2px;
}

.dpia-document__preview {
	margin: 0 auto;
	width: 100%;
	max-width: 560px;
}

/* Vaste A4-verhouding, netjes gecentreerd, met subtiele schaduw. */
.dpia-document__preview-frame {
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pvp-border);
	border-radius: var(--pvp-radius-sm);
	box-shadow: 0 4px 14px rgba(30, 42, 90, 0.1);
}

.dpia-document__preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.dpia-document__preview-caption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	color: var(--pvp-text-muted);
}

/* Fade-out onderaan de viewer: vervaagt de laatste pagina's en toont de
   paywall-melding. Puur decoratief (aria-hidden) en klik-transparant. */
.dpia-document__fade {
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	height: 280px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1.75rem;
	text-align: center;
	pointer-events: none;
	border-radius: 0 0 var(--pvp-radius) var(--pvp-radius);
	background: linear-gradient(
		to bottom,
		rgba(243, 244, 246, 0) 0%,
		rgba(243, 244, 246, 0.85) 55%,
		var(--pvp-viewer-bg) 100%
	);
}

.dpia-document__fade-text {
	margin: 0;
	max-width: 24rem;
	font-family: var(--pvp-font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pvp-primary);
}

/* --- Rechterkolom: sticky info & acties ---------------------------------- */

.dpia-document__sidebar-inner {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpia-document__single {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpia-document__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.dpia-document__meta-number,
.dpia-document__meta-version,
.dpia-document__meta-author {
	font-family: var(--pvp-font-head);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pvp-text-muted);
}

.dpia-document__sidebar-heading {
	margin: 0 0 0.75rem;
	font-family: var(--pvp-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pvp-primary);
}

.dpia-document__summary-body {
	font-size: 0.95rem;
	color: var(--pvp-text);
}

.dpia-document__summary-body > :first-child { margin-top: 0; }
.dpia-document__summary-body > :last-child { margin-bottom: 0; }

/* --- Inbegrepen hoofdstukken (checklist) --------------------------------- */

.dpia-document__chapters {
	padding: 1.25rem 1.5rem;
	background: var(--pvp-bg-light);
	border: 1px solid var(--pvp-border-soft);
	border-radius: var(--pvp-radius);
}

.dpia-document__chapter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpia-document__chapter {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.75rem;
	line-height: 1.45;
	font-size: 0.95rem;
}

/* Strak groen vinkje in plaats van een opsommingsteken. */
.dpia-document__chapter::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--pvp-success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dpia-document__chapter--level-1 {
	font-weight: 600;
	color: var(--pvp-primary);
}

.dpia-document__chapter--level-2 { padding-left: 2.75rem; }
.dpia-document__chapter--level-3 { padding-left: 3.75rem; }
.dpia-document__chapter--level-4,
.dpia-document__chapter--level-5,
.dpia-document__chapter--level-6,
.dpia-document__chapter--level-7,
.dpia-document__chapter--level-8,
.dpia-document__chapter--level-9 { padding-left: 4.75rem; }

.dpia-document__chapter--level-2::before { left: 1rem; }
.dpia-document__chapter--level-3::before { left: 2rem; }
.dpia-document__chapter--level-4::before,
.dpia-document__chapter--level-5::before,
.dpia-document__chapter--level-6::before,
.dpia-document__chapter--level-7::before,
.dpia-document__chapter--level-8::before,
.dpia-document__chapter--level-9::before { left: 3rem; }

/* Sub-hoofdstukken iets ingetogener dan de hoofdhoofdstukken. */
.dpia-document__chapter:not(.dpia-document__chapter--level-1) {
	font-size: 0.9rem;
	color: var(--pvp-text-muted);
}

/* --- Status / melding ----------------------------------------------------- */

.dpia-document__notice {
	padding: 0.75rem 1rem;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: var(--pvp-radius-sm);
	color: #713f12;
}

/* --- Downloadblok (bovenin de rechterkolom) ------------------------------ */

.dpia-document__download {
	padding: 1.5rem;
	border: 1px solid var(--pvp-border-soft);
	border-radius: var(--pvp-radius);
	background: #fff;
	box-shadow: 0 4px 14px rgba(30, 42, 90, 0.06);
	text-align: center;
}

.dpia-document__button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1.5rem;
	border-radius: var(--pvp-radius-sm);
	background: var(--pvp-accent);
	color: #fff;
	font-family: var(--pvp-font-head);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.dpia-document__button:hover,
.dpia-document__button:focus {
	background: var(--pvp-accent-hover);
	color: #fff;
	transform: translateY(-1px);
}

.dpia-document__button--login {
	background: var(--pvp-primary);
}

.dpia-document__button--login:hover,
.dpia-document__button--login:focus {
	background: #16204a;
}

/* Uitgeschakelde downloadknop in preview-modus. Blijft focusbaar
   (aria-disabled) zodat de uitleg voor schermlezers bereikbaar is, dus ook de
   button-defaults resetten én een zichtbare focusindicator behouden. */

.dpia-document__button--disabled {
	border: 0;
	font-family: var(--pvp-font-head);
	font-weight: 700;
	font-size: 1rem;
	background: #e5e7eb;
	color: #6b7280;
	cursor: not-allowed;
}

.dpia-document__button--disabled:hover,
.dpia-document__button--disabled:focus {
	background: #e5e7eb;
	color: #6b7280;
	transform: none;
}

.dpia-document__button--disabled:focus-visible {
	outline: 2px solid var(--pvp-accent);
	outline-offset: 2px;
}

.dpia-document__member-link {
	display: inline-block;
	margin-top: 0.9rem;
	font-family: var(--pvp-font-head);
	font-weight: 600;
	color: var(--pvp-secondary);
}

.dpia-document__member-link:hover,
.dpia-document__member-link:focus {
	color: var(--pvp-primary);
}

/* --- Terug naar overzicht ------------------------------------------------- */

.dpia-document__back {
	display: inline-block;
	font-family: var(--pvp-font-head);
	font-weight: 600;
	color: var(--pvp-secondary);
	text-decoration: none;
}

.dpia-document__back:hover,
.dpia-document__back:focus {
	color: var(--pvp-primary);
	text-decoration: underline;
}

.dpia-document__download-help {
	margin: 0.9rem 0 0;
	font-size: 0.88rem;
	color: var(--pvp-text-muted);
}

.dpia-document__download--denied {
	background: #fef2f2;
	border-color: #fecaca;
}

.dpia-document__download--denied .dpia-document__download-help {
	color: #991b1b;
}

/* --- Subtiele melding (shortcodes) --------------------------------------- */

.dpia-shortcode-notice {
	padding: 0.75rem 1rem;
	color: #64748b;
	font-style: italic;
}

/* --- Documententabel ([dpia_document_table]) ----------------------------- */

.dpia-table-wrap {
	margin: 1rem 0;
}

/* De tabel kan op smalle schermen breder zijn dan de viewport; deze wrapper
   vangt dat op met horizontale scroll, zodat niet de hele pagina scrollt.
   tabindex/role maken de scrollregio toetsenbord- en schermlezer-bereikbaar. */

.dpia-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dpia-table-scroll:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}

/* Besturingsrij boven de tabel: zoekveld + onderwerp-filter naast elkaar,
   op smalle schermen onder elkaar. */

.dpia-table-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1.25rem;
	margin-bottom: 0.35rem;
}

.dpia-table-search {
	flex: 1 1 18rem;
}

.dpia-table-filter {
	flex: 0 1 16rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.dpia-table-filter__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pvp-text-muted);
}

.dpia-table-filter__select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.4;
	cursor: pointer;
}

.dpia-table-filter__select:focus {
	outline: none;
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.dpia-table-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dpia-table-search__input {
	width: 100%;
	max-width: 22rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.4;
}

.dpia-table-search__input:focus {
	outline: none;
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Resultaatteller onder het zoekveld (live-regio voor schermlezers). */

.dpia-table-search__count {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: #475569;
}

/* Alleen zichtbaar voor schermlezers (o.a. de tabel-caption). */

.dpia-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dpia-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.95rem;
}

.dpia-table th,
.dpia-table td {
	padding: 0.65rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
	vertical-align: middle;
}

.dpia-table thead th {
	font-weight: 600;
	background: #f8fafc;
	border-bottom: 2px solid #cbd5e1;
}

.dpia-table tbody tr:hover {
	background: #f8fafc;
}

/* Sorteerbare kolomkoppen: de <th> behoudt de kolomkop-semantiek, de
   <button> erin verzorgt klik/toetsenbord en de richtingsindicator. */

.dpia-table th.dpia-sortable {
	padding: 0;
	user-select: none;
	white-space: nowrap;
}

.dpia-table__sort {
	display: block;
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

.dpia-table__sort:hover,
.dpia-table th.dpia-sortable:hover {
	background: #eef2f7;
}

.dpia-table__sort:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: -2px;
}

.dpia-table__sort::after {
	content: "\2195"; /* ↕ neutraal */
	margin-left: 0.4rem;
	font-size: 0.8em;
	color: #64748b;
}

.dpia-table th.dpia-sortable[aria-sort="ascending"] .dpia-table__sort::after {
	content: "\2191"; /* ↑ */
	color: #1d4ed8;
}

.dpia-table th.dpia-sortable[aria-sort="descending"] .dpia-table__sort::after {
	content: "\2193"; /* ↓ */
	color: #1d4ed8;
}

/* Fallback: verouderde (gecachte) markup waarin de <th> zelf klikbaar is. */

.dpia-table th.dpia-sortable[role="button"] {
	padding: 0.65rem 0.85rem;
	cursor: pointer;
}

.dpia-table th.dpia-sortable[role="button"]:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: -2px;
}

.dpia-table th.dpia-sortable[role="button"]::after {
	content: "\2195";
	margin-left: 0.4rem;
	font-size: 0.8em;
	color: #64748b;
}

.dpia-table th.dpia-sortable[role="button"][aria-sort="ascending"]::after {
	content: "\2191";
	color: #1d4ed8;
}

.dpia-table th.dpia-sortable[role="button"][aria-sort="descending"]::after {
	content: "\2193";
	color: #1d4ed8;
}

/* Klikbare documenttitel in de Proces-kolom (vervangt de losse actieknop). */

.dpia-table__title {
	color: var(--pvp-secondary);
	font-weight: 600;
	text-decoration: none;
}

.dpia-table__title:hover,
.dpia-table__title:focus {
	color: var(--pvp-primary);
	text-decoration: underline;
}

/* Onderwerp-kolom: termen als links naar hun archiefpagina. */

.dpia-table__subject {
	color: var(--pvp-secondary);
	text-decoration: none;
}

.dpia-table__subject:hover,
.dpia-table__subject:focus {
	color: var(--pvp-primary);
	text-decoration: underline;
}

.dpia-table__subject-empty {
	color: var(--pvp-text-muted);
}

/* --- Markering-badge ------------------------------------------------------ */

.dpia-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.dpia-badge-final {
	background: #dcfce7;
	color: #166534;
}

.dpia-badge-pre {
	background: #fef3c7;
	color: #92400e;
}

.dpia-badge-update {
	background: #dbeafe;
	color: #1e40af;
}

/* --- Wijzigingsgeschiedenis ----------------------------------------------- */

.dpia-document__changelog {
	padding: 1.25rem 1.5rem;
	background: var(--pvp-bg-light);
	border: 1px solid var(--pvp-border-soft);
	border-radius: var(--pvp-radius);
}

.dpia-document__changelog-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpia-document__changelog-entry {
	padding: 0.5rem 0;
	font-size: 0.9rem;
	line-height: 1.45;
}

.dpia-document__changelog-entry + .dpia-document__changelog-entry {
	border-top: 1px solid var(--pvp-border-soft);
}

.dpia-document__changelog-date {
	color: var(--pvp-text-muted);
	font-size: 0.8rem;
}

/* --- Inleiding boven de tabel -------------------------------------------- */

.dpia-table-intro {
	margin: 0 0 1.5rem;
}

/* --- Zwevend DPIA Depot-toegangspaneel ---------------------------------- */

/* Het paneel is géén onderdeel van het menu meer, maar zweeft (position:
   fixed) net onder de themaheader. De bovenrand-offset komt uit een door een
   klein script gezette CSS-variabele; ontbreekt die (geen JavaScript), dan
   geldt de fallback van 6rem. Kleuren volgen strikt de PvP-huisstijl. */

.dpia-depot-panel {
	position: fixed;
	top: var(--dpia-depot-panel-top, 6.5rem);
	right: var(--dpia-depot-panel-right, 1.5rem);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 16.5rem;
	max-width: calc(100vw - 2rem);
	padding: 0.7rem 0.75rem 0.75rem;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 14px;
	box-shadow:
		0 10px 28px rgba(30, 42, 90, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #3a3f4b;
	transition: top 0.15s ease;
}

/* Fallback zonder backdrop-filter-ondersteuning: iets ondoorzichtiger zodat
   de tekst leesbaar blijft. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dpia-depot-panel {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* Merk/koptekst: klikbaar naar de overzichtspagina. */

.dpia-depot-panel__brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #e6f2f7;
	text-decoration: none;
	color: #1e2a5a;
}

.dpia-depot-panel__brand:hover,
.dpia-depot-panel__brand:focus {
	color: #006494;
}

.dpia-depot-panel__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #e6f2f7;
	color: inherit;
}

.dpia-depot-panel__brand-mark svg {
	width: 18px;
	height: 18px;
}

.dpia-depot-panel__brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.dpia-depot-panel__brand-title {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 1.08rem;
	color: #1e2a5a;
}

.dpia-depot-panel__label {
	margin: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	color: #1e2a5a;
}

.dpia-depot-panel__message {
	margin: 0.15rem 0 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: #687280;
}

.dpia-depot-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.3rem;
}

/* Actieknoppen: eigen opmaak wordt bewust opgedwongen (color !important) zodat
   thema-linkstijlen de knoppen niet overschrijven. */

.dpia-depot-panel__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	padding: 0.5rem 0.8rem;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}

/* Tweeregelig knoplabel (bijv. "Inloggen voor leden" / "met eigen
   gemeente-account"). */

.dpia-depot-panel__action-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.dpia-depot-panel__action-title {
	font-size: 0.82rem;
	font-weight: 700;
}

.dpia-depot-panel__action-sub {
	font-size: 0.68rem;
	font-weight: 500;
	opacity: 0.9;
}

.dpia-depot-panel__action--primary {
	background: #0fa2cc;
	color: #ffffff !important;
}

.dpia-depot-panel__action--primary:hover,
.dpia-depot-panel__action--primary:focus {
	background: #0c86a8;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.dpia-depot-panel__action--ghost {
	flex: 0 1 auto;
	background: #ffffff;
	border-color: #d1d5db;
	color: #1e2a5a !important;
}

.dpia-depot-panel__action--ghost:hover,
.dpia-depot-panel__action--ghost:focus {
	background: #e6f2f7;
	color: #1e2a5a !important;
}

.dpia-depot-panel__ms {
	flex: none;
	display: block;
	background: #ffffff;
	padding: 2px;
	border-radius: 2px;
}

/* Footer-regel onder de knoppen: "Bekijk de DPIA's [of Word direct lid]". */

.dpia-depot-panel__footer {
	margin: 0.1rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid #e6f2f7;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #687280;
	text-align: center;
}

.dpia-depot-panel__footer-link {
	color: #006494;
	font-weight: 600;
	text-decoration: none;
}

.dpia-depot-panel__footer-link:hover,
.dpia-depot-panel__footer-link:focus {
	text-decoration: underline;
}

/* --- Inklapbaar in mobiele (hamburger)modus ------------------------------ */

/* Kopregel met het merk én de inklap-knop naast elkaar. */

.dpia-depot-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* De inklap-knop is standaard verborgen; een klein script maakt hem zichtbaar
   (verwijdert het hidden-attribuut én zet .is-collapsible) zodra het thema zijn
   hamburgermenu toont. Zonder dat script blijft het volledige paneel staan. */

.dpia-depot-panel__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	margin: -0.15rem -0.15rem -0.15rem 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #1e2a5a;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.dpia-depot-panel__toggle:hover,
.dpia-depot-panel__toggle:focus-visible {
	background: #e6f2f7;
}

.dpia-depot-panel__toggle svg {
	display: block;
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.dpia-depot-panel.is-collapsible .dpia-depot-panel__toggle {
	display: inline-flex;
}

/* In de inklapbare (hamburger)modus pinnen we het paneel met een vaste, kleine
   marge rechtsboven — los van de hero-gebaseerde --dpia-depot-panel-right die
   voor de volledige desktopweergave wordt berekend en op tussenbreedtes buiten
   beeld zou vallen. Wint qua specificiteit van zowel de basis- als de
   mobiele-strook-regel. */

.dpia-depot-panel.is-collapsible {
	left: auto;
	right: 1rem;
}

/* Ingeklapt: alleen de kopregel, compact (niet de volle breedte). */

.dpia-depot-panel.is-collapsible.is-collapsed {
	width: auto;
	padding: 0.5rem 0.6rem;
	gap: 0;
}

.dpia-depot-panel.is-collapsible.is-collapsed .dpia-depot-panel__brand {
	padding-bottom: 0;
	border-bottom: 0;
}

.dpia-depot-panel.is-collapsible.is-collapsed .dpia-depot-panel__body {
	display: none;
}

/* Uitgeklapt: chevron draait om (wijst omhoog = "inklappen"). */

.dpia-depot-panel.is-collapsible:not(.is-collapsed) .dpia-depot-panel__toggle svg {
	transform: rotate(180deg);
}

/* Mobiel: het paneel wordt een strook onder de header, over de volle breedte.
   In ingeklapte modus wint de compacte regel hierboven (hogere specificiteit). */

@media (max-width: 600px) {
	.dpia-depot-panel {
		left: 0.75rem;
		right: 0.75rem;
		width: auto;
	}
}

@media print {
	.dpia-depot-panel {
		display: none;
	}
}

/* --- Conversieblok onder de viewer --------------------------------------- */

/* Staat binnen .dpia-document, dus de --pvp-huisstijlvariabelen zijn hier
   beschikbaar (zoals bij de changelog- en samenvattingsblokken). */

.dpia-document__cta {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: var(--pvp-bg-light);
	border: 1px solid var(--pvp-border-soft);
	border-radius: var(--pvp-radius-sm);
}

.dpia-document__cta-title {
	font-family: var(--pvp-font-head);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pvp-primary);
	margin: 0 0 0.5rem;
}

.dpia-document__cta-body {
	font-size: 0.95rem;
	color: var(--pvp-text);
	margin: 0 0 1rem;
	line-height: 1.55;
}

.dpia-document__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.dpia-document__cta-btn {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: 30px;
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid var(--pvp-accent);
}

.dpia-document__cta-btn--primary {
	background: var(--pvp-accent);
	color: #ffffff;
}

.dpia-document__cta-btn--primary:hover,
.dpia-document__cta-btn--primary:focus {
	background: var(--pvp-accent-hover);
	border-color: var(--pvp-accent-hover);
	color: #ffffff;
}

.dpia-document__cta-fine {
	font-size: 0.75rem;
	color: var(--pvp-text-muted);
	margin: 0;
}

/* Optionele, opvallend getoonde extra actie (bijv. een tijdelijke aanbieding). */

.dpia-document__cta-highlight {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0.6rem 1rem;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: var(--pvp-radius-sm);
	color: #92400e;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.dpia-document__cta-highlight::before {
	content: "★";
	color: #d97706;
}

.dpia-document__cta-highlight:hover,
.dpia-document__cta-highlight:focus {
	background: #fde68a;
	border-color: #f59e0b;
	color: #78350f;
}

/* --- Prijzen-shortcode ([dpia_prijzen]) ---------------------------------- */

/* Gebruikt de --pvp-huisstijlvariabelen (nu op :root gedefinieerd), ook al
   kan deze shortcode los op een willekeurige pagina staan buiten
   .dpia-document. Zo volgt dit blok automatisch mee met wijzigingen in de
   standaard huisstijlvariabelen. */

/* Standaardprijs: prominent, want dit is de prijs voor de overgrote
   meerderheid van de leden (individuele gemeenten). */

.dpia-prijzen {
	/* Geen font-family hier: dit blok volgt het standaard lettertype van het
	   thema in plaats van de --pvp-huisstijllettertypen. */
	color: var(--pvp-text);
}

/* Prijskaart en staffeltabel naast elkaar op bredere schermen; op smalle
   schermen (zoals de rest van de site) onder elkaar. */

.dpia-prijzen__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 600px) {
	.dpia-prijzen__row {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.dpia-prijzen__standard {
	margin: 0;
	padding: 1.5rem 1.75rem;
	background: var(--pvp-bg-light);
	border: 1px solid var(--pvp-border-soft);
}

.dpia-prijzen__standard-label {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--pvp-secondary);
}

.dpia-prijzen__standard-price {
	margin: 0 0 0.35rem;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--pvp-primary);
	line-height: 1.2;
}

.dpia-prijzen__standard-price span {
	font-size: 1rem;
	font-weight: 500;
	color: var(--pvp-text-muted);
}

.dpia-prijzen__standard-sub {
	margin: 0;
	font-size: 0.9rem;
	color: var(--pvp-text-muted);
}

/* Staffelprijzen: nadrukkelijk als uitzondering gepresenteerd — kleiner en
   minder prominent dan de standaardprijs hiernaast. */

.dpia-prijzen__staffel-intro {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: var(--pvp-text-muted);
}

.dpia-prijzen__staffel {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.dpia-prijzen__staffel th,
.dpia-prijzen__staffel td {
	text-align: left;
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid var(--pvp-border-soft);
	color: var(--pvp-text-muted);
}

.dpia-prijzen__staffel thead th {
	font-weight: 600;
}

/* --- Footer documentpagina: gerelateerde DPIA's + terug-link ------------- */

.dpia-document__footer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pvp-border-soft);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.dpia-document__related-heading {
	margin: 0 0 0.75rem;
	font-family: var(--pvp-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pvp-primary);
}

.dpia-document__related-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dpia-document__related-item a {
	color: var(--pvp-secondary);
	text-decoration: none;
}

.dpia-document__related-item a:hover,
.dpia-document__related-item a:focus {
	color: var(--pvp-primary);
	text-decoration: underline;
}

/* --- Nieuwste DPIA's ([nieuwste_dpias]) ---------------------------------- */

.dpia-latest {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dpia-latest__item a {
	color: var(--pvp-secondary);
	text-decoration: none;
}

.dpia-latest__item a:hover,
.dpia-latest__item a:focus {
	color: var(--pvp-primary);
	text-decoration: underline;
}

/* --- Onderwerp-archiefpagina (/onderwerp/{slug}/) ------------------------- */

.dpia-onderwerp-archive {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--pvp-font-body);
	color: var(--pvp-text);
	line-height: 1.6;
}

.dpia-onderwerp-archive .dpia-document__back {
	display: inline-block;
	margin: 0.75rem 0;
}

.dpia-onderwerp-archive__header {
	margin: 0.5rem 0 1.5rem;
}

.dpia-onderwerp-archive__title {
	font-family: var(--pvp-font-head);
	color: var(--pvp-primary);
	margin: 0 0 0.5rem;
}

.dpia-onderwerp-archive__intro {
	color: var(--pvp-text-muted);
	max-width: 60rem;
}

.dpia-onderwerp-archive__grid {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dpia-onderwerp-card {
	margin: 0;
}

.dpia-onderwerp-card__link {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 1.1rem;
	background: #fff;
	border: 1px solid var(--pvp-border);
	border-radius: var(--pvp-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.dpia-onderwerp-card__link:hover,
.dpia-onderwerp-card__link:focus-visible {
	border-color: var(--pvp-accent);
	box-shadow: 0 6px 18px rgba(30, 42, 90, 0.12);
	transform: translateY(-2px);
}

.dpia-onderwerp-card__thumb {
	display: block;
	flex: 0 0 auto;
	width: 130px;
	background: var(--pvp-viewer-bg);
	border-right: 1px solid var(--pvp-border-soft);
	aspect-ratio: 1 / 1.414; /* A4 */
	overflow: hidden;
}

.dpia-onderwerp-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.dpia-onderwerp-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, #f3f4f6 0%, #e6f2f7 100%);
}

.dpia-onderwerp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem 1.1rem 0.9rem 0;
	min-width: 0;
}

.dpia-onderwerp-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.dpia-onderwerp-card__number,
.dpia-onderwerp-card__date {
	font-size: 0.8rem;
	color: var(--pvp-text-muted);
	font-variant-numeric: tabular-nums;
}

.dpia-onderwerp-card__title {
	font-family: var(--pvp-font-head);
	font-weight: 600;
	color: var(--pvp-primary);
	line-height: 1.35;
}

.dpia-onderwerp-card__excerpt {
	color: var(--pvp-text);
	font-size: 0.92rem;
	line-height: 1.55;
}

@media (max-width: 480px) {
	.dpia-onderwerp-card__thumb {
		width: 96px;
	}
}

.dpia-onderwerp-card__link:hover .dpia-onderwerp-card__title,
.dpia-onderwerp-card__link:focus-visible .dpia-onderwerp-card__title {
	text-decoration: underline;
}

.dpia-onderwerp-archive__pagination {
	margin: 1.5rem 0;
}

.dpia-onderwerp-archive__pagination .page-numbers {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	margin: 0 0.15rem;
	border: 1px solid var(--pvp-border);
	border-radius: var(--pvp-radius-sm);
	color: var(--pvp-secondary);
	text-decoration: none;
}

.dpia-onderwerp-archive__pagination .page-numbers.current {
	background: var(--pvp-primary);
	border-color: var(--pvp-primary);
	color: #fff;
}