/* ==========================================================================
   Rentepagina's - hypotheek, lenen en banksparen

   Eigen stylesheet, bewust los van MwCore.css. Die tabelopmaak leunt op floats
   met vaste pixelbreedtes per kolom; dat valt uit elkaar zodra een banknaam of
   een productnaam langer is dan verwacht. Hier staat alles in grid, met kolommen
   die meebewegen en getallen die onder elkaar uitlijnen.

   De pagina heeft één taak: tarieven vergelijken. Alles wat daar niet aan
   bijdraagt - de uitleg, de disclaimer - staat eronder in plaats van erboven.
   ========================================================================== */

.rente,
.rente-uitleg,
.rente-faq,
.rente-verwant,
.rente-disclaimer {
	/* De kleuren komen uit basics.css, dezelfde die de producthomepages gebruiken:
	   #1B75BA als hoofdblauw, #00ACED als accent en #d5f4ff als rustig vlak. Alleen
	   de maatvoering is hier eigen, zodat de tabel niet aan de oude vaste
	   kolombreedtes vastzit. */
	--rente-ink: #1a1a1a;
	--rente-muted: #5b6470;
	--rente-line: #e4e8ee;
	--rente-card: #fff;
	--rente-blauw: var(--color-link, #1B75BA);
	--rente-blauw-diep: #145a90;
	--rente-accent: var(--secundary-blue, #00ACED);
	--rente-accent-soft: var(--light-blue, #d5f4ff);
	/* Iets donkerder dan de site-groen: dat haalt wél de leesbaarheidsnorm voor
	   witte tekst op een gekleurde knop. */
	--rente-go: #2f7d32;
	--rente-go-hover: #256428;
	--rente-radius: 10px;
	--rente-gap: clamp(1rem, 2vw, 1.75rem);

	color: var(--rente-ink);
	font-variant-numeric: tabular-nums;
}

.rente {
	padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
}

/* Het kruimelpad gebruikt nav.kruimelpad uit masterpage.css, net als de
   producthomepages. Alleen de ruimte eronder is hier iets krapper. */
.rente .kruimelpad {
	padding-top: 0;
}

/* ---------- kop ---------------------------------------------------------- */

.rente__kop {
	display: grid;
	gap: .35rem;
	margin-bottom: var(--rente-gap);
}

.rente__titel {
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0;
}

.rente__doorsnede {
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	font-weight: 400;
	color: var(--rente-muted);
	margin: 0;
}

/* Het laagste tarief meteen in beeld: dat is waar de bezoeker voor komt, en het
   is ook het stukje dat een taalmodel als eerste oppikt. */
.rente__kerncijfer {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin-top: .5rem;
}

.rente__kerncijfer b {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--rente-blauw);
}

.rente__kerncijfer span {
	color: var(--rente-muted);
	font-size: .95rem;
}

.rente__bijgewerkt {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .8rem;
	color: var(--rente-muted);
}

	.rente__bijgewerkt::before {
		content: "";
		width: .5rem;
		height: .5rem;
		border-radius: 50%;
		background: var(--rente-go);
		flex: none;
	}

	.rente__bijgewerkt b {
		font-weight: 600;
		color: var(--rente-ink);
	}

/* ---------- filters ------------------------------------------------------ */

.rente__filters {
	display: grid;
	gap: 1rem;
	background: var(--rente-card);
	border: 1px solid var(--rente-line);
	border-radius: var(--rente-radius);
	padding: clamp(1rem, 2vw, 1.5rem);
	margin-bottom: var(--rente-gap);
}

.rente__filter {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) 1fr;
	gap: .5rem 1rem;
	align-items: start;
}

@media (max-width: 640px) {
	.rente__filter {
		grid-template-columns: 1fr;
		gap: .4rem;
	}
}

.rente__filterlabel {
	font-size: .85rem;
	font-weight: 600;
	color: var(--rente-muted);
	padding-top: .45rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rente__opties {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.rente__optie {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 .85rem;
	border: 1px solid var(--rente-line);
	border-radius: 999px;
	background: #fbfcfd;
	color: var(--rente-ink);
	font-size: .9rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

	.rente__optie:hover {
		background: var(--rente-accent-soft);
		border-color: #bcdcf0;
		color: var(--rente-accent);
	}

	.rente__optie:focus-visible {
		outline: 2px solid var(--rente-accent);
		outline-offset: 2px;
	}

	.rente__optie[aria-current="page"] {
		background: var(--rente-blauw);
		border-color: var(--rente-blauw);
		color: #fff;
		font-weight: 600;
	}

/* ---------- de tarieven -------------------------------------------------- */

.rente__tabelkop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .75rem;
}

	.rente__tabelkop h2 {
		font-size: 1.05rem;
		margin: 0;
	}

	.rente__tabelkop span {
		font-size: .85rem;
		color: var(--rente-muted);
	}

.rente__lijst {
	width: 100%;
	border-collapse: collapse;
	background: var(--rente-card);
	border: 1px solid var(--rente-line);
	border-radius: var(--rente-radius);
	overflow: hidden;
}

	.rente__lijst caption {
		text-align: left;
		padding: 0 0 .75rem;
		font-size: .85rem;
		color: var(--rente-muted);
	}

	.rente__lijst th {
		text-align: left;
		font-size: .75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--rente-muted);
		padding: .85rem 1rem;
		border-bottom: 1px solid var(--rente-line);
		background: #fafbfc;
	}

	.rente__lijst td {
		padding: .9rem 1rem;
		border-top: 1px solid var(--rente-line);
		vertical-align: middle;
	}

	.rente__lijst tbody tr:first-child td {
		border-top: 0;
	}

	.rente__lijst tbody tr:hover td {
		background: #fcfdfe;
	}

/* Kolommen: het logo krijgt vaste ruimte, de naam mag rekken, rente en knop
   staan rechts en houden hun breedte. */
.rente__c-logo { width: 4.5rem; }
.rente__c-rente { text-align: right; white-space: nowrap; }
.rente__c-actie { width: 1%; white-space: nowrap; }

/* De verhouding staat vast zodat de regel niet verspringt zodra het logo binnen is,
   en niet inklapt als het er nooit komt. contain houdt elk formaat logo heel. */
.rente__logo {
	display: block;
	width: 100%;
	max-width: 3.5rem;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: contain;
	object-position: left center;
}

.rente__aanbieder {
	display: grid;
	gap: .1rem;
	min-width: 0;
}

	.rente__aanbieder b {
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	.rente__aanbieder span {
		font-size: .85rem;
		color: var(--rente-muted);
		overflow-wrap: anywhere;
	}


.rente__percentage {
	font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rente-blauw);
}

.rente__knop {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 2.5rem;
	padding: 0 1.1rem;
	border-radius: 999px;
	background: var(--rente-go);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .12s ease;
}

	.rente__knop:hover {
		background: var(--rente-go-hover);
		color: #fff;
	}

	.rente__knop:focus-visible {
		outline: 2px solid var(--rente-blauw);
		outline-offset: 2px;
	}

	.rente__knop[target="_blank"]::after {
		content: "↗";
		font-size: .8em;
	}

/* Smal scherm: elke regel wordt een kaart. De koppen verdwijnen en komen terug
   als label voor de cel, zodat de betekenis niet verloren gaat. */
@media (max-width: 720px) {
	.rente__lijst,
	.rente__lijst tbody,
	.rente__lijst tr,
	.rente__lijst td {
		display: block;
		width: auto;
	}

	.rente__lijst {
		border: 0;
		background: none;
	}

		.rente__lijst thead {
			display: none;
		}

		.rente__lijst tbody tr {
			position: relative;
			background: var(--rente-card);
			border: 1px solid var(--rente-line);
			border-radius: var(--rente-radius);
			padding: 1rem 1rem .85rem;
			margin-bottom: .6rem;
			display: grid;
			grid-template-columns: 3rem 1fr auto;
			grid-template-areas:
				"logo naam rente"
				"actie actie actie";
			align-items: center;
			gap: .5rem .75rem;
		}

		.rente__lijst tbody tr:hover td {
			background: none;
		}

		.rente__lijst td {
			border: 0;
			padding: 0;
		}

	.rente__c-logo { grid-area: logo; }
	.rente__c-naam { grid-area: naam; }
	.rente__c-rente { grid-area: rente; text-align: right; }
	.rente__c-actie { grid-area: actie; }


	.rente__knop {
		width: 100%;
		justify-content: center;
		margin-top: .35rem;
	}
}

/* ---------- leeg, advies, vervolg ---------------------------------------- */

.rente__leeg {
	background: var(--rente-card);
	border: 1px dashed var(--rente-line);
	border-radius: var(--rente-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	color: var(--rente-muted);
}

.rente__advies {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1.1rem clamp(1rem, 2vw, 1.5rem);
	background: var(--rente-accent-soft);
	border: 1px solid #d3e7f5;
	border-radius: var(--rente-radius);
}

	.rente__advies p {
		margin: 0;
		max-width: 60ch;
	}

.rente__adviesknop,
.rente__meer {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	white-space: nowrap;
}

.rente__adviesknop {
	background: var(--rente-blauw);
	color: #fff;
}

	.rente__adviesknop:hover {
		background: #00284d;
		color: #fff;
	}

.rente__meer {
	margin-top: 1rem;
	background: var(--rente-card);
	border: 1px solid var(--rente-blauw);
	color: var(--rente-blauw);
}

	.rente__meer:hover {
		background: var(--rente-blauw);
		color: #fff;
	}

	.rente__adviesknop:focus-visible,
	.rente__meer:focus-visible {
		outline: 2px solid var(--rente-accent);
		outline-offset: 2px;
	}

/* ---------- alles onder de tabel ----------------------------------------- */

/* De tekst is er voor zoekmachines, taalmodellen en voor wie wil doorlezen.
   Boven de tabel zou hij de bezoeker in de weg staan, dus staat hij eronder -
   maar dan wel volwaardig, met koppen waar je op kunt scannen. */
.rente-uitleg {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	border-top: 1px solid var(--rente-line);
}

	.rente-uitleg > .container > h2,
	.rente-faq > .container > h2,
	.rente-verwant > .container > h2 {
		margin: 0 0 1.25rem;
		font-size: clamp(1.35rem, 3vw, 1.75rem);
		font-weight: 700;
		line-height: 1.25;
		color: var(--rente-blauw);
	}

/* Eén kolom van hooguit 70 tekens: langer leest niemand prettig. */
.rente-tekst {
	max-width: 70ch;
}

	.rente-tekst h3 {
		margin: 2rem 0 .5rem;
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.3;
		color: var(--rente-ink);
	}

	.rente-tekst h3:first-child {
		margin-top: 0;
	}

	.rente-tekst p {
		margin: 0 0 .85rem;
		line-height: 1.7;
		color: #3d444d;
	}

	.rente-tekst p:last-child {
		margin-bottom: 0;
	}

	.rente-tekst a {
		color: var(--rente-blauw);
	}

/* ---------- veelgestelde vragen ------------------------------------------ */

.rente-faq {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	background: var(--rente-accent-soft);
}

.rente-faq__lijst {
	display: grid;
	gap: .5rem;
	max-width: 70ch;
}

/* <details> klapt zelf open en dicht; daar hoort geen script bij. */
.rente-faq__item {
	background: var(--rente-card);
	border-radius: var(--rente-radius);
	overflow: hidden;
}

	.rente-faq__item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .9rem 1.1rem;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		list-style: none;
	}

		/* Safari en oudere WebKit tonen anders nog hun eigen driehoekje. */
		.rente-faq__item summary::-webkit-details-marker {
			display: none;
		}

		/* Het plusje is puur decoratie: de open-of-dicht-staat leest een
		   schermlezer al van het details-element zelf af. */
		.rente-faq__item summary::after {
			content: "";
			flex: 0 0 auto;
			width: .65rem;
			height: .65rem;
			margin-right: .2rem;
			border-right: 2px solid var(--rente-blauw);
			border-bottom: 2px solid var(--rente-blauw);
			transform: rotate(45deg) translate(-.15rem, -.15rem);
			transition: transform .15s ease;
		}

	.rente-faq__item[open] summary::after {
		transform: rotate(225deg) translate(-.05rem, -.05rem);
	}

	.rente-faq__item summary:hover {
		color: var(--rente-blauw);
	}

	.rente-faq__item summary:focus-visible {
		outline: 2px solid var(--rente-blauw);
		outline-offset: -2px;
	}

.rente-faq__antwoord {
	padding: 0 1.1rem 1.1rem;
	line-height: 1.7;
	color: #3d444d;
}

	.rente-faq__antwoord p {
		margin: 0 0 .75rem;
	}

	.rente-faq__antwoord p:last-child {
		margin-bottom: 0;
	}

/* ---------- verwante doorsnedes ------------------------------------------ */

/* Deze links zijn er zowel voor de bezoeker als voor de vindbaarheid: ze knopen
   de rentepagina's onderling aan elkaar. */
.rente-verwant {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

	.rente-verwant ul {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.rente-verwant a {
		display: inline-flex;
		align-items: center;
		min-height: 2.25rem;
		padding: 0 .9rem;
		border: 1px solid var(--rente-line);
		border-radius: 999px;
		background: var(--rente-card);
		font-size: .9rem;
		color: var(--rente-ink);
		text-decoration: none;
	}

		.rente-verwant a:hover {
			border-color: var(--rente-blauw);
			color: var(--rente-blauw);
		}

		.rente-verwant a:focus-visible {
			outline: 2px solid var(--rente-blauw);
			outline-offset: 2px;
		}

/* ---------- kleine lettertjes -------------------------------------------- */

.rente-disclaimer {
	padding: 0 0 clamp(2rem, 5vw, 3.5rem);
}

	.rente-disclaimer p {
		max-width: 80ch;
		margin: 0;
		padding-top: 1rem;
		border-top: 1px solid var(--rente-line);
		font-size: .8rem;
		line-height: 1.6;
		color: var(--rente-muted);
	}

@media (prefers-reduced-motion: reduce) {
	.rente *,
	.rente-faq * {
		transition: none !important;
	}
}

/* Alleen visueel weg: .hideMe is display:none en haalt de tekst ook uit de
   toegankelijkheidsboom, terwijl een schermlezer die koppen juist nodig heeft. */
.rente__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- vingers in plaats van een muis ------------------------------- */

/* Op een touchscreen is 36 pixels net te krap om zonder missers te raken; met een
   muis is het juist prettig compact. Daarom alleen ophogen waar het nodig is. */
@media (pointer: coarse) {
	.rente__optie,
	.rente-verwant a {
		min-height: 2.75rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.rente__knop,
	.rente__adviesknop,
	.rente__meer {
		min-height: 2.75rem;
	}

	.rente-faq__item summary {
		padding-top: 1.05rem;
		padding-bottom: 1.05rem;
	}
}