/*
 * Gedeelde sectie-opmaak voor alle PentestScan-blokken.
 * Uitsluitend presets uit theme.json (var(--wp--preset--…) en var(--wp--custom--…)).
 * Geen losse kleuren of maten: pas ze aan onder Weergave → Editor → Stijlen.
 */

.ps-section {
	--ps-fg: var(--wp--preset--color--navy);
	--ps-body: var(--wp--preset--color--ink-soft);
	--ps-muted: var(--wp--preset--color--slate);
	--ps-accent: var(--wp--preset--color--teal-ink);
	--ps-border: var(--wp--preset--color--line);
	--ps-grid-line: var(--wp--custom--grid--on-light);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--ps-bg, var(--wp--preset--color--white));
	color: var(--ps-fg);
	padding-block: var(--ps-pt, var(--wp--preset--spacing--section)) var(--ps-pb, var(--wp--preset--spacing--section));
	scroll-margin-top: var(--wp--custom--header--height);
	margin-block: 0;
}

.ps-section *,
.ps-section *::before,
.ps-section *::after { box-sizing: border-box; }

/* Lichte tekst op een donkere achtergrond (automatisch of zelf gekozen). */
.ps-section--dark {
	--ps-fg: var(--wp--preset--color--white);
	--ps-body: var(--wp--preset--color--mist);
	--ps-muted: var(--wp--preset--color--slate-light);
	--ps-accent: var(--wp--preset--color--teal);
	--ps-border: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	--ps-grid-line: var(--wp--custom--grid--on-dark);
}

/* Raster (ruitjes): 1px lijnen, cel uit theme.json, optionele fade. */
.ps-section--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--ps-grid-line) var(--wp--custom--grid--line), transparent var(--wp--custom--grid--line)),
		linear-gradient(90deg, var(--ps-grid-line) var(--wp--custom--grid--line), transparent var(--wp--custom--grid--line));
	background-size: var(--wp--custom--grid--cell) var(--wp--custom--grid--cell);
}
.ps-section--fade-ltr::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.ps-section--fade-rtl::before { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.ps-section--fade-ttb::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.ps-section--fade-btt::before { -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 85%); mask-image: linear-gradient(0deg, #000 0%, transparent 85%); }

/* Radar (scan-animatie): ringen + kruis + draaiende conic-sweep. */
.ps-radar {
	position: absolute;
	z-index: -1;
	top: 50%;
	width: var(--wp--custom--radar--size);
	aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
}
.ps-radar--right { right: calc(var(--wp--custom--radar--size) * -0.29); }
.ps-radar--left { left: calc(var(--wp--custom--radar--size) * -0.29); }
.ps-radar--center { left: 50%; transform: translate(-50%, -50%); }
.ps-radar--corner { top: 0; right: 0; width: calc(var(--wp--custom--radar--size) * 0.72); transform: translate(31%, -28%); }
.ps-radar--corner .ps-radar__ring:nth-child(n+3),
.ps-radar--corner .ps-radar__axis { display: none; }
.ps-radar--corner .ps-radar__ring:nth-child(2) { inset: 15.6%; }
.ps-radar__ring { position: absolute; border-radius: 50%; border: 1px solid var(--wp--custom--radar--ring); }
.ps-radar__ring:nth-child(1) { inset: 0; }
.ps-radar__ring:nth-child(2) { inset: 12.2%; }
.ps-radar__ring:nth-child(3) { inset: 24.4%; }
.ps-radar__ring:nth-child(4) { inset: 36.7%; }
.ps-radar__axis { position: absolute; background: var(--wp--custom--radar--ring); }
.ps-radar__axis--h { left: 0; right: 0; top: 50%; height: 1px; }
.ps-radar__axis--v { top: 0; bottom: 0; left: 50%; width: 1px; }
.ps-radar__sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, var(--wp--custom--radar--sweep) 358deg, transparent 360deg);
	animation: ps-sweep var(--wp--custom--radar--duration) linear infinite;
}
@keyframes ps-sweep { to { transform: rotate(360deg); } }

