/*
 * Breda Netwerk huisstijl — tokens en componenten.
 * Documentatie: public/docs/ontwerp/huisstijl.md. Geladen door breda-design.php op de
 * site én op wp-login.php. Alle plugin-overrides zijn gescoped op body.bn-ds en een
 * paginaklasse; !important alleen waar de plugin zelf !important gebruikt (gemarkeerd).
 */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	/* Merk (bestaand: header, onboarding, #59) */
	--bn-color-brand: #d95071;          /* merkroze: accenten, grote tekst, iconen */
	--bn-color-primary: #c74666;        /* actiekleur: knoppen en links op wit (AA 4,7:1) */
	--bn-color-primary-hover: #a93a56;  /* voorstel: hover/active (AA 6,1:1) */
	--bn-color-primary-soft: #fdecef;   /* lichte achtergrond bij merkroze */
	--bn-color-ink: #292e39;            /* koppen */
	--bn-color-text: #363b47;           /* broodtekst, header-achtergrond */
	--bn-color-muted: #656b78;          /* secundaire tekst (AA 5,4:1) */
	--bn-color-bg: #ffffff;
	--bn-color-surface: #f4f5f8;        /* vlakken, tabkop, lege staat */
	--bn-color-border: #e5e7ed;
	--bn-color-border-strong: #d6dae3;  /* veldranden */
	--bn-color-success: #1d6b3a;
	--bn-color-success-bg: #e8f6ee;
	--bn-color-warning: #7a4d00;        /* voorstel */
	--bn-color-warning-bg: #fff4e0;     /* voorstel */
	--bn-color-error: #8a1c35;
	--bn-color-error-bg: #fdecef;
	--bn-color-focus: #c74666;

	/* Typografie (Roboto, zoals Elementor-kit en header) */
	--bn-font: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--bn-font-size-h1: clamp(1.6875rem, 1.4rem + 1.2vw, 2rem);   /* 27 → 32 px */
	--bn-font-size-h2: clamp(1.375rem, 1.25rem + .6vw, 1.5rem);  /* 22 → 24 px */
	--bn-font-size-h3: 1.25rem;                                  /* 20 px */
	--bn-font-size-h4: 1.0625rem;                                /* 17 px */
	--bn-font-size-body: 1rem;                                   /* 16 px */
	--bn-font-size-small: .875rem;                               /* 14 px */
	--bn-line-height: 1.6;
	--bn-line-height-heading: 1.25;

	/* Ruimte, vorm, diepte */
	--bn-space-1: 4px;
	--bn-space-2: 8px;
	--bn-space-3: 12px;
	--bn-space-4: 16px;
	--bn-space-5: 24px;
	--bn-space-6: 32px;
	--bn-space-7: 48px;
	--bn-space-8: 64px;
	--bn-radius-sm: 8px;    /* velden, knoppen */
	--bn-radius-md: 14px;   /* kaarten */
	--bn-radius-pill: 999px; /* badges, header-knoppen */
	--bn-shadow-card: 0 14px 38px rgba(36, 41, 55, .08);
	--bn-shadow-pop: 0 12px 32px rgba(30, 35, 50, .18);
	--bn-content-max: 1200px;
	--bn-form-max: 440px;
	--bn-touch: 44px;
	--bn-control-height: 48px;
	/* Breakpoints (alleen ter documentatie; media queries kunnen geen variabelen lezen) */
	--bn-bp-sm: 700px;
	--bn-bp-md: 1024px;
}

/* Youzify en BuddyPress gebruiken dezelfde actiekleur (eigen variabele van Youzify). */
body.bn-ds {
	--yzfy-scheme-color: var(--bn-color-primary);
	--yzfy-scheme-text-color: #fff;
}

