/* ==========================================================================
   Astra terugduwen
   --------------------------------------------------------------------------
   Astra kleurt koppen, links en alinea's met selectors als .entry-content h2
   en .entry-content a. Die zijn specifieker dan onze eigen regels op h2 en a,
   dus in de donkere versie won Astra en kreeg je donkere tekst op een donkere
   achtergrond. Hieronder zetten we dat terug, netjes binnen .ar-pagina zodat
   de winkel, de community en de documentatie er niets van merken.

   Wordt geladen na ontwerp.css.
   ========================================================================== */

/* Achtergronden van Astra doorzichtig maken, anders zie je witte banen. */
body.ar-pagina,
.ar-pagina #page,
.ar-pagina #content,
.ar-pagina .site-content,
.ar-pagina .ast-container,
.ar-pagina .entry-content,
.ar-pagina .ast-separate-container,
.ar-pagina .ast-page-builder-template .entry-content {
	background: transparent;
}
body.ar-pagina { background: var(--bg); }

/* Tekstkleur binnen de inhoud. */
.ar-pagina .entry-content { color: var(--tekst); }
.ar-pagina .entry-content p { color: inherit; }

/* Koppen. Astra zet hier een eigen kleur op met hogere specificiteit. */
.ar-pagina .entry-content h1,
.ar-pagina .entry-content h2,
.ar-pagina .entry-content h3,
.ar-pagina .entry-content h4,
.ar-pagina .entry-content h5,
.ar-pagina .entry-content h6 {
	color: var(--tekst);
	font-family: 'Archivo', sans-serif;
	font-stretch: 84%;
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.06;
}

/* Links. Standaard erven ze de kleur van hun blok, knoppen krijgen hun eigen kleur terug. */
.ar-pagina .entry-content a {
	color: inherit;
	text-decoration: none;
}
.ar-pagina .entry-content a:hover { color: inherit; }

