/*
Theme Name: T8 Lab
Theme URI: https://t8.nl
Author: Tonnaer Media
Author URI: https://tonnaermedia.nl
Description: Minimaal, snel en mobile-first classic theme voor t8.nl. Gebouwd als werkbank voor tools en experimenten: geen build-step, geen webfonts, geen jQuery, automatische light/dark-modus en een volle-breedte canvas-template voor losse tools.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: t8lab
Tags: one-column, custom-menu, custom-logo, editor-style, block-styles, wide-blocks, accessibility-ready, translation-ready
*/

/* =========================================================
   1. Design tokens (light = default)
   ========================================================= */
:root {
	--t8-bg: #ffffff;
	--t8-surface: #f6f7f8;
	--t8-surface-2: #ebeef0;
	--t8-border: #dde2e6;
	--t8-text: #14181b;
	--t8-muted: #5c656c;
	--t8-accent: #0d7d74;
	--t8-accent-hover: #0a635c;
	--t8-on-accent: #ffffff;
	--t8-code-bg: #f1f4f5;
	--t8-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -14px rgba(0, 0, 0, .22);

	--t8-content: 44rem;
	--t8-wide: 68rem;
	--t8-gutter: 1.25rem;
	--t8-radius: 10px;
	--t8-radius-sm: 6px;
	--t8-header-h: 3.5rem;

	--t8-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--t8-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	color-scheme: light;
}

/* Dark via systeemvoorkeur, tenzij bezoeker expliciet light koos */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--t8-bg: #0f1316;
		--t8-surface: #161b1f;
		--t8-surface-2: #1e252a;
		--t8-border: #293238;
		--t8-text: #e6ebee;
		--t8-muted: #97a3ab;
		--t8-accent: #2fd3c3;
		--t8-accent-hover: #5ae0d2;
		--t8-on-accent: #06211f;
		--t8-code-bg: #161b1f;
		--t8-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px -14px rgba(0, 0, 0, .7);
		color-scheme: dark;
	}
}

/* Dark via expliciete keuze van de bezoeker */
:root[data-theme="dark"] {
	--t8-bg: #0f1316;
	--t8-surface: #161b1f;
	--t8-surface-2: #1e252a;
	--t8-border: #293238;
	--t8-text: #e6ebee;
	--t8-muted: #97a3ab;
	--t8-accent: #2fd3c3;
	--t8-accent-hover: #5ae0d2;
	--t8-on-accent: #06211f;
	--t8-code-bg: #161b1f;
	--t8-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px -14px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

/* =========================================================
   2. Reset / base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--t8-bg);
	color: var(--t8-text);
	font-family: var(--t8-font);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	font-weight: 650;
	letter-spacing: -.012em;
	margin: 2em 0 .6em;
	text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); margin-top: 0; }
h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p, ul, ol, dl, figure, table, pre { margin: 0 0 1.25em; }

a { color: var(--t8-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--t8-accent-hover); }

:focus-visible {
	outline: 2px solid var(--t8-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--t8-border);
	margin: 2.5em 0;
}

code, kbd, samp, pre { font-family: var(--t8-mono); font-size: .9em; }

code {
	background: var(--t8-code-bg);
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius-sm);
	padding: .12em .4em;
}

pre {
	background: var(--t8-code-bg);
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius);
	padding: 1rem;
	overflow-x: auto;
}

pre code { background: none; border: 0; padding: 0; }

blockquote {
	margin: 1.5em 0;
	padding: .25em 0 .25em 1.1em;
	border-left: 3px solid var(--t8-accent);
	color: var(--t8-muted);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

th, td {
	text-align: left;
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--t8-border);
}

th { font-weight: 650; background: var(--t8-surface); }

input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
	width: 100%;
	background: var(--t8-bg);
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius-sm);
	padding: .55rem .7rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--t8-accent);
	color: var(--t8-on-accent);
	padding: .6rem 1rem;
	border-radius: 0 0 var(--t8-radius-sm) 0;
}

.skip-link:focus { left: 0; color: var(--t8-on-accent); }

/* =========================================================
   3. Layout
   ========================================================= */
.t8-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.t8-main { flex: 1 0 auto; }

.t8-container {
	width: 100%;
	max-width: var(--t8-content);
	margin-inline: auto;
	padding-inline: var(--t8-gutter);
}

.t8-container--wide { max-width: var(--t8-wide); }
.t8-container--full { max-width: none; padding-inline: 0; }

.t8-section { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* =========================================================
   4. Header / navigatie
   ========================================================= */
.t8-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--t8-bg) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--t8-border);
}

@supports not (backdrop-filter: blur(1px)) {
	.t8-header { background: var(--t8-bg); }
}