/* 2. Componenten -------------------------------------------------------- */
.bn-ds .bn-btn,
.bn-ds .bn-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bn-space-2);
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-5);
	border: 1px solid transparent;
	border-radius: var(--bn-radius-sm);
	font: 700 15px/1.2 var(--bn-font);
	text-decoration: none;
	cursor: pointer;
}
.bn-ds .bn-btn-primary { background: var(--bn-color-primary); color: #fff; }
.bn-ds .bn-btn-primary:hover { background: var(--bn-color-primary-hover); color: #fff; }
.bn-ds .bn-btn-secondary { background: #fff; color: var(--bn-color-primary); border-color: var(--bn-color-primary); }
.bn-ds .bn-btn-danger { background: #fff; color: var(--bn-color-error); border-color: var(--bn-color-error); }
.bn-ds .bn-link { color: var(--bn-color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.bn-ds .bn-card {
	padding: var(--bn-space-6);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
}

.bn-ds .bn-badge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 var(--bn-space-3);
	border-radius: var(--bn-radius-pill);
	background: var(--bn-color-surface);
	color: var(--bn-color-text);
	font: 600 13px/1 var(--bn-font);
}
.bn-ds .bn-badge-success { background: var(--bn-color-success-bg); color: var(--bn-color-success); }

.bn-ds .bn-eyebrow {
	margin: 0 0 var(--bn-space-1);
	color: var(--bn-color-primary);
	font: 700 12px/1.4 var(--bn-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bn-ds .bn-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-space-4) var(--bn-space-5);
	margin: 0 0 var(--bn-space-6);
	padding: var(--bn-space-5) 0;
	border-bottom: 1px solid var(--bn-color-border);
}
.bn-ds .bn-page-header h1 {
	margin: 0 0 var(--bn-space-2);
	color: var(--bn-color-ink);
	font: 500 var(--bn-font-size-h1)/var(--bn-line-height-heading) var(--bn-font);
}
.bn-ds .bn-page-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-space-3); margin: 0; }
.bn-ds .bn-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* Focus: altijd zichtbaar, één stijl. */
.bn-ds a:focus-visible,
.bn-ds button:focus-visible,
.bn-ds input:focus-visible,
.bn-ds select:focus-visible,
.bn-ds textarea:focus-visible,
.bn-ds [role="button"]:focus-visible {
	outline: 2px solid var(--bn-color-focus);
	outline-offset: 2px;
}
/* Youzify zet `.youzify a:focus { outline: 0 !important }`; zonder !important geen focusrand. */
.bn-ds .youzify a:focus-visible,
.bn-ds #youzify a:focus-visible,
.bn-ds #youzify-members-list a:focus-visible {
	outline: 2px solid var(--bn-color-focus) !important;
	outline-offset: 2px;
}

/* Gedeeld veld (UMP-login, wp-login, account) */
.bn-ds .bn-field-label {
	display: block;
	margin: 0 0 6px;
	color: var(--bn-color-text);
	font: 600 14px/1.4 var(--bn-font);
	text-align: left;
	text-transform: none;
}

/* 3. Inloggen: /login/ en /wachtwoord-vergeten/ (UMP-sjabloon 8 binnen .bna-auth uit #59) */
.bn-ds .bna-auth { font-family: var(--bn-font); }
.bn-ds .bna-auth-heading h1 { color: var(--bn-color-ink); font-size: var(--bn-font-size-h1); font-weight: 500; }
.bn-ds .bna-auth-heading p { color: var(--bn-color-muted); font-size: 15px; }
.bn-ds .bna-auth a { color: var(--bn-color-primary); }

.bn-ds .bna-auth .ihc-login-form-wrap,
.bn-ds .bna-auth .ihc-pass-form-wrap {
	width: 100%;
	max-width: var(--bn-form-max);
	margin: var(--bn-space-5) auto 0;
	padding: var(--bn-space-6);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
	box-sizing: border-box;
	order: 2;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-line-fr {
	margin: 0 0 var(--bn-space-4);
	border: 0;
	box-sizing: border-box;
}
.bn-ds .bna-auth .ihc-login-template-8 .fa-ihc { display: none; }
/* UMP zet padding, rand en achtergrond van deze velden met !important. */
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-line-fr input[type="text"],
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-line-fr input[type="password"] {
	width: 100%;
	min-height: var(--bn-control-height);
	padding: 10px 14px !important;
	border: 1px solid var(--bn-color-border-strong) !important;
	border-radius: var(--bn-radius-sm);
	background: #fff !important;
	color: var(--bn-color-text);
	font: 400 15px/1.4 var(--bn-font);
	box-sizing: border-box;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-line-fr input:focus {
	border-color: var(--bn-color-brand) !important;
	box-shadow: 0 0 0 3px rgba(217, 80, 113, .14);
	outline: none;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-line-fr { position: relative; }
.bn-ds .bna-auth .ihc-hide-login-pw {
	position: absolute;
	top: auto;
	right: 4px;
	bottom: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bn-touch);
	height: var(--bn-touch);
	color: var(--bn-color-muted);
	cursor: pointer;
}
.bn-ds .bna-auth .impu-remember-wrapper { padding: 0; text-align: left; }
.bn-ds .bna-auth .bn-check {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-space-2);
	min-height: var(--bn-touch);
	cursor: pointer;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-input-remember {
	width: 20px;
	height: 20px;
	margin: 0;
	border-color: var(--bn-color-border-strong);
	border-radius: 4px;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-input-remember:checked::before { border-color: var(--bn-color-primary); }
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-label-remember {
	padding: 0;
	color: var(--bn-color-text);
	font: 400 15px/1.4 var(--bn-font);
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-submit { margin: var(--bn-space-4) 0 0; }
/* UMP zet kleur en achtergrond van de knop met !important. */
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-submit input,
.bn-ds .bna-auth-checkout .ihc-complete-purchase-button {
	width: 100%;
	min-height: 50px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--bn-radius-sm);
	background: var(--bn-color-primary) !important;
	color: #fff !important;
	font: 700 15px/1.2 var(--bn-font);
	text-transform: none;
	transition: background-color .2s;
}
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-submit input:hover,
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-submit input:focus-visible {
	background: var(--bn-color-primary-hover) !important;
}
.bn-ds .bna-auth .ihc-sm-wrapp-fe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bn-space-3);
	margin: var(--bn-space-5) 0 var(--bn-space-4);
}
.bn-ds .bna-auth .ihc-sm-wrapp-fe > div:first-child { flex-basis: 100%; }
.bn-ds .bna-auth .ihc-sm-wrapp-fe > div:empty { display: none; }
.bn-ds .bna-auth .ihc-top-social-login { color: var(--bn-color-muted); font: 600 12px/1.4 var(--bn-font); letter-spacing: .08em; text-transform: uppercase; }
/* Socialknoppen: secundaire knop met icoon én zichtbare naam. */
.bn-ds .bna-auth .ihc-sm-item { margin: 0; padding: 0; background: none; box-shadow: none; }
.bn-ds .bna-auth .ihc-sm-item a {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-space-2);
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	border: 1px solid var(--bn-color-border-strong);
	border-radius: var(--bn-radius-sm);
	background: #fff;
	color: var(--bn-color-text);
	font: 600 14px/1 var(--bn-font);
	text-decoration: none;
}
.bn-ds .bna-auth .ihc-sm-item a:hover { border-color: var(--bn-color-text); color: var(--bn-color-ink); }
.bn-ds .bna-auth .ihc-sm-item .fa-ihc-sm { color: inherit; font-size: 18px; }
.bn-ds .bna-auth .ihc-sm-item.ihc-goo .fa-ihc-sm { color: #c5221f; }
.bn-ds .bna-auth .ihc-sm-item.ihc-in .fa-ihc-sm { color: #0a66c2; }
.bn-ds .bna-auth .ihc-sm-item .ihc-sm-item-label { display: inline; }
.bn-ds .bna-auth .impu-form-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--bn-space-5); margin: 0; }
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-links > div { display: block; padding: 0; line-height: 1.4; }
/* UMP zet het lettertype van deze links met !important. */
.bn-ds .bna-auth .ihc-login-template-8 .impu-form-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bn-touch);
	padding: 0;
	border: 0;
	color: var(--bn-color-primary);
	font: 600 14px/1.4 var(--bn-font) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bn-ds .bna-auth .bna-auth-footer { margin-top: var(--bn-space-5); color: var(--bn-color-muted); }
.bn-ds .bna-auth .bna-auth-footer a { font-weight: 600; }

/* 4. Inloggen: wp-login.php (zelfde kaart, logo naar de homepage) */
body.bn-ds-login {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--bn-color-surface);
	color: var(--bn-color-text);
	font-family: var(--bn-font);
}
body.bn-ds-login #login {
	width: 100%;
	max-width: var(--bn-form-max);
	padding: var(--bn-space-7) var(--bn-space-4) var(--bn-space-6);
	box-sizing: border-box;
}
body.bn-ds-login h1.wp-login-logo a {
	width: 160px;
	height: 120px;
	margin: 0 auto var(--bn-space-5);
	background-image: var(--bn-login-logo, none);
	background-size: contain;
	background-position: center;
}
body.bn-ds-login .bn-auth-heading { margin: 0 0 var(--bn-space-5); text-align: center; }
body.bn-ds-login .bn-auth-heading h2 {
	margin: 0 0 var(--bn-space-2);
	color: var(--bn-color-ink);
	font: 500 var(--bn-font-size-h1)/var(--bn-line-height-heading) var(--bn-font);
}
body.bn-ds-login .bn-auth-heading p { margin: 0; color: var(--bn-color-muted); font-size: 15px; line-height: 1.5; }
body.bn-ds-login #loginform,
body.bn-ds-login #lostpasswordform,
body.bn-ds-login #resetpassform {
	margin: 0;
	padding: var(--bn-space-6);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
}
body.bn-ds-login form label { color: var(--bn-color-text); font: 600 14px/1.4 var(--bn-font); }
body.bn-ds-login form .input,
body.bn-ds-login form input[type="text"],
body.bn-ds-login form input[type="password"],
body.bn-ds-login form input[type="email"] {
	min-height: var(--bn-control-height);
	margin: 6px 0 var(--bn-space-4);
	padding: 10px 14px;
	border: 1px solid var(--bn-color-border-strong);
	border-radius: var(--bn-radius-sm);
	background: #fff;
	color: var(--bn-color-text);
	font: 400 15px/1.4 var(--bn-font);
	box-shadow: none;
}
body.bn-ds-login form .input:focus,
body.bn-ds-login form input:focus {
	border-color: var(--bn-color-brand);
	box-shadow: 0 0 0 3px rgba(217, 80, 113, .14);
	outline: none;
}
body.bn-ds-login .wp-pwd .button.wp-hide-pw { width: var(--bn-touch); height: var(--bn-touch); top: 8px; color: var(--bn-color-muted); }
body.bn-ds-login .forgetmenot { display: flex; align-items: center; gap: var(--bn-space-2); float: none; min-height: var(--bn-touch); margin: 0 0 var(--bn-space-4); }
body.bn-ds-login .forgetmenot input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--bn-color-primary); }
body.bn-ds-login .forgetmenot label { font-weight: 400; font-size: 15px; }
body.bn-ds-login p.submit { margin: 0; }
body.bn-ds-login .button-primary,
body.bn-ds-login .button-primary.button-large {
	float: none;
	width: 100%;
	min-height: 50px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--bn-radius-sm);
	background: var(--bn-color-primary);
	color: #fff;
	font: 700 15px/1.2 var(--bn-font);
	text-shadow: none;
	box-shadow: none;
}
body.bn-ds-login .button-primary:hover,
body.bn-ds-login .button-primary:focus { background: var(--bn-color-primary-hover); color: #fff; box-shadow: none; }
body.bn-ds-login .button-primary:focus-visible { outline: 2px solid var(--bn-color-focus); outline-offset: 2px; }
body.bn-ds-login #nav,
body.bn-ds-login #backtoblog {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--bn-space-4);
	margin: var(--bn-space-4) 0 0;
	padding: 0;
	color: transparent; /* verberg het losse scheidingsteken "|" */
	font-size: 14px;
	text-align: center;
}
body.bn-ds-login #nav a,
body.bn-ds-login #backtoblog a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bn-touch);
	color: var(--bn-color-primary-hover); /* op het grijze vlak: #C74666 haalt daar geen 4,5 : 1 */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.bn-ds-login #backtoblog a { color: var(--bn-color-muted); font-weight: 400; }