.ar-pagina .entry-content .btn { border: 1px solid transparent; }
.ar-pagina .entry-content .btn-p { background: var(--accent); color: #fff; }
.ar-pagina .entry-content .btn-p:hover { background: var(--accent-h); color: #fff; }
.ar-pagina .entry-content .btn-s { background: transparent; color: var(--tekst); border-color: var(--rand2); }
.ar-pagina .entry-content .btn-s:hover { border-color: var(--tekst); color: var(--tekst); }
.ar-pagina .entry-content .btn-v { background: var(--paneel2); color: var(--tekst); border-color: var(--rand); }
.ar-pagina .entry-content .rfnote a,
.ar-pagina .entry-content .klein a,
.ar-pagina .entry-content .rfok a { color: var(--accent); text-decoration: underline; }

/* Lijsten. Astra zet marges en opsommingstekens op ul en ol. */
.ar-pagina .entry-content ul,
.ar-pagina .entry-content ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ar-pagina .entry-content li { margin: 0; }

/* Formuliervelden. Astra geeft die een witte achtergrond en een eigen rand. */
.ar-pagina .entry-content input[type="text"],
.ar-pagina .entry-content input[type="email"],
.ar-pagina .entry-content input[type="url"],
.ar-pagina .entry-content input[type="tel"],
.ar-pagina .entry-content select,
.ar-pagina .entry-content textarea {
	background: var(--bg2);
	color: var(--tekst);
	border: 1px solid var(--rand2);
	border-radius: 9px;
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	box-shadow: none;
}
.ar-pagina .entry-content input:focus,
.ar-pagina .entry-content select:focus,
.ar-pagina .entry-content textarea:focus {
	border-color: var(--accent);
	background: var(--bg2);
	color: var(--tekst);
	box-shadow: none;
}
.ar-pagina .entry-content input::placeholder,
.ar-pagina .entry-content textarea::placeholder { color: var(--zachter); }

/* Astra kleurt de knop van een formulier. */
.ar-pagina .entry-content button,
.ar-pagina .entry-content input[type="submit"] {
	font-family: 'Archivo', sans-serif;
	border-radius: 9px;
}
.ar-pagina .entry-content button.btn-p,
.ar-pagina .entry-content button.btn-p:hover,
.ar-pagina .entry-content button.btn-p:focus {
	background: var(--accent);
	color: #fff;
	border: 0;
}

/* Afbeeldingen. Astra zet er soms een rand of schaduw omheen. */
.ar-pagina .entry-content img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}
.ar-pagina .entry-content .frame img,
.ar-pagina .entry-content .pshot img,
.ar-pagina .entry-content .mtegel img { border-radius: 0; }

/* Tabellen en overige resten. */
.ar-pagina .entry-content table { margin: 0; }

/* Astra's terug-naar-boven knop overlapt onze vaste balk op mobiel. */
@media (max-width: 1040px) {
	.ar-pagina #ast-scroll-top { bottom: 84px; }
}

/* Sommige plugins zetten hun eigen p-marge in onze blokken. */
.ar-pagina .entry-content .head p,
.ar-pagina .entry-content .stap p,
.ar-pagina .entry-content .kaart p,
.ar-pagina .entry-content .rij span,
.ar-pagina .entry-content .tcard p { margin-bottom: 0; }


/* ==========================================================================
   De licht/donker-schakelaar
   --------------------------------------------------------------------------
   Astra geeft elk button-element zijn eigen achtergrondkleur. Daardoor werd
   dit knopje een opvallende gekleurde pil. Hier zetten we hem terug naar wat
   hij moet zijn: een klein, rustig icoontje uiterst rechts in de balk.
   ========================================================================== */
nav .thema,
nav button.thema,
.ar-pagina nav .thema {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0;
	margin-left: 4px;
	border-radius: 8px;
	color: var(--zachter);
	opacity: .65;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity .18s, color .18s, background-color .18s;
	flex-shrink: 0;
	order: 99;
}

nav .thema:hover,
nav button.thema:hover,
.ar-pagina nav .thema:hover {
	background: none;
	color: var(--tekst);
	opacity: 1;
}

nav .thema:focus,
nav button.thema:focus {
	background: none;
	color: var(--tekst);
}

nav .thema .ico {
	width: 16px;
	height: 16px;
	stroke-width: 1.6;
}

/* Op mobiel staat hij links van het hamburgermenu. */
@media (max-width: 1040px) {
	nav .thema { order: 0; margin-left: auto; }
	.menu-btn { order: 100; }
}


/* ==========================================================================
   De knop die een uitklapmenu opent
   --------------------------------------------------------------------------
   In het menu is dit een echt button-element, omdat je hem dan met het
   toetsenbord kunt bedienen. Astra geeft elk button-element zijn eigen vorm
   en kleur, en dat werd hier een ronde gekleurde knop. Hieronder zetten we
   hem terug naar gewone menutekst.
   ========================================================================== */
nav .navlinks .top,
nav .navlinks button.top,
.ar-pagina nav .navlinks .top,
.ar-pagina nav .navlinks button.top {
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 22px 0;
	margin: 0;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	line-height: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-stretch: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

nav .navlinks .top:hover,
nav .navlinks .top:focus,
nav .navlinks button.top:hover,
nav .navlinks button.top:focus,
.ar-pagina nav .navlinks .top:hover,
.ar-pagina nav .navlinks .top:focus {
	background: none;
	background-color: transparent;
	box-shadow: none;
	border: 0;
	color: var(--tekst);
}

nav .navlinks .top .caret { width: 12px; height: 12px; }


/* ==========================================================================
   De knop die een uitklapmenu opent
   --------------------------------------------------------------------------
   In het menu is Platform geen link maar een button, want hij opent een
   paneel. Astra geeft elke button zijn eigen achtergrond en vorm, en dan zie
   je opeens twee gekleurde pillen in je menubalk staan. Hier zetten we hem
   terug naar gewone menutekst.
   ========================================================================== */
nav .navlinks .top,
nav .navlinks button.top,
.ar-pagina nav .navlinks .top {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 22px 0;
	margin: 0;
	min-height: 0;
	font-family: 'Archivo', sans-serif;
	font-stretch: 100%;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zacht);
	line-height: normal;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .18s ease;
}

nav .navlinks .top:hover,
nav .navlinks button.top:hover,
nav .navlinks .top:focus,
.ar-pagina nav .navlinks .top:hover {
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--tekst);
}

