/*
 * components.css
 * Herbruikbare blokken. Geen kleur-hex, alleen var(--...).
 * Werkt samen met tokens-base.css en eventueel tokens-{plugin}.css.
 */

/* ---------- Layout ---------- */

.is-container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.is-section {
	position: relative;
	padding-block: var(--space-8);
	/* overflow: hidden verwijderd zodat achtergrond-blobs over secties heen kunnen vloeien */
}

@media (max-width: 767px) {
	.is-section {
		padding-block: var(--space-7);
	}
}

@media (max-width: 478px) {
	.is-section {
		padding-block: var(--space-6);
	}
}

.is-section--narrow {
	padding-block: var(--space-7);
}

.is-section--hero {
	padding-block: var(--space-9) var(--space-8);
	padding-top: calc(var(--header-height, 68px) + var(--space-9));
	background: var(--bg-hero);
}

@media (max-width: 767px) {
	.is-section--hero {
		padding-block: var(--space-8) var(--space-7);
		padding-top: calc(var(--header-height, 68px) + var(--space-8));
	}
}

.is-section--dark {
	background: var(--bg-section);
}

.is-section--alt {
	background: var(--bg-section-alt);
}

.is-section--bright {
	background: var(--bg-section-bright);
}

/* Featured hero image — subtiel onder hero, boven content-grid (vs/blog).
 * Pillar gebruikt eigen rendering (figure.is-pillar-thumb) binnen .is-prose. */
.is-section--featured {
	padding-top: 0;
}

.is-featured-hero,
.is-pillar-thumb {
	margin: 0 auto var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-section);
	aspect-ratio: 16 / 9;
	max-width: 100%;
}

.is-featured-hero {
	margin-bottom: 0;
	max-width: 820px; /* Match hero-inner width for consistency, not full-width lomp */
}

.is-featured-hero img,
.is-pillar-thumb img,
.is-prose .is-pillar-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Decoratieve achtergrond-blob laag (absoluut binnen .is-section) */
.is-bg-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	/* overflow: hidden verwijderd zodat SVG buiten de sectie mag vallen */
}

/* Net als in Bricks: volle breedte, hoogte volgt de aspect-ratio van de
 * viewBox (geen uitrekken/letterboxen). Zo nemen de golven/bollen de hele
 * breedte in en blijft de vorm bewaard. */
.is-bg-blobs > svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
}

.is-section > .is-container,
.is-section > .is-section-inner {
	position: relative;
	z-index: 1;
}

/* ---------- Hero ---------- */

.is-hero {
	text-align: center;
}

.is-hero__inner {
	max-width: 820px;
	margin-inline: auto;
}

.is-hero__title {
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.05;
	margin-bottom: var(--space-5);
}

.is-hero__subtitle {
	font-size: 18px;
	line-height: 1.55;
	color: var(--text-muted);
	margin-bottom: var(--space-6);
}

.is-hero__actions {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 478px) {
	.is-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------- Headers / titels op secties ---------- */

.is-section-head {
	max-width: 760px;
	margin: 0 auto var(--space-7);
	text-align: center;
}

.is-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent, var(--text-muted));
	margin-bottom: var(--space-3);
}

.is-section-head h2 {
	margin-bottom: var(--space-3);
}

.is-section-head__lead {
	font-size: 17px;
	color: var(--text-muted);
}

/* ---------- Kaarten ---------- */

.is-card {
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 0;
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.is-card:hover {
	background: rgba(255, 255, 255, 0.08);
}

.is-card--link:hover {
	transform: translateY(-2px);
}

.is-card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--brand-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
	color: #fff;
}

.is-card__icon svg {
	width: 22px;
	height: 22px;
}

.is-card__title {
	margin-bottom: var(--space-2);
}

.is-card__body {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.is-card__body p:last-child {
	margin-bottom: 0;
}

/* Feature grid */
.is-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

@media (max-width: 991px) {
	.is-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 478px) {
	.is-feature-grid {
		grid-template-columns: 1fr;
	}
}

.is-feature-grid--two {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	.is-feature-grid--two {
		grid-template-columns: 1fr;
	}
}

/* ---------- Pricing ---------- */

.is-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	align-items: stretch;
}

@media (max-width: 991px) {
	.is-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-inline: auto;
	}
}