body.bn-ds-login .privacy-policy-page-link { margin: var(--bn-space-2) 0 0; text-align: center; }
body.bn-ds-login .privacy-policy-page-link a { color: var(--bn-color-muted); font-size: 13px; }
body.bn-ds-login .message,
body.bn-ds-login .notice,
body.bn-ds-login #login_error {
	margin: 0 0 var(--bn-space-4);
	padding: var(--bn-space-3) var(--bn-space-4);
	border: 0;
	border-radius: var(--bn-radius-sm);
	box-shadow: none;
	font-size: 15px;
}
body.bn-ds-login #login_error,
body.bn-ds-login .notice-error { background: var(--bn-color-error-bg); color: var(--bn-color-error); }
body.bn-ds-login .message,
body.bn-ds-login .notice-info,
body.bn-ds-login .notice-success { background: var(--bn-color-success-bg); color: var(--bn-color-success); }
body.bn-ds-login #login_error a { color: inherit; }
body.bn-ds-login .language-switcher { display: none; }

/* 5. Account (/account-page/, Login Registration Kit) */
.bn-ds-account article > .entry-title { display: none; }
.bn-ds .bn-account {
	max-width: 960px;
	margin: 0 auto var(--bn-space-8);
	padding: 0 var(--bn-space-4);
	font-family: var(--bn-font);
	box-sizing: border-box;
}
.bn-ds .bn-account .bn-membership-status,
.bn-ds .bn-account > p > .bn-membership-status { margin: 0 0 var(--bn-space-5); color: var(--bn-color-muted); }
.bn-ds .bn-account .bn-membership-status a { color: var(--bn-color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bn-ds .bn-account .tk-lp-autor-avatar { background: none; }
.bn-ds .bn-account .tk-lp-tabs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--bn-space-6); }
.bn-ds .bn-account .tk-lp-tabs-items { display: flex; flex-direction: column; gap: var(--bn-space-1); margin: 0; padding: 0; }
.bn-ds .bn-account .tk-lp-tabs-item { margin: 0; padding: 0; background: none; }
.bn-ds .bn-account .tk-lp-tabs-item a {
	display: flex;
	align-items: center;
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	border-radius: var(--bn-radius-sm);
	background: transparent;
	color: var(--bn-color-text);
	font: 500 15px/1.3 var(--bn-font);
	text-decoration: none;
}
.bn-ds .bn-account .tk-lp-tabs-item a:hover { background: var(--bn-color-surface); color: var(--bn-color-primary); }
.bn-ds .bn-account .tk-lp-tabs-item.active a { background: var(--bn-color-primary-soft); color: var(--bn-color-primary-hover); font-weight: 700; }
.bn-ds .bn-account .tk-lp-tabs-content {
	padding: var(--bn-space-6);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
}
.bn-ds .bn-account .tk-lp-form-title { margin: 0 0 var(--bn-space-1); color: var(--bn-color-ink); font: 500 var(--bn-font-size-h2)/var(--bn-line-height-heading) var(--bn-font); }
.bn-ds .bn-account .tk-lp-form-title-small { margin: 0 0 var(--bn-space-5); color: var(--bn-color-muted); font: 400 15px/1.5 var(--bn-font); }
.bn-ds .bn-account .tk-lp-form-item { margin: 0 0 var(--bn-space-4); }
.bn-ds .bn-account .tk-lp-form-item h4 {
	margin: var(--bn-space-5) 0 0;
	padding-top: var(--bn-space-5);
	border-top: 1px solid var(--bn-color-border);
	color: var(--bn-color-ink);
	font: 500 var(--bn-font-size-h3)/var(--bn-line-height-heading) var(--bn-font);
}
.bn-ds .bn-account .tk-lp-label { display: block; margin: 0 0 6px; color: var(--bn-color-text); font: 600 14px/1.4 var(--bn-font); }
.bn-ds .bn-account .tk-lp-input {
	width: 100%;
	min-height: var(--bn-control-height);
	padding: 10px 14px;
	border: 1px solid var(--bn-color-border-strong);
	border-radius: var(--bn-radius-sm);
	background: #fff;
	color: var(--bn-color-text);
	font: 400 15px/1.4 var(--bn-font);
	box-sizing: border-box;
}
.bn-ds .bn-account .tk-lp-input:focus { border-color: var(--bn-color-brand); box-shadow: 0 0 0 3px rgba(217, 80, 113, .14); outline: none; }
.bn-ds .bn-account .tk-lp-change-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-space-4); }
.bn-ds .bn-account .tk-lp-autor-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.bn-ds .bn-account .tk-lp-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-space-3); }
.bn-ds .bn-account .tk-lp-button,
.bn-ds .bn-account .tk-lp-button--dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-5);
	border: 1px solid var(--bn-color-primary);
	border-radius: var(--bn-radius-sm);
	background: #fff;
	color: var(--bn-color-primary);
	font: 700 15px/1.2 var(--bn-font);
	text-transform: none;
}
.bn-ds .bn-account .tk-lp-submit-bttn { min-height: 50px; border-color: transparent; background: var(--bn-color-primary); color: #fff; }
.bn-ds .bn-account .tk-lp-submit-bttn:hover { background: var(--bn-color-primary-hover); }
.bn-ds .bn-account .tk-lp-delete-avatar {
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-2);
	border: 0;
	background: none;
	color: var(--bn-color-error);
	font: 600 14px/1.2 var(--bn-font);
	text-decoration: underline;
}
@media (max-width: 700px) {
	.bn-ds .bn-account .tk-lp-tabs { grid-template-columns: 1fr; gap: var(--bn-space-4); }
	.bn-ds .bn-account .tk-lp-tabs-items { border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius-md); overflow: hidden; gap: 0; }
	.bn-ds .bn-account .tk-lp-tabs-item + .tk-lp-tabs-item { border-top: 1px solid var(--bn-color-border); }
	.bn-ds .bn-account .tk-lp-tabs-item a { border-radius: 0; }
	.bn-ds .bn-account .tk-lp-tabs-content { padding: var(--bn-space-5) var(--bn-space-4); }
}

