/*
 * PentestScan: alleen wat theme.json niet kan uitdrukken.
 * Alle waarden zijn presets of custom properties uit theme.json.
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(input, select, textarea, button) { font-family: inherit; }

/* Header: sticky, wit 96% + blur, onderrand. */
.ps-site-header {
	background-color: var(--wp--custom--header--background);
	-webkit-backdrop-filter: blur(var(--wp--custom--header--blur));
	backdrop-filter: blur(var(--wp--custom--header--blur));
	border-bottom: 1px solid var(--wp--preset--color--line);
	z-index: 20;
}
.ps-logo img { display: block; height: auto; }
.ps-logo a { display: block; }
@media (max-width: 480px) { .ps-site-header .ps-logo img { max-width: 140px; } }
.admin-bar .ps-site-header.is-position-sticky { top: var(--wp-admin--admin-bar--height, 0px); }
.ps-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.ps-site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--teal-ink); }
.ps-site-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--preset--border-radius--medium);
	padding: var(--wp--preset--spacing--8);
}

/* Footer: teal bovenrand, raster dat naar beneden uitfadet. */
.ps-site-footer { position: relative; overflow: hidden; }
.ps-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--wp--custom--grid--on-dark) var(--wp--custom--grid--line), transparent var(--wp--custom--grid--line)),
		linear-gradient(90deg, var(--wp--custom--grid--on-dark) var(--wp--custom--grid--line), transparent var(--wp--custom--grid--line));
	background-size: var(--wp--custom--grid--cell) var(--wp--custom--grid--cell);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.ps-site-footer > * { position: relative; }
.ps-site-footer .is-style-mono,
.ps-site-footer .ps-mono a { font-family: var(--wp--preset--font-family--jetbrains-mono); }

/* Paragraaf-stijl Eyebrow op navy: teal i.p.v. teal-ink. */
.is-style-section-navy .is-style-eyebrow { color: var(--wp--preset--color--teal); }

/* Knoppen: transitie 0.2s zoals in het ontwerp. */
.wp-element-button, .wp-block-button__link { transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--teal); background-color: transparent; color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-outline-light .wp-block-button__link:hover { border-color: var(--wp--preset--color--teal); background-color: transparent; color: var(--wp--preset--color--white); }

/* Inputs: focus-rand teal (geldt ook voor Gravity Forms). */
:where(input:not([type=checkbox]):not([type=radio]), textarea, select):focus { outline: none; border-color: var(--wp--preset--color--teal); }

/* Codeblokken: mono uit theme.json, horizontaal scrollen i.p.v. uitlopen. */
.wp-block-code { overflow-x: auto; }
.wp-block-code code { font-family: inherit; }

/* Secties sluiten op elkaar aan: geen blockGap tussen header, main en footer. */
.wp-site-blocks > * { margin-block: 0; }
.ps-site-header .wp-block-button__link { white-space: nowrap; }

/* Hamburger onder 1024px: vijf menu-items + taalwissel + CTA passen daaronder niet op één regel. */
@media (max-width: 1023px) {
	.ps-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ps-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.ps-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--gutter);
	font-size: var(--wp--preset--font-size--lead);
}

/* --- Kennisbank-artikel (template single): tekst 700px + sticky zijbalk 300px --- */
.ps-article {
	display: grid;
	grid-template-columns: minmax(0, 700px) minmax(0, 300px);
	justify-content: space-between;
	gap: var(--wp--preset--spacing--56) var(--wp--preset--spacing--72);
	align-items: start;
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--gutter));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--56) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--section);
}
.ps-article > .ps-article-aside { position: sticky; top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--24)); }
.admin-bar .ps-article > .ps-article-aside { top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--24) + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 899px) {
	.ps-article { grid-template-columns: minmax(0, 1fr); }
	.ps-article > .ps-article-aside { position: static; }
}
.ps-article__main > * + * { margin-top: var(--wp--preset--spacing--24); }
.ps-article__image { margin-bottom: var(--wp--preset--spacing--12); }
.ps-article__image img { border-radius: var(--wp--preset--border-radius--large); }
.ps-article__content { font-size: var(--wp--preset--font-size--article); line-height: 1.8; color: var(--wp--preset--color--ink); }
.ps-article__content > * { margin-block: 0; }
.ps-article__content > * + * { margin-top: var(--wp--preset--spacing--24); }
.ps-article__content p { color: var(--wp--preset--color--ink); }
.ps-article__content h2 { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--article-heading); line-height: 1.2; letter-spacing: -0.015em; scroll-margin-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--24)); }
.ps-article__content h3 { margin-top: var(--wp--preset--spacing--32); }
.ps-article__content strong { color: var(--wp--preset--color--navy); }
.ps-article__content .is-style-callout .is-style-eyebrow { margin: 0; }