.is-card-pricing {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 0;
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.is-card-pricing__name {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: var(--space-3);
}

.is-card-pricing__price {
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: var(--space-2);
}

.is-card-pricing__price small {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-muted);
	margin-left: 4px;
}

.is-card-pricing__strike {
	color: var(--text-subtle);
	text-decoration: line-through;
	font-size: 16px;
	margin-right: 6px;
}

.is-card-pricing__lead {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: var(--space-5);
	min-height: 40px;
}

.is-card-pricing__features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	flex: 1;
}

.is-card-pricing__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: 14px;
	padding: 6px 0;
	color: var(--text-muted);
}

.is-card-pricing__features li svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--brand-primary);
	margin-top: 1px;
}

.is-card-pricing__features li.is-disabled {
	color: var(--text-subtle);
	text-decoration: line-through;
}

.is-card-pricing__features li.is-disabled svg {
	color: var(--text-subtle);
}

.is-card-pricing__cta {
	margin-top: auto;
}

.is-card-pricing.is-popular {
	transform: translateY(-8px);
}

@media (max-width: 991px) {
	.is-card-pricing.is-popular {
		transform: none;
	}
}

.is-pill {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--brand-primary);
	color: #fff;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

/* ---------- FAQ / accordion ---------- */

.is-faq {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Glassy cards per item, net als de Bricks FAQ-accordion
 * (.accordion-title-wrapper: rgba(255,255,255,0.05) + blur). */
.is-faq__item {
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: background var(--dur-base) var(--ease);
}

.is-faq__item:hover {
	background: rgba(255, 255, 255, 0.07);
}

.is-faq__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--text);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.is-faq__btn:hover {
	color: var(--accent, var(--text));
}

.is-faq__icon {
	flex-shrink: 0;
	transition: transform var(--dur-base) var(--ease);
}

.is-faq__item.is-open .is-faq__icon {
	transform: rotate(180deg);
}

.is-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease);
}

.is-faq__item.is-open .is-faq__panel {
	grid-template-rows: 1fr;
}

.is-faq__panel-inner {
	overflow: hidden;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
	padding-inline: var(--space-5);
}

.is-faq__item.is-open .is-faq__panel-inner {
	padding-bottom: var(--space-5);
}

/* ---------- Billing-toggle (maand/jaar) ---------- */

.is-billing {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-6);
}

.is-billing__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-pill);
}

.is-billing__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.is-billing__opt.is-active {
	background: var(--brand-primary);
	color: #fff;
}

.is-billing__save {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--brand-gradient, linear-gradient(to right, #80e861, #00b2ff));
	color: #0d0128;
}

.is-billing__opt:not(.is-active) .is-billing__save {
	background: rgba(128, 232, 97, 0.16);
	color: #80e861;
}

/* ---------- Pricing-garantie ---------- */

.is-pricing-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: 20px;
	color: var(--text-muted);
	font-size: 14px;
	text-align: center;
}

.is-pricing-guarantee svg {
	flex-shrink: 0;
	color: var(--brand-primary);
}

/* ---------- CTA-blokken ---------- */

.is-cta-row {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
}

.is-cta-row--center {
	justify-content: center;
}

.is-cta-block {
	background: var(--bg-section-bright);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	text-align: center;
}

.is-cta-block__title {
	font-size: clamp(24px, 3vw, 32px);
	margin-bottom: var(--space-3);
}

.is-cta-block__lead {
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}

/* ---------- Prose (blog/pillar content) ---------- */

.is-prose {
	max-width: 720px;
	margin-inline: auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--text-muted);
	/* Mobile-veilig: lange URLs / code mogen niet de container oprekken. */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Voorkom dat brede children (img/pre/iframe/figure) de container oprekken. */
.is-prose > :where(img, video, iframe, figure, pre, .is-table-wrap, .is-pros-cons) {
	max-width: 100%;
}

.is-prose pre,
.is-prose .is-table-wrap {
	overflow-x: auto;
}

.is-prose h2 {
	font-size: 28px;
	color: var(--text);
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
}

/* Eerste blok in de prose-flow plakt aan de top van de container — geen
 * extra marge boven de eerste sectie (geldt voor pillar én vs/docs). */