/* 6. Leden: overzicht (Youzify-kaarten) */
.bn-ds.directory.members #youzify-members-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--bn-space-5);
	margin: 0;
	padding: 0;
}
.bn-ds.directory.members #youzify-members-list > li {
	width: auto;
	margin: 0;
	padding: var(--bn-space-5) var(--bn-space-4);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
	text-align: center;
	float: none;
	transition: border-color .2s, box-shadow .2s;
}
/* Youzify plaatst de kaarten met een masonry-script via inline position/top/left en een
   vaste hoogte op de lijst; inline stijl is alleen met !important te overschrijven. */
.bn-ds.directory.members #youzify-members-list { height: auto !important; }
.bn-ds.directory.members #youzify-members-list > li { position: relative !important; top: auto !important; left: auto !important; }
.bn-ds.directory.members #youzify-members-list::before,
.bn-ds.directory.members #youzify-members-list::after,
.bn-ds.directory.groups #groups-list::before,
.bn-ds.directory.groups #groups-list::after { display: none; } /* clearfix zou een lege rastercel worden */
.bn-ds.directory.members #youzify-members-list > li:hover { border-color: var(--bn-color-brand); }
.bn-ds.directory.members #youzify-members-list .youzify-user-data { margin: 0; padding: 0; }
.bn-ds.directory.members #youzify-members-list .youzify-item-avatar { height: auto; margin: 0 auto var(--bn-space-3); }
.bn-ds.directory.members #youzify-members-list .youzify-item-avatar img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.bn-ds.directory.members #youzify-members-list .youzify-fullname {
	color: var(--bn-color-ink);
	font: 600 16px/1.3 var(--bn-font);
	text-decoration: none;
}
.bn-ds.directory.members #youzify-members-list .youzify-fullname::after { content: ""; position: absolute; inset: 0; } /* hele kaart klikbaar */
.bn-ds.directory.members #youzify-members-list .item { min-width: 0; overflow-wrap: anywhere; }
.bn-ds.directory.members #youzify-members-list .item-meta,
.bn-ds.directory.members #youzify-members-list .item-meta .youzify-meta-item { color: var(--bn-color-muted); font: 400 14px/1.4 var(--bn-font); }
.bn-ds.directory.members .youzify-directory-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-space-4);
	margin: 0 0 var(--bn-space-5);
	padding: var(--bn-space-3) var(--bn-space-4);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-surface);
}
.bn-ds.directory.members .youzify-directory-filter .item-list-tabs { float: none; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
.bn-ds.directory.members .youzify-directory-filter .item-list-tabs ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-space-2); margin: 0; padding: 0; }
.bn-ds.directory.members .youzify-directory-filter .item-list-tabs li { float: none; margin: 0; }
.bn-ds.directory.members .youzify-directory-filter .item-list-tabs li a {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-space-2);
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	border-radius: var(--bn-radius-pill);
	color: var(--bn-color-text);
	font: 500 14px/1 var(--bn-font);
}
.bn-ds.directory.members .youzify-directory-filter .item-list-tabs li.selected a { background: #fff; color: var(--bn-color-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(36, 41, 55, .12); }
.bn-ds.directory.members .youzify-directory-filter select,
.bn-ds.directory.members .youzify-directory-filter input[type="text"] {
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-3);
	border: 1px solid var(--bn-color-border-strong);
	border-radius: var(--bn-radius-sm);
	background: #fff;
	font: 400 14px/1.2 var(--bn-font);
}
/* Youzify zet deze knop met !important in de schemakleur; alleen hoogte en vorm. */
.bn-ds.directory.members #youzify-directory-search-box form input[type="submit"] {
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	border-radius: var(--bn-radius-sm);
	font: 700 14px/1 var(--bn-font);
}
.bn-ds.directory.members #youzify-members-list:empty::before,
.bn-ds.directory.members #members-dir-list > .info,
.bn-ds.directory.members #members-dir-list #message {
	display: block;
	padding: var(--bn-space-6);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-surface);
	color: var(--bn-color-muted);
	text-align: center;
}