/* Container: wideSize + zijmarge uit theme.json. */
.ps-section .ps-container {
	position: relative;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

/* Typografie binnen een sectie: twee klassen diep, zodat thema-elementstijlen niet winnen. */
.ps-section .ps-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ps-accent);
}
.ps-section .ps-h1,
.ps-section .ps-h2,
.ps-section .ps-h3 { margin: 0; color: var(--ps-fg); text-wrap: balance; font-family: var(--wp--preset--font-family--dm-sans); }
.ps-section .ps-h1 { font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.ps-section .ps-h2 { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ps-section .ps-h3 { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.ps-section .ps-h1 em,
.ps-section .ps-h2 em { font-style: normal; color: var(--ps-accent); }
.ps-section .ps-lead { margin: 0; font-size: var(--wp--preset--font-size--lead); line-height: 1.65; color: var(--ps-body); text-wrap: pretty; }
.ps-section .ps-text { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.75; color: var(--ps-body); text-wrap: pretty; }
.ps-section .ps-small { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--ps-muted); }
.ps-section .ps-mono { font-family: var(--wp--preset--font-family--jetbrains-mono); }
.ps-section .ps-stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--24); }
.ps-section .ps-stack > * { margin: 0; }

/* Knoppen (Yinga-buttons): primair navy, op navy teal; secundair een outline. */
.ps-section .yb-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--12); }
.ps-section a.yb-btn,
.ps-section span.yb-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	padding: calc(var(--wp--custom--button--padding-y) - 1px) calc(var(--wp--custom--button--padding-x) - 1px);
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--medium);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--custom--button--font-size);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.ps-section a.yb-btn--primary { background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.ps-section a.yb-btn--primary:hover { background-color: var(--wp--preset--color--teal-ink); color: var(--wp--preset--color--white); }
.ps-section a.yb-btn--secondary { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--navy); font-weight: 600; }
.ps-section a.yb-btn--secondary:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--navy); }
.ps-section--dark a.yb-btn--primary { background-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--navy); }
.ps-section--dark a.yb-btn--primary:hover { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); }
.ps-section--dark a.yb-btn--secondary { border-color: color-mix(in srgb, var(--wp--preset--color--white) 28%, transparent); color: var(--wp--preset--color--white); }
.ps-section--dark a.yb-btn--secondary:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); }
.ps-section a.yb-btn--tertiary { padding: 0; color: var(--ps-accent); font-weight: 600; }
.ps-section a.yb-btn--tertiary::after { content: "→"; }
.ps-section a.yb-btn--tertiary:hover { color: var(--ps-fg); }
.ps-section a.yb-btn:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
.ps-section span.yb-btn--placeholder { border: 1px dashed var(--ps-border); color: var(--ps-muted); }
.ps-section .yb-btn__leeg { font-size: var(--wp--preset--font-size--x-small); font-weight: 400; }

/* Ernst-pills (gedeeld door hero, rapport en ernsttabel). */
.ps-section .ps-sev {
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.ps-sev--critical { background-color: var(--wp--preset--color--sev-critical); color: var(--wp--preset--color--white); }
.ps-sev--high { background-color: var(--wp--preset--color--sev-high-tint); color: var(--wp--preset--color--sev-high-text); }
.ps-sev--medium { background-color: var(--wp--preset--color--sev-medium-tint); color: var(--wp--preset--color--sev-medium-text); }
.ps-sev--low { background-color: var(--wp--preset--color--sev-low-tint); color: var(--wp--preset--color--sev-low); }
.ps-sev--info { background-color: var(--wp--preset--color--sev-info-tint); color: var(--wp--preset--color--sev-info); }
.ps-sev--solid.ps-sev--high { background-color: var(--wp--preset--color--sev-high); color: var(--wp--preset--color--white); }
.ps-sev--solid.ps-sev--medium { background-color: var(--wp--preset--color--sev-medium); color: var(--wp--preset--color--white); }
.ps-sev--solid.ps-sev--low { background-color: var(--wp--preset--color--sev-low); color: var(--wp--preset--color--white); }
.ps-sev--solid.ps-sev--info { background-color: var(--wp--preset--color--sev-info); color: var(--wp--preset--color--white); }

/* Foto's: radius uit theme.json. */
.ps-section .ps-photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--wp--preset--border-radius--large);
	background-color: var(--wp--preset--color--line-soft);
}
.ps-section .ps-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.ps-section *,
	.ps-section *::before { animation: none !important; transition: none !important; }
}