.is-prose > :first-child,
.is-prose > h2:first-child,
.is-prose > h3:first-child {
	margin-top: 0;
}

.is-prose h3 {
	font-size: 22px;
	color: var(--text);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
}

.is-prose p {
	margin-bottom: var(--space-4);
}

.is-prose a {
	color: var(--accent, var(--brand-primary));
	border-bottom: 1px solid currentColor;
}

.is-prose ul,
.is-prose ol {
	margin-bottom: var(--space-4);
	padding-left: var(--space-5);
}

.is-prose li {
	margin-bottom: var(--space-2);
}

.is-prose blockquote,
.is-prose .wp-block-quote {
	margin: var(--space-5) 0;
	padding: var(--space-6);
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg);
	color: var(--text);
	font-style: normal;
	font-size: 1.25rem;
	line-height: 1.6;
}

.is-prose blockquote p,
.is-prose .wp-block-quote p {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: 0;
}

.is-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	padding: 2px 6px;
	background: var(--surface-elev-2);
	border-radius: 4px;
}

.is-prose pre {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	overflow-x: auto;
	margin-bottom: var(--space-4);
}

.is-prose pre code {
	background: transparent;
	padding: 0;
}

.is-prose img {
	border-radius: var(--radius-md);
	margin: var(--space-5) 0;
}

.is-prose hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--space-6) 0;
}

.is-prose--article {
	max-width: 780px;
}

.is-prose--article .is-table-wrap {
	margin: var(--space-5) 0;
}

.is-prose__fine {
	font-size: 14px;
	color: var(--text-subtle);
}

.is-prose__sources {
	font-size: 14px;
}

/* ---------- Pros / Cons block ---------- */

.is-pros-cons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: var(--space-5) 0;
}

@media (min-width: 768px) {
	.is-pros-cons {
		grid-template-columns: 1fr 1fr;
	}
}

.is-pros-cons__col {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.is-pros-cons__col h3 {
	margin: 0 0 var(--space-4) 0;
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.is-pros-cons__col--pros h3 {
	color: var(--brand-primary);
}

.is-pros-cons__col--cons h3 {
	color: var(--text-muted);
}

.is-pros-cons__col ul {
	margin: 0;
	padding: 0 0 0 var(--space-4);
}

.is-pros-cons__col li {
	margin-bottom: var(--space-2);
}

/* ---------- Jump nav (comparison hubs) ---------- */

.is-jump-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-5) 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.is-jump-nav__label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-subtle);
	margin-right: var(--space-2);
}

.is-jump-nav a {
	font-size: 14px;
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

.is-jump-nav a:hover {
	color: var(--brand-primary);
}

.is-link-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
}

.is-link-list li {
	margin-bottom: var(--space-2);
}

.is-link-list a {
	color: var(--brand-primary);
	text-decoration: none;
}

.is-link-list a:hover {
	text-decoration: underline;
}

.is-faq--compact {
	max-width: 780px;
	margin-inline: auto;
}

/* ---------- Tabel ---------- */

.is-table-wrap,
.wp-block-table.is-table {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	margin: var(--space-5) 0;
}

.is-table,
.wp-block-table.is-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	border: none;
	margin: 0;
}

.is-table th,
.is-table td,
.wp-block-table.is-table th,
.wp-block-table.is-table td {
	padding: var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--border);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	vertical-align: top;
}

.is-table thead th,
.wp-block-table.is-table thead th {
	background: var(--surface-elev);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.is-table tbody tr:last-child td,
.wp-block-table.is-table tbody tr:last-child td {
	border-bottom: 0;
}

.is-table code,
.wp-block-table.is-table code {
	white-space: nowrap;
}

.is-table .is-check {
	color: var(--success);
}

.is-table .is-cross {
	color: var(--text-subtle);
}

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

.is-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease);
}

/* Glassy sticky-look zodra de pagina gescrold is, of als het mobiele menu open staat. */
.is-header.is-scrolled,
.is-header.is-open {
	background: rgba(13, 1, 40, 0.95);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom-color: var(--border);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.is-header.is-scrolled:not(.is-open) {
	background: rgba(13, 1, 40, 0.72);
}

/* Fixed header: hero-secties compenseren via .is-section--hero padding-top.
 * Geen extra padding op #it-content — zelfde gedrag als /instantfilter (Bricks). */

.is-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	height: var(--header-height, 68px);
	transition: height var(--dur-base) var(--ease);
}

