/* =====================================================================
   ToughTechnics, bespoke stijlen uit de goedgekeurde mockup.
   Alle selectors zijn gescoped met tt- classes die ook in de templates staan.
   Industrieel, robuust, Montserrat 800 uppercase.
   ===================================================================== */

:root {
	--tt-ground: var(--wp--preset--color--ground, #F4F5F6);
	--tt-ink: var(--wp--preset--color--ink, #1E2225);
	--tt-steel: var(--wp--preset--color--secondary, #4A5257);
	--tt-accent: var(--wp--preset--color--accent, #E8590C);
	--tt-accent-dark: var(--wp--preset--color--accent-dark, #C24608);
	--tt-accent-alt: var(--wp--preset--color--accent-alt, #F2B705);
	--tt-concrete: var(--wp--preset--color--neutral, #B8BCBF);
	--tt-white: var(--wp--preset--color--white, #FFFFFF);
	--tt-steel-tint: rgba(74, 82, 87, 0.08);
}

html {
	scroll-behavior: smooth;
}

/* ============ HEADER ============ */
.tt-header {
	border-bottom: 3px solid var(--tt-accent);
	position: sticky;
	top: 0;
	z-index: 50;
}
.tt-topbar {
	min-height: 76px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.tt-header .tt-logo,
.tt-footer .tt-logo {
	color: var(--tt-white);
	margin: 0;
}
.tt-header .tt-logo a,
.tt-footer .tt-logo a {
	color: var(--tt-white);
	text-decoration: none;
}
.tt-header .tt-nav a,
.tt-header .wp-block-navigation-item__content {
	color: var(--tt-ground);
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 14px;
}
.tt-header .tt-nav a:hover,
.tt-header .wp-block-navigation-item__content:hover {
	color: var(--tt-white);
	text-decoration: underline;
	text-decoration-color: var(--tt-accent);
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.tt-header-right {
	gap: 20px;
}
.tt-search .wp-block-search__button {
	background: transparent;
	border: 1px solid var(--tt-steel);
	color: var(--tt-ground);
	padding: 9px;
	border-radius: 0;
	transition: border-color .2s, color .2s;
}
.tt-search .wp-block-search__button:hover {
	border-color: var(--tt-accent);
	color: var(--tt-accent);
}
.tt-search .wp-block-search__button svg {
	fill: currentColor;
}
/* zoekveld op losse pagina's (search + 404) leesbaar op licht */
.tt-search-page {
	max-width: 520px;
	margin-top: 20px;
}
.tt-search-page .wp-block-search__input {
	border: 1px solid var(--tt-concrete);
	border-radius: 0;
	padding: 12px 14px;
}
.tt-search-page .wp-block-search__button {
	background: var(--tt-accent);
	color: var(--tt-white);
	border-color: var(--tt-accent);
}

/* ============ HERO ============ */
.tt-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, #20262b 0%, #1E2225 55%, #171a1d 100%);
	color: var(--tt-white);
}
.tt-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: repeating-linear-gradient(45deg, var(--tt-accent-alt) 0 22px, var(--tt-ink) 22px 44px);
	opacity: .9;
	z-index: 3;
}
.tt-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(184, 188, 191, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(184, 188, 191, 0.06) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
}
.tt-hero > .wp-block-columns {
	position: relative;
	z-index: 2;
}
.tt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: var(--tt-accent-alt);
	margin: 0 0 22px;
}
.tt-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--tt-accent);
}
.tt-hero-title {
	color: var(--tt-white) !important;
	letter-spacing: 0.5px;
	margin: 0 0 24px;
}
.tt-hl,
.tt-hero-title .tt-hl {
	color: var(--tt-accent);
	background: transparent;
}
.tt-lead {
	font-size: 19px;
	color: #cfd3d6;
	max-width: 560px;
	margin: 0 0 34px;
	font-weight: 400;
}

/* knoppen: hoekig, industrieel */
.tt-btn-primary .wp-block-button__link {
	background: var(--tt-accent);
	color: var(--tt-white);
	border: 2px solid transparent;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	transition: transform .15s, background .2s, color .2s;
}
.tt-btn-primary .wp-block-button__link:hover {
	background: var(--tt-accent-dark);
	color: var(--tt-white);
	transform: translateY(-2px);
}
.tt-btn-ghost .wp-block-button__link,
.tt-hero .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--tt-white);
	border: 2px solid var(--tt-steel);
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}
.tt-btn-ghost .wp-block-button__link:hover {
	border-color: var(--tt-accent-alt);
	color: var(--tt-accent-alt);
	background: transparent;
}

/* hero-kaart */
.tt-hero-card {
	background: rgba(30, 34, 37, 0.72);
	border: 1px solid var(--tt-steel);
	border-left: 4px solid var(--tt-accent);
	padding: 26px 28px;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.tt-hero-card-title {
	color: var(--tt-white) !important;
	font-size: 22px;
	letter-spacing: 0.6px;
	margin: 0 0 16px;
}
.tt-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-check-list li {
	position: relative;
	padding: 11px 0 11px 34px;
	border-bottom: 1px dashed rgba(184, 188, 191, 0.22);
	font-size: 15px;
	color: #d6d9db;
	counter-increment: tt-check;
}
.tt-check-list {
	counter-reset: tt-check;
}
.tt-check-list li:last-child {
	border-bottom: 0;
}
.tt-check-list li::before {
	content: counter(tt-check);
	position: absolute;
	left: 0;
	top: 12px;
	width: 20px;
	height: 20px;
	background: var(--tt-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

/* ============ SECTIE-KOP ============ */
.tt-sec-head {
	margin-bottom: 46px;
}
.tt-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: var(--tt-accent);
	margin: 0 0 12px;
}
.tt-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--tt-accent);
}
.tt-kicker-yellow {
	color: var(--tt-accent-alt);
}
.tt-kicker-yellow::before {
	background: var(--tt-accent-alt);
}
.tt-sec-head h1,
.tt-sec-head h2 {
	margin: 0 0 14px;
}
.tt-sec-intro {
	color: var(--tt-steel);
	font-size: 17px;
	margin: 0;
}

/* ============ PIJLER-GRID ============ */
.tt-pillar-grid {
	gap: 2px;
	background: var(--tt-concrete);
	border: 1px solid var(--tt-concrete);
}
.tt-pillar {
	background: var(--tt-white);
	padding: 34px 30px 32px;
	position: relative;
	transition: background .2s;
}
.tt-pillar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--tt-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.tt-pillar:hover {
	background: var(--tt-ground);
}
.tt-pillar:hover::before {
	transform: scaleX(1);
}
.tt-pnum {
	font-weight: 700;
	font-size: 14px;
	color: var(--tt-concrete);
	letter-spacing: 1px;
	margin: 0 0 12px;
}
.tt-pillar h3 {
	font-size: 23px;
	color: var(--tt-ink);
	margin: 0 0 10px;
	letter-spacing: 0.4px;
}
.tt-pillar-text {
	font-size: 15px;
	color: var(--tt-steel);
	line-height: 1.55;
	margin: 0 0 16px;
}
.tt-more {
	margin: 0;
}
.tt-more a {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	color: var(--tt-accent);
	text-decoration: none;
}

/* ============ VERHAALBAND ============ */
.tt-story {
	position: relative;
	overflow: hidden;
}
.tt-story::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 8px;
	background: repeating-linear-gradient(180deg, var(--tt-accent) 0 24px, var(--tt-ink) 24px 40px);
	z-index: 3;
}
.tt-story-p {
	color: #cbcfd2;
	font-size: 17px;
	margin: 0 0 18px;
	max-width: 640px;
}
.tt-story-p strong {
	color: var(--tt-white);
}

/* persona-kaart */
.tt-persona {
	background: #22272b;
	border: 1px solid var(--tt-steel);
	border-top: 4px solid var(--tt-accent);
	padding: 32px 30px;
}
.tt-persona-top {
	gap: 18px;
	margin-bottom: 20px;
}
.tt-avatar {
	width: 72px;
	height: 72px;
	flex: none;
	margin: 0;
	border-radius: 2px;
	background: linear-gradient(145deg, var(--tt-steel), #2b3135);
	border: 1px solid var(--tt-concrete);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 30px;
	color: var(--tt-accent-alt);
	letter-spacing: 1px;
}
.tt-persona-who h4 {
	font-size: 24px;
	color: var(--tt-white) !important;
	letter-spacing: 0.5px;
	margin: 0;
}
.tt-persona-role {
	font-size: 13px;
	color: var(--tt-concrete);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	margin: 4px 0 0;
}
.tt-persona-quote {
	font-size: 16px;
	color: #d4d7da;
	font-style: italic;
	border-left: 2px solid var(--tt-accent);
	padding-left: 16px;
	margin: 0 0 22px;
	line-height: 1.6;
}
.tt-creds {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tt-creds li {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: #c3c7ca;
}
.tt-badge {
	flex: none;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--tt-accent);
	color: #fff;
	padding: 3px 8px;
}
.tt-badge-alt {
	background: var(--tt-accent-alt);
	color: var(--tt-ink);
}

/* ============ ARTIKELEN ============ */
.tt-art-grid {
	gap: 26px;
}
.tt-art-card {
	background: var(--tt-white);
	border: 1px solid var(--tt-concrete);
	transition: transform .18s, box-shadow .18s;
	overflow: hidden;
}
.tt-art-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 0 -6px var(--tt-accent);
}
.tt-art-thumb {
	margin: 0;
}
.tt-art-thumb img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}
.tt-art-thumb:not(:has(img)) {
	min-height: 150px;
	background: linear-gradient(135deg, #3b4247, #2a2f33);
}
.tt-art-body {
	padding: 22px 22px 24px;
	gap: 10px;
}
.tt-art-tag {
	display: inline-block;
	align-self: flex-start;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--tt-accent);
	color: #fff !important;
	padding: 4px 10px;
	margin: 0 0 4px;
}
.tt-art-tag a {
	color: #fff !important;
	text-decoration: none;
}
.tt-art-title {
	font-size: 21px !important;
	color: var(--tt-ink);
	line-height: 1.08;
	margin: 0 0 6px;
	letter-spacing: 0.3px;
}
.tt-art-title a {
	color: var(--tt-ink);
	text-decoration: none;
}
.tt-art-title a:hover {
	color: var(--tt-accent);
}
.tt-art-excerpt {
	font-size: 14px;
	color: var(--tt-steel);
	margin: 0 0 14px;
}
.tt-art-excerpt p {
	margin: 0;
}
.tt-art-meta {
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--tt-steel);
	border-top: 1px solid var(--tt-concrete);
	padding-top: 14px;
}
.tt-art-meta .wp-block-post-author-name,
.tt-art-meta .wp-block-post-date {
	font-size: 13px;
	color: var(--tt-steel);
}
.tt-articles-foot {
	margin-top: 44px;
}