.t8-header__inner {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: var(--t8-header-h);
	max-width: var(--t8-wide);
	margin-inline: auto;
	padding-inline: var(--t8-gutter);
}

.t8-brand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--t8-mono);
	font-weight: 650;
	font-size: 1.05rem;
	letter-spacing: -.02em;
	color: var(--t8-text);
	text-decoration: none;
	margin-right: auto;
}

.t8-brand:hover { color: var(--t8-accent); }
.t8-brand img { max-height: 2rem; width: auto; }

.t8-brand__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--t8-accent);
	flex: none;
}

.t8-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	background: transparent;
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius-sm);
	color: var(--t8-text);
	cursor: pointer;
	padding: 0;
}

.t8-iconbtn:hover { background: var(--t8-surface); }
.t8-iconbtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Themaschakelaar: toon het juiste icoon bij de actieve stand */
.t8-themetoggle [data-icon] { display: none; }
.t8-themetoggle[data-state="auto"] [data-icon="auto"],
.t8-themetoggle[data-state="light"] [data-icon="light"],
.t8-themetoggle[data-state="dark"] [data-icon="dark"] { display: block; }

.t8-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .25rem;
}

.t8-nav a {
	display: block;
	padding: .4rem .6rem;
	border-radius: var(--t8-radius-sm);
	color: var(--t8-text);
	text-decoration: none;
	font-size: .95rem;
}

.t8-nav a:hover { background: var(--t8-surface); color: var(--t8-accent); }

.t8-nav .current-menu-item > a,
.t8-nav .current_page_item > a {
	color: var(--t8-accent);
	font-weight: 600;
}

/* Mobiel: nav inklappen */
@media (max-width: 46rem) {
	.t8-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--t8-bg);
		border-bottom: 1px solid var(--t8-border);
		box-shadow: var(--t8-shadow);
		display: none;
	}

	.t8-nav.is-open { display: block; }

	.t8-nav__list {
		flex-direction: column;
		gap: 0;
		padding: .5rem var(--t8-gutter) 1rem;
	}

	.t8-nav a {
		padding: .7rem .25rem;
		border-bottom: 1px solid var(--t8-border);
		border-radius: 0;
	}

	.t8-nav li:last-child a { border-bottom: 0; }
}

@media (min-width: 46.0625rem) {
	.t8-navtoggle { display: none; }
}

/* =========================================================
   5. Content
   ========================================================= */
.t8-entry__header { margin-bottom: 1.5rem; }

.t8-entry__meta {
	font-family: var(--t8-mono);
	font-size: .8rem;
	color: var(--t8-muted);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
	margin: .5rem 0 0;
}

.t8-entry__thumb { margin-bottom: 1.5rem; border-radius: var(--t8-radius); overflow: hidden; }
.t8-entry__thumb img { width: 100%; }

.t8-content > *:first-child { margin-top: 0; }
.t8-content > *:last-child { margin-bottom: 0; }

/* Blokuitlijning (alignwide / alignfull) */
.t8-content .alignwide {
	width: min(var(--t8-wide), 100vw - (var(--t8-gutter) * 2));
	margin-inline: auto;
	max-width: none;
}

.t8-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.t8-content .alignleft { float: left; margin: .4em 1.25em 1em 0; max-width: 50%; }
.t8-content .alignright { float: right; margin: .4em 0 1em 1.25em; max-width: 50%; }
.t8-content .aligncenter { margin-inline: auto; }

.wp-block-image img { border-radius: var(--t8-radius); }
.wp-block-image figcaption,
figcaption { font-size: .85rem; color: var(--t8-muted); text-align: center; }

.wp-block-separator { border-top: 1px solid var(--t8-border); border-bottom: 0; }

/* =========================================================
   6. Knoppen, kaarten, badges
   ========================================================= */
.t8-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--t8-accent);
	color: var(--t8-on-accent);
	border: 1px solid transparent;
	border-radius: var(--t8-radius-sm);
	padding: .55rem 1rem;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.t8-btn:hover,
.wp-block-button__link:hover { background: var(--t8-accent-hover); color: var(--t8-on-accent); }

.t8-btn--ghost {
	background: transparent;
	color: var(--t8-text);
	border-color: var(--t8-border);
}

.t8-btn--ghost:hover { background: var(--t8-surface); color: var(--t8-text); }

.t8-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.t8-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	background: var(--t8-surface);
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius);
	padding: 1.1rem;
	transition: border-color .15s ease, transform .15s ease;
}

.t8-card:hover { border-color: var(--t8-accent); transform: translateY(-2px); }