.is-header.is-scrolled .is-header__inner {
	height: var(--header-height-scrolled, 58px);
}

.is-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--text);
}

/* ---------- Brand logo (mark + wordmark) ---------- */

/*
 * Layout uit master instant.svg (viewBox 723×159).
 * --it-logo-height = beeldmerk-hoogte H.
 * Tokens staan in tokens-logo.css (--it-logo-wordmark-ratio, --it-logo-gap-ratio).
 *
 * Asset-formaat per merk/plugin:
 *   assets/img/mark-{brand}.svg     — gradient beeldmerk, viewBox 2.258 1 80.742 155
 *   assets/img/wordmark-{brand}.svg — "instant/{suffix}", fill currentColor, viewBox 123.121 47.836 552.816 108.52
 */
.it-logo {
	display: inline-flex;
	align-items: flex-end;
	gap: var(--it-logo-gap);
	color: var(--text);
	line-height: 1;
	text-decoration: none;
}

.it-logo:hover {
	color: var(--text);
	opacity: 0.9;
}

.it-logo__mark,
.it-logo__wordmark {
	display: inline-flex;
	align-items: flex-end;
	flex-shrink: 0;
}

.it-logo__mark svg {
	height: var(--it-logo-height);
	width: auto;
	display: block;
	transition: height var(--dur-base) var(--ease);
}

.it-logo__wordmark svg {
	height: var(--it-logo-wordmark-height);
	width: auto;
	display: block;
	color: currentColor;
	transition: height var(--dur-base) var(--ease);
}

/* Header-logo: groter in rust, krimpt mee bij scroll. */
.is-header .it-logo {
	--it-logo-height: 38px;
}

.is-header.is-scrolled .it-logo {
	--it-logo-height: 30px;
}

@media (max-width: 478px) {
	.is-header .it-logo {
		--it-logo-height: 28px;
	}
	.is-header.is-scrolled .it-logo {
		--it-logo-height: 24px;
	}
}

.is-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.is-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.is-header__nav a {
	font-size: 15px;
	color: var(--text-muted);
	font-weight: 500;
}

.is-header__nav a:hover,
.is-header__nav .current-menu-item > a,
.is-header__nav .current_page_item > a,
.is-header__nav .current-menu-ancestor > a {
	color: var(--text);
}

.is-header__cta {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

.is-header__burger {
	display: none;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

@media (max-width: 991px) {
	.is-header__nav,
	.is-header__cta-desktop {
		display: none;
	}
	.is-header__burger {
		display: inline-flex;
	}
}

.is-header__menu-mobile {
	display: none;
	border-top: 1px solid var(--border);
	padding: var(--space-4) var(--container-pad-x);
}

.is-header.is-open .is-header__menu-mobile {
	display: block;
}

.is-header__menu-mobile ul {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.is-header__menu-mobile li {
	border-bottom: 1px solid var(--border);
}

.is-header__menu-mobile a {
	display: block;
	padding: var(--space-3) 0;
	color: var(--text);
}

.is-header__menu-mobile .is-btn-primary {
	display: flex;
	width: 100%;
	margin-top: var(--space-3);
}

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

.is-footer {
	background: var(--brand-deep);
	border-top: 1px solid var(--border);
	padding-block: var(--space-8) var(--space-6);
	margin-top: var(--space-8);
}

.is-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--space-6);
}

@media (max-width: 991px) {
	.is-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 478px) {
	.is-footer__grid {
		grid-template-columns: 1fr;
	}
}

.is-footer__brand-block .is-footer__brand,
.is-footer__brand-block .it-logo {
	margin-bottom: var(--space-3);
}

.is-footer__brand-block p {
	color: var(--text-muted);
	font-size: 14px;
	max-width: 320px;
}

.is-footer__col h5 {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin: 0 0 var(--space-3);
}

.is-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.is-footer__col li {
	margin-bottom: var(--space-2);
}

.is-footer__col a {
	color: var(--text-muted);
	font-size: 14px;
}

.is-footer__col a:hover {
	color: var(--text);
}

.is-footer__legal {
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	display: flex;
	gap: var(--space-4);
	justify-content: space-between;
	color: var(--text-subtle);
	font-size: 13px;
	flex-wrap: wrap;
}

/* ---------- Breadcrumbs ---------- */

.is-breadcrumbs {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

.is-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0;
}

.is-breadcrumbs li + li::before {
	content: "/";
	margin-right: 6px;
	opacity: 0.5;
}

.is-breadcrumbs a:hover {
	color: var(--text);
}

/* ---------- TOC (pillar) ---------- */

.is-toc {
	background: var(--surface-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-size: 13px;
	line-height: 1.35;
}

.is-toc__title {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}

.is-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}

.is-toc li {
	counter-increment: toc;
	margin-bottom: 4px;
}

.is-toc a {
	color: var(--text-muted);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
}

.is-toc a:hover {
	color: var(--text);
}

.is-toc a::before {
	content: counter(toc, decimal-leading-zero);
	color: var(--text-subtle);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 18px;
	padding-top: 1px;
	font-size: 12px;
}

/* Sidebar + content grid (pillar guides, docs hub, vs-pages) */
.is-pillar-layout,
.is-docs-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--space-5);
	width: 100%;
	align-items: start;
}