/* ============ POST / PAGE ============ */
.tt-post-header .tt-art-tag,
.tt-post-header .tt-art-tag a {
	color: #fff !important;
}
.tt-post-meta {
	gap: 8px;
	align-items: center;
	margin-top: 16px;
	color: var(--tt-concrete);
	font-size: 14px;
}
.tt-post-meta p {
	margin: 0;
}
.tt-post-meta .wp-block-post-author-name,
.tt-post-meta .wp-block-post-date {
	color: var(--tt-ground);
	font-size: 14px;
}
.tt-meta-dot {
	width: 8px;
	height: 8px;
	background: var(--tt-accent);
	border-radius: 50%;
}
.tt-featured img {
	border-radius: 2px;
	margin-bottom: 32px;
}
.tt-authorbox {
	background: var(--tt-white);
	border: 1px solid var(--tt-concrete);
	border-left: 4px solid var(--tt-accent);
	padding: 28px 30px;
}
.tt-authorbox-top {
	gap: 18px;
	margin-bottom: 16px;
}
.tt-authorbox-avatar img {
	border-radius: 2px;
}
.tt-authorbox-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--tt-steel);
	font-weight: 600;
	margin: 0;
}
.tt-authorbox-name {
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--tt-ink);
	margin: 2px 0 0;
}
.tt-authorbox-bio {
	color: var(--tt-steel);
	font-size: 15px;
	margin: 0;
}
.tt-postnav {
	margin-top: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 14px;
}
.tt-pagination {
	margin-top: 44px;
	gap: 10px;
}
.tt-pagination a,
.tt-pagination .wp-block-query-pagination-numbers {
	color: var(--tt-ink);
	font-weight: 700;
}
.tt-pagination .current {
	color: var(--tt-accent);
}

