/*
Theme Name: MijnBroker
Theme URI: https://www.mijnbroker.nl
Author: Alex Mostert
Description: Maatwerkthema voor mijnbroker.nl — vergelijk brokers en leer beleggen. Rustig, betrouwbaar ontwerp in marineblauw en smaragdgroen, met opmaak voor vergelijkingstabellen, vinkjeslijsten en overzichtspagina's.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mijnbroker
*/

:root {
	--mb-navy: #10304f;
	--mb-navy-donker: #0a2038;
	--mb-groen: #0e9f6e;
	--mb-groen-donker: #0b7a55;
	--mb-link: #145da0;
	--mb-inkt: #1d2b38;
	--mb-grijs: #5b6b7a;
	--mb-lijn: #dde5ec;
	--mb-fond: #f4f7fa;
	--mb-wit: #ffffff;
	--mb-amber: #f59e0b;
	--mb-radius: 10px;
	--mb-schaduw: 0 1px 3px rgba(16, 48, 79, .08), 0 4px 16px rgba(16, 48, 79, .06);
	--mb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--mb-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mb-inkt);
	background: var(--mb-wit);
}
img { max-width: 100%; height: auto; }
a { color: var(--mb-link); }
a:hover { color: var(--mb-navy); }

h1, h2, h3, h4 {
	line-height: 1.25;
	color: var(--mb-navy);
	font-weight: 700;
	margin: 1.6em 0 .5em;
}
h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

