/*
Theme Name:     Enfold Child
Theme URI:      https://rijschooldigitaal.nl
Description:    Child theme van Enfold voor RijschoolDigitaal (Borgman Digital). Alle maatwerk staat hier, zodat een update van Enfold niets overschrijft.
Author:         Wes Borgman — Borgman Digital
Author URI:     https://rijschooldigitaal.nl
Template:       enfold
Version:        1.0.0
Text Domain:    enfold-child
*/

/* ==========================================================================
   Let op: dit bestand wordt NA de stylesheet van Enfold ingeladen.
   Kleuren worden primair via Enfold > General Styling gezet; hier staat
   alleen wat je daar niet kunt instellen.

   Huisstijl RijschoolDigitaal (gelijkgetrokken met de app):
     navy        #1E3A5F   koppen, footer, donkere secties
     blauw       #1A56DB   knoppen, links
     blauw-hover #1442AF
     lichtblauw  #EFF6FF   afwisselende secties
     tekst       #111827
     tekst-grijs #4B5563
     rand        #E5E7EB
     groen       #128663   vinkjes "inbegrepen"
   ========================================================================== */

:root {
	--rd-navy: #1E3A5F;
	--rd-navy-dark: #162C48;
	--rd-blauw: #1A56DB;
	--rd-blauw-hover: #1442AF;
	--rd-lichtblauw: #EFF6FF;
	--rd-tekst: #111827;
	--rd-tekst-grijs: #4B5563;
	--rd-rand: #E5E7EB;
	--rd-groen: #128663;
}

/* --------------------------------------------------------------------------
   1. Typografie — Inter, lokaal gehost (zie functions.php voor de @font-face)
   -------------------------------------------------------------------------- */

body,
.avia_textblock,
#top .av_textblock_section,
input, textarea, select, button {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-feature-settings: 'cv11', 'ss01';
	-webkit-font-smoothing: antialiased;
}

/* Let op de "html"-prefix hieronder. Enfold stylet koppen met
   "#top #wrap_all .all_colors h1..h6" (2 id's, 1 class, 1 element) en print
   die regel als inline <style id="dynamic-styles"> op wp_head prioriteit 1000
   — dus ná dit bestand. Bij gelijke specificiteit wint dan Enfold.
   Door er "html" voor te zetten tellen we één element extra mee en winnen we
   op specificiteit in plaats van op volgorde. Dat is stabieler dan !important
   en blijft werken als Enfold de laadvolgorde ooit verandert. */

html #top #wrap_all .all_colors h1,
html #top #wrap_all .all_colors h2,
html #top #wrap_all .all_colors h3,
html #top #wrap_all .all_colors h4,
html #top #wrap_all .all_colors h5,
html #top #wrap_all .all_colors h6,
html #top #wrap_all .av-special-heading .av-special-heading-tag {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	letter-spacing: -0.02em;
	font-weight: 700;
	/* Enfold zet koppen standaard in kapitalen; dat leest slecht in hele zinnen
	   en maakt lange koppen op mobiel onnodig breed. */
	text-transform: none;
}

html #top #wrap_all .all_colors h1,
html #top #wrap_all .av-special-heading h1.av-special-heading-tag { font-size: 2.6rem;  line-height: 1.15; }
html #top #wrap_all .all_colors h2,
html #top #wrap_all .av-special-heading h2.av-special-heading-tag { font-size: 2rem;    line-height: 1.2;  }
html #top #wrap_all .all_colors h3,
html #top #wrap_all .av-special-heading h3.av-special-heading-tag { font-size: 1.35rem; line-height: 1.3;  }

body { font-size: 17px; line-height: 1.65; color: var(--rd-tekst); }

@media only screen and (max-width: 767px) {
	html #top #wrap_all .all_colors h1,
	html #top #wrap_all .av-special-heading h1.av-special-heading-tag { font-size: 1.9rem; }
	html #top #wrap_all .all_colors h2,
	html #top #wrap_all .av-special-heading h2.av-special-heading-tag { font-size: 1.5rem; }
	html #top #wrap_all .all_colors h3,
	html #top #wrap_all .av-special-heading h3.av-special-heading-tag { font-size: 1.2rem; }
	body { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   2. Knoppen — één duidelijke primaire actie, rustige secundaire
   -------------------------------------------------------------------------- */

#top .avia-button {
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	padding: 14px 26px;
	border-width: 2px;
	transition: background-color .15s ease, border-color .15s ease;
}

#top .avia-button.avia-color-theme-color {
	background-color: var(--rd-blauw);
	border-color: var(--rd-blauw);
	color: #fff;
}

