/*
Theme Name: Ikbengehackt
Theme URI: https://ikbengehackt.info
Description: Rustig, licht block theme voor hulp bij hacks. Mobiel-eerst, indigo + zonnegeel, geen rood.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ikbengehackt
*/

/* =========================================================
   Tokens (aliassen op de theme.json-presets)
   ========================================================= */
:root {
	--ibg-brand: var(--wp--preset--color--brand);
	--ibg-brand-2: var(--wp--preset--color--brand-2);
	--ibg-accent: var(--wp--preset--color--accent);
	--ibg-action: var(--wp--preset--color--action);
	--ibg-action-dark: var(--wp--preset--color--action-dark);
	--ibg-action-edge: #B88A00;
	--ibg-action-ink: var(--wp--preset--color--action-ink);
	--ibg-tint: var(--wp--preset--color--tint);
	--ibg-ink: var(--wp--preset--color--ink);
	--ibg-muted: var(--wp--preset--color--muted);
	--ibg-line: var(--wp--preset--color--line);
	--ibg-surface: var(--wp--preset--color--surface);
	--ibg-white: var(--wp--preset--color--white);
	--ibg-amber-700: var(--wp--preset--color--amber-700);
	--ibg-amber-050: var(--wp--preset--color--amber-050);
	--ibg-focus: #4F46B8;

	--ibg-font-head: var(--wp--preset--font-family--heading);
	--ibg-font-body: var(--wp--preset--font-family--body);

	--ibg-radius: 16px;
	--ibg-shadow:
		0 1px 2px rgba(11, 37, 69, .06),
		0 4px 12px rgba(11, 37, 69, .08);
	--ibg-shadow-hover:
		0 2px 4px rgba(11, 37, 69, .08),
		0 12px 28px rgba(11, 37, 69, .14);
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-wrap: break-word; }

:where(a, button, summary, input):focus-visible {
	outline: 4px solid var(--ibg-focus);
	outline-offset: 2px;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.screen-reader-text:focus, .skip-link:focus {
	position: fixed !important; top: 8px; left: 8px; z-index: 100000;
	width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
	padding: 12px 18px; border-radius: 12px;
	background: var(--ibg-brand); color: #fff; font: 700 1rem/1.2 var(--ibg-font-head); text-decoration: none;
	outline: 4px solid var(--ibg-action); outline-offset: 2px;
}

/* =========================================================
   Header
   ========================================================= */
.ibg-header {
	border-bottom: 1px solid var(--ibg-line);
	background: var(--ibg-white);
}
.ibg-header__inner {
	min-height: 56px;
}
.ibg-logo {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font-family: var(--ibg-font-head); font-weight: 600; font-size: 1.125rem;
	color: var(--ibg-brand); text-decoration: none; letter-spacing: -0.01em;
}
.ibg-logo svg { width: 30px; height: 30px; flex: 0 0 auto; }
.ibg-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.ibg-logo__q { color: #6E68A8; margin-left: 1px; }
.ibg-logo__tag {
	display: none;
	font-family: var(--ibg-font-body); font-size: .8125rem; font-weight: 400;
	color: var(--ibg-muted); letter-spacing: 0; margin-top: 2px;
}
@media (min-width: 768px) {
	.ibg-header__inner { min-height: 68px; }
	.ibg-logo { font-size: 1.25rem; gap: 10px; }
	.ibg-logo svg { width: 36px; height: 36px; }
	.ibg-logo__tag { display: block; }
}
.ibg-logo:hover { color: var(--ibg-brand); }

/* "Menu"-label naast het hamburgericoon: duidelijker dan een los icoon */
.ibg-header .wp-block-navigation__responsive-container-open {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 10px; border-radius: 10px;
	color: var(--ibg-brand);
}
.ibg-header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	font-family: var(--ibg-font-head); font-weight: 600; font-size: 1rem;
}
.ibg-header .wp-block-navigation__responsive-container-open:hover { background: var(--ibg-surface); }
.ibg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 16px;
}
.ibg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 12px 0;
	color: var(--ibg-brand);
	text-decoration: none;
}

/* =========================================================
   Hero
   ========================================================= */
.ibg-hero { padding-top: 2rem; }
.ibg-hero h1 { margin-bottom: .5rem; }
.ibg-hero__lead { color: var(--ibg-muted); font-size: 1.125rem; margin-top: 0; }

.ibg-trust {
	list-style: none; padding: 0; margin: 1rem 0 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.ibg-trust li {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	background: var(--ibg-surface); color: var(--ibg-brand-2);
	font-size: .875rem; font-weight: 700; line-height: 1.3;
}
.ibg-trust li::before {
	content: ""; width: 12px; height: 7px; margin-top: -3px;
	border-left: 2.5px solid var(--ibg-accent);
	border-bottom: 2.5px solid var(--ibg-accent);
	transform: rotate(-45deg);
}

.ibg-eyebrow {
	font-size: .8125rem !important; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ibg-muted); margin: 2rem 0 .75rem;
}

/* =========================================================
   Noodkaarten (triage)
   ========================================================= */
/* Raster reageert op de breedte van de kolom, niet van het scherm */
.ibg-triage-wrap { container-type: inline-size; }
.ibg-triage { display: grid; gap: 14px; }
@container (min-width: 560px) {
	.ibg-triage { grid-template-columns: 1fr 1fr; gap: 18px; }
	.ibg-card--urgent { grid-column: 1 / -1; }
}