.t8-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.t8-card__title a { color: var(--t8-text); text-decoration: none; }
.t8-card__title a:hover { color: var(--t8-accent); }
.t8-card__excerpt { margin: 0; font-size: .9rem; color: var(--t8-muted); }

.t8-card__thumb {
	margin: -1.1rem -1.1rem .35rem;
	border-radius: var(--t8-radius) var(--t8-radius) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.t8-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.t8-badges { display: flex; flex-wrap: wrap; gap: .35rem; }

.t8-badge {
	display: inline-block;
	font-family: var(--t8-mono);
	font-size: .72rem;
	letter-spacing: .02em;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--t8-surface-2);
	border: 1px solid var(--t8-border);
	color: var(--t8-muted);
	text-decoration: none;
}

a.t8-badge:hover { color: var(--t8-accent); border-color: var(--t8-accent); }

.t8-badge--accent {
	background: color-mix(in srgb, var(--t8-accent) 14%, transparent);
	border-color: color-mix(in srgb, var(--t8-accent) 40%, transparent);
	color: var(--t8-accent);
}

/* =========================================================
   7. Tool-archief + filter
   ========================================================= */
.t8-archive__header { margin-bottom: 1.75rem; }
.t8-archive__intro { color: var(--t8-muted); margin: .5rem 0 0; }

.t8-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
	list-style: none;
}

.t8-filter__btn {
	font-family: var(--t8-mono);
	font-size: .8rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	border: 1px solid var(--t8-border);
	background: transparent;
	color: var(--t8-muted);
	cursor: pointer;
}

.t8-filter__btn:hover { color: var(--t8-accent); border-color: var(--t8-accent); }

.t8-filter__btn[aria-pressed="true"] {
	background: var(--t8-accent);
	border-color: var(--t8-accent);
	color: var(--t8-on-accent);
}

.t8-card[hidden] { display: none; }

/* =========================================================
   8. Tool canvas (template-tool.php)
   ========================================================= */
.t8-canvas { padding-block: 1.5rem; }

.t8-canvas__bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	max-width: var(--t8-wide);
	margin: 0 auto 1.25rem;
	padding-inline: var(--t8-gutter);
}

.t8-canvas__title {
	margin: 0;
	font-size: 1.15rem;
	font-family: var(--t8-mono);
	letter-spacing: -.02em;
}

.t8-canvas__back {
	font-family: var(--t8-mono);
	font-size: .8rem;
	color: var(--t8-muted);
	text-decoration: none;
}

.t8-canvas__back:hover { color: var(--t8-accent); }

/* Binnen het canvas krijgt content geen breedtebeperking: de tool bepaalt zelf */
.t8-canvas .t8-content { max-width: none; padding-inline: var(--t8-gutter); }
.t8-canvas .t8-content > .alignfull { margin-inline: calc(var(--t8-gutter) * -1); width: auto; }

/* =========================================================
   9. Paginering, zoeken, 404
   ========================================================= */
.t8-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 2.5rem;
	font-family: var(--t8-mono);
	font-size: .9rem;
}

.t8-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .6rem;
	border: 1px solid var(--t8-border);
	border-radius: var(--t8-radius-sm);
	color: var(--t8-text);
	text-decoration: none;
}

.t8-pagination .page-numbers:hover { border-color: var(--t8-accent); color: var(--t8-accent); }

.t8-pagination .page-numbers.current {
	background: var(--t8-accent);
	border-color: var(--t8-accent);
	color: var(--t8-on-accent);
}

.t8-searchform { display: flex; gap: .5rem; }
.t8-searchform input[type="search"] { flex: 1; }

.t8-empty {
	border: 1px dashed var(--t8-border);
	border-radius: var(--t8-radius);
	padding: 2rem 1.25rem;
	text-align: center;
	color: var(--t8-muted);
}

/* =========================================================
   10. Footer
   ========================================================= */
.t8-footer {
	border-top: 1px solid var(--t8-border);
	background: var(--t8-surface);
	margin-top: 3rem;
	padding-block: 2rem;
	font-size: .9rem;
	color: var(--t8-muted);
}

.t8-footer__inner {
	max-width: var(--t8-wide);
	margin-inline: auto;
	padding-inline: var(--t8-gutter);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.t8-footer a { color: var(--t8-muted); }
.t8-footer a:hover { color: var(--t8-accent); }

.t8-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
}

.t8-footer__nav a { text-decoration: none; }
.t8-footer__credit { font-family: var(--t8-mono); font-size: .78rem; margin: 0; }

@media (min-width: 46.0625rem) {
	.t8-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =========================================================
   11. Toegankelijkheid / motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* WordPress adminbar-correctie voor de sticky header */
body.admin-bar .t8-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .t8-header { top: 46px; }
}