#top .avia-button.avia-color-theme-color:hover {
	background-color: var(--rd-blauw-hover);
	border-color: var(--rd-blauw-hover);
}

/* Secundaire knop: omlijnd, niet gevuld */
#top .avia-button.avia-color-theme-color-subtle {
	background-color: transparent;
	border-color: var(--rd-blauw);
	color: var(--rd-blauw);
}

#top .avia-button.avia-color-theme-color-subtle:hover {
	background-color: var(--rd-lichtblauw);
}

/* Zichtbare focus voor toetsenbordgebruik (WCAG 2.4.7) */
#top a:focus-visible,
#top button:focus-visible,
#top input:focus-visible,
#top textarea:focus-visible,
#top select:focus-visible,
#top .avia-button:focus-visible {
	outline: 3px solid var(--rd-blauw);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Header en menu
   -------------------------------------------------------------------------- */

#top .av-main-nav > li > a {
	background: transparent;
	font-weight: 500;
}

#top .av-main-nav > li > a:hover,
#top .av-main-nav > li.current-menu-item > a {
	color: var(--rd-blauw);
}

/* Het logo netjes verticaal centreren */
#header_main .logo,
#header_main .logo a,
#header_main .logo img {
	display: flex;
	align-items: center;
	height: 100%;
}

/* --------------------------------------------------------------------------
   4. Pakketkaarten
   Vervangt de oude .meestgekozentitel / .pakketpositiontekst / .button-pakket,
   die met position:absolute en vaste pixels werkten en op mobiel stukliepen.
   -------------------------------------------------------------------------- */

.rd-pakket {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--rd-rand);
	border-radius: 16px;
	padding: 34px 26px 30px;
	box-shadow: 0 2px 10px rgba(15, 35, 66, .05);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.rd-pakket:hover {
	border-color: #C7D9FF;
	box-shadow: 0 14px 36px rgba(15, 35, 66, .13);
	transform: translateY(-3px);
}

/* Het aanbevolen pakket: dikkere rand, gekleurde bovenbalk en een diepere
   schaduw. Op desktop staat hij ook iets hoger dan de andere twee, zodat je
   oog er vanzelf naartoe gaat. */
.rd-pakket--uitgelicht {
	border: 2px solid var(--rd-blauw);
	box-shadow: 0 18px 48px rgba(26, 86, 219, .22);
	overflow: hidden;
}

.rd-pakket--uitgelicht::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--rd-blauw) 0%, #5A8DF5 100%);
}

.rd-pakket--uitgelicht:hover {
	box-shadow: 0 22px 56px rgba(26, 86, 219, .28);
}

@media only screen and (min-width: 990px) {
	.rd-pakket--uitgelicht           { transform: translateY(-14px); }
	.rd-pakket--uitgelicht:hover     { transform: translateY(-18px); }
}

/* Pakketnaam en prijs meer gewicht geven */
html #top .rd-pakket h2,
html #top .rd-pakket h3 {
	font-size: 1.5rem;
	letter-spacing: -.01em;
	margin: 0 0 8px;
	color: var(--rd-navy);
}

/* Streepje tussen de omschrijving en de prijs, zodat het blok rust krijgt */
.rd-pakket__prijs {
	border-top: 1px solid var(--rd-rand);
	padding-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.rd-pakket,
	.rd-pakket:hover,
	.rd-pakket--uitgelicht,
	.rd-pakket--uitgelicht:hover { transition: none; transform: none; }
}

/* Label in de normale flow, dus geen overlap op smalle schermen */
.rd-pakket__label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--rd-blauw);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 7px 15px;
	border-radius: 999px;
	margin-bottom: 18px;
	box-shadow: 0 4px 12px rgba(26, 86, 219, .3);
}

/* Kaarten zonder label krijgen dezelfde hoogte-opbouw, zodat de prijzen
   van de drie pakketten op één lijn staan. */
.rd-pakket__label--leeg {
	visibility: hidden;
}

.rd-pakket__prijs {
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--rd-navy);
	line-height: 1.1;
	margin: 6px 0 2px;
}