/* ============ FOOTER ============ */
.tt-footer-hazard {
	height: 6px;
	background: repeating-linear-gradient(45deg, var(--tt-accent) 0 22px, var(--tt-ink) 22px 44px);
}
.tt-footer .tt-logo {
	font-size: 26px;
	margin-bottom: 16px;
}
.tt-foot-about {
	font-size: 14px;
	color: #9aa0a4;
	max-width: 320px;
	line-height: 1.6;
}
.tt-footer h5 {
	color: var(--tt-white);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 18px;
}
.tt-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-foot-list li {
	margin-bottom: 11px;
}
.tt-foot-list a {
	color: #a7adb1;
	font-size: 14px;
	text-decoration: none;
}
.tt-foot-list a:hover {
	color: var(--tt-accent);
}
.tt-foot-legal {
	border-top: 1px solid var(--tt-steel);
	color: #7f858a;
	font-size: 13px;
}
.tt-foot-legal p {
	color: #7f858a;
	margin: 0;
}
.tt-legal-links a {
	color: #7f858a;
	text-decoration: none;
	margin-right: 16px;
}
.tt-legal-links a:hover {
	color: var(--tt-concrete);
}

/* ============ SCROLL-REVEAL (motion.js) ============ */
/* HARDENING: content is standaard zichtbaar. Alleen wanneer JS actief is (html.js)
   en motion.js de klasse .tt-anim heeft toegevoegd, wordt het element verborgen
   tot het in beeld komt. Zonder JS blijft alles gewoon zichtbaar. */
html.js .tt-anim {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
html.js .tt-anim.tt-in {
	opacity: 1;
	transform: none;
}

/* leesvoortgangsbalk */
.tt-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--tt-accent);
	z-index: 100;
	transition: width .1s linear;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	html.js .tt-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tt-progress {
		display: none;
	}
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
	.tt-pillar-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.tt-art-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 782px) {
	.tt-hero {
		padding-top: 64px !important;
		padding-bottom: 72px !important;
	}
	.tt-section {
		padding-top: 58px !important;
		padding-bottom: 58px !important;
	}
}
@media (max-width: 640px) {
	.tt-pillar-grid {
		grid-template-columns: 1fr !important;
	}
	.tt-art-grid {
		grid-template-columns: 1fr !important;
	}
	.tt-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.tt-cta-row .wp-block-button {
		width: 100%;
	}
	.tt-cta-row .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}