/*
Theme Name: Rijschool Huis in 't Veld
Theme URI: https://rijschool-huisintveld.nl
Version: 1.3.8
Description: Child theme voor Rijschool Huis in 't Veld. Bevat de huisstijl, het lokaal gehoste font en de opmaakklassen die op de Beaver Builder rijen, kolommen en modules gezet worden.
Author: De Codesmederij
Template: bb-theme
*/

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Huisstijl (design/README.md)
   ------------------------------------------------------------------ */

:root {
	--r-text: #141821;
	--r-muted: #5F6570;
	--r-card-text: #3B4048;
	--r-navy: #1E3F5C;
	--r-navy-dark: #17324A;
	--r-navy-light: #D9E2EB;
	--r-navy-muted: #B9C7D3;
	--r-navy-line: #3D5C78;
	--r-accent: #C2432A;
	--r-accent-hover: #9E351F;
	--r-grey: #F4F5F7;
	--r-line: #E5E7EA;
	--r-font: 'Plus Jakarta Sans', system-ui, sans-serif;
	--r-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8l4 4-4 4'/%3E%3C/svg%3E");
	--r-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 11l4 4 4-4'/%3E%3C/svg%3E");
}

body {
	background: #ffffff;
	font-family: var(--r-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--r-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--r-font);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--r-text);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.fl-rich-text p {
	margin: 0;
}

.fl-rich-text p + p {
	margin-top: 1.25em;
}

a {
	color: var(--r-navy);
}

a:hover,
a:focus {
	color: var(--r-accent);
}

/* Focusring alleen bij toetsenbordnavigatie, in navy. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--r-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

html {
	-webkit-tap-highlight-color: rgba(30, 63, 92, 0.15);
}

/* De grote zwevende panelen (reviewband, CTA) breken uit tot 1312 en 1328px,
   zodat de tekst erin op de containerlijn van 1200 staat. Op smallere
   schermen volgen ze de schermrand met 20px marge. */
@media (max-width: 1370px) {
	.fl-row-fixed-width.r-reviews,
	.fl-row-fixed-width.r-cta {
		max-width: calc(100% - 40px) !important;
	}
}

@media (max-width: 768px) {
	.fl-row-fixed-width.r-reviews,
	.fl-row-fixed-width.r-cta {
		max-width: calc(100% - 32px) !important;
	}
}

/* ------------------------------------------------------------------
   Opmaakklassen. Zet de klasse in de instellingen onder
   Geavanceerd > HTML > Class.
   ------------------------------------------------------------------ */

/* Maximale tekstbreedte in de hero. */
.r-mw-560 { max-width: 560px; }
.r-mw-500 { max-width: 500px; }

/* Tekstlink met cirkelpijl (Button-module met klasse r-link, of de tweede
   knop van een groep met klasse r-link2, of alle knoppen bij r-linkgroep). */
.fl-builder-content .r-link .fl-button,
.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button,
.fl-builder-content .r-linkgroep .fl-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Binnen een Button Group houdt de link zelf de witte knopkleur van het
   thema, alleen de tekstspan krijgt de ingestelde kleur. Pijl en
   onderstreping volgen currentColor, dus die kleur hier expliciet. */
.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button,
.fl-builder-content .r-linkgroep .fl-button {
	color: var(--r-text) !important;
}

.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button:hover,
.fl-builder-content .r-linkgroep .fl-button:hover {
	color: var(--r-accent) !important;
}

.fl-builder-content .r-link .fl-button::after,
.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button::after,
.fl-builder-content .r-linkgroep .fl-button::after {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--r-pijl) center / contain no-repeat;
	mask: var(--r-pijl) center / contain no-repeat;
}

.r-link .fl-button-wrap {
	line-height: 1;
}

/* Lucht naast de knop en de tekstlink in de hero. */
.r-link2 .fl-button-group-button:nth-child(2) {
	display: flex;
	align-items: center;
}

/* Omlijnde witte knop als tweede knop in een groep op navy. De per-knop
   randinstelling van de groep komt niet door, dus hier expliciet. */
.fl-builder-content .r-outline2 .fl-button-group-button:nth-child(2) .fl-button {
	background: transparent !important;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
}

.fl-builder-content .r-outline2 .fl-button-group-button:nth-child(2) .fl-button:hover {
	background: rgba(255, 255, 255, 0.12) !important;
}