.rd-pakket__prijs-toelichting {
	font-size: .92rem;
	color: var(--rd-tekst-grijs);
	margin-bottom: 18px;
}

/* De "html #top"-prefix is nodig omdat Enfold lijsten in tekstblokken stylet
   met een eigen opsommingsteken; zonder deze specificiteit zie je zowel een
   bolletje als ons groene vinkje. */
html #top .rd-pakket__lijst,
.rd-pakket__lijst {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

html #top .rd-pakket__lijst li,
.rd-pakket__lijst li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 9px;
	line-height: 1.5;
	list-style: none;
	background: none;
}

html #top .rd-pakket__lijst li::marker {
	content: '';
}

.rd-pakket__lijst li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: 16px;
	height: 9px;
	border-left: 2.5px solid var(--rd-groen);
	border-bottom: 2.5px solid var(--rd-groen);
	transform: rotate(-45deg);
}

/* Regel voor wat er NIET bij zit */
.rd-pakket__lijst li.rd-niet {
	color: var(--rd-tekst-grijs);
}

.rd-pakket__lijst li.rd-niet::before {
	border-color: #9CA3AF;
	width: 12px;
	height: 0;
	border-left: 0;
	border-bottom: 2.5px solid #9CA3AF;
	transform: none;
	top: .72em;
}

/* Knop onderaan, ongeacht de hoogte van de kaart */
.rd-pakket__actie { margin-top: auto; }

/* --------------------------------------------------------------------------
   4b. Browserframe voor schermafbeeldingen
   Zet een screenshot in een venster met een titelbalk, zodat meteen duidelijk
   is dat het om een website gaat en niet om een losse foto.
   -------------------------------------------------------------------------- */

.rd-browser {
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 60px rgba(8, 22, 42, .45);
	line-height: 0;
}

.rd-browser__balk {
	display: flex;
	align-items: center;
	gap: 7px;
	background: #E9EDF3;
	padding: 11px 14px;
	border-bottom: 1px solid #D5DCE6;
}

.rd-browser__balk span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #C3CBD6;
	display: block;
	flex: 0 0 auto;
}

/* Het adresbalkje met de domeinnaam */
.rd-browser__url {
	flex: 1;
	margin-left: 8px;
	background: #fff;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: #6B7280;
	font-family: 'Inter', system-ui, sans-serif;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-browser img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* Hero met tekst links en beeld rechts */
.rd-hero-tekst { padding-right: 20px; }

@media only screen and (max-width: 989px) {
	.rd-hero-tekst { padding-right: 0; text-align: center; }
	.rd-browser { margin-top: 28px; box-shadow: 0 14px 34px rgba(8, 22, 42, .38); }
	.rd-browser__url { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   5. Losse hulpklassen
   -------------------------------------------------------------------------- */

.rd-lead { font-size: 1.15rem; color: var(--rd-tekst-grijs); }

.rd-kaart {
	background: #fff;
	border: 1px solid var(--rd-rand);
	border-radius: 14px;
	padding: 26px;
	height: 100%;
}

/* Contactregel met telefoon / WhatsApp / e-mail */
.rd-contactregel { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }

.rd-contactregel a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--rd-rand);
	border-radius: 10px;
	padding: 12px 18px;
	font-weight: 600;
	color: var(--rd-navy);
	text-decoration: none;
	background: #fff;
}

.rd-contactregel a:hover {
	border-color: var(--rd-blauw);
	color: var(--rd-blauw);
}

/* --------------------------------------------------------------------------
   6. Formulieren — labels zichtbaar houden, ruime tikdoelen op mobiel
   -------------------------------------------------------------------------- */

#top .avia_ajax_form .text_input,
#top .avia_ajax_form .text_area,
#top .avia_ajax_form select,
.forminator-input,
.forminator-textarea {
	border: 1px solid var(--rd-rand);
	border-radius: 8px;
	padding: 13px 14px;
	font-size: 16px; /* voorkomt inzoomen op iOS */
	background: #fff;
	color: var(--rd-tekst);
}

#top .avia_ajax_form .text_input:focus,
#top .avia_ajax_form .text_area:focus,
.forminator-input:focus,
.forminator-textarea:focus {
	border-color: var(--rd-blauw);
	box-shadow: 0 0 0 3px rgba(26, 86, 219, .15);
	outline: none;
}

#top .avia_ajax_form label,
.forminator-label {
	font-weight: 600;
	color: var(--rd-navy);
	margin-bottom: 6px;
	display: block;
}

/* Opt-in-vinkje leesbaar houden op een lichte achtergrond */
.forminator-checkbox-label,
.forminator-radio-label {
	color: var(--rd-tekst);
	font-size: 16px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

#footer { font-size: 15px; }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#socket .copyright { font-size: 14px; }

.rd-footer-links { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   8. Mobiel — losse correcties
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	/* Enfold laat secties op mobiel soms met te weinig lucht staan */
	.rd-pakket { padding: 22px 18px; }

	.rd-contactregel a { width: 100%; justify-content: center; }

	/* Voorkomt horizontaal scrollen door te brede elementen */
	#top, body { overflow-x: hidden; }
}

/* Respecteer de systeeminstelling voor minder beweging: korte fade in plaats van volledig uit */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .4s !important;
		animation-delay: 0s !important;
		transition-duration: .4s !important;
	}
}