.ibg-card {
	position: relative;
	background: var(--ibg-white);
	border: 2px solid var(--ibg-line);
	border-radius: var(--ibg-radius);
	box-shadow: var(--ibg-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ibg-card--urgent { border-color: var(--ibg-brand-2); }

.ibg-card__link {
	display: flex; align-items: center; gap: 16px;
	min-height: 88px;               /* ruim boven 48px touch-minimum: trillende duimen */
	padding: 18px 20px;
	color: var(--ibg-brand);
	text-decoration: none;
	border-radius: var(--ibg-radius);
	-webkit-tap-highlight-color: transparent;
}
a.ibg-card__link:hover { color: var(--ibg-brand); }

.ibg-card__icon {
	flex: 0 0 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: var(--ibg-tint);
	color: var(--ibg-accent);
}
.ibg-card__icon svg { width: 28px; height: 28px; }

.ibg-card__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ibg-card__title {
	font-family: var(--ibg-font-head);
	font-size: 1.25rem; font-weight: 700; line-height: 1.25;
}
.ibg-card__sub {
	font-family: var(--ibg-font-body);
	font-size: 1rem; line-height: 1.4; color: var(--ibg-muted);
}

.ibg-card__chevron {
	flex: 0 0 auto; width: 12px; height: 12px; margin-right: 4px;
	border-right: 3px solid var(--ibg-accent);
	border-bottom: 3px solid var(--ibg-accent);
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.ibg-badge {
	display: inline-block; margin: 14px 0 0 20px;
	padding: 4px 10px; border-radius: 999px;
	background: var(--ibg-amber-050); color: var(--ibg-amber-700);
	font: 700 .8125rem/1.3 var(--ibg-font-body);
}
.ibg-badge + .ibg-card__link { padding-top: 10px; }

/* Groene belknop (primaire actie) */
.ibg-call {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 56px; margin: 0 16px 16px;
	border-radius: 12px;
	background: var(--ibg-action);
	color: var(--ibg-action-ink); text-decoration: none;
	font: 700 1.125rem/1 var(--ibg-font-head);
	box-shadow: 0 3px 0 var(--ibg-action-edge);  /* "fysieke" knoprand = klikbaar */
	transition: background-color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.ibg-call svg { width: 22px; height: 22px; }
.ibg-call__other { display: block; margin: -8px 16px 14px; text-align: center; font-size: .9375rem; font-weight: 700; color: var(--ibg-accent); }
a.ibg-call:hover, a.ibg-call:visited { color: var(--ibg-action-ink); }

/* Hover alleen op apparaten met muis (geen 'plakkende' hover op touch) */
@media (hover: hover) {
	.ibg-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--ibg-shadow-hover);
		border-color: var(--ibg-accent);
	}
	.ibg-card:hover .ibg-card__chevron { transform: translateX(3px) rotate(-45deg); }
	.ibg-call:hover { background: var(--ibg-action-dark); }
}

/* Active: tastbare 'indruk'-feedback */
.ibg-card:has(.ibg-card__link:active),
.ibg-card.ibg-card__link:active {
	transform: translateY(1px);
	box-shadow: var(--ibg-shadow);
	border-color: var(--ibg-accent);
}
.ibg-call:active { transform: translateY(3px); box-shadow: none; }

.ibg-card__link:focus-visible,
.ibg-call:focus-visible,
a.ibg-bank:focus-visible,
.ibg-submit:focus-visible {
	outline: 4px solid var(--ibg-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Andere situaties: compacte rij onder de vier hoofdkaarten */
.ibg-home__main { container-type: inline-size; }
.ibg-more-list { display: grid; gap: 8px; }
@container (min-width: 560px) { .ibg-more-list { grid-template-columns: 1fr 1fr; } }
.ibg-more-list__item {
	display: flex; align-items: center; gap: 12px;
	min-height: 56px; padding: 10px 14px;
	border: 1px solid var(--ibg-line); border-radius: 12px; background: var(--ibg-surface);
	color: var(--ibg-brand); text-decoration: none;
	font: 700 1rem/1.3 var(--ibg-font-head);
	transition: border-color .15s ease, background-color .15s ease;
}
.ibg-more-list__item::after { content: "›"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--ibg-accent); }
.ibg-more-list__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--ibg-accent); }
a.ibg-more-list__item:hover { color: var(--ibg-brand); }
@media (hover: hover) { .ibg-more-list__item:hover { border-color: var(--ibg-accent); background: #fff; } }

/* =========================================================
   Homepage: twee kolommen op desktop
   ========================================================= */
.wp-block-columns.ibg-home { gap: 2.5rem; margin-top: 0; }
.ibg-home__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.ibg-home__aside > * { margin: 0 !important; }
@media (min-width: 1024px) {
	.wp-block-columns.ibg-home { gap: 3.5rem; }
	.ibg-home .ibg-hero { padding-top: 3rem; }
	.ibg-home .ibg-hero h1 { font-size: 2.75rem; max-width: 17ch; margin-left: 0 !important; }
	.ibg-home__aside { padding-top: 3.25rem; position: sticky; top: 1.5rem; align-self: flex-start; }
}

.ibg-aside-box {
	background: var(--ibg-surface);
	border-radius: var(--ibg-radius);
	padding: 1.25rem;
}
.ibg-aside-box > h2 {
	font-size: .8125rem !important; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ibg-accent); margin: 0 0 .5rem;
}
.ibg-mini .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.ibg-mini .wp-block-post { padding: .75rem 0; border-top: 1px solid var(--ibg-line); margin: 0; }
.ibg-mini .wp-block-post:first-child { border-top: 0; }
.ibg-mini .wp-block-post-title { font-size: 1.0625rem; margin: 0; line-height: 1.35; }
.ibg-mini .wp-block-post-title a { color: var(--ibg-brand); text-decoration: none; }
.ibg-mini .wp-block-post-title a:hover { text-decoration: underline; }
.ibg-mini .wp-block-post-date { font-size: .8125rem; color: var(--ibg-muted); }
.ibg-aside-box .ibg-more { margin: .75rem 0 0; font-weight: 700; }
.ibg-aside-box .ibg-more a { color: var(--ibg-accent); }

/* =========================================================
   Geruststellende band
   ========================================================= */
.ibg-band {
	background: var(--ibg-surface);
	border-radius: var(--ibg-radius);
	padding: 1.5rem 1.25rem;
}
.ibg-band p { margin: 0; }
.ibg-band p + p { margin-top: .75rem; }

/* =========================================================
   Scenariopagina's
   ========================================================= */
.ibg-back a {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; text-decoration: none; color: var(--ibg-brand-2);
	min-height: 44px;
}
.ibg-back a::before { content: "←"; }
.ibg-meta { color: var(--ibg-muted); font-size: .9375rem; margin-top: -.5rem; }
.wp-block-post-date.ibg-meta { margin-top: .5rem; }

.ibg-now {
	border: 2px solid var(--ibg-accent);
	border-radius: var(--ibg-radius);
	padding: 1.25rem;
	box-shadow: var(--ibg-shadow);
}
.ibg-now > h2 {
	font-size: .8125rem !important; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ibg-accent); margin: 0 0 .75rem;
}

/* Afvinkbare stappen (JS voegt de checkbox toe) */
.ibg-checklist { list-style: none; padding: 0; margin: 0; counter-reset: ibg; }
.ibg-checklist > li {
	counter-increment: ibg;
	position: relative;
	padding: 14px 0 14px 52px;
	border-top: 1px solid var(--ibg-line);
}
.ibg-checklist > li:first-child { border-top: 0; }
.ibg-checklist > li::before {
	content: counter(ibg);
	position: absolute; left: 0; top: 12px;
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ibg-brand); color: #fff;
	font: 700 1rem/1 var(--ibg-font-head);
}
.ibg-checklist > li > strong:first-child { color: var(--ibg-brand); font-size: 1.125rem; }
.ibg-check {
	display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 8px;
	font-size: .9375rem; color: var(--ibg-muted); cursor: pointer;
	min-height: 44px;
}
.ibg-check input { width: 22px; height: 22px; accent-color: var(--ibg-accent); margin: 0; }
.ibg-checklist > li.is-done::before { content: "✓"; background: var(--ibg-accent); }
.ibg-checklist--info > li::before { background: var(--ibg-accent); }
.ibg-checklist > li.is-done > strong:first-child { color: var(--ibg-muted); text-decoration: line-through; text-decoration-thickness: 2px; }