.bn-ds.directory.members #members-dir-list .pag-count,
.bn-ds.directory.members #member-dir-count-top,
.bn-ds.directory.members #member-dir-count-bottom { color: var(--bn-color-muted); font: 400 14px/1.4 var(--bn-font); }

/* 7. Leden: profiel (Youzify) */
.bn-ds .youzify-profile-header .youzify-name h2 { font: 600 var(--bn-font-size-h1)/var(--bn-line-height-heading) var(--bn-font); }
.bn-ds .youzify-profile-navmenu .youzify-navbar-item a,
.bn-ds #youzify-profile-navmenu a { min-height: var(--bn-touch); display: inline-flex; align-items: center; }
.bn-ds .youzify-profile .youzify-user-actions .friendship-button a,
.bn-ds .youzify-profile .youzify-user-actions .youzify-send-message {
	border-radius: var(--bn-radius-sm);
}

/* 8. Bedrijven: overzicht (BuddyPress Nouveau via Stax Buddy Builder) */
.bn-ds.directory.groups #groups-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--bn-space-5);
	margin: 0;
	padding: 0;
}
.bn-ds.directory.groups #groups-list > li {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}
.bn-ds.directory.groups #groups-list > li .list-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--bn-space-2);
	padding: var(--bn-space-5) var(--bn-space-4);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-bg);
	box-shadow: var(--bn-shadow-card);
	text-align: center;
}
.bn-ds.directory.groups #groups-list .item-avatar img { width: 88px; height: 88px; border-radius: var(--bn-radius-sm); object-fit: contain; background: var(--bn-color-surface); }
.bn-ds.directory.groups #groups-list .list-title,
.bn-ds.directory.groups #groups-list .list-title a { color: var(--bn-color-ink); font: 600 18px/1.3 var(--bn-font); text-decoration: none; }
.bn-ds.directory.groups #groups-list .item-meta,
.bn-ds.directory.groups #groups-list .last-activity { color: var(--bn-color-muted); font: 400 14px/1.4 var(--bn-font); }
.bn-ds.directory.groups #groups-list .group-desc,
.bn-ds.directory.groups #groups-list .item-desc { margin: var(--bn-space-2) 0; border: 0; color: var(--bn-color-text); font: 400 14px/1.5 var(--bn-font); font-style: normal; }
.bn-ds.directory.groups #groups-list .group-button,
.bn-ds.single-item.groups .group-button {
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-5);
	border: 0;
	border-radius: var(--bn-radius-sm);
	background: var(--bn-color-primary);
	color: #fff;
	font: 700 14px/1.2 var(--bn-font);
	letter-spacing: 0;
}
.bn-ds.directory.groups #groups-list .group-button:hover,
.bn-ds.single-item.groups .group-button:hover { background: var(--bn-color-primary-hover); color: #fff; }
.bn-ds.directory.groups .groups-type-navs { margin-bottom: var(--bn-space-5); }
.bn-ds.directory.groups .groups-type-navs ul { display: flex; flex-wrap: wrap; gap: var(--bn-space-2); padding: var(--bn-space-2); border-radius: var(--bn-radius-md); background: var(--bn-color-surface); }
.bn-ds.directory.groups .groups-type-navs li a {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-space-2);
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	border-radius: var(--bn-radius-pill);
	color: var(--bn-color-text);
	font: 500 14px/1 var(--bn-font);
}
.bn-ds.directory.groups .groups-type-navs li.selected a,
.bn-ds.directory.groups .groups-type-navs li.current a { background: #fff; color: var(--bn-color-primary); font-weight: 700; }
.bn-ds.directory.groups .dir-search input[type="search"],
.bn-ds.directory.groups .dir-search input[type="text"],
.bn-ds.directory.groups #groups-order-by {
	min-height: var(--bn-touch);
	border: 1px solid var(--bn-color-border-strong);
	border-radius: var(--bn-radius-sm);
	font: 400 15px/1.2 var(--bn-font);
}
/* Stax zet deze teksten in #A0AEC0/#888DA8 (te licht) met een selector van één id en
   zeven klassen; twee id's winnen zonder !important. */