/* Grid-children mogen niet uitzetten op brede content (mobile overflow guard). */
.is-pillar-layout > *,
.is-docs-layout > * {
	min-width: 0;
}

/* Prose niet centreren binnen de content-kolom — sluit aan op sidebar + breadcrumbs. */
.is-pillar-layout .is-prose,
.is-docs-layout .is-prose,
.is-docs-layout .is-prose--article {
	max-width: none;
	margin-inline: 0;
}

@media (max-width: 991px) {
	.is-pillar-layout,
	.is-docs-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.is-pillar-layout__aside,
.is-docs-layout__aside {
	position: sticky;
	top: 100px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
	padding-right: 2px;
}

.is-pillar-layout__aside::-webkit-scrollbar,
.is-docs-layout__aside::-webkit-scrollbar {
	width: 5px;
}

.is-pillar-layout__aside::-webkit-scrollbar-track,
.is-docs-layout__aside::-webkit-scrollbar-track {
	background: transparent;
}

.is-pillar-layout__aside::-webkit-scrollbar-thumb,
.is-docs-layout__aside::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
}

.is-pillar-layout__aside::-webkit-scrollbar-thumb:hover,
.is-docs-layout__aside::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 991px) {
	.is-pillar-layout__aside,
	.is-docs-layout__aside {
		position: static;
		max-height: none;
	}
}

/* Anchor scroll-offset zodat secties niet onder de fixed header vallen.
 * Dit beïnvloedt alleen scroll-positionering, geen visuele marge. */
.is-docs-layout :is(h2, h3)[id],
.is-pillar-layout :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--header-height, 68px) + 24px);
}

/* ---------- Docs hub layout ---------- */

.is-docs-nav {
	background: var(--surface-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-size: 13px;
	line-height: 1.35;
}

.is-docs-nav__title {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}

.is-docs-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.is-docs-nav__item {
	margin-bottom: 2px;
}

.is-docs-nav__link {
	display: block;
	padding: 5px 6px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.is-docs-nav__link:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
}

.is-docs-nav__link.is-active {
	color: var(--grad-from);
	background: rgba(128, 232, 97, 0.12);
	font-weight: 600;
}

.is-docs-nav__sub {
	list-style: none;
	padding: 0 0 0 var(--space-3);
	margin: 2px 0 6px;
}

.is-docs-nav__link--sub {
	font-size: 13px;
	padding-left: 12px;
}

.is-docs-callout {
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0;
	border: 1px solid var(--border);
}

.is-docs-callout p:last-child {
	margin-bottom: 0;
}

.is-docs-callout--tip {
	background: rgba(128, 232, 97, 0.08);
	border-color: rgba(128, 232, 97, 0.25);
}

.is-docs-callout--warn {
	background: rgba(245, 158, 11, 0.08);
	border-color: rgba(245, 158, 11, 0.3);
}

/* Fact block — citation-friendly summary for LLM/SEO (parts/fact-block.php) */
.is-fact-block {
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-5);
	margin: 0 0 var(--space-6);
	border: 1px solid var(--border);
	background: linear-gradient(
		180deg,
		rgba(128, 232, 97, 0.05) 0%,
		rgba(0, 178, 255, 0.05) 100%
	);
}