.ibg-note {
	background: var(--ibg-amber-050);
	border-left: 4px solid var(--ibg-amber-700);
	border-radius: 0 12px 12px 0;
	padding: 1rem 1.25rem;
	color: var(--ibg-ink);
}
.ibg-note strong { color: var(--ibg-amber-700); }

.ibg-ok {
	background: var(--ibg-tint);
	border-radius: 12px;
	padding: 1rem 1.25rem;
}

/* Uitklapbare secties ("Daarna", "Melden") en woordenboek-termen */
.ibg-term {
	background: var(--ibg-white);
	border: 1px solid var(--ibg-line);
	border-radius: 14px;
	margin: 0 0 12px;
}
.ibg-term > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 60px; padding: 16px 20px;
	font-family: var(--ibg-font-head); font-size: 1.125rem; font-weight: 700;
	color: var(--ibg-brand);
}
.ibg-term > summary::-webkit-details-marker { display: none; }
.ibg-term > summary::after {
	content: "+"; flex: 0 0 auto;
	font-size: 1.5rem; line-height: 1; color: var(--ibg-accent);
}
.ibg-term[open] > summary::after { content: "−"; }
.ibg-term[open] { border-color: var(--ibg-accent); }
.ibg-term > :not(summary) { padding-inline: 20px; }
.ibg-term > :last-child { padding-bottom: 20px; }
.ibg-term > summary + * { margin-top: 0; }
.ibg-term ul { padding-left: calc(20px + 1.25rem); }
.ibg-term > summary:focus-visible { border-radius: 14px; }

/* Bel je bank: kies-je-bank + belpaneel + spiekbriefje.
   Zonder JS (geen .is-enhanced) is het een compacte lijst van alle banken. */
.ibg-bank__logo {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
	display: grid; place-items: center; background: #fff; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(28, 24, 63, .1);
}
.ibg-bank__logo img { width: 30px; height: 30px; object-fit: contain; }

.ibg-bankpick__q {
	margin: 0 0 8px; font: 700 .8125rem/1.2 var(--ibg-font-head);
	letter-spacing: .08em; text-transform: uppercase; color: var(--ibg-accent);
}
.ibg-bankpick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ibg-bankpick__grid[hidden] { display: none; }
.ibg-tile:last-child:nth-child(3n+2) { grid-column: span 2; }
@media (min-width: 560px) {
	.ibg-bankpick__grid { grid-template-columns: repeat(4, 1fr); }
	.ibg-tile:last-child:nth-child(3n+2) { grid-column: auto; }
}
.ibg-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 96px; padding: 10px 4px;
	border: 2px solid var(--ibg-line); border-radius: 14px; background: #fff;
	font: 700 .8125rem/1.15 var(--ibg-font-head); color: var(--ibg-brand); text-align: center;
	cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .ibg-tile:hover { border-color: var(--ibg-accent); } }
.ibg-tile:active { transform: scale(.97); }
.ibg-tile[aria-pressed="true"] { border-color: var(--ibg-brand); background: var(--ibg-tint); box-shadow: inset 0 0 0 1px var(--ibg-brand); }