.bn-ds #buddypress #groups-dir-list .pag-count,
.bn-ds #buddypress #groups-dir-list .pag-data,
.bn-ds #buddypress .current-group-type,
.bn-ds #buddypress .current-group-type strong { color: var(--bn-color-muted); font-family: var(--bn-font); font-style: normal; }
.bn-ds.directory.groups #groups-dir-list .bp-feedback,
.bn-ds.directory.groups #groups-dir-list .info {
	padding: var(--bn-space-6);
	border: 0;
	border-radius: var(--bn-radius-md);
	background: var(--bn-color-surface);
	color: var(--bn-color-muted);
	text-align: center;
}

/* 9. Bedrijven: één bedrijf (Stax-template 2526) */
.bn-ds.single-item.groups .bpb-group-name {
	margin: var(--bn-space-3) 0 var(--bn-space-2);
	color: #fff;
	font: 600 var(--bn-font-size-h1)/var(--bn-line-height-heading) var(--bn-font);
	text-align: center;
}
.bn-ds.single-item.groups #item-header-avatar img { border-radius: var(--bn-radius-md); background: #fff; object-fit: contain; }
.bn-ds.single-item.groups .group-status,
.bn-ds.single-item.groups #item-header .activity { color: rgba(255, 255, 255, .85); font-family: var(--bn-font); }
.bn-ds.single-item.groups .desc-wrap { border-radius: var(--bn-radius-md); }
.bn-ds.single-item.groups .group-description,
.bn-ds.single-item.groups .group-description p { color: var(--bn-color-text); font: 400 16px/1.6 var(--bn-font); }
.bn-ds.single-item.groups .bp-navs ul li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bn-touch);
	padding: 0 var(--bn-space-4);
	font: 500 15px/1 var(--bn-font);
	letter-spacing: 0;
}
.bn-ds.single-item.groups .bp-navs ul li.current a,
.bn-ds.single-item.groups .bp-navs ul li.selected a { background: var(--bn-color-ink); color: #fff; border-radius: var(--bn-radius-sm); }
.bn-ds.single-item.groups #item-body #message.info,
.bn-ds.single-item.groups #item-body .bp-feedback {
	padding: var(--bn-space-4) var(--bn-space-5);
	border: 0;
	border-left: 4px solid var(--bn-color-brand);
	border-radius: var(--bn-radius-sm);
	background: var(--bn-color-surface);
	color: var(--bn-color-text);
	font: 400 15px/1.5 var(--bn-font);
	box-shadow: none;
}
/* Medewerkers van een bedrijf als ledenkaarten */
.bn-ds.single-item.groups #members-list,
.bn-ds.single-item.groups #member-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--bn-space-4);
	padding: 0;
}
.bn-ds.single-item.groups #members-list > li,
.bn-ds.single-item.groups #member-list > li {
	width: auto;
	margin: 0;
	padding: var(--bn-space-4);
	border: 1px solid var(--bn-color-border);
	border-radius: var(--bn-radius-md);
	background: #fff;
	text-align: center;
	float: none;
}