/* ==========================================================================
   9. De app-pagina (/app)
   Eigen visuele taal: donkerder, meer lucht, beeld mag groter. Alles hier
   staat los van de dienstenpagina's zodat de websitedienst de hoofdzaak blijft.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.rd-app-hero {
	position: relative;
	overflow: hidden;
}

/* Zachte gloed achter het beeld. Puur decoratief, dus onzichtbaar voor
   schermlezers en niet klikbaar. */
.rd-app-hero::before {
	content: '';
	position: absolute;
	top: -30%;
	left: 50%;
	width: 1100px;
	height: 1100px;
	max-width: 160vw;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(26, 86, 219, .55) 0%, rgba(26, 86, 219, 0) 62%);
	pointer-events: none;
	z-index: 0;
}

/* Alle inhoud boven de gloed houden */
.rd-app-hero .container,
.rd-app-hero .entry-content-wrapper { position: relative; z-index: 1; }

/* Klein label boven de kop */
.rd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(147, 180, 255, .16);
	border: 1px solid rgba(147, 180, 255, .38);
	color: #C7D9FF;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 15px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.rd-chip::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #93B4FF;
	flex: 0 0 auto;
}

/* --- Beeld --------------------------------------------------------------- */

.rd-app-beeld {
	position: relative;
	line-height: 0;
}

.rd-app-beeld img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 60px rgba(4, 14, 30, .55));
}

/* Los screenshot in een frame, voor de functiesecties */
.rd-app-kader {
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 46px rgba(15, 35, 66, .18);
	line-height: 0;
}

.rd-app-kader img { display: block; width: 100%; height: auto; }

/* --- Functieblokken ------------------------------------------------------ */

.rd-functie__nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--rd-lichtblauw);
	color: var(--rd-blauw);
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 14px;
}

/* --- Statuskaart --------------------------------------------------------- */

.rd-status {
	background: #fff;
	border: 1px solid var(--rd-rand);
	border-left: 4px solid var(--rd-blauw);
	border-radius: 12px;
	padding: 26px 28px;
}

/* --- Formulierblok: het visuele hoogtepunt ------------------------------- */

.rd-app-form {
	position: relative;
	overflow: hidden;
}

.rd-app-form::before {
	content: '';
	position: absolute;
	bottom: -55%;
	left: 50%;
	width: 950px;
	height: 950px;
	max-width: 150vw;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(26, 86, 219, .45) 0%, rgba(26, 86, 219, 0) 65%);
	pointer-events: none;
	z-index: 0;
}

.rd-app-form .container,
.rd-app-form .entry-content-wrapper { position: relative; z-index: 1; }

.rd-formkaart {
	background: #fff;
	border-radius: 18px;
	padding: 34px 32px;
	box-shadow: 0 26px 64px rgba(4, 14, 30, .38);
}

.rd-formkaart .forminator-button-submit,
.rd-formkaart button[type="submit"] {
	width: 100%;
	font-size: 1.02rem !important;
	padding: 15px 22px !important;
}

@media only screen and (max-width: 767px) {
	.rd-formkaart { padding: 26px 20px; }
}

/* --- Scroll-reveal ------------------------------------------------------- */

/* De hero valt hier bewust buiten: die moet meteen zichtbaar zijn.
   Zonder JavaScript blijft alles gewoon staan (geen verborgen inhoud):
   de klasse rd-reveal wordt pas door script toegevoegd. */