@media (max-width: 1040px) {
	nav .navlinks .top { padding: 13px 0; width: 100%; justify-content: space-between; }
}


/* ==========================================================================
   Knoppen: de tekstkleur vastzetten
   --------------------------------------------------------------------------
   Onze eigen regels kloppen, maar Astra kleurt links met .entry-content a en
   dat is specifieker dan .btn-p. Op pagina's waar de knop binnen de inhoud
   staat won Astra dus, en kreeg je donkere tekst op een blauwe knop.

   Hieronder zetten we het voor alle toestanden vast, met html body ervoor
   zodat de regel altijd zwaarder weegt. Ook :visited staat erbij, want een
   bezochte link krijgt anders alsnog een afwijkende kleur.
   ========================================================================== */

/* Blauwe knop: altijd witte tekst. */
html body .btn-p,
html body .btn-p:link,
html body .btn-p:visited,
html body .btn-p:hover,
html body .btn-p:focus,
html body .btn-p:active,
html body button.btn-p,
html body .entry-content .btn-p,
html body .entry-content .btn-p:hover,
html body .entry-content .btn-p:visited {
	background: var(--knop);
	color: #fff;
	border-color: transparent;
}
html body .btn-p:hover,
html body .entry-content .btn-p:hover { background: var(--knop-hover); color: #fff; }

/* Knop met alleen een rand: tekst in de gewone tekstkleur. */
html body .btn-s,
html body .btn-s:link,
html body .btn-s:visited,
html body .btn-s:hover,
html body .btn-s:focus,
html body .entry-content .btn-s,
html body .entry-content .btn-s:hover {
	background: transparent;
	color: var(--tekst);
	border-color: var(--rand2);
}
html body .btn-s:hover,
html body .entry-content .btn-s:hover { border-color: var(--tekst); color: var(--tekst); }

/* Zachte knop. */
html body .btn-v,
html body .btn-v:link,
html body .btn-v:visited,
html body .btn-v:hover,
html body .entry-content .btn-v,
html body .entry-content .btn-v:hover {
	background: var(--paneel2);
	color: var(--tekst);
	border-color: var(--rand);
}

/* Witte knop, gebruikt op donkere vlakken. Die heeft altijd donkere tekst,
   ongeacht of de site licht of donker staat. */
html body .btn-w,
html body .btn-w:link,
html body .btn-w:visited,
html body .btn-w:hover,
html body .entry-content .btn-w,
html body .entry-content .btn-w:hover {
	background: #fff;
	color: #0E1A33;
	border-color: transparent;
}

/* Tekstlink met pijl. */
html body .btn-g,
html body .btn-g:link,
html body .btn-g:visited,
html body .entry-content .btn-g {
	background: none;
	color: var(--accent);
	border: 0;
	padding: 0;
}
html body .btn-g:hover,
html body .entry-content .btn-g:hover { color: var(--tekst); }

/* Alles wat op een blauw vlak staat leest wit. */
html body .plan .best,
html body .mega-link:hover .di,
html body .fkaart:hover .eico,
html body a.fkaart:hover .eico,
html body .ecel:hover .eico { color: #fff; }

/* De knop in het aanmeldformulier is een echte button, en die pakt Astra
   standaard op met zijn eigen kleuren. */
html body .rfform button,
html body .rfform button:hover,
html body .rfform button:focus,
html body .entry-content .rfform button {
	background: var(--knop);
	color: #fff;
	border: 0;
}
html body .rfform button:hover { background: var(--knop-hover); }