.is-fact-block__lead {
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 0 0 var(--space-4);
	color: var(--text);
}

.is-fact-block__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-3) var(--space-5);
	margin: 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--border);
}

.is-fact-block__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.is-fact-block__row dt {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	font-weight: 600;
}

.is-fact-block__row dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--text);
	font-weight: 500;
}

/* Static WP-admin UI mocks (non-interactive) */
.is-admin-mock-wrap {
	margin: var(--space-5) 0;
}

.is-admin-mock {
	user-select: none;
	pointer-events: none;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
	max-width: 520px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
	color: #1f2937;
}

.is-admin-mock__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}

.is-admin-mock__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #320564;
}

.is-admin-mock__close {
	font-size: 22px;
	color: #9ca3af;
	line-height: 1;
}

.is-admin-mock__body {
	padding: 16px 20px;
}

.is-admin-mock__row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: 12px;
}

.is-admin-mock__label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.is-admin-mock__fake {
	display: block;
	font-size: 13px;
	padding: 8px 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: #111827;
}

.is-admin-mock__fake--select {
	background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px;
}

.is-admin-mock__fake--short {
	max-width: 64px;
}

.is-admin-mock__fake--code {
	font-family: ui-monospace, monospace;
	font-size: 12px;
}

.is-admin-mock__section {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin: 16px 0 8px;
}

.is-admin-mock__advanced {
	margin-top: 8px;
	padding: 10px 0;
	border-top: 1px dashed #e5e7eb;
	font-size: 13px;
	font-weight: 600;
	color: #320564;
}

.is-admin-mock__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.is-admin-mock__chip {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ede9fe;
	color: #5b21b6;
}

.is-admin-mock__footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid #e5e7eb;
	background: #fafafa;
}

.is-admin-mock__btn {
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.is-admin-mock__btn--primary {
	background: linear-gradient(to right, #320564, #5010b8);
	color: #fff;
	border-color: transparent;
}

.is-admin-mock__caption {
	margin-top: var(--space-2);
	font-size: 13px;
	color: var(--text-subtle);
	text-align: center;
}

.is-admin-mock--wide {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.is-admin-mock__hint {
	color: #94a3b8;
	font-weight: 400;
	margin-left: 4px;
}

.is-admin-mock__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.is-admin-mock__sublabel {
	font-size: 12px;
	color: #475569;
	font-weight: 600;
	margin-top: 4px;
}

.is-admin-mock__btn--outline {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	color: #5010b8;
	border: 1px solid #c7b3ee;
	padding: 6px 10px;
	border-radius: 6px;
	background: #fff;
	width: fit-content;
}

.is-admin-mock__btn--outline-sm {
	font-size: 11px;
	padding: 4px 10px;
}

.is-admin-mock__btn--ghost {
	background: #fff;
	color: #1f2937;
}

.is-admin-mock__btn--disabled {
	opacity: 0.55;
}

.is-admin-mock__inline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.is-admin-mock__inline-label {
	font-size: 12px;
	color: #475569;
}

.is-admin-mock__fake--placeholder {
	color: #94a3b8;
	font-style: italic;
	min-width: 220px;
}

.is-admin-mock__preview {
	background: #f1f5f9;
	border-radius: 6px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: #334155;
}

.is-admin-mock__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #1f2937;
}

.is-admin-mock__checkbox {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 3px;
	background: #fff;
}

/* ---------- Variation explode example ---------- */

.is-variation-example {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-elev);
	margin: var(--space-5) 0;
}

.is-variation-example__row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--space-4);
	align-items: start;
}

.is-variation-example__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	padding-top: 6px;
}

.is-variation-example__cards {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.is-variation-example__cards--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.is-variation-example__card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px;
	font-size: 12px;
	min-width: 0;
}

.is-variation-example__cards:not(.is-variation-example__cards--grid) .is-variation-example__card {
	min-width: 130px;
}

.is-variation-example__img {
	height: 70px;
	border-radius: 6px;
	margin-bottom: 8px;
	background: #e5e7eb;
}

