/*
 * OptimaFit, bespoke thema-styling.
 * Alles wat theme.json niet kan dekken: hero-visual, pijler-kaarten,
 * verhaalband, auteursbox, sectie-gedrag en scroll-reveal.
 * Montserrat-karakter: koppen bold (800), strakke negatieve tracking, energiek.
 */

:root {
	--of-ground: #F7FAF8;
	--of-ink: #1F2A2E;
	--of-accent: #2FB380;
	--of-accent-deep: #1E7D5A;
	--of-secondary: #F0A24B;
	--of-neutral: #8A9A94;
	--of-card: #FFFFFF;
	--of-neutral-tint: #E6ECE9;
	--of-accent-tint: #E7F5EE;
	--of-secondary-tint: #FBEEDC;
	--of-radius: 18px;
	--of-shadow-sm: 0 1px 2px rgba(31,42,46,.04), 0 4px 14px rgba(31,42,46,.05);
	--of-shadow-md: 0 6px 18px rgba(31,42,46,.07), 0 18px 40px rgba(31,42,46,.06);
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ---------------------------------------------------------------- Header */
.of-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 250, 248, .82);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--of-neutral-tint);
}
.of-header__bar { min-height: 74px; }
.of-brand { gap: .55em; }
.of-brand__mark { display: inline-flex; align-items: center; line-height: 0; }
.of-brand__name a,
.of-header .wp-block-site-title a {
	color: var(--of-ink);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -.02em;
}
.of-header__right { gap: 18px; }

/* Navigatie hover-onderstreping */
.of-nav .wp-block-navigation-item__content {
	font-weight: 500;
	color: var(--of-ink);
	position: relative;
	padding-bottom: 3px;
}
.of-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--of-accent);
	transition: width .22s ease;
}
.of-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content { color: var(--of-accent-deep); }
.of-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { width: 100%; }