/* 10. Kleine schermen: geen horizontale scroll en ruime klikdoelen */
@media (max-width: 700px) {
	.bn-ds .bn-page-header { padding-top: var(--bn-space-4); }
	.bn-ds.directory.members #youzify-members-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bn-space-3); }
	.bn-ds.directory.members .youzify-mobile-nav { display: flex; justify-content: center; gap: var(--bn-space-5); height: auto; margin: 0 0 var(--bn-space-4); }
	.bn-ds.directory.members .youzify-mobile-nav-item { width: auto; height: auto; min-height: var(--bn-touch); }
	.bn-ds.directory.members #youzify-members-list > li { padding: var(--bn-space-4) var(--bn-space-2); }
	.bn-ds.directory.members #youzify-members-list .youzify-item-avatar img { width: 64px; height: 64px; }
	.bn-ds.directory.groups #groups-list { grid-template-columns: 1fr; gap: var(--bn-space-4); }
	.bn-ds.directory.members .youzify-directory-filter { padding: var(--bn-space-3); }
	body.bn-ds-login #login { padding-top: var(--bn-space-5); }
	body.bn-ds-login #loginform,
	body.bn-ds-login #lostpasswordform,
	body.bn-ds-login #resetpassform,
	.bn-ds .bna-auth .ihc-login-form-wrap,
	.bn-ds .bna-auth .ihc-pass-form-wrap { padding: var(--bn-space-5) var(--bn-space-4); }
}

/* ---------------------------------------------------------------------------------------------------------------
 * Publieke V4-pagina's (homepage, adverteren): inhoud van de shortcodes uit breda-design/publiek.php.
 * Kaarten, rasters, koppen en knoppen eromheen zijn Elementor V4 (globale klassen bn-…).
 * ------------------------------------------------------------------------------------------------------------- */
/* Ankerdoelen (#aanvraag, #mogelijkheden) niet onder de sticky header. */
.elementor [id] { scroll-margin-top: 140px; }
@media (max-width: 1024px) { .elementor [id] { scroll-margin-top: 110px; } }

/* Grote fotobanner (V4-klasse bn-banner): de header (template 2931, sticky top 0) neemt in de flow 157 px in met een
   transparante rand rond de zwevende menubalk, waardoor de witte body boven, naast en onder de balk zichtbaar was. Op
   pagina's met een banner staat de header vast op dezelfde plek (fixed i.p.v. sticky, zelfde gedrag bij scrollen) en
   telt hij niet mee in de flow; --bn-kop geeft de headerhoogte door, die bn-banner zelf reserveert. Geen negatieve marge. */
body:has(.bn-banner) { --bn-kop: 157px; }
body:has(.bn-banner) .elementor-location-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; }
@media (max-width: 1024px) { body:has(.bn-banner) { --bn-kop: 140px; } }
@media (max-width: 767px) { body:has(.bn-banner) { --bn-kop: 118px; } }