.mb-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}
.mb-inhoud {
	max-width: 760px;
	margin: 0 auto;
	padding: 2rem 20px 4rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
	background: var(--mb-navy);
	color: #fff;
	padding: .6em 1em;
	z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- header ---------- */
.site-header {
	background: var(--mb-navy);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(10, 32, 56, .35);
}
.site-header .mb-wrap {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 64px;
}
.site-logo {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.site-logo .logo-mijn { color: #fff; }
.site-logo .logo-broker { color: #34d399; }
.site-logo .logo-tld { color: #7a92aa; font-weight: 500; font-size: .85em; }

.hoofdnav { margin-left: auto; }
.hoofdnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hoofdnav a {
	display: block;
	padding: .55em .8em;
	color: #dbe6f1;
	text-decoration: none;
	font-size: .95rem;
	font-weight: 600;
	border-radius: 6px;
}
.hoofdnav a:hover,
.hoofdnav .current-menu-item > a,
.hoofdnav .current_page_item > a {
	color: #fff;
	background: rgba(255,255,255,.12);
}
.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 6px;
	color: #fff;
	font-size: 1rem;
	padding: .4em .7em;
	cursor: pointer;
}

@media (max-width: 860px) {
	.nav-toggle { display: block; }
	.hoofdnav {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		background: var(--mb-navy-donker);
		padding: .5rem 20px 1rem;
	}
	.hoofdnav.open { display: block; }
	.hoofdnav ul { flex-direction: column; }
}

/* ---------- hero (voorpagina) ---------- */
.mb-hero {
	background: linear-gradient(135deg, var(--mb-navy-donker) 0%, var(--mb-navy) 55%, #1a4a72 100%);
	color: #e8eef5;
	padding: 3.5rem 0 4rem;
}
.mb-hero h1 {
	color: #fff;
	font-size: 2.4rem;
	max-width: 21em;
	margin: 0 0 .4em;
}
.mb-hero .mb-hero-tekst { max-width: 46em; }
.mb-hero .mb-hero-tekst a { color: #8fd6b8; }
.mb-hero .mb-hero-tekst a:hover { color: #fff; }

/* ---------- knoppen ---------- */
.mb-knop,
.mb-inhoud .mb-knop {
	display: inline-block;
	background: var(--mb-groen);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: .75em 1.5em;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
}
.mb-knop:hover { background: var(--mb-groen-donker); color: #fff; }
.mb-knop--tweede {
	background: transparent;
	border: 2px solid rgba(255,255,255,.5);
}
.mb-knop--tweede:hover { background: rgba(255,255,255,.12); }

/* ---------- kaarten / overzichten ---------- */
.mb-sectie { padding: 3rem 0; }
.mb-sectie--fond { background: var(--mb-fond); }
.mb-sectie h2 { margin-top: 0; }
.mb-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.mb-kaart {
	background: var(--mb-wit);
	border: 1px solid var(--mb-lijn);
	border-radius: var(--mb-radius);
	box-shadow: var(--mb-schaduw);
	padding: 1.25rem 1.25rem 1.1rem;
	display: flex;
	flex-direction: column;
}
.mb-kaart h3 { margin: 0 0 .35em; font-size: 1.08rem; }
.mb-kaart h3 a { text-decoration: none; color: var(--mb-navy); }
.mb-kaart h3 a:hover { color: var(--mb-groen-donker); }
.mb-kaart p { margin: 0; font-size: .93rem; color: var(--mb-grijs); }
.mb-kaart .mb-kaart-meer {
	margin-top: .8em;
	font-size: .9rem;
	font-weight: 600;
	color: var(--mb-groen-donker);
	text-decoration: none;
}

/* ---------- kruimelpad ---------- */
.mb-kruimel {
	font-size: .85rem;
	color: var(--mb-grijs);
	margin: 0 0 1.2rem;
}
.mb-kruimel a { color: var(--mb-grijs); text-decoration: none; }
.mb-kruimel a:hover { color: var(--mb-navy); text-decoration: underline; }
.mb-kruimel .sep { margin: 0 .45em; color: #a9b6c2; }

/* ---------- inhoud ---------- */
.mb-inhoud p { margin: 0 0 1.1em; }
.mb-inhoud ul, .mb-inhoud ol { margin: 0 0 1.2em; padding-left: 1.4em; }

/* vinkjeslijsten uit oude content (ul.check / ul.checkbox) */
.mb-inhoud ul.check,
.mb-inhoud ul.checkbox {
	list-style: none;
	padding-left: .2em;
}
.mb-inhoud ul.check > li,
.mb-inhoud ul.checkbox > li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: .4em;
}
.mb-inhoud ul.check > li::before,
.mb-inhoud ul.checkbox > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mb-groen);
	font-weight: 800;
}

.mb-inhoud blockquote {
	margin: 1.5em 0;
	padding: .8em 1.2em;
	border-left: 4px solid var(--mb-groen);
	background: var(--mb-fond);
	border-radius: 0 8px 8px 0;
	color: #33475b;
}

.mb-inhoud table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: .95rem;
	overflow-x: auto;
	display: block;
}
.mb-inhoud table th,
.mb-inhoud table td {
	border: 1px solid var(--mb-lijn);
	padding: .55em .8em;
	text-align: left;
	vertical-align: top;
}
.mb-inhoud table th {
	background: var(--mb-navy);
	color: #fff;
	font-weight: 600;
}
.mb-inhoud table tr:nth-child(even) td { background: var(--mb-fond); }

.mb-inhoud img {
	border-radius: 8px;
	margin: .5em 0;
}

/* attentieblok */
.mb-notitie {
	background: #fff8e6;
	border: 1px solid #f2d98c;
	border-radius: 8px;
	padding: .9em 1.1em;
	margin: 1.5em 0;
	font-size: .95rem;
}

/* ---------- reacties ---------- */
.mb-reacties { margin-top: 3rem; border-top: 1px solid var(--mb-lijn); padding-top: 1.5rem; }
.mb-reacties ol { list-style: none; margin: 0; padding: 0; }
.mb-reacties li.comment { border-bottom: 1px solid var(--mb-lijn); padding: 1rem 0; }
.mb-reacties .comment-author { font-weight: 700; color: var(--mb-navy); }
.mb-reacties .comment-metadata { font-size: .82rem; color: var(--mb-grijs); }
.mb-reacties .comment-metadata a { color: var(--mb-grijs); text-decoration: none; }
.mb-reacties .comment-content { font-size: .97rem; }

/* ---------- footer ---------- */
.site-footer {
	background: var(--mb-navy-donker);
	color: #b9c8d6;
	margin-top: 4rem;
	padding: 2.5rem 0 2rem;
	font-size: .92rem;
}
.site-footer a { color: #dbe6f1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-kolommen {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	align-items: flex-start;
}
.footernav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-disclaimer {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .85rem;
	color: #8ba0b5;
}

/* ---------- zoeken & 404 ---------- */
.searchform {
	display: flex;
	gap: .5rem;
	max-width: 30em;
	margin: 1.5em 0;
}
.searchform input[type="search"] {
	flex: 1;
	padding: .6em .9em;
	border: 1px solid var(--mb-lijn);
	border-radius: 8px;
	font-size: 1rem;
}
.zoekresultaat { border-bottom: 1px solid var(--mb-lijn); padding: 1.2rem 0; }
.zoekresultaat h2 { margin: 0 0 .3em; font-size: 1.15rem; }

/* ---------- toegankelijkheid ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--mb-amber);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	body { font-size: 1rem; }
	h1 { font-size: 1.6rem; }
	.mb-hero h1 { font-size: 1.8rem; }
	.mb-hero { padding: 2.5rem 0 3rem; }
}

/* ==========================================================
   Broker-review componenten (mb-brokers plugin + oude content)
   ========================================================== */

/* vergelijker & reviewkaarten */
.mb-vergelijker { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
.mb-brokerkaart {
	background: var(--mb-wit);
	border: 1px solid var(--mb-lijn);
	border-radius: var(--mb-radius);
	box-shadow: var(--mb-schaduw);
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}
.mb-brokerkaart__kop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.mb-brokerkaart__naam { font-size: 1.3rem; font-weight: 800; color: var(--mb-navy); }
.mb-label {
	display: inline-block;
	background: var(--mb-amber);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .25em .6em;
	border-radius: 99px;
	vertical-align: middle;
}
.mb-score { text-align: center; min-width: 90px; }
.mb-score__cijfer {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
}
.mb-score__oordeel { font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.mb-score--groen .mb-score__cijfer, .mb-score--groen .mb-score__oordeel { color: var(--mb-groen-donker); }
.mb-score--geel .mb-score__cijfer, .mb-score--geel .mb-score__oordeel { color: #b45309; }
.mb-score--rood .mb-score__cijfer, .mb-score--rood .mb-score__oordeel { color: #b91c1c; }

.mb-brokerkaart__lijsten { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .75rem; }
.mb-brokerkaart__lijsten ul { flex: 1 1 260px; list-style: none; margin: 0; padding: 0; }
.mb-plussen li, .wpsm_pros li { position: relative; padding-left: 1.6em; margin-bottom: .35em; }
.mb-plussen li::before, .wpsm_pros li::before { content: "\2713"; position: absolute; left: 0; color: var(--mb-groen); font-weight: 800; }
.mb-minnen li, .wpsm_cons li { position: relative; padding-left: 1.6em; margin-bottom: .35em; }
.mb-minnen li::before, .wpsm_cons li::before { content: "\2013"; position: absolute; left: 0; color: #b91c1c; font-weight: 800; }

/* plus/min-kolommen uit oude reviewcontent */
.wpsm-one-half { display: block; }
.wpsm_pros, .wpsm_cons {
	border: 1px solid var(--mb-lijn);
	border-radius: 8px;
	padding: 1rem 1.2rem;
	margin: .75rem 0;
}
.wpsm_pros { background: #f0faf5; border-color: #bfe8d4; }
.wpsm_cons { background: #fdf3f2; border-color: #f2cbc7; }
.title_pros, .title_cons { font-weight: 800; margin-bottom: .5rem; color: var(--mb-navy); }
.wpsm_pros ul, .wpsm_cons ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) {
	.rate_bar_wrap .mt20, .mb-proscons-rij { display: flex; gap: 1rem; }
	.rate_bar_wrap .wpsm-one-half { flex: 1; }
	.rate_bar_wrap .wpsm_pros, .rate_bar_wrap .wpsm_cons { margin: 0; }
}

/* tarieventabel in kaart */
.mb-tarieven { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: .92rem; }
.mb-tarieven th, .mb-tarieven td { border-bottom: 1px solid var(--mb-lijn); padding: .45em .3em; text-align: left; }
.mb-tarieven th { color: var(--mb-grijs); font-weight: 600; width: 55%; }

.mb-brokerkaart__acties { margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.mb-knop--stil { background: transparent; color: var(--mb-navy); border: 2px solid var(--mb-lijn); }
.mb-knop--stil:hover { background: var(--mb-fond); color: var(--mb-navy); }

.mb-risico { font-size: .82rem; color: #8a4b00; background: #fff8e6; border-radius: 6px; padding: .5em .8em; margin: .8rem 0 0; }
.mb-gecontroleerd { font-size: .78rem; color: var(--mb-grijs); margin: .5rem 0 0; }

/* FAQ-accordeon */
.mb-faq {
	border: 1px solid var(--mb-lijn);
	border-radius: 8px;
	margin: .6rem 0;
	background: var(--mb-wit);
}
.mb-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--mb-navy);
	padding: .8em 1.1em;
	list-style: none;
}
.mb-faq summary::after { content: "+"; float: right; color: var(--mb-groen); font-weight: 800; }
.mb-faq[open] summary::after { content: "\2212"; }
.mb-faq__antwoord { padding: 0 1.1em .9em; }

/* reviewlijst op hubpagina's */
.mb-reviewlijst { list-style: none; padding: 0; }
.mb-reviewlijst li { border-bottom: 1px solid var(--mb-lijn); padding: .6em 0; }

/* inhoudsopgave */
.mb-toc {
	background: var(--mb-fond);
	border: 1px solid var(--mb-lijn);
	border-radius: 8px;
	padding: 1rem 1.3rem;
	margin: 1.5rem 0;
	font-size: .95rem;
}
.mb-toc strong { color: var(--mb-navy); }
.mb-toc ol { margin: .5rem 0 0; padding-left: 1.3em; }
.mb-toc a { text-decoration: none; }
.mb-toc a:hover { text-decoration: underline; }

/* sticky CTA op reviewpagina's (mobiel) */
.mb-sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: var(--mb-navy);
	padding: .6rem 1rem;
	display: flex;
	gap: .8rem;
	align-items: center;
	justify-content: center;
	z-index: 60;
	box-shadow: 0 -2px 12px rgba(10,32,56,.3);
}
.mb-sticky-cta span { color: #dbe6f1; font-size: .9rem; font-weight: 600; }
@media (min-width: 900px) { .mb-sticky-cta { display: none; } }

/* compacte vergelijkingstabel */
.mb-tabel-scroll { overflow-x: auto; margin: 1.5rem 0; }
.mb-vergelijktabel {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	min-width: 640px;
}
.mb-vergelijktabel th {
	background: var(--mb-navy);
	color: #fff;
	text-align: left;
	padding: .6em .8em;
	font-weight: 600;
}
.mb-vergelijktabel td {
	border-bottom: 1px solid var(--mb-lijn);
	padding: .8em;
	vertical-align: middle;
}
.mb-vergelijktabel tr:nth-child(even) td { background: var(--mb-fond); }
.mb-vt-naam a { font-weight: 700; text-decoration: none; color: var(--mb-navy); }
.mb-vt-naam a:hover { color: var(--mb-groen-donker); text-decoration: underline; }
.mb-vt-score { text-align: center; white-space: nowrap; }
.mb-vt-score .mb-score__cijfer { font-size: 1.15rem; }
.mb-vt-kosten { font-size: .88rem; color: #33475b; }
.mb-vt-cta { text-align: right; }
.mb-knop--klein { padding: .5em 1em; font-size: .85rem; white-space: nowrap; }
.mb-tarieven--vol { display: table; }
.mb-tarieven--vol thead th {
	background: var(--mb-navy);
	color: #fff;
	padding: .5em .6em;
}