/* Zoekknop in header, rond */
.of-search .wp-block-search__inside-wrapper { border: none; }
.of-search .wp-block-search__button {
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--of-neutral-tint);
	background: var(--of-card);
	color: var(--of-ink);
	display: grid;
	place-items: center;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.of-search .wp-block-search__button:hover {
	border-color: var(--of-accent);
	color: var(--of-accent-deep);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------- Knoppen */
.of-btn-primary .wp-block-button__link {
	box-shadow: 0 8px 20px rgba(47, 179, 128, .28);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.of-btn-primary .wp-block-button__link:hover {
	background-color: var(--of-accent-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(30, 125, 90, .32);
}
.of-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--of-ink);
	border: 1.5px solid var(--of-neutral-tint);
	transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.of-btn-ghost .wp-block-button__link:hover {
	border-color: var(--of-accent);
	color: var(--of-accent-deep);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------- Eyebrow + section head */
.of-eyebrow {
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--of-accent-deep);
	margin-bottom: .5em;
}
.of-eyebrow--light { color: #7fdcb4; }
.of-section-head { margin-bottom: 46px; }
.of-section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.of-section-head__sub { color: #47575b; }

/* ---------------------------------------------------------------- Hero */
.of-hero { position: relative; overflow: hidden; }
.of-hero::before {
	content: "";
	position: absolute;
	top: -160px;
	right: -180px;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle at center, rgba(47, 179, 128, .20), rgba(47, 179, 128, 0) 68%);
	z-index: 0;
	animation: of-floatA 14s ease-in-out infinite alternate;
	pointer-events: none;
}
.of-hero::after {
	content: "";
	position: absolute;
	bottom: -220px;
	left: -160px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle at center, rgba(240, 162, 75, .16), rgba(240, 162, 75, 0) 68%);
	z-index: 0;
	animation: of-floatB 17s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes of-floatA { to { transform: translate(-26px, 30px); } }
@keyframes of-floatB { to { transform: translate(30px, -24px); } }
.of-hero__grid { position: relative; z-index: 1; }

.of-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	background: var(--of-accent-tint);
	color: var(--of-accent-deep);
	font-weight: 600;
	font-size: .8rem;
	padding: .5em 1em;
	border-radius: 999px;
	margin-bottom: 22px;
}
.of-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--of-accent);
	box-shadow: 0 0 0 4px rgba(47, 179, 128, .2);
}
.of-hero__title { margin-bottom: 22px; }
.of-hl { color: var(--of-accent-deep); }
.of-hero__lead { color: #3c4b4f; max-width: 34em; margin-bottom: 32px; }
.of-hero__note { color: var(--of-neutral); margin-top: 26px; }

/* Hero-visual, illustratieve kaart */
.of-visual-card {
	background: var(--of-card);
	border-radius: 26px;
	box-shadow: var(--of-shadow-md);
	padding: 26px;
	position: relative;
	overflow: hidden;
}
.of-visual-sky {
	height: 148px;
	border-radius: 16px;
	background: linear-gradient(160deg, #DFF3E9 0%, #F5EAD6 100%);
	position: relative;
	overflow: hidden;
}
.of-visual-sun {
	position: absolute;
	top: 22px;
	right: 30px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--of-secondary);
	box-shadow: 0 0 0 10px rgba(240, 162, 75, .18);
}
.of-visual-hills { position: absolute; bottom: 0; left: 0; right: 0; height: 74px; width: 100%; }
.of-curve-label {
	position: absolute;
	top: 16px;
	left: 20px;
	z-index: 2;
	font-weight: 600;
	font-size: .82rem;
	color: var(--of-accent-deep);
	background: rgba(255, 255, 255, .75);
	padding: .3em .7em;
	border-radius: 8px;
}
.of-visual-stats { display: flex; gap: 14px; margin-top: 20px; }
.of-vstat { flex: 1; background: var(--of-ground); border-radius: 14px; padding: 14px 16px; }
.of-vstat__n { display: block; font-weight: 700; font-size: 1.5rem; color: var(--of-ink); line-height: 1.1; }
.of-vstat__n--green { color: var(--of-accent-deep); }
.of-vstat__n--amber { color: #d9852f; }
.of-vstat__l { display: block; font-size: .78rem; color: var(--of-neutral); margin-top: 2px; }

/* ---------------------------------------------------------------- Pijlers */
.of-pijler-grid { align-items: stretch; }
.of-pijler {
	background: var(--of-card);
	border: 1px solid var(--of-neutral-tint);
	border-radius: var(--of-radius);
	padding: 30px 26px;
	box-shadow: var(--of-shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	position: relative;
	overflow: hidden;
}
.of-pijler::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--of-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.of-pijler:hover { transform: translateY(-6px); box-shadow: var(--of-shadow-md); border-color: transparent; }
.of-pijler:hover::before { transform: scaleX(1); }
.of-pijler__icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	background: var(--of-accent-tint);
	color: var(--of-accent-deep);
}
.of-pijler--amber::before { background: var(--of-secondary); }
.of-pijler--amber .of-pijler__icon { background: var(--of-secondary-tint); color: #c9791f; }
.of-pijler h3 { margin-bottom: 8px; }
.of-pijler p { color: #55635f; margin-bottom: 16px; }
.of-pijler__more a { font-weight: 600; color: var(--of-accent-deep); text-decoration: none; }
.of-pijler:hover .of-pijler__more a { text-decoration: underline; }

/* ---------------------------------------------------------------- Verhaalband */
.of-verhaal { position: relative; }
.of-verhaal__p { color: #c3d0cc; margin-bottom: 16px; }
.of-verhaal__quote {
	border-left: 3px solid var(--of-accent);
	padding-left: 20px;
	font-size: 1.14rem;
	color: #e7efec;
	font-style: italic;
	margin: 24px 0 4px;
}
.of-verhaal__quote p { color: #e7efec; }

/* Auteurskaart in de verhaalband */
.of-author-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 22px;
	padding: 30px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.of-author-top { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.of-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--of-accent) 0%, var(--of-accent-deep) 100%);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 6px 18px rgba(47, 179, 128, .35);
}
.of-author-id { display: flex; flex-direction: column; }
.of-author-name { font-weight: 600; font-size: 1.2rem; color: #fff; }
.of-author-role { color: #9db4ad; font-size: .92rem; }
.of-author-bio { color: #b9c8c3; font-size: .96rem; margin-bottom: 20px; }
.of-cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.of-cred-list li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: #d6e0dc; }
.of-cred-list .of-tick {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(47, 179, 128, .18);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: #7fdcb4;
	font-size: .72rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------- Artikelen (query loop) */
.of-articles-grid { align-items: stretch; }
.of-article {
	background: var(--of-card);
	border-radius: var(--of-radius);
	overflow: hidden;
	box-shadow: var(--of-shadow-sm);
	border: 1px solid var(--of-neutral-tint);
	transition: transform .22s ease, box-shadow .22s ease;
	height: 100%;
}
.of-article:hover { transform: translateY(-6px); box-shadow: var(--of-shadow-md); }
.of-article__thumb { margin: 0; }
.of-article__thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.of-article__thumb.wp-block-post-featured-image:empty {
	display: block;
	height: 180px;
	background: linear-gradient(150deg, #DFF3E9, #B8E6CF);
}
.of-article__body { padding: 22px 22px 24px; }
.of-article__tag {
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--of-accent-deep);
	margin-bottom: 10px;
}
.of-article__tag a { text-decoration: none; color: inherit; }
.of-article__title { margin-bottom: 10px; line-height: 1.3; }
.of-article__title a { text-decoration: none; color: var(--of-ink); }
.of-article:hover .of-article__title a { color: var(--of-accent-deep); }
.of-article__excerpt { color: #55635f; margin-bottom: 16px; }
.of-article__meta { color: var(--of-neutral); font-size: .82rem; }
.of-article__meta a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- Single, page */
.of-single__cat {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	color: var(--of-accent-deep);
	margin-bottom: 12px;
}
.of-single__meta { color: var(--of-neutral); }
.of-single__meta a { color: var(--of-neutral); text-decoration: none; }
.of-single__meta a:hover { color: var(--of-accent-deep); }
.of-meta-sep { color: var(--of-neutral); }
.of-single__image img { width: 100%; object-fit: cover; border-radius: var(--of-radius); }

/* Auteursbox onder artikel */
.of-authorbox { border: 1px solid var(--of-neutral-tint); }
.of-avatar--light {
	width: 60px;
	height: 60px;
	font-size: 1.25rem;
}
.of-authorbox__name { font-weight: 700; font-size: 1.15rem; color: var(--of-ink); margin: 0; }
.of-authorbox__role { color: var(--of-accent-deep); margin: 0; }
.of-authorbox__bio { color: #47575b; }

/* Post-navigatie */
.of-post-nav a { color: var(--of-accent-deep); text-decoration: none; font-weight: 600; }
.of-post-nav a:hover { text-decoration: underline; }

/* Paginatie */
.of-pagination .wp-block-query-pagination-numbers .page-numbers.current { color: var(--of-accent-deep); font-weight: 700; }
.of-pagination a { color: var(--of-ink); text-decoration: none; }
.of-pagination a:hover { color: var(--of-accent-deep); }

/* Zoekformulier (search + 404) */
.of-search-form .wp-block-search__input {
	border: 1.5px solid var(--of-neutral-tint);
	border-radius: 999px;
	padding: .7em 1.1em;
	background: var(--of-card);
}
.of-search-form .wp-block-search__button {
	border-radius: 999px;
	background: var(--of-accent);
	color: #fff;
	border: none;
	padding: .7em 1.4em;
}
.of-search-form .wp-block-search__button:hover { background: var(--of-accent-deep); }

/* ---------------------------------------------------------------- Footer */
.of-footer__name a,
.of-footer .wp-block-site-title a { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.of-footer__about { color: #92a19c; max-width: 30ch; }
.of-footer__title { color: #fff; margin-bottom: 4px; }
.of-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.of-footer__list a { color: #aebcb7; text-decoration: none; transition: color .18s ease; }
.of-footer__list a:hover { color: #7fdcb4; }
.of-footer__bottom { color: #7d8c87; }
.of-footer__copy { margin: 0; color: #7d8c87; }
.of-footer__legal p { margin: 0; }
.of-footer__legal a { color: #7d8c87; text-decoration: none; }
.of-footer__legal a:hover { color: #7fdcb4; }

/* ---------------------------------------------------------------- 404 */
.of-404__inner { text-align: center; }
.of-404__text { color: #47575b; }

/* ---------------------------------------------------------------- Scroll-reveal */
/* Reveal geldt ALLEEN als JS actief is (html.js). Zonder JS blijft alles zichtbaar. */
.js .rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}
.js .rv.is-visible {
	opacity: 1;
	transform: none;
}
/* Hero nooit verbergen: direct zichtbaar, ook met JS. */
.js .of-hero.rv { opacity: 1; transform: none; }

/* Voortgangsbalk bovenaan */
.of-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--of-accent), var(--of-secondary));
	z-index: 999;
	transition: width .1s linear;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rv { opacity: 1 !important; transform: none !important; transition: none; }
	.of-hero::before, .of-hero::after { animation: none; }
	.of-progress { display: none; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 960px) {
	.of-hero__visual { max-width: 440px; }
}
@media (max-width: 782px) {
	.of-hero { padding-top: 56px !important; padding-bottom: 70px !important; }
	.of-visual-stats { flex-wrap: wrap; }
}