.rd-js .rd-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
	will-change: opacity, transform;
}

.rd-js .rd-reveal.rd-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rd-js .rd-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Grote variant van het browserframe: voor de case op de homepage, waar het
   beeld het bewijsmateriaal is en dus ruimte moet krijgen. */
.rd-browser--groot {
	max-width: 1000px;
	margin: 0 auto;
	transition: transform .25s ease, box-shadow .25s ease;
}

a:hover > .rd-browser--groot {
	transform: translateY(-4px);
	box-shadow: 0 30px 70px rgba(15, 35, 66, .3);
}

@media (prefers-reduced-motion: reduce) {
	.rd-browser--groot,
	a:hover > .rd-browser--groot { transition: none; transform: none; }
}

/* Witte knop voor op een donkere achtergrond (hero van de app-pagina) */
.rd-knop-wit {
	display: inline-block;
	background: #ffffff;
	color: #1E3A5F;
	border-radius: 8px;
	padding: 15px 28px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	box-shadow: 0 10px 26px rgba(4, 14, 30, .3);
}

.rd-knop-wit:hover,
.rd-knop-wit:focus {
	background: #EFF6FF;
	color: #1E3A5F;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(4, 14, 30, .38);
}

.rd-functie { padding: 6px 0; }
.rd-functie h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.rd-knop-wit,
	.rd-knop-wit:hover,
	.rd-knop-wit:focus { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Donkere secties, onafhankelijk van Enfolds per-pagina-CSS
   Enfold schrijft de achtergrondkleur van een sectie naar een eigen bestandje
   in uploads/dynamic_avia/avia_posts_css/. Op nieuw aangemaakte pagina's wordt
   dat bestand soms niet ingeladen, waardoor een donkere sectie wit werd en
   witte tekst onleesbaar. De kleur staat daarom hier, gekoppeld aan een eigen
   klasse. De "#top"-prefix wint van Enfolds enkele klasse-selector.
   -------------------------------------------------------------------------- */

#top .rd-hero-navy,
#top .rd-app-hero,
#top .rd-app-form {
	background-color: var(--rd-navy);
}

/* --------------------------------------------------------------------------
   11. Het aanmeldformulier op /app
   Forminator levert een eigen opmaak mee die niet meebeweegt met de huisstijl.
   We sturen hier alleen bij wat zichtbaar is: de kop op de donkere sectie, de
   verzendknop, en de volgorde van label / veld / hulptekst.
   -------------------------------------------------------------------------- */

/* Koppen op een donkere sectie moeten wit zijn.
   Enfold stylet koppen met "#top #wrap_all .all_colors h2" (2 id's, 1 class).
   Onze selector moet daar overheen, dus ook #wrap_all meenemen. Dit geldt voor
   elke sectie met een van onze navy-klassen, ook op /werk/ en /privacy/. */
html #top #wrap_all .rd-hero-navy .av-special-heading-tag,
html #top #wrap_all .rd-hero-navy h1,
html #top #wrap_all .rd-hero-navy h2,
html #top #wrap_all .rd-hero-navy h3,
html #top #wrap_all .rd-app-hero .av-special-heading-tag,
html #top #wrap_all .rd-app-hero h1,
html #top #wrap_all .rd-app-hero h2,
html #top #wrap_all .rd-app-form .av-special-heading-tag,
html #top #wrap_all .rd-app-form h2 {
	color: #ffffff;
}

/* Hulptekst rustig houden. De volgorde laten we met rust: Forminator nestelt
   de velden dieper dan het lijkt, en met flex-order raken label en invoerveld
   uit elkaar. De hulpteksten zelf zijn daarom kort gehouden of weggelaten. */
.rd-formkaart .forminator-description {
	font-size: .9rem;
	color: var(--rd-tekst-grijs);
	display: block;
	margin-bottom: 6px;
}

/* De verzendknop in de merkkleur. Forminator gebruikt een eigen klasse en een
   hoge specificiteit, vandaar de #top-prefix. */
html #top .rd-formkaart .forminator-button-submit,
html #top .rd-formkaart button.forminator-button {
	background: var(--rd-blauw);
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	width: 100%;
	padding: 16px 24px;
	font-size: 1.02rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, sans-serif;
	cursor: pointer;
	transition: background-color .15s ease;
}

