/* ---------------------------------------------------------------
   Bohm theme  |  aanvullende styling bovenop theme.json
   --------------------------------------------------------------- */

:root {
	--bohm-ring: 0 0 0 1px var(--wp--preset--color--border);
	--bohm-radius: 10px;
	--bohm-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

/* Glow over de volle paginabreedte, achter de hero. Als blok-achtergrond
   liep hij tot de contentbreedte en kapte hij zichtbaar af. */
body::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 820px;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(125% 95% at 15% -12%,
			color-mix(in srgb, var(--wp--preset--color--accent) 26%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent) 36%,
			transparent 70%),
		radial-gradient(85% 70% at 90% -18%,
			color-mix(in srgb, var(--wp--preset--color--accent-2) 12%, transparent) 0%,
			transparent 62%);
}

body > * {
	position: relative;
	z-index: 1;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Focus die je daadwerkelijk ziet */
:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- Header ---------------------------------------------------- */

.bohm-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	backdrop-filter: blur(8px);
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

.bohm-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.bohm-header .wp-block-site-title a::before {
	content: "~/";
	color: var(--wp--preset--color--accent);
	margin-right: 0.15em;
}

.bohm-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Prompt-accent voor koppen --------------------------------- */

.bohm-prompt::before {
	content: "$ ";
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
}

.bohm-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* --- Caret animatie in de hero --------------------------------- */

.bohm-caret::after {
	content: "_";
	color: var(--wp--preset--color--accent);
	animation: bohm-blink 1.1s steps(2, start) infinite;
	margin-left: 0.08em;
}

@keyframes bohm-blink {
	to { visibility: hidden; }
}

/* --- Kaarten (posts, projecten, uses) -------------------------- */

.bohm-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bohm-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--bohm-transition), transform var(--bohm-transition);
	height: 100%;
}

.bohm-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--border));
	transform: translateY(-2px);
}

.bohm-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.bohm-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Post lijst ------------------------------------------------ */

.bohm-post-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.bohm-post-meta a { color: var(--wp--preset--color--muted); text-decoration: none; }
.bohm-post-meta a:hover { color: var(--wp--preset--color--accent); }

.wp-block-post-terms a,
.bohm-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.15em 0.75em;
	text-decoration: none;
	transition: border-color var(--bohm-transition), color var(--bohm-transition);
}

.wp-block-post-terms a:hover,
.bohm-tag:hover {
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

/* --- Artikelinhoud --------------------------------------------- */

/* Geen max-width op paragrafen: de leesbreedte komt uit contentSize in
   theme.json. Een smallere max-width botst met de automatische centrering
   van de constrained layout, waardoor korte regels ingesprongen raken. */

.bohm-content :where(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--40);
	scroll-margin-top: 5rem;
}

.bohm-content :where(p, li) code,
.bohm-content :where(p, li) kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 5px;
	padding: 0.1em 0.38em;
	color: var(--wp--preset--color--accent);
}

.bohm-content a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* --- Codeblokken ----------------------------------------------- */

.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	position: relative;
	tab-size: 2;
}

.wp-block-code code {
	display: block;
	line-height: 1.6;
	white-space: pre;
}

.bohm-copy {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.25em 0.6em;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--bohm-transition), color var(--bohm-transition);
}

.wp-block-code:hover .bohm-copy,
.bohm-copy:focus-visible {
	opacity: 1;
}

.bohm-copy:hover { color: var(--wp--preset--color--accent); }

/* Syntax highlighting, afgestemd op het palet */
.hljs-comment, .hljs-quote { color: #5f7286; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag, .hljs-type, .hljs-name, .hljs-strong { color: #ff9ecd; }
.hljs-string, .hljs-title, .hljs-attr, .hljs-addition { color: var(--wp--preset--color--accent); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-meta { color: var(--wp--preset--color--accent-3); }
.hljs-built_in, .hljs-class .hljs-title, .hljs-function .hljs-title { color: var(--wp--preset--color--accent-2); }
.hljs-variable, .hljs-template-variable, .hljs-attribute { color: #e6edf5; }
.hljs-deletion { color: #ff7b72; }

/* --- Tabellen -------------------------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6em 0.85em;
}

.wp-block-table th {
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	text-align: left;
}

/* --- Footer ---------------------------------------------------- */

.bohm-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.bohm-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.bohm-footer a:hover { color: var(--wp--preset--color--accent); }

/* --- Paginering ------------------------------------------------ */

.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination a { text-decoration: none; }

.wp-block-query-pagination-numbers .page-numbers {
	padding: 0.25em 0.6em;
	border: 1px solid transparent;
	border-radius: 6px;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--accent);
}

/* --- Skip link ------------------------------------------------- */

.skip-link:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	z-index: 100;
}

/* --- Scrollbar ------------------------------------------------- */

@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar { width: 11px; height: 11px; }
	::-webkit-scrollbar-track { background: var(--wp--preset--color--base); }
	::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--border);
		border-radius: 999px;
		border: 3px solid var(--wp--preset--color--base);
	}
	::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--muted); }
}