.ibg-bankpick__panels { display: grid; gap: 10px; }
@media (min-width: 560px) { .ibg-bankpick:not(.is-enhanced) .ibg-bankpick__panels { grid-template-columns: 1fr 1fr; } }
.ibg-bankpanel { border: 2px solid var(--ibg-line); border-radius: 16px; padding: 12px; background: #fff; }
.ibg-bankpanel__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ibg-bankpanel__name { margin: 0; font: 700 1.0625rem/1.2 var(--ibg-font-head); color: var(--ibg-brand); }
.ibg-bankpanel__sub { margin: 2px 0 0; font-size: .875rem; color: var(--ibg-muted); }
.ibg-bigcall {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 8px 12px; border-radius: 12px; text-decoration: none;
	background: var(--ibg-action); color: var(--ibg-action-ink);
	font: 700 1.0625rem/1.2 var(--ibg-font-head);
	box-shadow: 0 3px 0 var(--ibg-action-edge);
}
a.ibg-bigcall:hover, a.ibg-bigcall:visited { color: var(--ibg-action-ink); }
@media (hover: hover) { a.ibg-bigcall:hover { background: var(--ibg-action-dark); } }
a.ibg-bigcall:active { transform: translateY(3px); box-shadow: none; }
.ibg-bigcall__nr { white-space: nowrap; }
.ibg-bigcall--none { margin: 0; background: var(--ibg-surface); color: var(--ibg-muted); box-shadow: none; font-size: .9375rem; text-align: center; }
.ibg-bankpanel__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ibg-bankpanel__info { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; font-size: .9375rem; color: var(--ibg-accent); }
.ibg-bankpanel__change {
	min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
	font: 700 .9375rem var(--ibg-font-body); color: inherit; text-decoration: underline;
}
.ibg-bankpanel__change[hidden] { display: none; }

/* Met JS: alleen het gekozen paneel, groot en donker */
.ibg-bankpick.is-enhanced .ibg-bankpanel { display: none; }
.ibg-bankpick.is-enhanced .ibg-bankpanel.is-active {
	display: block; margin-top: 12px; padding: 16px;
	background: var(--ibg-brand); border-color: var(--ibg-brand); color: #fff;
	animation: ibg-pop .2s ease-out;
}
.ibg-bankpanel.is-active .ibg-bankpanel__name { color: #fff; font-size: 1.2rem; }
.ibg-bankpanel.is-active .ibg-bankpanel__sub { color: #DCD9F0; }
.ibg-bankpanel.is-active .ibg-bigcall { min-height: 62px; font-size: 1.2rem; }
.ibg-bankpanel.is-active .ibg-bankpanel__info { color: #fff; }
.ibg-bankpanel.is-active :focus-visible { outline-color: #fff; box-shadow: none; }
@keyframes ibg-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ibg-bankpick__remember { margin: 8px 2px 0; font-size: .8125rem; color: var(--ibg-muted); }
.ibg-bankpick__remember[hidden] { display: none; }

/* Spiekbriefje */
.ibg-spiek { margin-top: 14px; padding: 14px 16px; border: 2px dashed var(--ibg-accent); border-radius: 16px; background: #fff; }
.ibg-spiek__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 1rem/1.3 var(--ibg-font-head); color: var(--ibg-brand); }
.ibg-spiek__title svg { color: var(--ibg-accent); flex: 0 0 auto; }
.ibg-spiek__say { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--ibg-tint); font-style: italic; }
.ibg-spiek ul { margin: 0; padding-left: 1.2rem; }
.ibg-spiek li { margin-bottom: 4px; }
.ibg-spiek__note { margin: 8px 0 0; font-size: .875rem; color: var(--ibg-muted); }
.ibg-banks__tip { font-size: .9375rem; color: var(--ibg-muted); margin-top: .75rem; }

/* Knoppen uit de block editor */
.wp-block-button__link {
	box-shadow: 0 3px 0 var(--ibg-action-edge);
	min-height: 56px; display: inline-flex; align-items: center; justify-content: center;
}
.wp-block-button__link:active { transform: translateY(3px); box-shadow: none; }
.is-style-outline .wp-block-button__link {
	box-shadow: none; border: 2px solid var(--ibg-accent) !important;
	color: var(--ibg-accent) !important; background: transparent !important;
}

/* =========================================================
   Twijfel-check
   ========================================================= */
.ibg-quiz { display: grid; gap: 12px; }
.ibg-quiz a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 64px; padding: 14px 18px;
	border: 2px solid var(--ibg-line); border-radius: 14px;
	background: var(--ibg-white); color: var(--ibg-brand);
	text-decoration: none; font-weight: 700; box-shadow: var(--ibg-shadow);
}
.ibg-quiz a::after { content: "›"; font-size: 1.5rem; color: var(--ibg-accent); }
@media (hover: hover) { .ibg-quiz a:hover { border-color: var(--ibg-accent); } }

/* =========================================================
   Actuele trucs: eigen meldingen (query loop)
   ========================================================= */
.ibg-alerts .wp-block-post-template { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .ibg-alerts .wp-block-post-template { grid-template-columns: 1fr 1fr; } }
.ibg-alerts .wp-block-post {
	position: relative; margin: 0;
	padding: 20px; background: var(--ibg-white);
	border: 1px solid var(--ibg-line); border-left: 4px solid var(--ibg-amber-700);
	border-radius: 14px; box-shadow: var(--ibg-shadow);
}
@media (min-width: 700px) { .ibg-alerts .wp-block-post:first-child { grid-column: 1 / -1; } }
.ibg-alerts .wp-block-post-title { font-size: 1.25rem; margin: .25rem 0 .5rem; }
.ibg-alerts .wp-block-post-title a { color: var(--ibg-brand); text-decoration: none; }
.ibg-alerts .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ibg-alerts .wp-block-post-date { font-size: .875rem; color: var(--ibg-muted); }
.ibg-alerts .wp-block-post-excerpt { color: var(--ibg-muted); margin: 0; }
.ibg-alerts .wp-block-post-excerpt__more-text { display: none; }
@media (hover: hover) { .ibg-alerts .wp-block-post:hover { box-shadow: var(--ibg-shadow-hover); } }
.ibg-alerts .wp-block-post:focus-within { outline: 4px solid var(--ibg-focus); outline-offset: 2px; }

/* Filterknoppen: op mobiel horizontaal scrollbaar, geen afgebroken knoppen */
.ibg-filters {
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	margin: 0 -16px 1rem !important; padding: 4px 16px 6px;
	-webkit-overflow-scrolling: touch;
}
.ibg-filters::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .ibg-filters { flex-wrap: wrap; overflow: visible; margin-inline: 0 !important; padding-inline: 0; } }
.ibg-chip {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 16px;
	border: 2px solid var(--ibg-line); border-radius: 999px;
	background: var(--ibg-white); color: var(--ibg-brand);
	font: 700 1rem/1 var(--ibg-font-head); text-decoration: none;
	cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.ibg-chip__n {
	min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
	display: inline-grid; place-items: center; border-radius: 999px;
	background: var(--ibg-surface); color: var(--ibg-muted);
	font: 700 .8125rem/1 var(--ibg-font-body);
}
@media (hover: hover) { .ibg-chip:hover { border-color: var(--ibg-accent); color: var(--ibg-brand); } }
.ibg-chip[aria-pressed="true"] { background: var(--ibg-brand); border-color: var(--ibg-brand); color: #fff; }
.ibg-chip[aria-pressed="true"] .ibg-chip__n { background: rgba(255,255,255,.18); color: #fff; }
.ibg-alerts .wp-block-post[hidden] { display: none; }
@media (min-width: 700px) { .ibg-alerts.is-filtered .wp-block-post:first-child { grid-column: auto; } }
.ibg-filters__none { color: var(--ibg-muted); }

/* =========================================================
   Actuele trucs: RSS-feeds als naadloze kaarten
   ========================================================= */
.wp-block-rss.ibg-feed {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .wp-block-rss.ibg-feed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wp-block-rss.ibg-feed { grid-template-columns: repeat(3, 1fr); } }

/* Bronlabel per feed: eerlijk over herkomst = vertrouwen */
.ibg-feed--veiligbankieren { --ibg-src: "Bron: Veiligbankieren.nl"; }
.ibg-feed--securitynl      { --ibg-src: "Bron: Security.nl"; }

.wp-block-rss.ibg-feed .wp-block-rss__item {
	position: relative; margin: 0; width: auto;
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px; background: var(--ibg-white);
	border: 1px solid var(--ibg-line); border-radius: 14px;
	box-shadow: var(--ibg-shadow);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ibg-feed .wp-block-rss__item::before {
	content: var(--ibg-src, "Externe bron");
	order: -2; font-size: .8125rem; font-weight: 700;
	letter-spacing: .02em; color: var(--ibg-brand-2);
}
.ibg-feed .wp-block-rss__item-publish-date {
	order: -1; font-size: .875rem; color: var(--ibg-muted);
}
.ibg-feed .wp-block-rss__item-title a {
	font-family: var(--ibg-font-head); font-size: 1.125rem; font-weight: 700;
	line-height: 1.3; color: var(--ibg-brand); text-decoration: none;
}
/* Hele kaart klikbaar (stretched link) */
.ibg-feed .wp-block-rss__item-title a::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.ibg-feed .wp-block-rss__item-excerpt {
	color: var(--ibg-muted); font-size: 1rem; line-height: 1.5; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Laat zien dat je de site verlaat */
.ibg-feed .wp-block-rss__item::after {
	content: "Lees bij de bron ↗"; margin-top: auto;
	font-weight: 700; color: var(--ibg-accent);
}
@media (hover: hover) {
	.ibg-feed .wp-block-rss__item:hover { border-color: var(--ibg-accent); box-shadow: var(--ibg-shadow-hover); }
}
.ibg-feed .wp-block-rss__item:focus-within { outline: 4px solid var(--ibg-focus); outline-offset: 2px; }

/* =========================================================
   Woordenboek: zoeken
   ========================================================= */
.ibg-search { position: relative; margin-bottom: 1rem; }
.ibg-search input {
	width: 100%; box-sizing: border-box;
	min-height: 56px; padding: 0 16px 0 48px;
	border: 2px solid var(--ibg-line); border-radius: 14px;
	font: 1.125rem var(--ibg-font-body); color: var(--ibg-ink);
	background: var(--ibg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%234A5568' stroke-width='2.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
}
.ibg-search input:focus { border-color: var(--ibg-accent); }
.ibg-search__empty { color: var(--ibg-muted); }
.ibg-term-label { font-weight: 700; color: var(--ibg-brand-2); margin-bottom: 0 !important; }
.ibg-term-label + p, .ibg-term-label + ul { margin-top: .25rem; }

/* =========================================================
   Footer
   ========================================================= */
.ibg-footer {
	margin-top: 4rem;
	background: var(--ibg-brand); color: #DCD9F0;
	font-size: 1rem;
}
.ibg-footer a { color: #fff; }
.ibg-footer .ibg-footer__links a { text-decoration: none; font-weight: 700; }
.ibg-footer .ibg-footer__links a:hover { text-decoration: underline; }
.ibg-footer__small { font-size: .875rem; color: #B7B2DA; }
.ibg-footer :focus-visible { outline-color: var(--ibg-action); }

/* =========================================================
   Meld-een-truc formulier
   ========================================================= */
.ibg-form { display: flex; flex-direction: column; gap: 1.5rem; }
.ibg-form > * { margin: 0; }
.ibg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ibg-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.ibg-field > label, .ibg-field > legend {
	display: block; padding: 0; margin-bottom: 6px;
	font-family: var(--ibg-font-head); font-weight: 700; font-size: 1.0625rem;
	color: var(--ibg-brand); line-height: 1.35;
}
.ibg-req {
	margin-left: 6px; font-family: var(--ibg-font-body); font-weight: 400;
	font-size: .8125rem; color: var(--ibg-muted);
}
.ibg-field__hint { margin: 0 0 8px; font-size: .9375rem; color: var(--ibg-muted); }
.ibg-form input[type="text"], .ibg-form input[type="email"], .ibg-form textarea {
	width: 100%; box-sizing: border-box;
	min-height: 52px; padding: 12px 14px;
	border: 2px solid var(--ibg-line); border-radius: 12px;
	background: var(--ibg-white); color: var(--ibg-ink);
	font: 1.0625rem/1.5 var(--ibg-font-body);
}
.ibg-form textarea { resize: vertical; }
.ibg-form input:focus, .ibg-form textarea:focus { border-color: var(--ibg-accent); outline: 4px solid var(--ibg-focus); outline-offset: 1px; }
.ibg-form [aria-invalid="true"] { border-color: var(--ibg-amber-700); }

.ibg-radios { display: grid; gap: 8px; }
@media (min-width: 560px) { #veld-soort .ibg-radios { grid-template-columns: 1fr 1fr; } }
.ibg-radio {
	display: flex; align-items: center; gap: 12px;
	min-height: 52px; padding: 10px 14px;
	border: 2px solid var(--ibg-line); border-radius: 12px;
	background: var(--ibg-white); cursor: pointer; line-height: 1.35;
}
.ibg-radio input, .ibg-checkbox input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--ibg-accent); }
.ibg-radio:has(input:checked) { border-color: var(--ibg-accent); background: var(--ibg-tint); font-weight: 700; }
.ibg-radio:has(input:focus-visible) { outline: 4px solid var(--ibg-focus); outline-offset: 2px; }
.ibg-checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .9375rem; }
.ibg-checkbox input { margin-top: 2px; }
.ibg-meld-urgent { margin-top: 10px; }
.ibg-meld-urgent[hidden] { display: none; }
.ibg-meld-urgent p { margin: 0 0 .5rem; }
.ibg-meld-urgent p:last-child { margin: 0; }
.ibg-meld-urgent a { font-weight: 700; }

.ibg-field__error { margin: 0 0 8px; color: var(--ibg-amber-700); font-weight: 700; font-size: .9375rem; }
.ibg-field__error::before { content: "! "; }
.ibg-form__errors {
	border: 2px solid var(--ibg-amber-700); border-radius: 12px;
	background: var(--ibg-amber-050); padding: 1rem 1.25rem;
}
.ibg-form__errors p, .ibg-form__errors ul { margin: 0; }
.ibg-form__errors ul { padding-left: 1.25rem; margin-top: .25rem; }
.ibg-form__errors a { color: var(--ibg-ink); }

.ibg-submit {
	min-height: 56px; padding: 0 28px; width: 100%;
	border: 0; border-radius: 12px; cursor: pointer;
	background: var(--ibg-action); color: var(--ibg-action-ink);
	font: 700 1.125rem/1 var(--ibg-font-head);
	box-shadow: 0 3px 0 var(--ibg-action-edge);
}
@media (min-width: 560px) { .ibg-submit { width: auto; } }
@media (hover: hover) { .ibg-submit:hover { background: var(--ibg-action-dark); } }
.ibg-submit:active { transform: translateY(3px); box-shadow: none; }
.ibg-meld-ok p { margin: 0 0 .5rem; }
.ibg-meld-ok p:last-child { margin: 0; }

/* Tabellen (bijv. privacyverklaring): op mobiel horizontaal scrollbaar */
.wp-block-table.ibg-table { overflow-x: auto; margin: 0; }
.ibg-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9375rem; line-height: 1.45; }
.ibg-table th, .ibg-table td { border: 0; border-bottom: 1px solid var(--ibg-line); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.ibg-table th { font-family: var(--ibg-font-head); color: var(--ibg-brand); border-bottom: 2px solid var(--ibg-brand); }
.ibg-band h2, .ibg-band h3 { margin-top: 0; }
.ibg-hero__lead + .ibg-meta { margin-top: .5rem; }
.ibg-band ul { margin-bottom: 0; }

/* =========================================================
   Veiligheidscheck: voortgang en "Hoe doe ik dat?"
   ========================================================= */
.ibg-progress { margin: 0 0 .5rem; }
.ibg-progress__bar { height: 10px; border-radius: 999px; background: var(--ibg-tint); overflow: hidden; }
.ibg-progress__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ibg-accent); transition: width .3s ease; }
.ibg-progress__text { margin: 6px 0 0; font-weight: 700; font-size: .9375rem; color: var(--ibg-brand-2); }
.ibg-how { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-weight: 700; font-size: .9375rem; }
.ibg-term { scroll-margin-top: 16px; }
.ibg-term code { background: var(--ibg-surface); padding: 1px 6px; border-radius: 6px; font-size: .95em; }

/* =========================================================
   Waarschuwingsbalk (nieuwste vastgezette bericht)
   ========================================================= */
.ibg-alertbar {
	background: var(--ibg-tint);
	border-bottom: 1px solid var(--ibg-line);
	color: var(--ibg-ink);
	font-size: .9375rem; line-height: 1.4;
}
.ibg-alertbar__inner {
	max-width: 1040px; margin: 0 auto;
	display: flex; align-items: center; gap: 10px;
	padding: 8px 4px 8px 16px;
}
/* Live-stip: rustig pulserend, zoals 'live' bij nieuws (stilstaand bij 'minder beweging') */
.ibg-alertbar__label {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--ibg-accent);
	font: 700 .75rem/1.2 var(--ibg-font-head); letter-spacing: .05em; text-transform: uppercase;
}
.ibg-alertbar__label::before {
	content: ""; flex: 0 0 auto;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--ibg-accent);
	animation: ibg-live 2s ease-out infinite;
}
@keyframes ibg-live {
	0% { box-shadow: 0 0 0 0 rgba(79, 70, 184, .45); }
	70% { box-shadow: 0 0 0 8px rgba(79, 70, 184, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 70, 184, 0); }
}
.ibg-alertbar__link { flex: 1; color: var(--ibg-brand); font-weight: 700; padding: 6px 0; min-height: 44px; display: flex; align-items: center; }
.ibg-alertbar__link:hover { color: var(--ibg-brand); text-decoration-thickness: 2px; }
.ibg-alertbar__close {
	flex: 0 0 44px; height: 44px;
	border: 0; border-radius: 10px; background: transparent; cursor: pointer;
	color: var(--ibg-brand-2); font-size: 1.5rem; line-height: 1;
}
.ibg-alertbar__close:hover { background: rgba(79, 70, 184, .1); }
.ibg-alertbar[hidden] { display: none; }

/* =========================================================
   Delen en printen
   ========================================================= */
.ibg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -.25rem 0 0; }
.ibg-share { margin: 0; }
.ibg-share__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ibg-share__btn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 16px;
	border: 2px solid var(--ibg-line); border-radius: 999px;
	background: var(--ibg-white); color: var(--ibg-brand-2);
	font: 700 .9375rem/1 var(--ibg-font-head); text-decoration: none; cursor: pointer;
}
.ibg-share__btn[hidden] { display: none; }
a.ibg-share__btn:hover, a.ibg-share__btn:visited { color: var(--ibg-brand-2); }
@media (hover: hover) { .ibg-share__btn:hover { border-color: var(--ibg-accent); } }
.ibg-share__done { margin: 6px 0 0; font-size: .875rem; font-weight: 700; color: var(--ibg-accent); }
.ibg-share__done[hidden] { display: none; }

/* Groot deelblok (onder een truc) */
.ibg-share:not(.ibg-share--compact) {
	margin-top: 2rem; padding: 1.25rem; border-radius: var(--ibg-radius);
	background: var(--ibg-tint);
}
.ibg-share:not(.ibg-share--compact) .ibg-share__intro { margin: 0 0 .75rem; font-weight: 700; color: var(--ibg-brand); }
.ibg-share:not(.ibg-share--compact) .ibg-share__btn {
	min-height: 52px; border: 0; background: var(--ibg-action); color: var(--ibg-action-ink);
	box-shadow: 0 3px 0 var(--ibg-action-edge); font-size: 1rem;
}
.ibg-share:not(.ibg-share--compact) .ibg-share__copy { background: #fff; box-shadow: none; border: 2px solid var(--ibg-line); }
.ibg-share:not(.ibg-share--compact) a.ibg-share__btn:visited { color: var(--ibg-action-ink); }

/* =========================================================
   Heeft deze pagina je geholpen?
   ========================================================= */
.ibg-fb { margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--ibg-line); border-radius: var(--ibg-radius); }
.ibg-fb[hidden], .ibg-fb [hidden] { display: none; }
.ibg-fb__q, .ibg-fb__q2 { margin: 0 0 .6rem; font: 700 1rem/1.3 var(--ibg-font-head); color: var(--ibg-brand); }
.ibg-fb__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ibg-fb__btn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 16px; border: 2px solid var(--ibg-line); border-radius: 999px;
	background: #fff; color: var(--ibg-brand-2); font: 700 .9375rem/1.2 var(--ibg-font-head); cursor: pointer;
}
@media (hover: hover) { .ibg-fb__btn:hover { border-color: var(--ibg-accent); } }
.ibg-fb__reden { font-family: var(--ibg-font-body); }
.ibg-fb__thanks { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ibg-ink); }
.ibg-fb__note { margin: .6rem 0 0; font-size: .8125rem; color: var(--ibg-muted); }