html #top .rd-formkaart .forminator-button-submit:hover,
html #top .rd-formkaart button.forminator-button:hover {
	background: var(--rd-blauw-hover);
	color: #ffffff;
}

/* Het opt-in-vinkje wat ruimte geven en de tekst leesbaar houden */
.rd-formkaart .forminator-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rd-tekst);
	cursor: pointer;
}

.rd-formkaart .forminator-checkbox input[type="checkbox"] {
	margin-top: 3px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--rd-blauw);
}

.rd-formkaart .forminator-row { margin-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
	html #top .rd-formkaart .forminator-button-submit { transition: none; }
}

/* --------------------------------------------------------------------------
   12. Tekst op donkere secties
   Enfold zet de tekstkleur van een sectie in zijn per-pagina-CSS, en dat bestand
   kan ontbreken. Dan werd donkergrijze tekst op navy gezet: onleesbaar. Daarom
   hier vastgelegd, gekoppeld aan onze eigen navy-klassen.
   -------------------------------------------------------------------------- */

html #top #wrap_all .rd-hero-navy .avia_textblock,
html #top #wrap_all .rd-hero-navy .avia_textblock p,
html #top #wrap_all .rd-hero-navy .avia_textblock li,
html #top #wrap_all .rd-app-hero .avia_textblock,
html #top #wrap_all .rd-app-hero .avia_textblock p,
html #top #wrap_all .rd-app-form .avia_textblock,
html #top #wrap_all .rd-app-form .avia_textblock p {
	color: #ffffff;
}

/* Links op donkere secties licht houden, met genoeg contrast (5,6:1 op navy) */
html #top #wrap_all .rd-hero-navy .avia_textblock a,
html #top #wrap_all .rd-app-hero .avia_textblock a {
	color: #93B4FF;
}

html #top #wrap_all .rd-hero-navy .avia_textblock a:hover,
html #top #wrap_all .rd-app-hero .avia_textblock a:hover {
	color: #C7D9FF;
}

/* De contactknoppen op een donkere sectie omkeren: wit vlak, navy tekst */
.rd-hero-navy .rd-contactregel a {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .3);
	color: #ffffff;
}

.rd-hero-navy .rd-contactregel a:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--rd-navy);
}

/* --------------------------------------------------------------------------
   13. Stappen met een verbindingslijn
   -------------------------------------------------------------------------- */

.rd-stap { position: relative; }

.rd-stap__nummer {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--rd-blauw);
	color: #ffffff;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 18px;
	box-shadow: 0 6px 18px rgba(26, 86, 219, .28);
}

/* De stippellijn loopt van deze cirkel naar die van de volgende stap.
   Alleen op schermen waar de drie stappen naast elkaar staan; daaronder
   komen ze onder elkaar en zou een horizontale lijn nergens heen wijzen. */
@media only screen and (min-width: 990px) {
	.rd-stap::after {
		content: '';
		position: absolute;
		top: 27px;              /* halve hoogte van de cirkel */
		left: 68px;             /* net rechts van de cirkel */
		right: -46px;           /* door tot in de volgende kolom */
		height: 2px;
		background: repeating-linear-gradient(
			90deg,
			#C7D9FF 0 9px,
			transparent 9px 18px
		);
	}

	.rd-stap--laatste::after { display: none; }
}