.is-variation-example__img--multi {
	background: linear-gradient(90deg, #222 0 33.33%, #fff 33.33% 66.66%, #1d4ed8 66.66% 100%);
}

.is-variation-example__title {
	font-weight: 600;
	color: var(--text);
	margin-bottom: 2px;
	font-size: 12px;
}

.is-variation-example__price {
	color: var(--text-muted);
	font-size: 11px;
}

.is-variation-example__swatches {
	display: flex;
	gap: 4px;
	margin-top: 6px;
}

.is-variation-example__swatches span {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	display: inline-block;
}

@media (max-width: 720px) {
	.is-variation-example__row {
		grid-template-columns: 1fr;
	}
	.is-variation-example__cards--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.is-prose pre {
	background: var(--surface-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	overflow-x: auto;
	font-size: 14px;
}

.is-prose pre code {
	background: transparent;
	padding: 0;
	color: var(--text);
}

/* ---------- Post-meta / cards ---------- */

.is-post-meta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}

.is-post-meta time {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.is-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

@media (max-width: 991px) {
	.is-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 478px) {
	.is-post-grid {
		grid-template-columns: 1fr;
	}
}

.is-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: inherit;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 0;
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.is-post-card:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
	color: inherit;
}

.is-post-card__type {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent, var(--text-muted));
}

.is-post-card__title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.is-post-card__excerpt {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.is-post-card__meta {
	margin-top: auto;
	font-size: 13px;
	color: var(--text-subtle);
}

/* ---------- Changelog ---------- */

.is-changelog {
	max-width: 760px;
	margin-inline: auto;
}

.is-changelog__entry {
	border-left: 2px solid var(--border);
	padding-left: var(--space-5);
	margin-bottom: var(--space-7);
	position: relative;
}

.is-changelog__entry::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--brand-primary);
	box-shadow: 0 0 0 4px var(--brand-deep);
}

.is-changelog__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	flex-wrap: wrap;
}

.is-changelog__version {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
}

.is-changelog__date {
	color: var(--text-muted);
	font-size: 14px;
}

.is-changelog__tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--surface-elev-2);
}

.is-changelog__tag--feature {
	background: rgba(52, 211, 153, 0.18);
	color: var(--success);
}

.is-changelog__tag--fix {
	background: rgba(251, 191, 36, 0.18);
	color: var(--warning);
}

.is-changelog__tag--perf {
	background: rgba(80, 16, 184, 0.3);
	color: var(--accent);
}

.is-changelog__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.is-changelog__list li {
	padding: 4px 0;
	color: var(--text-muted);
	font-size: 15px;
}

.is-changelog__list li strong {
	color: var(--text);
	margin-right: 6px;
}

/* ---------- Diversen ---------- */

.is-mt-0 { margin-top: 0; }
.is-mb-0 { margin-bottom: 0; }

.is-text-center { text-align: center; }

.is-divider {
	border: 0;
	height: 1px;
	background: var(--border);
	margin: var(--space-6) 0;
}

.is-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mock content marker (lichte highlight om te zien dat content nog placeholder is) */
.is-mock {
	box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25);
	border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
 * Block-only layouts (Gutenberg blocks → frontend rendering)
 * ----------------------------------------------------------------------- */

/* Visual block — full-width figure/diagram with optional full-bleed escape. */
.is-visual-block {
	margin: var(--space-6) 0;
}

.is-visual-block img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.is-visual-block figcaption {
	margin-top: var(--space-3);
	font-size: 0.9rem;
	color: var(--text-muted);
	text-align: center;
}

.is-visual-block--wide {
	margin-inline: calc(var(--space-7) * -1);
}

@media (max-width: 900px) {
	.is-visual-block--wide {
		margin-inline: 0;
	}
}

/* Split layout — built on top of core/columns, opt-in via className. */
.is-prose .wp-block-columns.is-split,
.is-prose .is-split {
	gap: var(--space-6);
	align-items: flex-start;
	margin: var(--space-6) 0;
}

.is-prose .wp-block-columns.is-split.is-split--reverse,
.is-prose .is-split.is-split--reverse {
	flex-direction: row-reverse;
}

@media (max-width: 900px) {
	.is-prose .wp-block-columns.is-split.is-split--reverse,
	.is-prose .is-split.is-split--reverse {
		flex-direction: column;
	}
}

/* Comparison table — opt-in via className 'is-table' on core/table. */