/* =========================================================
   Quiz "Herken jij de truc?"
   ========================================================= */
.ibg-qz { margin-bottom: 1.5rem; --qz-good: #17663F; --qz-good-bg: #E8F5EE; --qz-bad: var(--ibg-amber-700); --qz-bad-bg: var(--ibg-amber-050); scroll-margin-top: 16px; }
.ibg-qz__nojs { color: var(--ibg-muted); }
.ibg-qz__h { margin: 0 0 .75rem; }
.ibg-qz__start, .ibg-qz__card, .ibg-qz__result {
	border: 2px solid var(--ibg-line); border-radius: var(--ibg-radius);
	padding: 1.25rem; background: #fff; box-shadow: var(--ibg-shadow);
}
.ibg-qz__facts { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.ibg-qz__facts li { margin-bottom: .25rem; }
.ibg-qz__primary, .ibg-qz__secondary {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 56px; padding: 0 24px; border-radius: 12px; cursor: pointer;
	font: 700 1.0625rem/1.2 var(--ibg-font-head);
}
.ibg-qz__primary { border: 0; background: var(--ibg-action); color: var(--ibg-action-ink); box-shadow: 0 3px 0 var(--ibg-action-edge); }
@media (hover: hover) { .ibg-qz__primary:hover { background: var(--ibg-action-dark); } }
.ibg-qz__primary:active { transform: translateY(3px); box-shadow: none; }
.ibg-qz__secondary { border: 2px solid var(--ibg-line); background: #fff; color: var(--ibg-brand-2); }
@media (hover: hover) { .ibg-qz__secondary:hover { border-color: var(--ibg-accent); } }

/* Voortgang */
.ibg-qz__progress { margin-bottom: 12px; }
.ibg-qz__count { margin: 0 0 6px; font: 700 .9375rem var(--ibg-font-head); color: var(--ibg-brand-2); }
.ibg-qz__bar { height: 8px; border-radius: 999px; background: var(--ibg-tint); overflow: hidden; }
.ibg-qz__bar span { display: block; height: 100%; background: var(--ibg-accent); border-radius: inherit; transition: width .3s ease; }

/* Vraag */
.ibg-qz__cat { display: inline-block; margin: 0 0 .5rem; padding: 3px 10px; border-radius: 999px; background: var(--ibg-tint); color: var(--ibg-brand-2); font: 700 .8125rem var(--ibg-font-body); }
.ibg-qz__scenario { margin: 0 0 1rem; font-size: 1.0625rem; }
.ibg-qz__fig { margin: 0 0 1rem; }
.ibg-qz__ask { margin: 0 0 .75rem; font-size: 1.125rem; }
.ibg-qz__options { display: grid; gap: 10px; }
.ibg-qz__opt {
	display: grid; grid-template-columns: 32px 1fr; grid-template-areas: "l t" "l m"; column-gap: 12px; align-items: center;
	width: 100%; min-height: 60px; padding: 12px 14px; text-align: left;
	border: 2px solid var(--ibg-line); border-radius: 14px; background: #fff; cursor: pointer;
	font: 400 1rem/1.4 var(--ibg-font-body); color: var(--ibg-ink);
	transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
@media (hover: hover) { .ibg-qz__opt:not(:disabled):hover { border-color: var(--ibg-accent); } }
.ibg-qz__letter { grid-area: l; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ibg-surface); color: var(--ibg-brand); font: 700 .9375rem var(--ibg-font-head); }
.ibg-qz__text { grid-area: t; }
.ibg-qz__mark { grid-area: m; font: 700 .875rem var(--ibg-font-head); }
.ibg-qz__mark:empty { display: none; }
.ibg-qz__opt:disabled { cursor: default; }
.ibg-qz__opt.is-correct { border-color: var(--qz-good); background: var(--qz-good-bg); }
.ibg-qz__opt.is-correct .ibg-qz__letter { background: var(--qz-good); color: #fff; }
.ibg-qz__opt.is-correct .ibg-qz__mark { color: var(--qz-good); }
.ibg-qz__opt.is-wrong { border-color: var(--qz-bad); background: var(--qz-bad-bg); }
.ibg-qz__opt.is-wrong .ibg-qz__letter { background: var(--qz-bad); color: #fff; }
.ibg-qz__opt.is-wrong .ibg-qz__mark { color: var(--qz-bad); }
.ibg-qz__opt.is-dim { opacity: .6; }

/* Feedback schuift in beeld */
.ibg-qz__feedback { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; border-left: 5px solid; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.ibg-qz__feedback.is-in { opacity: 1; transform: none; }
.ibg-qz__feedback.is-good { background: var(--qz-good-bg); border-color: var(--qz-good); }
.ibg-qz__feedback.is-bad { background: var(--qz-bad-bg); border-color: var(--qz-bad); }
.ibg-qz__fbh { margin: 0 0 .4rem; font-size: 1.125rem; }
.is-good .ibg-qz__fbh { color: var(--qz-good); }
.is-bad .ibg-qz__fbh { color: var(--qz-bad); }
.ibg-qz__fbtext { margin: 0 0 .75rem; }
.ibg-qz__tip { margin: 0 0 .75rem; padding: .75rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--ibg-line); }
.ibg-qz__tiph { margin: 0 0 .25rem; font: 700 .9375rem var(--ibg-font-head); color: var(--ibg-brand); }
.ibg-qz__tiptext { margin: 0; }
.ibg-qz__more { margin: 0 0 1rem; font-size: .9375rem; }

/* Uitslag */
.ibg-qz__score { margin: 0 0 .25rem; color: var(--ibg-brand); }
.ibg-qz__num { font: 700 3.5rem/1 var(--ibg-font-head); color: var(--ibg-accent); }
.ibg-qz__of { font: 700 1.25rem var(--ibg-font-head); }
.ibg-qz__links { padding-left: 1.2rem; }
.ibg-qz__links li { margin-bottom: .35rem; font-weight: 700; }
.ibg-qz__review { margin: 1rem 0; }
.ibg-qz__review ul { padding-left: calc(20px + 1.2rem); }
.ibg-qz__review li { margin-bottom: .5rem; }
.ibg-qz__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }

/* ---------- Nagebouwde schermen ---------- */
.ibg-mk { max-width: 360px; margin: 0 auto; border-radius: 18px; overflow: hidden; font: 400 .9375rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 6px 20px rgba(28,24,63,.12); }
.ibg-mk--whatsapp, .ibg-mk--sms { background: #EFE7DD; border: 6px solid #1C183F; }
.ibg-mk--sms { background: #F2F2F7; }
.ibg-mk__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075E54; color: #fff; }
.ibg-mk--sms .ibg-mk__bar { background: #fff; color: #111; border-bottom: 1px solid #ddd; }
.ibg-mk__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); font-weight: 700; }
.ibg-mk--sms .ibg-mk__avatar { background: #C7C7CC; color: #fff; }
.ibg-mk__from { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibg-mk__app { font-size: .75rem; opacity: .8; }
.ibg-mk__chat { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.ibg-mk__bubble { align-self: flex-start; max-width: 85%; margin: 0; padding: 7px 10px; border-radius: 4px 12px 12px 12px; background: #fff; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.ibg-mk--sms .ibg-mk__bubble { background: #E5E5EA; border-radius: 16px 16px 16px 4px; }
.ibg-mk__bubble.is-link { color: #0B57D0; text-decoration: underline; }
.ibg-mk__bubble.is-voice::before { content: "▶ "; color: #075E54; }
.ibg-mk--mail, .ibg-mk--web, .ibg-mk--letter, .ibg-mk--popup { background: #fff; border: 1px solid var(--ibg-line); padding: 14px; }
.ibg-mk__mailhead { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.ibg-mk__addr { font-size: .8125rem; color: #666; overflow-wrap: anywhere; }
.ibg-mk__subject { margin: 8px 0 4px; font-weight: 700; }
.ibg-mk__body { margin: 6px 0; color: #333; }
.ibg-mk__btn { display: inline-block; margin-top: 6px; padding: 8px 14px; border-radius: 6px; background: #0B57D0; color: #fff; font-weight: 700; }
.ibg-mk--call { background: linear-gradient(180deg, #2B2F3A, #14161B); color: #fff; border: 6px solid #1C183F; padding: 22px 16px 18px; text-align: center; }
.ibg-mk__note { margin: 0; font-size: .8125rem; opacity: .75; }
.ibg-mk__name { margin: 10px 0 2px; font-size: 1.5rem; font-weight: 600; }
.ibg-mk__number { margin: 0 0 18px; opacity: .85; }
.ibg-mk__keys { display: flex; justify-content: space-around; }
.ibg-mk__deny, .ibg-mk__accept { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; }
.ibg-mk__deny { background: #D93025; }
.ibg-mk__accept { background: #1E8E3E; }
.ibg-mk--letter { background: #FFFDF7; border-color: #E8E1CF; box-shadow: 0 6px 20px rgba(28,24,63,.10), inset 0 4px 0 #26215C; }
.ibg-mk__lfrom { margin: 0 0 8px; font-size: .8125rem; color: #666; }
.ibg-mk__ltitle { margin: 0 0 4px; font-weight: 700; font-size: 1.0625rem; }
.ibg-mk__qr { display: block; width: 72px; height: 72px; margin-top: 8px; background:
	conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 12px 12px; border: 4px solid #111; }
.ibg-mk--popup { border: 2px solid #C5221F; box-shadow: 0 6px 20px rgba(197,34,31,.18); }
.ibg-mk__ptitle { margin: 0 0 4px; font-weight: 700; }
.ibg-mk--popup .ibg-mk__ptitle { color: #C5221F; }
.ibg-mk--popup .ibg-mk__btn { background: #C5221F; }
.ibg-mk__url { margin: -14px -14px 10px; padding: 8px 12px; background: #F1F3F4; border-bottom: 1px solid #ddd; font-size: .8125rem; color: #444; overflow-wrap: anywhere; }
.ibg-mk__url::before { content: "🔒 "; }

@media (prefers-reduced-motion: reduce) { .ibg-qz__feedback { transition: none; transform: none; } }
@media print { .ibg-qz { display: none !important; } }

/* =========================================================
   Printbare checklist (scenariopagina's)
   ========================================================= */
.ibg-print-head { display: none; }
.ibg-print-wrap { margin: -.25rem 0 0; }
.ibg-print, .ibg-read {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 16px;
	border: 2px solid var(--ibg-line); border-radius: 999px;
	background: var(--ibg-white); color: var(--ibg-brand-2);
	font: 700 .9375rem/1 var(--ibg-font-head); cursor: pointer;
}
.ibg-print[hidden], .ibg-read[hidden] { display: none; }
.ibg-read[aria-pressed="true"] { background: var(--ibg-brand); border-color: var(--ibg-brand); color: #fff; }
.ibg-reading { background: var(--ibg-tint); box-shadow: 0 0 0 6px var(--ibg-tint); border-radius: 6px; transition: background-color .2s ease; }
@media (hover: hover) { .ibg-print:hover, .ibg-read:hover { border-color: var(--ibg-accent); } }

@media print {
	@page { margin: 14mm 14mm 16mm; }
	html, body { background: #fff !important; color: #000; font-size: 11.5pt; }
	* { box-shadow: none !important; }

	/* Weg wat op papier niets doet */
	.ibg-alertbar, .ibg-header, .ibg-footer, .ibg-back, .ibg-print-wrap, .ibg-tools, .ibg-share, .ibg-fb,
	.ibg-band, .ibg-check, .ibg-banks__tip, .ibg-progress, .ibg-how,
	header.wp-block-template-part, footer.wp-block-template-part { display: none !important; }
	main { padding-top: 0 !important; }

	.ibg-print-head {
		display: flex; align-items: center; gap: 10px;
		padding-bottom: 8px; margin-bottom: 12px;
		border-bottom: 1.5pt solid #26215C;
		font-size: 10pt; color: #333;
		-webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
	h1 { font-size: 20pt; margin: 0 0 4pt; }
	h2 { font-size: 13pt; margin-top: 14pt; break-after: avoid; }
	.ibg-meta { color: #333; }

	/* Blokken: lijntjes in plaats van gekleurde vlakken (inktzuinig) */
	.ibg-now { border: 1.5pt solid #000 !important; padding: 10pt !important; }
	.ibg-now > h2 { color: #000 !important; }
	.ibg-note { background: none !important; border: 1pt solid #000 !important; border-left-width: 4pt !important; }
	.ibg-note strong { color: #000 !important; }

	/* Stappen: leeg vakje om af te vinken met een pen */
	.ibg-checklist > li { padding-left: 34pt; break-inside: avoid; border-top-color: #bbb; }
	.ibg-checklist:not(.ibg-checklist--info) > li::before,
	.ibg-checklist > li.is-done::before {
		content: "" !important;
		width: 16pt; height: 16pt; border-radius: 3pt; top: 14px;
		background: #fff !important; border: 1.5pt solid #000;
	}
	.ibg-checklist > li.is-done > strong:first-child { text-decoration: none; color: #000; }

	/* Banknummers: alle banken als compacte lijst */
	.ibg-bankpick__grid, .ibg-bankpick__q, .ibg-bankpick__remember, .ibg-bankpanel__row { display: none !important; }
	.ibg-bankpick__panels { grid-template-columns: 1fr 1fr !important; gap: 6pt 16pt !important; }
	.ibg-bankpanel, .ibg-bankpick.is-enhanced .ibg-bankpanel {
		display: grid !important; grid-template-columns: 24pt 1fr; column-gap: 8pt; align-items: center;
		margin: 0 !important; padding: 2pt 0 !important; border: 0 !important; background: none !important; color: #000 !important;
		break-inside: avoid; animation: none !important;
	}
	.ibg-bankpanel__top { display: contents; }
	.ibg-bank__logo { width: 22pt; height: 22pt; grid-row: span 2; box-shadow: 0 0 0 .5pt #999 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ibg-bank__logo img { width: 16pt; height: 16pt; }
	.ibg-bankpanel__name, .ibg-bankpanel.is-active .ibg-bankpanel__name { color: #000 !important; font-size: 10.5pt !important; }
	.ibg-bankpanel__sub { display: none; }
	.ibg-bigcall, .ibg-bankpanel.is-active .ibg-bigcall {
		display: block; min-height: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important;
		color: #000 !important; font-size: 12pt !important; text-align: left; transform: none !important;
	}
	.ibg-bigcall svg { display: none; }
	.ibg-spiek { border: 1pt dashed #000 !important; break-inside: avoid; }
	.ibg-spiek__say { background: none !important; border-left: 2pt solid #000; border-radius: 0; }
	.ibg-spiek__title svg { color: #000; }

	/* Uitklapblokken open en zonder plus/min */
	.ibg-term { border: 0 !important; break-inside: avoid; }
	.ibg-term > summary { padding: 8pt 0 4pt; min-height: 0; }
	.ibg-term > summary::after { content: none !important; }
	details::details-content { content-visibility: visible; display: block; }
	.ibg-term > :not(summary) { padding-inline: 0; }

	/* Herstelknoppen (Gmail, Facebook, ...) als tekstregel met webadres */
	.wp-block-buttons { display: block !important; margin-top: 6pt; }
	.wp-block-button { display: block; margin: 0 0 3pt; }
	.wp-block-button__link, .is-style-outline .wp-block-button__link {
		display: inline !important; min-height: 0; padding: 0 !important;
		background: none !important; border: 0 !important; color: #000 !important;
		font-size: 11pt; text-decoration: underline;
	}
	.wp-block-button__link::before { content: "→ "; }

	/* Webadres voluit achter externe links */
	main a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; color: #333; word-break: break-all; }
	main a { color: #000 !important; }
}

/* =========================================================
   Minder beweging als gebruiker dat wil
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.ibg-card:hover, .ibg-card:has(.ibg-card__link:active), .ibg-call:active, a.ibg-bank:active { transform: none; }
}