.rd-stap h3 { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Knop onderaan een pakketkaart
   -------------------------------------------------------------------------- */

.rd-pakket__actie { margin-top: auto; padding-top: 8px; }

html #top .rd-pakket__knop,
html #top .avia_textblock .rd-pakket__knop { color: var(--rd-blauw); }

html #top .rd-pakket__knop:hover,
html #top .avia_textblock .rd-pakket__knop:hover { color: #ffffff; }

html #top .rd-pakket--uitgelicht .rd-pakket__knop,
html #top .avia_textblock .rd-pakket--uitgelicht .rd-pakket__knop { color: #ffffff; }

.rd-pakket__knop {
	display: block;
	width: 100%;
	text-align: center;
	background: #ffffff;
	color: var(--rd-blauw);
	border: 2px solid var(--rd-blauw);
	border-radius: 8px;
	padding: 13px 20px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.rd-pakket__knop:hover {
	background: var(--rd-blauw);
	color: #ffffff;
}

/* Op het aanbevolen pakket is de knop gevuld, zodat die het meest opvalt */
.rd-pakket--uitgelicht .rd-pakket__knop {
	background: var(--rd-blauw);
	color: #ffffff;
}

.rd-pakket--uitgelicht .rd-pakket__knop:hover {
	background: var(--rd-blauw-hover);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.rd-pakket__knop { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Losse knop, voor plekken waar we geen Enfold-knopelement gebruiken
   -------------------------------------------------------------------------- */

.rd-knop {
	display: inline-block;
	border-radius: 8px;
	padding: 14px 28px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--rd-blauw);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

/* De "html #top"-prefix is nodig: Enfold kleurt links binnen een tekstblok met
   de primaire themakleur, en dat is precies dezelfde blauw als de knopvulling.
   Zonder deze regel staat er blauwe tekst op een blauwe knop, oftewel niets. */
html #top .rd-knop--primair,
html #top .avia_textblock .rd-knop--primair {
	background: var(--rd-blauw);
	color: #ffffff;
}

html #top .rd-knop--primair:hover,
html #top .rd-knop--primair:focus,
html #top .avia_textblock .rd-knop--primair:hover,
html #top .avia_textblock .rd-knop--primair:focus {
	background: var(--rd-blauw-hover);
	border-color: var(--rd-blauw-hover);
	color: #ffffff;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.rd-knop, .rd-knop:hover { transition: none; transform: none; }
}

/* Omlijnde variant, voor acties die bewust minder gewicht moeten hebben dan
   de hoofdactie op de pagina (zoals het app-blok onderaan de homepage). */
html #top .rd-knop--licht,
html #top .avia_textblock .rd-knop--licht {
	background: transparent;
	color: var(--rd-blauw);
	border-color: var(--rd-blauw);
}

html #top .rd-knop--licht:hover,
html #top .rd-knop--licht:focus,
html #top .avia_textblock .rd-knop--licht:hover,
html #top .avia_textblock .rd-knop--licht:focus {
	background: var(--rd-blauw);
	color: #ffffff;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   17. Vragen op de FAQ-pagina
   Enfold pakt voor de balk van een vraag de tweede achtergrondkleur van de
   kleurset. Bij main_color staat die op navy, waardoor je donkerblauwe tekst
   op donkerblauw kreeg. We zetten de balk daarom zelf: licht met donkere
   tekst, en bij de geopende vraag navy met witte tekst.
   -------------------------------------------------------------------------- */

html #top #wrap_all .main_color .toggler,
html #top #wrap_all .alternate_color .toggler,
html #top #wrap_all .toggler {
	background-color: #ffffff;
	border: 1px solid var(--rd-rand);
	color: var(--rd-navy);
	font-weight: 600;
	border-radius: 10px;
	padding: 16px 20px 16px 46px;
	margin-bottom: 10px;
	transition: background-color .15s ease, border-color .15s ease;
}

html #top #wrap_all .main_color .toggler:hover,
html #top #wrap_all .alternate_color .toggler:hover,
html #top #wrap_all .toggler:hover {
	background-color: var(--rd-lichtblauw);
	border-color: #C7D9FF;
	color: var(--rd-navy);
}

/* De geopende vraag valt op met de merkkleur */
html #top #wrap_all .main_color .toggler.activeTitle,
html #top #wrap_all .alternate_color .toggler.activeTitle,
html #top #wrap_all .toggler.activeTitle {
	background-color: var(--rd-navy);
	border-color: var(--rd-navy);
	color: #ffffff;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}

/* Het plusje / kruisje in dezelfde kleur als de tekst */
html #top #wrap_all .toggler .toggle_icon .vert_icon,
html #top #wrap_all .toggler .toggle_icon .hor_icon {
	border-color: var(--rd-blauw);
}

html #top #wrap_all .toggler.activeTitle .toggle_icon .vert_icon,
html #top #wrap_all .toggler.activeTitle .toggle_icon .hor_icon {
	border-color: #ffffff;
}

/* Het antwoord eronder */
html #top #wrap_all .toggle_wrap .toggle_content {
	background: #ffffff;
	border: 1px solid var(--rd-rand);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	padding: 18px 20px 6px;
	margin-bottom: 10px;
	color: var(--rd-tekst);
}

@media (prefers-reduced-motion: reduce) {
	html #top .toggler { transition: none; }
}