.bn-home-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.bn-home-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background-color .15s, color .15s, border-color .15s; }
.bn-home-knop.is-primair { background: var(--bn-primair, #c74666); color: #fff !important; }
.bn-home-knop.is-primair:hover { background: var(--bn-primair-hover, #a93a56); }
.bn-home-knop.is-licht { border-color: rgba(255, 255, 255, .7); color: #fff !important; }
.bn-home-knop.is-licht:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.bn-home-knop.is-wit { background: #fff; color: var(--bn-primair, #c74666) !important; }
.bn-home-knop.is-wit:hover { background: var(--bn-roze-zacht, #fdecef); }
.bn-home-knop.is-rand-wit { border-color: #fff; color: #fff !important; }
.bn-home-knop.is-rand-wit:hover { background: rgba(255, 255, 255, .14); }
.bn-home-knop:focus-visible, .bn-home-tekstlink:focus-visible, .bn-nieuws-titel a:focus-visible, .bn-nieuws-lees:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 480px) { .bn-home-knop { flex: 1 1 100%; } }

.bn-home-tekstlink { color: var(--bn-primair, #c74666) !important; font-weight: 600; text-decoration: none; }
.bn-home-tekstlink::after { content: " →"; }
.bn-home-tekstlink:hover { text-decoration: underline; text-underline-offset: 3px; }

.bn-nieuws-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bn-nieuws-kaart { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bn-rand, #e5e7ed); border-radius: 16px; background: #fff; }
.bn-nieuws-beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bn-vlak, #f4f5f8); line-height: 0; }
.bn-nieuws-beeld img.bn-nieuws-foto { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform .25s ease; } /* thema zet height:auto */
.bn-nieuws-foto.is-leeg { display: block; background: linear-gradient(120deg, var(--bn-inkt, #292e39), var(--bn-primair, #c74666)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .bn-nieuws-kaart:hover .bn-nieuws-foto { transform: scale(1.03); } }
.bn-nieuws-inhoud { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.bn-nieuws-datum { color: var(--bn-gedempt, #656b78); font-size: 13px; }
.bn-nieuws-titel { margin: 0 !important; font-size: 18px; font-weight: 600; line-height: 1.35; }
.bn-nieuws-titel a { color: var(--bn-inkt, #292e39); text-decoration: none; }
.bn-nieuws-titel a:hover { color: var(--bn-primair, #c74666); }
.bn-nieuws-intro { margin: 0; color: var(--bn-tekst, #363b47); font-size: 15px; line-height: 1.6; }
.bn-nieuws-lees { color: var(--bn-primair, #c74666); font-size: 15px; font-weight: 600; text-decoration: none; }
.bn-nieuws-lees:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .bn-nieuws-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bn-nieuws-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

.bn-beeldbron { margin: 18px 0 0; color: var(--bn-gedempt, #656b78); font-size: 12.5px; line-height: 1.5; }
.bn-beeldbron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Oorspronkelijke homepage (2000), beperkt gemoderniseerd: datumlabels in de evenementensectie en de beheerdersmelding
 * bij de (nog niet bevestigde) reviews. */
.bn-home-data { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 4px; padding: 0; list-style: none; }
.bn-home-data li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid var(--bn-rand, #e5e7ed); border-radius: 999px; background: #fff; color: var(--bn-inkt, #292e39); font-size: 15px; font-weight: 600; }
.bn-home-data li span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--bn-primair, #c74666); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
@media (max-width: 767px) { .bn-home-data { gap: 8px; } .bn-home-data li { font-size: 14px; } }
.bn-home-melding { display: inline-block; margin: 0 auto 8px; padding: 8px 14px; border-radius: 8px; background: rgba(199, 70, 102, .92); }
.bn-home-op-donker a { color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bn-home-op-donker a:hover { color: var(--bn-roze-zacht, #fdecef) !important; }

/* Centrale zoekfunctie (P2.3): leden en bedrijven boven de paginaresultaten. */
.bn-zoek-extra { display: grid; gap: 24px; margin: 0 0 24px; }
.bn-zoek-titel { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.bn-zoek-aantal { font-weight: 400; color: var(--bn-tekst-zacht, #656b78); font-size: 16px; }
.bn-zoek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bn-zoek-item a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bn-rand, #e3e5ea); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.bn-zoek-item a:hover { border-color: var(--bn-actie, #C74666); box-shadow: 0 4px 14px rgba(21, 25, 35, .08); }
.bn-zoek-item a:focus-visible { outline: 2px solid var(--bn-actie, #C74666); outline-offset: 2px; }
.bn-zoek-beeld { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #f4f5f8; }
.bn-zoek-beeld img { width: 48px; height: 48px; object-fit: cover; }
.bn-zoek-naam { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bn-zoek-soort { flex: 0 0 auto; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f4f5f8; color: #363b47; }
.bn-zoek-leeg { margin: 0; color: var(--bn-tekst-zacht, #656b78); }

/* P4.2: één rustig hover-effect voor overzichtskaarten (zelfde gedrag voor V4-kaarten, ledengids, bedrijvengids en
   zoekresultaten). Alleen op apparaten met hover; zonder beweging bij prefers-reduced-motion. Toetsenbord: zichtbare
   focus binnen de kaart. Mobiel blijft alles zonder hover bruikbaar (de kaarten zelf veranderen niet van inhoud). */
.bn-samen-kaart, .bn-kaart, .bn-stap, .bn-team-kaart, .bn-actie-kaart, .bn-lid-kaart, .bn-company-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) {
	.bn-samen-kaart:hover, .bn-kaart:hover, .bn-stap:hover, .bn-team-kaart:hover, .bn-actie-kaart:hover, .bn-lid-kaart:hover, .bn-company-card:hover {
		box-shadow: 0 10px 28px rgba(21, 25, 35, .10); border-color: var(--bn-rand-sterk, #d6dae3);
	}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.bn-samen-kaart:hover, .bn-kaart:hover, .bn-stap:hover, .bn-team-kaart:hover, .bn-actie-kaart:hover, .bn-lid-kaart:hover, .bn-company-card:hover { transform: translateY(-2px); }
}
.bn-samen-kaart:focus-within, .bn-kaart:focus-within, .bn-team-kaart:focus-within, .bn-actie-kaart:focus-within, .bn-lid-kaart:focus-within, .bn-company-card:focus-within { box-shadow: 0 0 0 2px var(--bn-primair, #c74666); }

/* P4.4: kaarten naast elkaar in een tweekolomsraster even hoog (bijv. "Voor wie is dit team?" naast "Teamleden en
   functies"); rasters met foto's houden hun eigen uitlijning. Op één kolom (tablet/mobiel) geen effect. */
.elementor .bn-pub-raster-2 > .bn-kaart { align-self: stretch; }

/* Prioriteitenlijst 2, P4.7: foto onder "Wat gebeurt er daarna?" op /teams/ vult op desktop de kolom naast het
   belangstellingsformulier (scripts/elementor/teams-interesse-foto-20261102.php); op tablet/mobiel de hoogte van bn-pub-foto. */
@media (min-width: 1025px) {
	.elementor [data-id="ec929cb"]:has(> img[data-id="b7e4a20"]) { align-self: stretch; }
	.elementor img.bn-pub-foto[data-id="b7e4a20"] { flex: 1 1 0; height: auto; min-height: 320px; margin-top: 16px; }
}