/* --- Gedeelde onderdelen van de blokken ----------------------------------- */

/* Sectiekop: eyebrow + H2 links, lead rechts (onderaan uitgelijnd). */
.ps-section .ps-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: var(--wp--preset--spacing--24) var(--wp--preset--spacing--72);
	align-items: end;
}
.ps-section .ps-head--stacked { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.ps-section .ps-head__titles { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.ps-section .ps-container > .ps-head + * { margin-top: var(--wp--preset--spacing--48); }

/* Raster dat terugvalt naar één kolom. */
.ps-section .ps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ps-min, 300px)), 1fr));
	gap: var(--ps-gap, var(--wp--preset--spacing--20));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Item: mono label, titel, tekst. */
.ps-section .ps-item { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--12); margin: 0; }
.ps-section .ps-item > * { margin: 0; }
.ps-section .ps-item__label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: var(--ps-accent);
}
.ps-section .ps-item__label--caps { letter-spacing: 0.12em; text-transform: uppercase; }
.ps-section .ps-item__title { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.25; color: var(--ps-fg); }
.ps-section .ps-item__title--sm { font-size: var(--wp--preset--font-size--lead); line-height: 1.3; }
.ps-section .ps-item__text { font-size: var(--wp--preset--font-size--medium-small); line-height: 1.65; color: var(--ps-body); }

/* Kaart: wit, lijnrand, radius 16. Hover: −3px of teal rand. */
.ps-section .ps-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	padding: var(--wp--preset--spacing--28);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--large);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: transform var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.ps-section a.ps-card:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--navy); }
.ps-section .ps-card--lift:hover { transform: translateY(-3px); }
.ps-section .ps-card .ps-item__title { color: var(--wp--preset--color--navy); }
.ps-section .ps-card .ps-item__text { color: var(--wp--preset--color--slate); }
.ps-section .ps-card .ps-item__label { color: var(--wp--preset--color--teal-ink); }

/* Mono streepje-opsomming. */
.ps-section .ps-dash-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ps-section .ps-dash-list li { display: flex; gap: 10px; }
.ps-section .ps-dash-list li::before { content: "—"; flex: none; font-family: var(--wp--preset--font-family--jetbrains-mono); color: var(--ps-accent); }

/* Chips. */
.ps-section .ps-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: 0; list-style: none; }
.ps-section .ps-chips li {
	padding: 7px var(--wp--preset--spacing--12);
	border: 1px solid var(--ps-border);
	border-radius: var(--wp--preset--border-radius--full);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	color: var(--ps-fg);
}

/* Lege plek voor een foto die nog moet komen. */
.ps-section .ps-photo--empty { display: grid; place-items: center; border: 1px dashed var(--ps-border); background-color: color-mix(in srgb, var(--ps-fg) 6%, transparent); }
.ps-section .ps-photo--empty span { font-size: var(--wp--preset--font-size--small); color: var(--ps-muted); }

/* Tekstlink met pijl. */
.ps-section .ps-arrow-link { font-weight: 600; color: var(--ps-accent); text-decoration: none; }
.ps-section .ps-arrow-link::after { content: " →"; }
.ps-section .ps-arrow-link:hover { color: var(--ps-fg); }

/* Mono codeblok (rapport-mock, artikel). */
.ps-section .ps-code, .ps-code {
	margin: 0;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--medium);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre;
}