/* Op tablet vallen de CTA-knoppen over twee regels; dan niet tegen elkaar aan.
   Beaver Builder regelt de tussenruimte met padding op elke knop. */
@media (min-width: 769px) and (max-width: 1100px) {
	.fl-builder-content .r-cta .fl-button-group-button {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/* Knoppen onder elkaar en volle breedte op mobiel. */
@media (max-width: 768px) {
	.r-btns .fl-button-group-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.r-btns .fl-button-group-button,
	.r-btns .fl-button-wrap,
	.r-btns .fl-button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.r-btns .fl-button-group-button + .fl-button-group-button {
		margin-top: 12px;
	}
}

/* Pilletjes in lopende tekst, bijvoorbeeld "KNMV erkend motorinstructeur". */
.r-pill {
	display: inline-flex;
	align-items: center;
	height: 40px;
	margin: 0 6px 10px 0;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--r-grey);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.r-pills p {
	margin-bottom: -10px;
}

/* Kleine gedempte regel, bijvoorbeeld het KvK-nummer. */
.r-small {
	font-size: 13px;
	color: var(--r-muted);
}

/* Bijschrift op een foto. */
.r-shadow p {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* Foto op vaste hoogte, vullend. De hoogte staat op !important omdat het
   thema en de fotomodule zelf een height: auto op de afbeelding zetten. */
.r-h252 .fl-photo,
.r-h252 .fl-photo-content,
.r-h440 .fl-photo,
.r-h440 .fl-photo-content {
	display: block;
	width: 100%;
}

.r-h252 .fl-photo-img,
.r-h440 .fl-photo-img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.r-h252 .fl-photo-img { height: 252px !important; }
.r-h440 .fl-photo-img { height: 440px !important; }

@media (max-width: 992px) {
	.r-h440 .fl-photo-img { height: 360px !important; }
}

@media (max-width: 768px) {
	.r-h252 .fl-photo-img { height: 220px !important; }
}

/* Vrijstaand beeld (auto, motoren) in een vak van 300px hoog, onderaan
   uitgelijnd, zodat de koppen eronder op dezelfde hoogte staan. */
.fl-builder-content .r-vrijstaand {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 300px;
}

.r-vrijstaand .fl-photo-content {
	display: block;
}

.r-vrijstaand .fl-photo-img {
	max-height: 300px;
	width: auto;
}

@media (max-width: 992px) {
	.fl-builder-content .r-vrijstaand {
		height: 240px;
	}

	.r-vrijstaand .fl-photo-img {
		max-height: 240px;
	}
}

@media (max-width: 768px) {
	.fl-builder-content .r-vrijstaand {
		height: auto;
	}
}

/* Raster van kaarten: 10px zijpadding per kolom als tussenruimte. Op tablet
   twee naast elkaar, op mobiel gestapeld. */
.r-grid .fl-col {
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 992px) {
	.r-grid .fl-col {
		margin-bottom: 20px;
	}
}

@media (max-width: 768px) {
	.r-grid .fl-col {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 12px;
	}

	.r-grid .fl-col:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.fl-row .r-tile > .fl-col-content {
		justify-content: flex-start !important;
		gap: 12px;
	}
}

/* Jaartegel: jaartal boven, tekst onderaan. De tegel rekt mee tot de
   onderkant van de compositie, zodat de kolom even hoog is als de tekst
   ernaast en de grote foto. */
.fl-row .r-tile > .fl-col-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between !important;
}

.r-over .fl-col:nth-child(2) > .fl-col-content {
	display: flex;
	flex-direction: column;
}

.r-over .fl-col:nth-child(2) > .fl-col-content > .fl-col-group {
	display: flex;
	flex: 1 1 auto;
}

.r-over .fl-col:nth-child(2) > .fl-col-content > .fl-col-group > .r-tile {
	display: flex;
}

.r-over .fl-col:nth-child(2) > .fl-col-content > .fl-col-group > .r-tile > .fl-col-content {
	flex: 1 1 auto;
}

/* Hero: het witte vlak valt over de foto en blijft op brede schermen
   compact. De kolom erboven krijgt een stacking context zodat het vlak boven
   de fotokolom ernaast tekent. */
.r-hero .fl-col:nth-child(2) {
	position: relative;
	z-index: 1;
}

@media (min-width: 993px) {
	.r-hero-panel {
		max-width: 640px;
	}
}

/* Beeldmerk iets kleiner dan de kolomhoogte, tegen de hoek rechtsonder. */
@media (min-width: 993px) {
	.fl-row .r-hero-tekst > .fl-col-content {
		background-size: auto 75% !important;
		background-position: right bottom !important;
	}

	/* De kolominhoud schuift 100px naar links over de foto (marge -100); met
	   deze extra breedte blijft de rechterkant tegen de schermrand. */
	.fl-row .r-hero-tekst > .fl-col-content {
		width: calc(100% + 100px);
		max-width: none;
	}
}

/* Op tablet en mobiel staat het beeldmerk kleiner rechtsonder in het
   tekstblok onder de foto. */
@media (max-width: 992px) {
	.fl-row .r-hero-tekst > .fl-col-content {
		background-size: auto 150px !important;
		background-position: right -24px bottom 0 !important;
	}
}

/* Mobiel: meer verticale lucht tussen en in de secties. De waarden in de
   rij-instellingen blijven de basis; dit zet er op kleine schermen een
   schepje bovenop. */
@media (max-width: 768px) {
	.fl-row .r-hero-panel > .fl-col-content {
		padding-top: 40px !important;
		padding-bottom: 56px !important;
	}

	.r-hero-panel .fl-module-rich-text {
		margin-top: 20px !important;
	}

	.r-hero-panel .fl-module-button-group {
		margin-top: 32px !important;
	}

	.fl-row.r-grid > .fl-row-content-wrap {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.r-grid .fl-col {
		margin-bottom: 16px;
	}

	.fl-row.r-over > .fl-row-content-wrap,
	.fl-row.r-faq > .fl-row-content-wrap {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}

	.r-over .fl-col:nth-child(2) {
		margin-bottom: 40px;
	}

	.fl-row.r-reviews {
		margin-bottom: 64px !important;
	}

	.fl-row.r-aanbod > .fl-row-content-wrap {
		padding-top: 8px !important;
		padding-bottom: 72px !important;
	}

	.r-aanbod .fl-col:first-child > .fl-col-content {
		padding-bottom: 64px !important;
	}

	.fl-row.r-cta {
		margin-bottom: 72px !important;
	}

	.fl-row.r-footer > .fl-row-content-wrap {
		padding-top: 56px !important;
	}

	.r-footer .fl-col:not(:last-child) {
		margin-bottom: 40px;
	}
}

/* Hero: de foto loopt tot de linker schermrand en is rechts afgerond. Op
   mobiel staat hij als losse foto met 16px marge. */
/* Tablet en mobiel: foto van rand tot rand, het witte vlak schuift er als
   een afgeronde plaat overheen en de tekst staat op de 16px-lijn van de rest. */
@media (max-width: 992px) {
	.fl-row .r-hero-foto > .fl-col-content {
		border-radius: 0 !important;
	}

	/* Onder de foto gewoon een tekstblok op de 16px-lijn, zonder kaart en
	   zonder overlap. */
	.fl-row .r-hero-tekst > .fl-col-content {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.fl-row .r-hero-panel > .fl-col-content {
		margin-top: 0 !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 28px 0 8px !important;
	}

	.r-hero .fl-col:nth-child(2) {
		position: relative;
		z-index: 2;
	}
}

/* Reviewband: op mobiel een lijn boven in plaats van links. */
@media (max-width: 768px) {
	.fl-row .r-reviews-rechts > .fl-col-content {
		border-left: 0 !important;
		border-top: 1px solid var(--r-navy-line);
	}
}

/* Reviews in de band: typografie volgens het ontwerp. */
.r-reviews-tekst .hiv-review-tekst p {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.r-reviews-tekst .hiv-review-naam {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--r-navy-muted);
}

.r-reviews-tekst .hiv-review-naam strong {
	color: #ffffff;
}

.r-reviews-tekst .hiv-reviews-dots {
	color: #ffffff;
	margin-left: -8px;
}

@media (max-width: 768px) {
	.r-reviews-tekst .hiv-review-tekst p {
		font-size: 18px;
	}
}

/* FAQ accordion: witte items in het grijze paneel, chevron in een cirkel. */
.r-accordion .fl-accordion-item {
	overflow: hidden;
}

.r-accordion .fl-accordion-button {
	min-height: 64px;
	align-items: center;
}

.r-accordion .fl-accordion-button-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--r-chevron) center / contain no-repeat;
	mask: var(--r-chevron) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.r-accordion .fl-accordion-button-icon::before,
.r-accordion .fl-accordion-button-icon::after {
	display: none;
}

.r-accordion .fl-accordion-item-active .fl-accordion-button-icon {
	transform: rotate(180deg);
}

.r-accordion .fl-accordion-content p:last-child {
	margin-bottom: 0;
}

/* Het item knipt zijn inhoud af voor de afronding, dus de focusring van de
   vraag valt naar binnen. Alleen bij toetsenbordfocus, niet na een klik. */
.r-accordion .fl-accordion-button:focus {
	outline: none;
}

.r-accordion .fl-accordion-button:focus-visible {
	outline: 3px solid var(--r-navy);
	outline-offset: -3px;
	border-radius: 14px;
}

/* Prijscomponent uit de plugin huisintveld-prijzen. */
.hiv-prijslijst {
	border-top: 1px solid var(--r-line);
}

.hiv-prijsregel {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--r-line);
}

.hiv-prijslijst .hiv-prijsregel:last-child {
	border-bottom: 0;
}

.hiv-prijsregel .hiv-label {
	font-size: 15px;
	font-weight: 600;
}

.hiv-prijsregel .hiv-toelichting {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--r-muted);
}

.hiv-prijsregel .hiv-prijs {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Beweging: zachte fade bij scrollen en kleine hoverreacties
   ------------------------------------------------------------------ */

/* De "Fade Up" van Beaver Builder schuift 50 procent omhoog. Hier 18px en
   uitlopend, zodat het een zucht is in plaats van een sprong. */
@keyframes r-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fl-animated.fl-fade-up {
	animation-name: r-fade-up;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Knoppen. */
.fl-builder-content .fl-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fl-builder-content .fl-button:hover {
	transform: translateY(-1px);
}

/* Tekstlinks: de pijl schuift een stukje mee. */
.fl-builder-content .r-link .fl-button::after,
.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button::after,
.fl-builder-content .r-linkgroep .fl-button::after {
	transition: transform 0.2s ease;
}

.fl-builder-content .r-link .fl-button:hover::after,
.fl-builder-content .r-link2 .fl-button-group-button:nth-child(2) .fl-button:hover::after,
.fl-builder-content .r-linkgroep .fl-button:hover::after {
	transform: translateX(4px);
}

/* Kaarten komen iets omhoog. De achtergrond en afronding zitten op
   .fl-col-content, dus daar hoort ook de schaduw. */
.r-card > .fl-col-content {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.r-card:hover > .fl-col-content {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(20, 24, 33, 0.08);
}

/* Foto's in een kader zoomen een fractie in. */
.r-h252 .fl-photo-content,
.r-h440 .fl-photo-content {
	overflow: hidden;
	border-radius: inherit;
}

.r-h252 .fl-photo-img,
.r-h440 .fl-photo-img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.r-h252:hover .fl-photo-img,
.r-h440:hover .fl-photo-img {
	transform: scale(1.03);
}

/* Footerlinks: pijltje schuift mee. */
.r-footlinks a::after {
	transition: transform 0.2s ease;
}

.r-footlinks a:hover::after {
	transform: translateX(3px);
}

/* Accordion: kleur van de vraag loopt zacht over. */
.r-accordion .fl-accordion-button-label {
	transition: color 0.2s ease;
}

.r-accordion .fl-accordion-button:hover .fl-accordion-button-label {
	color: var(--r-accent);
}

/* Wie in het systeem "verminder beweging" aan heeft, krijgt alles stil. */
@media (prefers-reduced-motion: reduce) {
	.fl-animation,
	.fl-node-hidden .fl-animation {
		opacity: 1 !important;
		animation: none !important;
	}

	.fl-builder-content .fl-button,
	.fl-builder-content .fl-button::after,
	.r-card > .fl-col-content,
	.r-h252 .fl-photo-img,
	.r-h440 .fl-photo-img,
	.r-footlinks a::after {
		transition: none !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
   Header en footer uit Beaver Themer
   ------------------------------------------------------------------ */

.r-topbar a {
	color: #ffffff;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.r-topbar a:hover {
	color: var(--r-navy-light);
}

/* Sticky header (instelling van Beaver Themer). Zodra er gescrold is, schuift
   de topregel in en wordt de menubalk compacter met een hairline eronder. */
.r-topbar {
	max-height: 80px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.fl-theme-builder-header-scrolled .r-topbar {
	max-height: 0;
}

.r-header > .fl-row-content-wrap {
	transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.fl-theme-builder-header-scrolled .r-header > .fl-row-content-wrap {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	box-shadow: 0 1px 0 var(--r-line);
}

@media (max-width: 992px) {
	.fl-theme-builder-header-scrolled .r-header > .fl-row-content-wrap {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

.r-header .menu > li.current-menu-item > a,
.r-header .menu > li.current-menu-ancestor > a {
	color: var(--r-navy) !important;
}

/* Telefoon en knop naast elkaar in de rechterkolom. */
.r-header .fl-col:nth-child(3) > .fl-col-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.r-header .fl-col:nth-child(3) .fl-module {
	margin: 0;
}

.r-tel .fl-photo-content a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--r-line);
	border-radius: 50%;
}

.r-tel .fl-photo-img {
	width: 20px !important;
	height: 20px;
}

/* Beaver Builder zet de fotobreedte op 24px; de ronde knop eromheen is 44. */
.r-tel .fl-photo-content {
	width: 44px !important;
}

@media (max-width: 992px) {
	.r-header .fl-col:nth-child(3) > .fl-col-content {
		gap: 8px;
	}
}

/* Onder de tabletbreedte klapt het menu in tot de overlay. De header blijft
   op een rij: logo links, dan telefoon en knop, dan de hamburger. */
@media (max-width: 992px) {
	.r-header .fl-col-group {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}

	.r-header .fl-col {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		margin: 0;
		clear: none;
	}

	/* Het logo mag krimpen als de knoppen anders niet passen. */
	.r-header .fl-col:nth-child(1) {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		margin-right: auto;
	}

	.r-header .fl-col:nth-child(1) .fl-photo-img {
		max-width: 100%;
	}

	.r-header .fl-col:nth-child(3) {
		order: 2;
	}

	.r-header .fl-col:nth-child(2) {
		order: 3;
	}

	.r-header .fl-module {
		margin-bottom: 0;
	}

	.r-header .uabb-hamburger-menu-top,
	.r-header .uabb-hamburger-menu-middle,
	.r-header .uabb-hamburger-menu-bottom {
		height: 3px;
		rx: 1.5px;
	}

	.r-header .uabb-hamburger-menu-top { y: 8px; }
	.r-header .uabb-hamburger-menu-middle { y: 23px; }
	.r-header .uabb-hamburger-menu-bottom { y: 38px; }
}

/* Linklijst in de footer: hairline eronder en een pijltje rechts. */
.r-footlinks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.r-footlinks li {
	margin: 0;
	padding: 0;
}

.r-footlinks a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--r-line);
	font-size: 15px;
	font-weight: 600;
	color: var(--r-text);
	text-decoration: none;
}

.r-footlinks a::after {
	content: '\203A';
	font-size: 18px;
	line-height: 1;
	color: var(--r-muted);
}

.r-footlinks a:hover {
	color: var(--r-accent);
}

.r-footer .fl-rich-text p + p {
	margin-top: 16px;
}

.r-footer .fl-rich-text p strong {
	display: inline-block;
	margin-bottom: 2px;
}

.r-footer .fl-rich-text a {
	color: var(--r-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.r-footer .fl-rich-text a:hover {
	color: var(--r-accent);
}

/* In de linklijsten geen onderstreping, daar is de hairline de scheiding. */
.r-footer .fl-rich-text .r-footlinks a {
	text-decoration: none;
}

@media (max-width: 768px) {
	.r-footer .fl-col:not(:last-child) {
		margin-bottom: 28px;
	}
}

@media (max-width: 768px) {
	.r-footer-bottom .fl-col-group .fl-col:first-child {
		margin-bottom: 12px;
	}

	.r-footer-bottom .fl-rich-text p {
		text-align: left;
	}
}

.r-footer-bottom .fl-rich-text a {
	color: var(--r-muted);
	text-decoration: none;
}

.r-footer-bottom .fl-rich-text a:hover {
	color: var(--r-accent);
}