/**
 * Stichting Evi Verbindt: de opmaak van de site.
 *
 * De maat waar alles op hangt is --swipe-rand: de zijmarge van elke sectie.
 * Die is minimaal 30 px en groeit mee zodat de inhoud gecentreerd op 1320 px
 * uitkomt. Zo lopen de achtergronden (foto's, gekleurde vlakken) van rand tot
 * rand, terwijl de tekst netjes binnen die 1320 blijft.
 *
 * Volgorde: variabelen, basis, gedeelde onderdelen, dan de secties van boven
 * naar beneden, en helemaal onderaan wat er op een klein scherm verandert.
 */

:root {
	--swipe-petrol:       #264A5E;
	--swipe-petrol-diep:  #1D3C4D;
	--swipe-petrol-balk:  #1E3D4E;
	--swipe-petrol-lijn:  #365160;
	--swipe-rood:         #E14757;
	--swipe-rood-diep:    #C13343;
	--swipe-groen:        #3DBEB0;
	--swipe-groen-diep:   #31A99C;
	--swipe-creme:        #FFFCF0;
	--swipe-creme-diep:   #F4F0E0;
	--swipe-wit:          #FFFFFF;

	--swipe-tekst:        #3D5560;
	--swipe-tekst-licht:  #5B7079;
	--swipe-tekst-zacht:  #7A8C96;
	/*
	 * De regel op donkere vlakken (Tim, 8 september): de koppen zijn creme, de
	 * lopende tekst is wit. Andersom dus dan het eerst stond. Creme is de warme
	 * kleur van het merk en die hoort bij de titel; de lopende tekst mag daar
	 * juist neutraal en helder tegenaf staan.
	 */
	--swipe-op-donker:    #FFFFFF;
	--swipe-op-donker-zacht: #9FAAB2;

	/* "Swipe euro" staat vooraan en levert alleen het euroteken, zie hieronder */
	--swipe-kop:   "Swipe euro", "Rubik", system-ui, sans-serif;
	--swipe-body:  "Nunito Sans", "Segoe UI", sans-serif;
	--swipe-hand:  "Sour Gummy", "Segoe UI", cursive;

	--swipe-inhoud: 1320px;
	--swipe-rand: max(30px, calc((100vw - var(--swipe-inhoud)) / 2));

	--swipe-rond: 30px;

	/*
	 * Het dunne lijntje op een licht vlak, bijvoorbeeld tussen de punten van een
	 * sponsorpakket (Tim, 8 september). Geen dood grijs maar de petrol van het
	 * merk op lage dekking, zodat het lijntje bij de kaart hoort en niet los
	 * ligt. Op donker doet --swipe-petrol-lijn hetzelfde werk in de teller.
	 */
	--swipe-lijn-zacht: rgba(38, 74, 94, 0.11);

	--swipe-schaduw: 0 10px 22px -14px rgba(8, 24, 34, 0.26);
	--swipe-schaduw-licht: 0 10px 24px -16px rgba(38, 74, 94, 0.22);
}

/*
 * Het euroteken van Rubik heeft maar één streepje (opgemerkt door Veronic,
 * 7 september). Deze regel haalt alleen dat ene teken uit Nunito Sans; al het
 * andere komt uit het lettertype dat erachter in de rij staat. Zo klopt het in
 * één keer overal waar een bedrag staat: de teller, de prijzen bij het
 * programma en de sponsorpakketten.
 *
 * Verdwijnt dit bestand ooit bij Google, dan is het euroteken weer dat van
 * Rubik en verandert er verder niets.
 */
@font-face {
	font-family: "Swipe euro";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_upHZPYsZ51Q42ptCprt1R-s.woff2) format("woff2");
	unicode-range: U+20AC;
}

/* ------------------------------------------------------------------ basis */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--swipe-creme);
	font-family: var(--swipe-body);
	font-weight: 300;
	color: var(--swipe-petrol);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--swipe-kop);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}

/* 60 px op een breed scherm, op verzoek van Veronic (8 september) */
h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; }
h2 { font-size: clamp(27px, 2.8vw, 36px); line-height: 1.12; }
h3 { font-size: 20px; line-height: 1.25; }

p { margin: 0; }
img { max-width: 100%; height: auto; }

a {
	color: var(--swipe-rood);
	text-decoration: none;
}

/*
 * De bron van de vreemde kleuren, en hiermee is hij weg.
 *
 * Hello Elementor zet in `assets/css/reset.css` twee dingen die door de hele
 * site heen doorwerken:
 *
 *   a:active, a:hover                      color: #336   (een blauwpaars)
 *   [type=button], [type=submit], button   color: #c36
 *   button:hover, button:focus             color: #fff
 *
 * Die selectors zijn zwak, maar sterker dan een losse `a { color }`. Alles
 * waarvoor wij zelf geen hover opschrijven valt er dus op terug: een knop, een
 * filter, een accordeontitel in de FAQ. Dat is precies het paars dat steeds
 * ergens anders opdook (Tim, 9 september).
 *
 * Hieronder staat dezelfde selector, maar dan van ons en later geladen, dus die
 * wint. Een element houdt daarmee gewoon zijn eigen kleur, en al onze eigen
 * hoverregels zijn specifieker en werken dus onveranderd door.
 */
a:hover,
a:active {
	color: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
button:hover,
button:focus,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	color: inherit;
}

/*
 * Alleen kale links krijgen deze kleur bij hover (Tim, 8 september). Stond
 * hier als `a:hover` en gold dus voor elke link zonder eigen hoverregel: een
 * creme link in de voet, een groene knop, een menu-item, allemaal sloegen ze
 * om naar donkerrood. Dat is de kleur die op de filterknoppen en in het menu
 * uit het niets opdook.
 *
 * Alles met een eigen klasse bepaalt nu zijn eigen kleur en zijn eigen hover.
 */
a:not([class]):hover { color: var(--swipe-rood-diep); }

/* Wie met het toetsenbord navigeert moet zien waar hij is. */
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--swipe-groen);
	outline-offset: 3px;
}

.swipe-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.swipe-overslaan {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 22px;
	background: var(--swipe-petrol);
	color: var(--swipe-creme);
	border-radius: 0 0 12px 0;
}

.swipe-overslaan:focus {
	left: 0;
	top: 0;
}

/* ------------------------------------------------------- gedeelde stukjes */

/* het handgeschreven regeltje boven een titel */
.swipe-hand {
	font-family: var(--swipe-hand);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1;
	color: var(--swipe-groen);
}

.swipe-hand--rood { color: var(--swipe-rood); }

/* de datumregel in de hero */
.swipe-datum {
	font-family: var(--swipe-kop);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--swipe-groen);
}

.swipe-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
}

.swipe-knop {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 16px 30px;
	border-radius: 999px;
	font-family: var(--swipe-kop);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Subtiel: een tikje omhoog, een zachte schaduw, en net iets donkerder. */
/*
 * Onze knoppen zijn bijna allemaal links; alleen "toon de rest", de filters en
 * "dit pakket kiezen" zijn een echte <button>. Zo'n element krijgt van de
 * browser en van Elementor een eigen rand, achtergrond en hoverkleur mee, en die
 * zijn sterker dan onze klassen: vandaar het dunne randje en het paars van
 * Elementor zodra je eroverheen ging (Tim, 8 september).
 *
 * Deze regel zet dat allemaal terug op wat wij zelf bepalen. Het geldt alleen
 * voor onze eigen knopklassen, dus de knoppen van plugins blijven met rust.
 */
button.swipe-knop,
button.swipe-filter,
button.swipe-pakket__kies {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

/*
 * Hetzelfde geldt voor de twee knoppen die eruitzien als een link: "dit pakket
 * kiezen" en de filters. Ook dat zijn <button>-elementen, dus ook daar vult
 * Elementor een eigen kleur in zodra wij die staat niet zelf vastzetten (Tim,
 * 9 september).
 */
button.swipe-pakket__kies,
button.swipe-pakket__kies:focus,
button.swipe-pakket__kies:active {
	background: none;
	color: var(--swipe-groen-diep);
}

button.swipe-pakket__kies:hover {
	background: none;
	color: var(--swipe-groen);
}

button.swipe-filter,
button.swipe-filter:focus,
button.swipe-filter:active {
	background: var(--swipe-creme-diep);
	color: var(--swipe-tekst-licht);
}

button.swipe-filter:hover {
	background: var(--swipe-creme-diep);
	color: var(--swipe-petrol);
}

button.swipe-filter--kop,
button.swipe-filter--kop:hover,
button.swipe-filter--kop:focus,
button.swipe-filter--kop:active {
	background: var(--swipe-petrol);
	color: var(--swipe-creme);
}

button.swipe-filters__opties .swipe-filter,
.swipe-filters__opties button.swipe-filter,
.swipe-filters__opties button.swipe-filter:hover,
.swipe-filters__opties button.swipe-filter:focus,
.swipe-filters__opties button.swipe-filter:active {
	background: transparent;
	color: var(--swipe-tekst-licht);
}

.swipe-filters__opties button.swipe-filter.is-aan {
	background: transparent;
	color: var(--swipe-petrol);
}

/* en bij hover of focus houdt hij zijn eigen kleur, niet die van het thema */
button.swipe-knop--groen,
button.swipe-knop--groen:hover,
button.swipe-knop--groen:focus,
button.swipe-knop--groen:active {
	background: var(--swipe-groen);
	color: var(--swipe-wit);
}

button.swipe-knop--rood,
button.swipe-knop--rood:hover,
button.swipe-knop--rood:focus,
button.swipe-knop--rood:active {
	background: var(--swipe-rood);
	color: var(--swipe-wit);
}

/*
 * Bij hover komt een knop iets omhoog en krijgt hij een schaduw eronder,
 * verder niets. Hier stond ook brightness(0.96), en dat maakte elke knop op
 * de hele site een tint donkerder; dat wilde Tim niet (8 september). Wie een
 * kleurwissel wil, zet die per knopsoort.
 */
.swipe-knop:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -8px rgba(8, 24, 34, 0.3);
}

.swipe-knop--rood { background: var(--swipe-rood); color: var(--swipe-wit); }
.swipe-knop--rood:hover { color: var(--swipe-wit); }

.swipe-knop--groen { background: var(--swipe-groen); color: var(--swipe-wit); }
.swipe-knop--groen:hover { color: var(--swipe-wit); }

/* de tekst in dezelfde groene kleur als het balletje ervoor (Tim, 8 september) */
/* wit met een groene rand, voor sponsoren (Tim, 8 september) */
.swipe-knop--groen-rand {
	border: 2px solid var(--swipe-groen);
	background: var(--swipe-wit);
	color: var(--swipe-groen-diep);
}

.swipe-knop--groen-rand:hover { border-color: var(--swipe-groen-diep); color: var(--swipe-groen-diep); }
.swipe-knop--groen-rand .swipe-bal { color: var(--swipe-groen); }

/* donkerblauw met witte letters (Tim, 8 september) */
.swipe-knop--petrol { background: var(--swipe-petrol); color: var(--swipe-wit); }
.swipe-knop--petrol:hover { background: var(--swipe-petrol-diep); color: var(--swipe-wit); }

.swipe-knop--wit { background: var(--swipe-wit); color: var(--swipe-groen); }
.swipe-knop--wit:hover { color: var(--swipe-groen-diep); }
.swipe-knop--wit .swipe-bal { color: var(--swipe-groen); }

.swipe-knop--open {
	border: 2px solid #C6CDD2;
	color: var(--swipe-petrol);
	padding: 14px 28px;
}

.swipe-knop--open:hover { color: var(--swipe-petrol); border-color: var(--swipe-petrol); }

.swipe-hart { color: var(--swipe-rood); flex: none; }

/*
 * Het hartje op een doneerknop wenkt: elke zeven seconden een klein klopje, de
 * rest van de tijd staat het stil.
 *
 * De selector hangt aan de knop en niet meer aan de link (hersteld 9 september).
 * Hier hing hij aan een link met het woord doneren erin, en dat werkte zolang
 * de doneerlink /doneren?actie=1184 was. Toen die naar de actiepagina ging
 * (/groepsacties/padel4daagse-...) matchte er niets meer en stond het hartje
 * stil, zonder dat er iets aan deze regel veranderd was. Een selector die aan
 * een url hangt breekt dus zodra die url wijzigt; aan de knop is hij veilig.
 */
@media (prefers-reduced-motion: no-preference) {
	.swipe-knop--rood .swipe-hart,
	.swipe-menuknop--doneren .swipe-hart {
		transform-origin: 50% 60%;
		animation: swipe-wenk 7s ease-in-out 4s infinite;
	}
}

/*
 * Het klopje zelf duurt 1,4 seconde en de stilte ervoor vult de rest. Wijzigt de
 * duur, herbereken dan mee: 100 - (1,4 / duur * 100).
 */
@keyframes swipe-wenk {
	0%, 80%, 100% { transform: none; }
	84%  { transform: scale(1.22) rotate(-8deg); }
	89%  { transform: scale(0.97) rotate(6deg); }
	93%  { transform: scale(1.1) rotate(-3deg); }
	97%  { transform: scale(1) rotate(1deg); }
}

/*
 * Ga je met de muis over de knop, dan klopt het hartje meteen even. Korter en
 * kleiner dan de wenk hierboven: dit is een antwoord op wat de bezoeker doet,
 * geen herhaling van dezelfde beweging. Zolang de muis erop staat vervangt deze
 * animatie de wenk, daarna pakt die zijn ritme weer op.
 */
@media (prefers-reduced-motion: no-preference) {
	.swipe-knop--rood:hover .swipe-hart,
	.swipe-menuknop--doneren:hover .swipe-hart {
		animation: swipe-klopje 0.7s ease-in-out;
	}
}

@keyframes swipe-klopje {
	0%   { transform: none; }
	32%  { transform: scale(1.16) rotate(-5deg); }
	62%  { transform: scale(0.98) rotate(4deg); }
	84%  { transform: scale(1.05) rotate(-2deg); }
	100% { transform: none; }
}
.swipe-bal { flex: none; color: var(--swipe-groen); }
/*
 * Een icoon in een knop volgt de tekstkleur van die knop. Expliciet, want
 * anders erft hij de kleur van de balk waar de knop toevallig in staat.
 */
.swipe-knop--rood .swipe-hart,
.swipe-knop--rood .swipe-bal,
.swipe-knop--groen .swipe-hart,
.swipe-knop--groen .swipe-bal { color: var(--swipe-wit); }

.swipe-knop--wit .swipe-hart { color: var(--swipe-rood); }
.swipe-knop--open .swipe-hart { color: var(--swipe-rood); }

/* de foto's in hartvorm */
.swipe-hart-foto {
	position: absolute;
	overflow: hidden;
	clip-path: url(#swipe-hartvorm);
}

.swipe-hart-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.swipe-harten { position: relative; flex-shrink: 0; }

/* ----------------------------------------------------------- kop van de site */

.swipe-kop {
	position: sticky;
	top: 0;
	z-index: 20;
	transition: background 0.25s ease, box-shadow 0.25s ease;

	/*
	 * De kop ligt over de herofoto heen. De overlap is precies zijn eigen
	 * hoogte, anders blijft er een streepje achtergrond zichtbaar tussen de
	 * balk en de foto. Die hoogte meet swipe-menu.js op; 110 is de terugval
	 * voor het moment voordat het script draait.
	 */
	margin-bottom: calc(-1 * var(--swipe-kop-hoogte, 110px));
}

/*
 * Is iemand ingelogd, dan staat de adminbalk van WordPress bovenaan vast en
 * schuift de kop daaronder weg. Op een smal scherm scrollt die balk gewoon mee,
 * dus daar hoeft het niet.
 */
body.admin-bar .swipe-kop { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .swipe-kop { top: 0; }

	/*
	 * En de adminbalk zelf gaat op een telefoon weg. Hij is niet gemaakt voor een
	 * smal scherm: het menu met de gebruikersnaam steekt er rechts uit, tot ruim
	 * 500 px bij een scherm van 390. Chrome op Android rekt de pagina dan op tot
	 * die breedte en zoomt uit, en dan staat de site er ineens als een brede
	 * weergave met twee kolommen bij. Gemeten: die uitstekende naam is het enige
	 * wat buiten het scherm valt.
	 *
	 * Alleen ingelogde beheerders zien die balk, dus alleen wij hadden er last
	 * van, maar het maakt beoordelen op een telefoon onmogelijk. De marge die
	 * WordPress voor de balk reserveert moet mee weg.
	 */
	#wpadminbar { display: none; }
	html { margin-top: 0 !important; }
}

/*
 * Voorbij de hero draait de kop om: creme achtergrond, blauw logo en menu.
 *
 * De schaduw hoort alleen hier, want dan ligt de kop echt over de pagina heen
 * en moet je zien dat hij zweeft. Hij is lichter dan hij was (Tim, 8 september):
 * de standaardschaduw viel te veel op.
 */
.swipe-kop--om,
.swipe-kop--menu-open {
	background: var(--swipe-creme);
	box-shadow: 0 4px 14px -12px rgba(8, 24, 34, 0.22);
}


.swipe-kop--om .swipe-kop__logo,
.swipe-kop--om .swipe-kop__logo:hover,
.swipe-kop--menu-open .swipe-kop__logo,
.swipe-kop--menu-open .swipe-kop__logo:hover { color: var(--swipe-petrol); }
.swipe-kop--om .swipe-kop__menu > a:not(.swipe-knop) { color: var(--swipe-petrol); }
.swipe-kop--om .swipe-kop__menu > a:not(.swipe-knop):hover { color: var(--swipe-rood); }


.swipe-kop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 26px var(--swipe-rand);
	transition: padding 0.25s ease;
}

/*
 * Voorbij de hero krimpt de kop tot ongeveer driekwart: de ruimte boven en
 * onder gaat van 26 naar 12 px, het logo blijft even groot. Samen met het logo
 * van 58 px komt de balk dan op 82 in plaats van 110 px, dus hij neemt minder
 * van de pagina in beslag zodra je aan het lezen bent.
 */
.swipe-kop--om .swipe-kop__binnen {
	padding-top: 12px;
	padding-bottom: 12px;
}

/*
 * Het logo is een link naar de voorpagina, dus zonder deze hover-regel pakt hij
 * de rode linkkleur van de site en kleurt het hele woordmerk rood zodra je er
 * met de muis overheen gaat. Het logo houdt zijn eigen kleur, in beide standen
 * van de kop.
 */
.swipe-kop__logo,
.swipe-kop__logo:hover { display: block; color: var(--swipe-creme); }
.swipe-logo { display: block; width: auto; }

.swipe-kop__menu {
	display: flex;
	align-items: center;
	gap: 38px;
}

.swipe-kop__menu > a:not(.swipe-knop) {
	font-size: 16px;
	font-weight: 600;
	color: #F7F3E6;
}

.swipe-kop__menu > a:not(.swipe-knop):hover { color: var(--swipe-groen); }
.swipe-kop__menu .swipe-knop { font-size: 16px; padding: 13px 24px; }

/*
 * Hello Elementor kleurt in zijn reset ELKE button magenta zodra je erover gaat
 * of erop klikt:
 *
 *     button:focus, button:hover { background-color: #c36; color: #fff }
 *
 * Die selector is specifieker dan een losse klasse, dus onze eigen achtergrond
 * verloor het bij hover. Daarom zetten we hem hier voor onze knoppen expliciet
 * uit; per knop bepalen we daarna zelf de kleuren.
 */
.swipe-kop__schakelaar,
.swipe-kop__schakelaar:hover,
.swipe-kop__schakelaar:focus,
.swipe-menuknop,
.swipe-menuknop:hover,
.swipe-menuknop:focus {
	border: 0;
	background: none;
	color: inherit;
}

/*
 * Drie rode streepjes, zonder vlak eromheen. Bij een open menu vouwen ze tot
 * een kruisje: het bovenste en het onderste draaien over elkaar heen, het
 * middelste verdwijnt.
 */
.swipe-kop__schakelaar {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;

	/* het geheel draait een kwartslag mee terwijl de streepjes vouwen */
	transition: transform 0.3s cubic-bezier(.34, .8, .36, 1);
}

.swipe-kop__schakelaar[aria-expanded="true"] { transform: rotate(90deg); }

.swipe-kop__streepjes,
.swipe-kop__streepjes::before,
.swipe-kop__streepjes::after {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	border-radius: 2px;
	background: var(--swipe-rood);
	transition: transform 0.22s ease, opacity 0.16s ease;
}

.swipe-kop__streepjes::before,
.swipe-kop__streepjes::after {
	content: "";
	position: relative;
}

.swipe-kop__streepjes::before { top: -7px; }
.swipe-kop__streepjes::after { top: 5px; }

/* open: het kruisje */
.swipe-kop__schakelaar[aria-expanded="true"] .swipe-kop__streepjes {
	background: transparent;
}

.swipe-kop__schakelaar[aria-expanded="true"] .swipe-kop__streepjes::before {
	top: 0;
	transform: rotate(45deg);
}

.swipe-kop__schakelaar[aria-expanded="true"] .swipe-kop__streepjes::after {
	top: -2px;
	transform: rotate(-45deg);
}

.swipe-kop__klein {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 10px var(--swipe-rand) 24px;
	background: var(--swipe-petrol-diep);
}

.swipe-kop__klein a {
	padding: 12px 0;
	font-size: 17px;
	font-weight: 600;
	color: #F7F3E6;
}

/*
 * Onder de menuregels twee knoppen die er anders uitzien dan de links erboven,
 * zodat ze eruit springen: doneren met een rode rand, en de vraag aan de
 * chatbot als een volle groene knop. Allebei over de volle breedte en
 * gecentreerd.
 */
.swipe-kop__klein .swipe-menuknop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 14px 22px;
	border: 0;
	border-radius: 999px;
	font-family: var(--swipe-kop);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

.swipe-kop__klein .swipe-menuknop:hover { transform: translateY(-1px); }

/* doneren: alleen een rood lijntje eromheen */
.swipe-kop__klein .swipe-menuknop--doneren,
.swipe-kop__klein .swipe-menuknop--doneren:hover,
.swipe-kop__klein .swipe-menuknop--doneren:focus {
	background: none;
	border: 2px solid var(--swipe-rood);
	color: var(--swipe-rood);
}

.swipe-kop__klein .swipe-menuknop--doneren .swipe-hart { color: var(--swipe-rood); }

/* de vraag aan de chatbot: vol groen met witte tekst */
.swipe-kop__klein .swipe-menuknop--vraag,
.swipe-kop__klein .swipe-menuknop--vraag:focus {
	background: var(--swipe-groen);
	color: var(--swipe-wit);
}

.swipe-kop__klein .swipe-menuknop--vraag:hover {
	background: var(--swipe-groen-diep);
	color: var(--swipe-wit);
}
.swipe-kop__klein .swipe-menuknop--vraag svg { color: var(--swipe-wit); }

/* -------------------------------------------------------------------- hero */

.swipe-hero {
	position: relative;

	/*
	 * Een pixel onder de balk door. De balk is 40,5 px hoog (dat volgt uit de
	 * tekstgrootte), dus hij eindigt op een halve pixel. De browser tekent hem
	 * dan tot pixel 72 en de hero vanaf 73, en op die tussenrij zie je de creme
	 * achtergrond van de pagina: een streepje dat in de layout niet bestaat en
	 * dat je met meten niet vindt, want het gat is nul. Deze pixel overlap dekt
	 * elke afronding af en valt niet op, want beide vlakken zijn petrol.
	 */
	margin-top: -1px;

	/*
	 * 75% van het scherm, maar nooit hoger dan 780 px. Het maximum is er zodat
	 * de hero op een groot scherm niet alsnog uitdijt.
	 *
	 * Deze hoogte bepaalt of de donatiebalk eronder meteen in beeld staat. Hij
	 * hangt er met een negatieve marge overheen, dus samen met die marge moet
	 * het hele blok binnen het scherm passen; anders mist de bezoeker de teller
	 * die oploopt. Verander je dit, kijk dan ook naar .swipe-teller.
	 */
	min-height: min(75vh, 780px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.swipe-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
}

.swipe-hero__waas {
	position: absolute;
	inset: 0;
	background: var(--swipe-petrol-diep);
	opacity: 0.72;
}

.swipe-hero__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: clamp(110px, 10vw, 150px) var(--swipe-rand) clamp(90px, 9vw, 130px);
	max-width: calc(880px + 2 * var(--swipe-rand));
	color: var(--swipe-creme);
}

/*
 * Wit wordt creme op alles wat donker is (feedback Veronic, 8 september). De
 * lopende tekst hieronder is de uitzondering: die is juist wit, want creme op
 * een foto met een waas erover geeft te weinig contrast.
 */
.swipe-hero h1 { color: var(--swipe-creme); }

.swipe-hero__tekst {
	font-size: 18px;
	line-height: 1.6;
	color: var(--swipe-wit);
	max-width: 620px;
}

/* ------------------------------------------------------------- ons verhaal */

.swipe-verhaal {
	position: relative;
	background: var(--swipe-creme);
	padding: clamp(90px, 10vw, 150px) var(--swipe-rand) clamp(90px, 11vw, 160px);
	overflow: hidden;
}

.swipe-verhaal__binnen {
	display: flex;
	align-items: center;
	gap: 80px;
}

.swipe-verhaal__tekst {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 620px;
}

/* het handgeschreven regeltje hoort dicht op de titel, zoals bij het programma */
.swipe-hand + h1,
.swipe-hand + h2 { margin-top: -8px; }

/*
 * Overal veertien pixels tussen het regeltje en de titel (Tim, 9 september). Dat
 * is de afstand uit "ons verhaal" op de homepage; elders was het 0, 2, 8, 16 of
 * zelfs 26, en dat viel op zodra je twee secties onder elkaar zag.
 *
 * Waarom het per blok moet: elke kop staat in een flexblok met een eigen gap, en
 * die gap komt bovenop de marge hierboven. De som is dus steeds
 * marge = 14 - de gap van dat blok. Verander je ergens een gap, pas dan ook de
 * regel hieronder aan.
 */
.swipe-programma__kop .swipe-hand + h2 { margin-top: -2px; }  /* gap 16 */
.swipe-bekend__tekst .swipe-hand + h2 { margin-top: -10px; }  /* gap 24 */
.swipe-sponsor__kop .swipe-hand + h2 { margin-top: -2px; }    /* gap 16 */
.swipe-clinics__kop .swipe-hand + h2 { margin-top: -2px; }    /* gap 16 */
.swipe-helpen__tekst .swipe-hand + h2 { margin-top: -20px; }  /* gap 34 */

/* deze twee staan niet in een flexblok maar onder elkaar, dus daar doet de marge
   van het regeltje zelf het werk */
.swipe-vraagevi__tekst .swipe-hand,
.swipe-contact__vragen .swipe-hand { margin: 0 0 14px; }

/*
 * Elke alinea in het verhaal is even groot, even donker en even ruim gezet (Tim,
 * 9 september). Hiervoor stond de inleiding op --swipe-tekst en stonden de
 * alinea's eronder op --swipe-tekst-licht, met ook nog een andere regelafstand.
 * Onder elkaar las dat als twee soorten tekst, terwijl het gewoon het verhaal van
 * Cindy is dat doorloopt.
 *
 * De uitzondering blijft het handgeschreven regeltje erboven: dat is geen alinea
 * maar een opschrift, en deze selector is sterker dan .swipe-hand--rood.
 */
.swipe-verhaal__tekst p:not(.swipe-hand),
.swipe-inleiding { font-size: 18px; line-height: 1.68; color: var(--swipe-tekst); }

.swipe-quote {
	margin: 10px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Het citaat past op twee regels en staat schuin (Tim, 9 september).
 *
 * De maat volgt de tekstkolom en niet het venster, want die twee lopen hier ver
 * uiteen: naast de tekst staan de foto's van 620px plus 80px tussenruimte, dus de
 * kolom is 100vw min 760px, tot hij bij 620px stopt. Op een laptop van 1250px
 * blijft er zo een kolom van nog geen 500px over terwijl 3.4vw gewoon 42px
 * rekent, en juist daar zakte "nabijheid." naar een derde regel.
 *
 * De factor 0,083 komt uit de langste regel die passen moet,
 * "onbetaalbaars: nabijheid.". Die is in dit lettertype ruim elf keer de
 * letterhoogte breed. Een hogere factor geeft een grotere letter en daarmee
 * eerder weer een derde regel.
 *
 * Onder 980px staat de tekst op volle breedte en klopt deze rekensom niet meer;
 * daar staat een eigen maat, onderaan bij de smalle schermen.
 */
.swipe-quote .swipe-hand {
	font-size: clamp(26px, calc((100vw - 760px) * 0.083), 36px);
	font-style: italic;
	line-height: 1.08;
	color: var(--swipe-rood);
	max-width: 560px;
}

.swipe-quote cite {
	font-style: normal;
	font-size: 17px;
	font-weight: 700;
	color: var(--swipe-tekst-licht);
}

.swipe-harten--verhaal { width: 620px; height: 600px; }

.swipe-hart-foto--groot { top: 0; right: 8px; width: 430px; height: 470px; transform: rotate(-5deg); }
.swipe-hart-foto--links { bottom: 84px; left: 34px; width: 300px; height: 328px; transform: rotate(9deg); }
.swipe-hart-foto--onder { bottom: 0; right: 88px; width: 224px; height: 245px; transform: rotate(-12deg); }

/* --------------------------------------------------------------- programma */

.swipe-programma { position: relative; }

.swipe-programma__achtergrond {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.swipe-programma__achtergrond img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

.swipe-programma__kleur {
	position: absolute;
	inset: 0;
	background: var(--swipe-petrol);
	mix-blend-mode: multiply;
}

.swipe-programma__verloop {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 52, 68, 0.92) 0%, rgba(30, 61, 78, 0.72) 38%, rgba(30, 61, 78, 0.58) 100%);
}

.swipe-programma__inhoud {
	position: relative;
	padding: clamp(80px, 9vw, 130px) var(--swipe-rand) 0;
}

.swipe-programma__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
	margin-bottom: 64px;
}

.swipe-programma__kop > div {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
}

.swipe-programma h2 { color: var(--swipe-creme); }
.swipe-programma__tekst { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--swipe-op-donker); }
.swipe-programma__tekst:last-child { margin-bottom: 0; }

/*
 * De legenda onder de programmatekst: de regel die uitlegt wat Starter,
 * Intermediate, Expert, D en DD betekenen (Tim, 8 september). Hij staat als
 * eigen alinea en de uitgelegde termen zijn groen, want dit gaat over padel.
 *
 * De term is een <b> en geen eigen klasse: de opmaak wordt in secties.php om
 * het woord gezet, en zo blijft het ook goed als iemand de regel in het beheer
 * aanpast.
 */
.swipe-legenda b { font-weight: 600; color: var(--swipe-groen); }
/* de knop lijnt bovenaan uit, op de hoogte van de titel (Tim, 8 september) */
.swipe-programma__kop .swipe-knop { align-self: flex-start; white-space: nowrap; }

/* de vier dagkaarten hangen over de onderrand in de volgende sectie */
.swipe-dagen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	margin: 54px 0 -150px;
	position: relative;
	z-index: 2;
}

.swipe-dag {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px;
	border-radius: var(--swipe-rond);
	background: var(--swipe-wit);
	box-shadow: var(--swipe-schaduw);
}

/*
 * De vier dagkaarten zijn gelijk (Tim, 8 september). De zondag was petrol met
 * een rode datumcirkel; nu wijst alleen het lintje die dag aan. De klasse
 * blijft in de HTML staan, zodat er later weer iets aan te hangen is.
 */

.swipe-dag__kop {
	display: flex;
	align-items: center;
	gap: 14px;
}

.swipe-dag__datum {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--swipe-creme-diep);
	font-family: var(--swipe-kop);
	font-size: 26px;
	font-weight: 600;
	color: var(--swipe-petrol);
}


.swipe-dag__naam { display: flex; flex-direction: column; }
.swipe-dag__naam strong { font-family: var(--swipe-kop); font-size: 22px; font-weight: 600; color: var(--swipe-petrol); }
.swipe-dag__naam small { font-size: 15px; color: var(--swipe-tekst-zacht); }


.swipe-dag__lijst {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swipe-regel {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.swipe-regel .swipe-bal { margin-top: 4px; }
.swipe-regel > span { display: flex; flex-direction: column; gap: 2px; }

/*
 * Een programmaregel waar je je voor kunt inschrijven is een link, maar mag er
 * niet als een link uitzien: dezelfde tekst, alleen een tikje opzij bij hover
 * en het balletje dat oplicht. Wat vol zit is geen link.
 */
.swipe-regel__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
	transition: transform 0.16s ease;
}

.swipe-regel__link:hover { color: inherit; transform: translateX(2px); }
.swipe-regel__link:hover .swipe-regel__naam { color: var(--swipe-rood); }

.swipe-regel__prijs { color: var(--swipe-tekst-zacht); }

.swipe-regel__naam { font-size: 16px; font-weight: 600; color: var(--swipe-tekst); }
.swipe-regel__naam--rood { color: var(--swipe-rood); }
.swipe-regel__naam--groen { color: var(--swipe-groen); }
.swipe-regel__tijd { font-size: 15px; color: var(--swipe-tekst-zacht); }


.swipe-regel--vol .swipe-regel__naam { color: #8A9BA3; }

.swipe-dag__notitie {
	font-size: 15px;
	line-height: 1.5;
	color: var(--swipe-tekst-zacht);
}

/* --------------------------------------------------------- zondag, bekende namen */

.swipe-bekend {
	position: relative;
	background: var(--swipe-wit);
	padding: clamp(190px, 18vw, 260px) var(--swipe-rand) clamp(90px, 9vw, 130px);
	overflow: hidden;
}

/* het grote zachte hart op de achtergrond */
.swipe-bekend::before {
	content: "";
	position: absolute;
	bottom: -230px;
	left: -140px;
	width: 560px;
	height: 610px;
	background: #FBEEF0;
	transform: rotate(-24deg);
	clip-path: url(#swipe-hartvorm);
}

.swipe-bekend__binnen {
	position: relative;
	display: flex;
	align-items: center;
	gap: 90px;
}

.swipe-bekend__tekst {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 620px;
}

.swipe-bekend__tekst > p:not(.swipe-hand) {
	font-size: 18px;
	line-height: 1.65;
	color: var(--swipe-tekst-licht);
}

.swipe-bekend .swipe-knop { align-self: flex-start; margin-top: 8px; font-size: 19px; padding: 18px 32px; }

/*
 * Hoeveel er nog kan, meteen onder de titel (Tim, 8 september). Groen, want dit
 * gaat over meedoen; is het vol, dan rood. De regel staat dicht op de titel,
 * anders leest hij als het begin van de alinea eronder.
 */
.swipe-bekend__tekst > p.swipe-bekend__plekken {
	/* dezelfde maat als de lopende tekst, alleen groen en zwaarder (Tim,
	   8 september); met negatieve marges omdat de kolom er zelf al 24 px
	   tussenruimte omheen zet en het anders los van de titel komt te staan */
	margin: -12px 0 -10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--swipe-groen-diep);
}

.swipe-bekend__tekst > p.swipe-bekend__plekken--vol { color: var(--swipe-rood); }

.swipe-harten--bekend { width: 520px; height: 430px; }

/*
 * Deze drie zijn rond en niet hartvormig, in tegenstelling tot die bij ons
 * verhaal. Twee redenen: het hart heeft bovenin een inkeping precies waar bij
 * een portret het hoofd zit, en het hart staat in deze site voor Evi en het
 * Huis. Bekende gasten die een middag meespelen dragen die lading niet, en door
 * de vorm overal te gebruiken slijt hij.
 *
 * Rond mag hier ook gewoon: een cirkel is de gebruikelijke vorm voor een
 * portret en snijdt voorspelbaar, dus een ruimere foto blijft heel.
 */
.swipe-harten--bekend .swipe-hart-foto {
	clip-path: none;
	border-radius: 50%;
}

/*
 * Geen drie gelijke cirkels: dat wordt een rijtje. Elk portret is een ovaal met
 * een eigen verhouding en een eigen draaiing, zodat de groep leeft. De eerste en
 * de derde staan rechtop, de tweede ligt juist iets breder; samen met de draaiing
 * leest het als drie losse foto's die neergelegd zijn en niet als een raster.
 */
.swipe-hart-foto--een  { top: 0;     left: 18px;  width: 250px; height: 288px; transform: rotate(-14deg); }
.swipe-hart-foto--twee { top: 34px;  left: 250px; width: 216px; height: 196px; transform: rotate(11deg); }
.swipe-hart-foto--drie { top: 168px; left: 112px; width: 232px; height: 262px; transform: rotate(-4deg); }

/* ----------------------------------------------------------------- sponsor */

.swipe-sponsor {
	position: relative;
	background: var(--swipe-petrol-diep);
	padding: clamp(85px, 9.5vw, 140px) var(--swipe-rand);
	overflow: hidden;
}

/*
 * De fotoachtergrond onder de sponsorsectie (feedback Veronic, 8 september).
 * Zelfde opbouw als bij het programma: de foto, er een petrol vlak overheen dat
 * de kleuren naar de huisstijl trekt, en een verloop dat de bovenkant het
 * donkerst maakt. Het moet donker blijven, want hier staan creme vlakken met
 * logo's op en witte tekst.
 */
.swipe-sponsor__achtergrond {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.swipe-sponsor__achtergrond img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/*
 * De foto mocht meer doorkomen (Tim, 8 september): met de oude waarden was er
 * bijna niets van te zien en had de sectie net zo goed een egaal vlak kunnen
 * zijn. Donker genoeg blijft het wel, want de creme logovlakken en de witte
 * tekst moeten er los op staan.
 */
.swipe-sponsor__kleur {
	position: absolute;
	inset: 0;
	background: var(--swipe-petrol-diep);
	mix-blend-mode: multiply;
	opacity: 0.7;
}

.swipe-sponsor__verloop {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 52, 68, 0.78) 0%, rgba(29, 60, 77, 0.6) 50%, rgba(29, 60, 77, 0.78) 100%);
}

/*
 * Het poppetje op de achtergrond beweegt mee met de pagina, maar langzamer dan
 * de rest. Daardoor lijkt het verder weg te staan. De verschuiving komt uit
 * swipe-menu.js en zet alleen --swipe-poppetje-y.
 *
 * De scheve stand staat bewust in de losse eigenschappen rotate en translate en
 * niet in transform: zo houdt de uithaal hieronder transform voor zichzelf en
 * botsen ze niet.
 */
.swipe-poppetje--sponsor {
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 620px;
	height: auto;
	opacity: 0.15;
	rotate: 8deg;
	translate: 0 var(--swipe-poppetje-y, 0px);
	transform-origin: 34% 96%;
	will-change: translate;
}

/*
 * De uithaal: één keer zwaaien met het racket zodra de sectie goed in beeld
 * staat. Het draaipunt ligt bij de voeten, dus hij haalt uit vanuit zijn stand
 * en veert daarna een paar keer kleiner terug tot hij stilstaat.
 */
.swipe-poppetje--slaat {
	animation: swipe-uithaal 1.05s cubic-bezier(.22, .68, .3, 1);
}

@keyframes swipe-uithaal {
	0%   { transform: rotate(0deg); }
	26%  { transform: rotate(-9deg); }
	52%  { transform: rotate(7deg); }
	74%  { transform: rotate(-3deg); }
	89%  { transform: rotate(1.5deg); }
	100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.swipe-poppetje--sponsor { translate: none; }
	.swipe-poppetje--slaat { animation: none; }
}

.swipe-sponsor__binnen { position: relative; }

/* de ruimte onder de kop is kleiner sinds de knop eronder staat: die brengt
   zijn eigen marge mee (Tim, 8 september) */
.swipe-sponsor__kop {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
	margin-bottom: 34px;
}

.swipe-sponsor h2 { color: var(--swipe-creme); }
.swipe-sponsor__kop > p:not(.swipe-hand) { font-size: 18px; line-height: 1.6; color: var(--swipe-op-donker); }

/*
 * De drie pakketten staan als gelijke kaarten naast elkaar (Tim, 8 september).
 * Eerder was de duurste groen en de andere twee wit; dat gaf de indruk van een
 * voorkeur die er niet is. Nu zijn ze alle drie wit en even hoog, en wijst
 * alleen het lintje "meest gekozen" een trede aan.
 */
.swipe-pakketten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	align-items: stretch;
	margin-bottom: 34px;
}

.swipe-pakket {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px;
	border-radius: var(--swipe-rond);
	background: var(--swipe-wit);
	box-shadow: 0 12px 26px -16px rgba(8, 28, 40, 0.34);
}

/*
 * De pakketnaam staat als labeltje boven het bedrag (Tim, 8 september). Hij was
 * een gewone kaarttitel van 22 px, maar nu er een bedrag op de kaart staat kan
 * er maar een van beide het zwaarst zijn, en dat is het bedrag.
 *
 * De maten zijn die van het labeltje dat de site al heeft: het lintje en het
 * labeltje op een clinic-kaart staan allebei op 13 px, 700 en 0.05em. Zo komt
 * er geen derde variant bij.
 */
.swipe-pakket__naam {
	font-family: var(--swipe-kop);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--swipe-groen-diep);
}

/*
 * Het bedrag is letterlijk de typografie van het grote bedrag in de teller:
 * Rubik 44 px, 600, regelhoogte 1, cijfers op vaste breedte. Twee bedragen op
 * dezelfde pagina horen er hetzelfde uit te zien.
 *
 * Het euroteken komt uit "Swipe euro" (zie boven in dit bestand), dus ook hier
 * staat het teken met twee streepjes.
 */
.swipe-pakket__bedrag {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	font-family: var(--swipe-kop);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--swipe-petrol);
	font-variant-numeric: tabular-nums;
}

/*
 * "vanaf" hoort bij het bedrag maar mag het niet overstemmen. De bovenste trede
 * heeft geen vaste prijs: boven de 2.500 is alles bespreekbaar (Cindy,
 * 8 september).
 */
.swipe-pakket__vanaf {
	font-family: var(--swipe-body);
	font-size: 17px;
	font-weight: 400;
	color: var(--swipe-tekst-zacht);
}

/*
 * Tussen de punten staat een heel dun lijntje (Tim, 8 september), net als de
 * scheiding tussen de drie kolommen van de teller. De ruimte tussen de regels
 * is daarom padding en geen gap: met een gap zou het lijntje midden in de lege
 * ruimte hangen in plaats van twee regels te scheiden.
 *
 * Het eerste punt krijgt er geen, anders staat er een streep vlak onder het
 * bedrag en wordt de kaart een tabel.
 */
.swipe-pakket ul {
	display: flex;
	flex-direction: column;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.swipe-pakket li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 11px 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--swipe-tekst-licht);
	border-top: 1px solid var(--swipe-lijn-zacht);
}

.swipe-pakket li:first-child { padding-top: 0; border-top: 0; }

/*
 * De voet staat onderaan de kaart geplakt (margin-top: auto), zodat de drie
 * voeten op een lijn liggen ook als de lijsten verschillen in lengte.
 *
 * Waarom deze regel er staat: met een bedrag erboven leest een kaart als een
 * prijs. Dit zet hem terug in zijn context, op de plek waar iemand hem leest.
 */
/*
 * De voet van de kaart: eerst kiezen, daaronder waar het geld heen gaat.
 * Dit blok wordt naar beneden geduwd en de drie kaarten zijn even hoog, dus
 * beide regels staan bij alle drie op dezelfde lijn, ook al is de ene
 * opsomming langer dan de andere (Tim, 8 september).
 */
.swipe-pakket__onder {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: auto;
	padding-top: 24px;
}

/* kleiner dan de rest, zodat de regel op een kaart op één regel past */
.swipe-pakket__voet {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--swipe-tekst-zacht);
}

.swipe-pakket__voet .swipe-hart { flex: none; color: var(--swipe-rood); }

/* de knop staat nu boven de kaarten, zie secties.php */
.swipe-sponsor__actie { margin-bottom: 46px; }

/*
 * Het vinkje voor elk punt in een pakket; stond hier eerst als padelballetje.
 * flex: none is nodig, anders knijpt het vinkje mee met de tekst ernaast en
 * krijg je bij een lange regel een kleiner vinkje dan bij een korte (gezien
 * door Tim, 8 september). Ze horen allemaal even groot te zijn.
 */
.swipe-pakket li .swipe-vink { flex: none; margin-top: 3px; color: var(--swipe-groen); }

/* de regel die naar de vorige trede verwijst ("Alles uit ...") */
.swipe-pakket li.swipe-pakket__meer { color: var(--swipe-groen-diep); font-weight: 600; }

/*
 * Het lintje. Eén vorm voor de hele pagina (feedback Veronic, punten 10, 11 en
 * 23): op de zondagkaart in het programma, onderaan bij de bekende namen en op
 * de middelste sponsortrede. Groen, want alle drie gaan ze over meedoen.
 *
 * De teksten zijn een eerste invulling en mogen wisselen.
 */
.swipe-ribbon {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--swipe-groen);
	font-family: var(--swipe-kop);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--swipe-wit);
	white-space: nowrap;
}

/* op een kaart hangt het lintje rechtsboven over de rand, zonder schaduw
   (Tim, 8 september) */
.swipe-ribbon--kaart {
	position: absolute;
	top: -13px;
	right: 22px;
}

/* De sponsorwand: drie rijen, van groot naar klein. De logo's staan in een vlak
   omdat de sectie donker is en een bedrijfslogo bijna altijd voor een lichte
   ondergrond is gemaakt. Crème en niet wit: dat is de kleurregel uit de sessie
   met Veronic, wit op donker wordt overal crème. De hoogte verschilt per rij en
   niet de breedte, want logo's lopen van vierkant tot heel breed en op gelijke
   hoogte ogen ze even zwaar. */

.swipe-sponsorwand { margin-top: 64px; }

/*
 * De kop boven de logo's is een volwaardige kop geworden, even groot als
 * "Word sponsor van de Padel4Daagse" en gecentreerd (Tim, 8 september). Hij
 * stond hier als klein kapitaaltje en verdween daardoor tussen de logo's.
 */
.swipe-sponsorwand__kop {
	margin: 0 0 34px;
	font-family: var(--swipe-kop);
	font-size: clamp(27px, 2.8vw, 36px);
	line-height: 1.12;
	font-weight: 600;
	text-align: center;
	color: var(--swipe-creme);
}

.swipe-sponsorwand__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

.swipe-sponsorwand__rij:last-child { margin-bottom: 0; }

/*
 * De hoofdsponsors staan stil en even breed naast elkaar, de rest schuift
 * eronder door (keuze van Tim, 8 september). Met auto-fit klopt de rij ook als
 * er twee of vier hoofdsponsors zijn.
 */
.swipe-sponsorwand__rij--groot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	/* ruimer uit elkaar, en de vlakken even groot (Tim, 8 september) */
	gap: 40px;
}

.swipe-sponsorwand__rij--groot .swipe-sponsorwand__plek { height: 132px; }

/*
 * De doorlopende band. De rij logo's staat er twee keer in en schuift precies
 * de halve lengte op; op dat punt begint de animatie opnieuw en staat het beeld
 * exact waar het begon, dus je ziet geen sprong. De helft van de tussenruimte
 * moet er nog af, anders schuift die ruimte mee op.
 *
 * De duur komt uit de shortcode en hangt af van het aantal logo's.
 */
/*
 * Geen verloop aan de zijkanten (Tim, 8 september): de logo's vervaagden daar
 * en een half doorzichtig bedrijfslogo ziet er slordig uit. Ze lopen nu gewoon
 * de rand uit.
 */
.swipe-band {
	position: relative;
	overflow: hidden;
	padding: 4px 0;
}

.swipe-band__spoor {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	animation: swipe-schuif var(--swipe-band-duur, 46s) linear infinite;
}

/*
 * De band staat stil tot hij bijna in beeld komt (Tim, 9 september). Hij begon
 * bij het laden van de pagina, en dat is bijna nooit het moment waarop je kijkt:
 * na het scrollen naar de sponsoren was het eerste logo al links verdwenen.
 *
 * --wacht zet het javascript erop bij het laden en --loopt komt erbij zodra de
 * band in de buurt van het scherm is. Draait er geen javascript, dan blijven
 * allebei de klassen weg en loopt de animatie gewoon vanaf het begin, zoals
 * hiervoor.
 */
.swipe-band--wacht .swipe-band__spoor { animation-play-state: paused; }
.swipe-band--wacht.swipe-band--loopt .swipe-band__spoor { animation-play-state: running; }

/* stilzetten om een logo te lezen of een link te pakken. Deze regel staat met
   opzet onder de twee hierboven: hij is even sterk, dus de laatste wint, en
   stilstaan onder de muis hoort altijd voor te gaan */
.swipe-band:hover .swipe-band__spoor,
.swipe-band:focus-within .swipe-band__spoor { animation-play-state: paused; }

/* de helft van de tussenruimte moet eraf, dus de helft van gap: 40px */
@keyframes swipe-schuif {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 20px)); }
}

.swipe-band .swipe-sponsorwand__plek {
	flex: none;
	width: 200px;
	height: 100px;
}

@media (prefers-reduced-motion: reduce) {
	.swipe-band__spoor {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}

	/* zonder beweging is de tweede reeks dubbelop */
	.swipe-band__spoor > [aria-hidden="true"] { display: none; }
}

/*
 * Een logo vult zijn vlak tot vier pixels van de rand (Tim, 8 september). Het
 * hing eerder aan een vaste max-height per rij, en dat pakt per logo anders
 * uit: een breed logo bleef laag omdat de breedte hem tegenhield, terwijl een
 * vierkant logo op veertig pixels bleef staan in een vlak van honderd. Nu
 * redeneert het vanuit de rand.
 *
 * De vier pixels zitten in de padding en niet in een marge op het beeld, zodat
 * de afronding van het vlak eromheen intact blijft.
 */
.swipe-sponsorwand__plek {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Tien pixels lucht rondom (Tim, 8 september). Het stond op vijf, en toen
	 * raakte de inhoud van de logo's bijna de rand. Technisch klopte dat, want
	 * het beeld bleef netjes binnen zijn vlak, maar het óógt als uitsteken: de
	 * meeste logobestanden hebben zelf geen marge, dus de letters lopen tot de
	 * uiterste pixel door. De lucht moet dus uit het vlak komen.
	 */
	padding: 10px;
	/*
	 * Een kleinere afronding dan de rest van de site. Nu het logo tot vlak bij de
	 * rand komt, snijdt een afronding van 30 px op een vlak van 100 px hoog de
	 * hoeken van het logo eraf: het vlak is dan bijna een pil en het logo is
	 * rechthoekig. Met 16 px blijft het vlak duidelijk afgerond.
	 */
	border-radius: 16px;
	/* half doorzichtig wit in plaats van vol creme (Tim, 8 september): de foto
	   erachter komt zo mee en het vlak legt zich niet als een blok op de sectie */
	background: rgba(255, 255, 255, 0.77);
	box-shadow: 0 10px 22px -16px rgba(8, 28, 40, 0.34);
	text-decoration: none;
}

/*
 * Het beeld pakt de hele binnenruimte en past zichzelf daarin: object-fit
 * contain houdt de verhouding en laat het groeien tot de eerste rand die het
 * raakt, of dat nu de zijkant of de onderkant is.
 *
 * De bovengrens tegen uitrekken staat als max-width en max-height in pixels op
 * het beeld zelf, gezet door swipe_sponsor_plek() in secties.php. Die kan hier
 * niet staan, want hij verschilt per logo.
 */
.swipe-sponsorwand__plek img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* een SVG heeft geen eigen afmetingen meegekregen, dus die krijgt ze hier */
.swipe-sponsorwand__svg { width: 100%; height: auto; }

.swipe-sponsorwand__naam {
	font-weight: 600;
	line-height: 1.3;
	color: var(--swipe-tekst-licht);
	text-align: center;
}

/*
 * Het verschil tussen de rijen zit nu in de hoogte van het vlak en niet meer in
 * een max-height op het beeld (Tim, 8 september). Een hoofdsponsor krijgt een
 * vlak van 132 px en vult dat, een kleine sponsor krijgt een lager vlak. Het
 * onderscheid blijft dus, maar elk logo haalt binnen zijn eigen vlak het
 * maximum in plaats van te blijven steken op een vaste hoogte.
 *
 * Een naam zonder logo is gewoon tekst en houdt zijn eigen maat per rij.
 */
/* het vlak van een hoofdsponsor is groter, dus daar mag naar verhouding ook meer
   lucht omheen (Tim, 8 september) */
.swipe-sponsorwand__rij--groot .swipe-sponsorwand__plek { padding: 16px; }
.swipe-sponsorwand__rij--groot .swipe-sponsorwand__naam { font-size: 24px; }

.swipe-sponsorwand__rij--midden .swipe-sponsorwand__plek { height: 100px; }
.swipe-sponsorwand__rij--midden .swipe-sponsorwand__naam { font-size: 18px; }

.swipe-sponsorwand__rij--klein .swipe-sponsorwand__plek { height: 76px; }
.swipe-sponsorwand__rij--klein .swipe-sponsorwand__naam { font-size: 15px; }

/* ----------------------------------------------------------------- clinics */

.swipe-clinics {
	background: var(--swipe-creme);
	padding: clamp(85px, 9.5vw, 140px) var(--swipe-rand);
}

.swipe-clinics__kop {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
	margin-bottom: 54px;
}

.swipe-clinics__kop > p:not(.swipe-hand) { font-size: 18px; line-height: 1.6; color: var(--swipe-tekst-licht); }

/*
 * De filterbalk boven de onderdelen (feedback Veronic, punt 14). Drie groepen
 * met per groep één actieve knop; het filteren zelf staat in swipe-menu.js.
 *
 * Een kaart die wegvalt krijgt het hidden-attribuut, en display: flex wint
 * daarvan. Vandaar de regel hieronder: zonder die regel blijven verborgen
 * kaarten gewoon staan.
 */
.swipe-clinic[hidden],
.swipe-onderdeel[hidden] { display: none !important; }

/*
 * De drie knoppen zijn even breed: grid met automatische kolommen op 1fr, en de
 * balk zelf op max-content. Daardoor bepaalt de breedste knop de maat van alle
 * drie (Tim, 8 september).
 */
.swipe-filters {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	margin-bottom: 44px;
}

/*
 * Onder de 640 px staan de drie knoppen onder elkaar over de volle breedte.
 * Zonder dit is de balk breder dan het scherm (1fr heeft auto als minimum, dus
 * een knop krimpt niet onder zijn tekstbreedte) en schuift de hele pagina mee.
 * De meting staat in _output\mobiel-overflow-fix.css.
 */
@media (max-width: 640px) {
	.swipe-filters {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		width: 100%;
	}
}

/* zodat een kolom sowieso mag krimpen, ook als er ooit een vierde filter bij komt */
.swipe-filters__groep { position: relative; min-width: 0; }

/*
 * De opties hangen recht onder hun eigen knop en staan onder elkaar. Ze sluiten
 * aan op de knop, dus de bovenkant is recht; alleen onderaan is hij rond. Twee
 * kleuren, verder niets: wit vlak, donkerblauw wat aan staat.
 */
.swipe-filters__opties {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 100%;
	padding: 6px;
	border-radius: 0 0 18px 18px;
	background: var(--swipe-wit);
	box-shadow: 0 16px 34px -18px rgba(8, 28, 40, 0.55);
}

.swipe-filters__opties[hidden] { display: none !important; }

.swipe-filters__opties .swipe-filter {
	padding: 3px 14px;
	font-size: 14px;
	background: transparent;
	text-align: left;
	white-space: nowrap;
}

.swipe-filter {
	padding: 9px 17px;
	border: 0;
	border-radius: 999px;
	background: var(--swipe-creme-diep);
	font-family: var(--swipe-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--swipe-tekst-licht);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.swipe-filter:hover { color: var(--swipe-petrol); }

/*
 * Wat aan staat krijgt geen eigen vlak (Tim, 8 september). In het menu staat de
 * huidige keuze gewoon als tekst, alleen zwaarder en donkerder dan de rest; hij
 * staat immers al op de knop erboven.
 */
.swipe-filters__opties .swipe-filter.is-aan {
	background: transparent;
	font-weight: 700;
	color: var(--swipe-petrol);
}

/*
 * De knop vult zijn kolom helemaal, anders zijn de kolommen wel even breed maar
 * de knoppen niet en lijkt het of er alleen meer ruimte tussen zit (Tim,
 * 8 september).
 */
.swipe-filter--kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: var(--swipe-petrol);
	color: var(--swipe-creme);
}

/*
 * De kop houdt in elke toestand dezelfde kleur (Tim, 8 september). Hij sloeg
 * om zodra de muis eroverheen ging op weg naar de opties, en dat gaf een
 * kleur die nergens bij hoort.
 */
.swipe-filter--kop:hover,
.swipe-filter--kop:focus,
.swipe-filter--kop:focus-visible,
.swipe-filter--kop.is-open {
	background: var(--swipe-petrol);
	color: var(--swipe-creme);
}
/* alleen het pijltje is groen, de knop blijft donkerblauw (Tim, 8 september) */
.swipe-filter--kop svg { color: var(--swipe-groen); transition: transform 0.18s ease; }
.swipe-filter--kop.is-open svg { transform: rotate(180deg); }

/* de knop onder het raster, midden onder de kaarten */
.swipe-meer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.swipe-meer [hidden] { display: none !important; }

.swipe-filters__leeg {
	margin: 34px 0 0;
	font-size: 17px;
	color: var(--swipe-tekst-licht);
}

/*
 * De pillen onder de titel van een kaart: de dag, en waar het van toepassing is
 * het niveau en een los label. Crème vlak met de petrol van het programma erin
 * (Tim, 8 september). Wat een onderdeel niet heeft, staat er ook niet.
 */
.swipe-pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.swipe-pil {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	/* half doorzichtig groen, met de gewone donkere letter erin (Tim, 8 september) */
	background: rgba(61, 190, 176, 0.5);
	font-size: 11px;
	font-weight: 600;
	color: var(--swipe-petrol);
}

/* de klasse erbij, anders wint de algemene regel voor p in een clinic-kaart */
.swipe-clinic__tekst > p.swipe-clinic__tijd {
	margin: 0;
	font-size: 16px;
	color: var(--swipe-tekst-zacht);
}

.swipe-onderdeel__zonder { font-size: 15px; color: var(--swipe-tekst-zacht); }

.swipe-clinics__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	align-items: stretch;
}

.swipe-clinic {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 28px;
	overflow: hidden;
	background: var(--swipe-wit);
	box-shadow: var(--swipe-schaduw-licht);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swipe-clinic:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -18px rgba(38, 74, 94, 0.3);
}

/*
 * De hele kaart is de knop. Het onzichtbare vlak van de inschrijflink ligt over
 * de kaart heen, dus je hoeft niet precies het woord "Inschrijven" te raken:
 * overal klikken werkt, en de kaart komt als geheel omhoog.
 *
 * Zit een clinic vol, dan staat er geen link en gebeurt er ook niets.
 */
.swipe-clinic__onder a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Het pijltje loopt mee zodra je ergens op de kaart bent, niet pas op de link. */
/* de link is groen, dus blijft hij dat ook als je over de kaart gaat; hier
   stond donkerrood, en dat gaf op groen een kleur die nergens bij hoort
   (Tim, 8 september) */
.swipe-clinic:hover .swipe-clinic__onder a {
	gap: 12px;
	color: var(--swipe-groen);
}

.swipe-clinic__beeld { position: relative; }

.swipe-clinic__beeld img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
}

/*
 * Het labeltje op de foto ("voor gevorderden") is geen knop, dus het hoeft er
 * ook niet als een knop uit te zien: doorschijnend, kleiner en dichter tegen de
 * hoek, zodat het de foto niet opeet. Genoeg dekking om leesbaar te blijven op
 * een druk beeld.
 */
.swipe-clinic__label {
	position: absolute;
	left: 12px;
	top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	/*
	 * Een vol vlak met witte letters (Tim, 8 september). Het was doorzichtig
	 * wit met donkere tekst, en daarmee ging het op in de foto erachter; juist
	 * bij een aantal vrije plaatsen wil je in een oogopslag zien dat er nog wat
	 * kan. Groen hoort bij meedoen, dus dat is de grondkleur.
	 */
	background: var(--swipe-groen);
	font-size: 14px;
	font-weight: 700;
	color: var(--swipe-wit);
}

/* wat vol zit is rood, met dezelfde witte letter */
.swipe-clinic__label--vol { background: var(--swipe-rood); color: var(--swipe-wit); }

.swipe-clinic__tekst {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	padding: 26px 32px 28px;
}

.swipe-clinic__titel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.swipe-clinic__niveau {
	font-family: var(--swipe-kop);
	font-size: 15px;
	font-weight: 600;
	color: var(--swipe-groen-diep);
	white-space: nowrap;
}

.swipe-clinic__tekst > p { font-size: 16px; line-height: 1.6; color: var(--swipe-tekst-licht); }

.swipe-clinic__onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

/* inschrijven is groen, want dat gaat over meedoen (Tim, 8 september) */
.swipe-clinic__onder a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--swipe-kop);
	font-size: 16px;
	font-weight: 600;
	color: var(--swipe-groen-diep);
	transition: gap 0.18s ease, color 0.18s ease;
}

.swipe-clinic__onder a:hover { gap: 12px; color: var(--swipe-groen); }

/* --------------------------------------------------------- vier manieren om te helpen */

.swipe-helpen {
	display: flex;
	align-items: stretch;
	background: var(--swipe-wit);
}

.swipe-helpen__foto {
	flex: 0 0 44%;
	position: relative;
	overflow: hidden;
}

.swipe-helpen__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swipe-helpen__tekst {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 34px;
	padding: clamp(80px, 9vw, 130px) var(--swipe-rand) clamp(80px, 9vw, 130px) 70px;
}

.swipe-manieren {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: manier;
}

.swipe-manieren li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/*
 * Het nummerballetje is het gewone padelballetje van de site, alleen groter en
 * met het cijfer erop (Tim, 8 september). Het was hiervoor een groene schijf met
 * de naad als achtergrondplaatje; dat leek erop maar was het niet, en het liep
 * uit de pas zodra het balletje elders veranderde.
 *
 * De svg ligt eronder en het cijfer erover, allebei in dezelfde ruimte. De
 * verhouding van de bal is 20,6 bij 22,5, dus 34 breed is 37 hoog.
 */
.swipe-manier__nummer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 32px;
	margin-top: 2px;
	flex-shrink: 0;
	color: var(--swipe-groen);
}

/*
 * De viewBox van het balletje sluit precies om de tekening heen, dus links en
 * rechts raakte de rand de vorm en werd hij afgesneden (Tim, 8 september). Bij
 * de kleine balletjes valt dat niet op, op deze maat wel. Met overflow: visible
 * tekent hij gewoon door tot buiten die uitsnede.
 */
.swipe-manier__nummer .swipe-bal {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/*
 * Het cijfer stond wit met een schaduw, en dat maakte de bal onherkenbaar
 * (Tim, 8 september): de naden van een padelbal zijn zelf wit, dus een wit
 * cijfer loopt er dwars doorheen en samen worden het vlekjes. Petrol staat er
 * los van, laat de naden heel en leest beter op mint.
 *
 * Zonder schaduw, want die was er alleen om het witte cijfer leesbaar te
 * houden.
 */

/*
 * De naad van de padelbal zit in de achtergrond van het balletje, niet in een
 * laagje erboven. Dat is het hele punt: een achtergrond ligt altijd achter de
 * tekst, dus de lijn loopt onder het cijfer door in plaats van er dwars
 * doorheen. Daarmee is er ook geen masker meer nodig dat het midden leegmaakt.
 *
 * De dekking zit in fill-opacity in de svg zelf, want een losse achtergrondlaag
 * kun je niet apart doorzichtig maken.
 */

/*
 * De balletjes vallen op volgorde binnen en stuiteren uit, zoals een bal die je
 * laat vallen: hard neer, een flinke terugsprong, een kleintje, en dan ligt hij
 * stil. Ze wachten tot het rijtje in beeld komt.
 *
 * --wacht zet ze alvast onzichtbaar, meteen bij het laden. Zonder dat zie je ze
 * eerst staan en dan terugspringen om te gaan vallen. Zonder javascript komt
 * geen van beide klassen er en staan ze er gewoon.
 */
.swipe-manieren--wacht .swipe-manier__nummer { opacity: 0; }

.swipe-manieren--stuiter .swipe-manier__nummer {
	animation: swipe-stuiter 1.15s both;
}

.swipe-manieren--stuiter li:nth-child(2) .swipe-manier__nummer { animation-delay: 0.16s; }
.swipe-manieren--stuiter li:nth-child(3) .swipe-manier__nummer { animation-delay: 0.32s; }
.swipe-manieren--stuiter li:nth-child(4) .swipe-manier__nummer { animation-delay: 0.48s; }

@keyframes swipe-stuiter {
	0%   { opacity: 0; transform: translateY(-88px); animation-timing-function: cubic-bezier(.5, 0, .9, .55); }
	10%  { opacity: 1; }
	32%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
	50%  { transform: translateY(-21px); animation-timing-function: cubic-bezier(.5, 0, .9, .55); }
	66%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
	78%  { transform: translateY(-7px); animation-timing-function: cubic-bezier(.5, 0, .9, .55); }
	89%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
	95%  { transform: translateY(-2px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.swipe-manieren--wacht .swipe-manier__nummer { opacity: 1; }
	.swipe-manieren--stuiter .swipe-manier__nummer { animation: none; }
}

.swipe-manier__tekst { display: flex; flex-direction: column; gap: 5px; }
.swipe-manier__tekst strong { font-family: var(--swipe-kop); font-size: 19px; font-weight: 600; color: var(--swipe-petrol); }
.swipe-manier__tekst span { font-size: 16px; line-height: 1.6; color: var(--swipe-tekst-licht); }

/*
 * Het woord in de zin dat je verder helpt (Tim, 8 september). Rood en
 * onderstreept, want het moet als link te herkennen zijn zonder dat er een
 * losse regel onder de tekst komt.
 */
/* geen streep en niet vet: een gewone link (Tim, 8 september) */
.swipe-manier__woord { color: var(--swipe-rood); }

.swipe-manier__woord:hover { color: var(--swipe-rood-diep); }

/* bij "vertel het door" staat alleen het icoontje */
/*
 * Dezelfde opmaak als de linkwoorden in de zinnen erboven (Tim, 9 september):
 * dezelfde maat, dezelfde rode kleur en niet vetter dan de rest. Alleen het
 * icoontje ervoor onderscheidt hem.
 */
.swipe-manier__insta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--swipe-rood);
	transition: color 0.18s ease;
}

.swipe-manier__insta:hover { color: var(--swipe-rood-diep); }

/*
 * De link onder elke manier: dezelfde vorm als "Inschrijven" op de kaarten, maar
 * dan groen, want dit gaat over meedoen. De deelknop is een button en geen link,
 * dus die moet de knopopmaak van de browser kwijt.
 */
.swipe-manier__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	margin-top: 3px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--swipe-kop);
	font-size: 15px;
	font-weight: 600;
	color: var(--swipe-groen-diep);
	cursor: pointer;
	transition: gap 0.18s ease, color 0.18s ease;
}

.swipe-manier__link:hover { gap: 12px; color: var(--swipe-groen); }

/* de twee links onder het rijtje, naast elkaar */
.swipe-helpen__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin-top: 10px;
}

/*
 * De knop onder een sponsorkaart. Dezelfde groene link als elders, maar
 * onderaan de kaart en met een lijntje erboven, zodat hij bij de kaart hoort en
 * niet bij het laatste opsommingspunt.
 *
 * Het telefoonnummer, het e-mailadres en "Bekijk op de kaart" op de
 * contactpagina delen deze vorm (Tim, 8 september): het is dezelfde stap, dus
 * hij hoort er hetzelfde uit te zien en op dezelfde manier te bewegen.
 */
.swipe-pakket__kies,
.swipe-contact__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	margin: 0;
	/* geen lijntje meer boven de knop (Tim, 8 september) */
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--swipe-kop);
	font-size: 16px;
	font-weight: 600;
	color: var(--swipe-groen-diep);
	text-decoration: none;
	cursor: pointer;
	transition: gap 0.18s ease, color 0.18s ease;
}

.swipe-pakket__kies:hover,
.swipe-contact__link:hover { gap: 12px; color: var(--swipe-groen); }

.page-content .swipe-contact__link,
.page-content .swipe-contact__link:hover { text-decoration: none; }

.swipe-pakket__kies[hidden] { display: none !important; }

/*
 * Het bovenliggende thema (hello-elementor/assets/css/reset.css) geeft elke
 * [type="button"] bij focus een achtergrond van #CC3366. Die kleur hoort nergens
 * bij de huisstijl en blijft na een klik staan; Tim zag hem als een paarse vlek
 * achter "Dit pakket kiezen". Gemeten op de site: van alle knoppen is dit de
 * enige die geen eigen achtergrond heeft en dus omslaat.
 *
 * Krijgt een nieuwe knop ooit dezelfde vlek, dan is dit de regel om te kopiëren:
 * een focusregel met een eigen kleur wint van de reset.
 */
.swipe-pakket__kies:focus {
	background-color: transparent;
	color: var(--swipe-groen);
}

/* de knop bij de bekende namen, met de vrije plaatsen ernaast */
.swipe-bekend__actie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

/* anders pakt de regel voor span hierboven de tekst in de deelknop */
.swipe-manier__link span { font-size: inherit; color: inherit; }

/* -------------------------------------------------------------------- voet */

.swipe-voet {
	background: var(--swipe-petrol);
	padding: 90px var(--swipe-rand) 44px;
	color: var(--swipe-creme);
}

.swipe-voet__binnen {
	display: flex;
	justify-content: space-between;
	gap: 80px;
	flex-wrap: wrap;
	padding-bottom: 46px;
}

.swipe-voet__over {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 380px;
}

/*
 * align-self houdt het logo op zijn eigen breedte. Zonder dat rekt de kolom het
 * als flex-item uit tot de volle 380 px, en omdat een svg zijn tekening dan in
 * dat bredere vlak centreert, staat het logo ingesprongen terwijl de tekst
 * eronder gewoon links begint.
 */
.swipe-voet__over .swipe-logo {
	color: var(--swipe-creme);
	align-self: flex-start;
}
.swipe-voet__over p { font-size: 16px; line-height: 1.65; color: var(--swipe-op-donker-zacht); }

.swipe-voet__contact { display: flex; flex-direction: column; gap: 4px; }
.swipe-voet__contact a { color: var(--swipe-creme); font-size: 16px; }
.swipe-voet__contact a:hover { color: var(--swipe-groen); }

.swipe-voet__kolommen { display: flex; gap: 80px; flex-wrap: wrap; }

.swipe-voet__kolom {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.swipe-voet__titel {
	font-family: var(--swipe-kop);
	font-size: 19px;
	font-weight: 600;
	color: var(--swipe-creme);
	margin-bottom: 4px;
}

.swipe-voet__kolom a,
.swipe-voet__kvk {
	font-size: 16px;
	color: var(--swipe-op-donker-zacht);
}

.swipe-voet__kolom a:hover { color: var(--swipe-groen); }
.swipe-voet__kolom--rmh { gap: 16px; }

.swipe-voet__onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	padding-top: 28px;
	border-top: 1px solid #3D5C6C;
}

.swipe-voet__onder p { font-size: 15px; color: var(--swipe-tekst-zacht); }
.swipe-voet__onder a { color: var(--swipe-tekst-zacht); }
.swipe-voet__onder a:hover { color: var(--swipe-groen); }

/*
 * De drie regels links: het jaar met de stichting, en daaronder wie de site en
 * wie de huisstijl gemaakt heeft (Tim, 8 september). Op een breed scherm staan
 * ze achter elkaar met een puntje ertussen, op een smal scherm onder elkaar.
 * Het scheidingsteken zit in de opmaak en niet in de tekst, zodat er bij het
 * afbreken geen los puntje aan het eind van een regel blijft hangen.
 */
.swipe-voet__credits,
.swipe-voet__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.swipe-voet__credits > span + span::before,
.swipe-voet__meta > a + a::before {
	content: "\00b7";
	margin-right: 10px;
	color: var(--swipe-tekst-zacht);
}

@media (max-width: 600px) {
	.swipe-voet__credits { flex-direction: column; }
	.swipe-voet__credits > span + span::before { content: none; }
}

/* ------------------------------------------------------- kleinere schermen */

@media (max-width: 1200px) {
	.swipe-dagen { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: -80px; }
	.swipe-bekend { padding-top: 180px; }
	.swipe-clinics__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.swipe-harten--verhaal { width: 480px; height: 470px; }
	.swipe-hart-foto--groot { width: 330px; height: 361px; }
	.swipe-hart-foto--links { width: 230px; height: 251px; bottom: 60px; }
	.swipe-hart-foto--onder { width: 180px; height: 197px; right: 60px; }
}

@media (max-width: 980px) {
	/*
	 * Hier stond een vaste marge van -96px, nog uit de tijd dat de overlap een
	 * vast getal was. Die overschreef de gemeten kophoogte, en het verschil
	 * daartussen was precies de creme streep die onder de balk verscheen zodra
	 * het menu inklapte. De gemeten waarde geldt nu overal.
	 */
	.swipe-kop__menu { display: none; }
	.swipe-kop__schakelaar { display: block; }
	.swipe-kop__klein[data-open] { display: flex; }

	.swipe-hero { min-height: 0; }
	.swipe-hero__inhoud { padding-top: 150px; padding-bottom: 120px; max-width: none; }

	.swipe-verhaal__binnen,
	.swipe-bekend__binnen { flex-direction: column; align-items: flex-start; gap: 60px; }

	.swipe-verhaal__tekst,
	.swipe-bekend__tekst { max-width: none; }

	/* hier staat de tekst op volle breedte, dus volgt de maat weer het venster */
	.swipe-quote .swipe-hand { font-size: clamp(28px, 3.8vw, 36px); }

	.swipe-harten { align-self: center; }

	.swipe-programma__kop { flex-direction: column; align-items: flex-start; gap: 30px; }
	.swipe-helpen { flex-direction: column; }
	.swipe-helpen__foto { flex: none; height: 320px; }
	.swipe-helpen__tekst { padding: 90px var(--swipe-rand); }
	.swipe-pakketten { grid-template-columns: 1fr; }
	.swipe-poppetje--sponsor { width: 380px; right: -60px; }
}

@media (max-width: 720px) {
	.swipe-verhaal,
	.swipe-clinics,
	.swipe-sponsor { padding-top: 90px; padding-bottom: 90px; }

	.swipe-programma__inhoud { padding-top: 90px; }
	.swipe-dagen { grid-template-columns: 1fr; margin-bottom: -60px; }
	.swipe-bekend { padding-top: 140px; padding-bottom: 90px; }
	.swipe-clinics__raster { grid-template-columns: 1fr; gap: 28px; }

	.swipe-harten--verhaal { width: 300px; height: 330px; }
	.swipe-hart-foto--groot { width: 220px; height: 241px; right: 0; }
	.swipe-hart-foto--links { width: 150px; height: 164px; left: 0; bottom: 40px; }
	.swipe-hart-foto--onder { width: 120px; height: 131px; right: 40px; }

	.swipe-harten--bekend { width: 300px; height: 280px; }
	.swipe-hart-foto--een  { width: 152px; height: 175px; left: 0; top: 0; }
	.swipe-hart-foto--twee { width: 132px; height: 120px; left: 152px; top: 22px; }
	.swipe-hart-foto--drie { width: 142px; height: 160px; left: 72px; top: 112px; }

	.swipe-voet__binnen,
	.swipe-voet__kolommen { gap: 44px; }
}

/* Wie liever geen beweging ziet, krijgt hem ook niet. */
@media (prefers-reduced-motion: reduce) {
	.swipe-knop,
	.swipe-clinic,
	.swipe-clinic__onder a {
		transition: none;
	}

	.swipe-knop:hover,
	.swipe-clinic:hover {
		transform: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   De chatbot
   ─────────────────────────────────────────────────────────────────────────────
   Het venster zelf staat in de instellingen van de plugin: de kop is merkrood,
   de antwoorden staan in een lichtroze ballon en de eigen berichten in het rood.
   Alleen de zwevende knop kan daar niet apart gekleurd worden, die volgt de
   hoofdkleur. Hier staat hij op het mintgroen van de site, zodat hij leest als
   een actieknop naast de rode kop in plaats van als nog een rood vlak.

   Waarom hier en niet in de plugin: die draait bij meer klanten, en een tweede
   kleur voor één site hoort niet in de plugin te belanden.

   De body ervoor is geen opsmuk. De plugin zet zijn regels met !important, en bij
   gelijke specificiteit wint dan wat het laatst geladen is. Dat hangt af van de
   volgorde waarin WordPress de stylesheets uitzet, en die kan met een plugin
   erbij zomaar omdraaien. Met body ervoor is deze regel specifieker en wint hij
   altijd. */
body #aichatbot-knop {
	background: var(--swipe-groen) !important;
}

body #aichatbot-knop:hover {
	background: var(--swipe-groen-diep) !important;
}

/* Het bolletje naast "Online" staat in de plugin op het groen van Tailwind, en
   dat verdwijnt nu het chatvenster zelf groen is. Het wordt het rood van het
   logo (Tim, 8 september): het valt op tegen het groen en het is een kleur die
   al op de pagina staat. */
body .aichatbot-online-dot {
	background: var(--swipe-rood) !important;
}

/* -------------------------------------------------- gewone tekstpagina's */

/*
 * De site is gebouwd rond de homepage, en die bestaat uit secties die hun eigen
 * ruimte en achtergrond meebrengen. Een tekstpagina heeft dat niet. Twee dingen
 * gaan daar zonder deze regels mis: de kop van de site staat sticky met een
 * negatieve marge van 110 px, dus de titel begint achter het menu, en de tekst
 * loopt van rand tot rand omdat niets hem tegenhoudt.
 *
 * Deze regels gelden niet voor de voorpagina (body.home), die houdt zijn eigen
 * opbouw. Ze komen uit het sjabloon van Hello Elementor: .site-main met daarin
 * .page-header en .page-content.
 *
 * Voor het eerst nodig bij de privacyverklaring (8 september); elke volgende
 * pagina (Wie zijn wij, Contact, de veiling) krijgt deze opmaak vanzelf.
 */
/*
 * De kop staat hier meteen in de omgeklapte stand: crème vlak met een blauw
 * logo en menu. Op de homepage ligt hij over de herofoto en is hij daarom zelf
 * crème van kleur; op een pagina zonder foto betekende dat crème op crème, en
 * dan is het menu onleesbaar. Dezelfde stand die swipe-menu.js aanzet zodra je
 * voorbij de hero scrolt, dus het is geen tweede uiterlijk maar hetzelfde.
 *
 * De negatieve marge moet ook weg: die trekt de inhoud precies de hoogte van de
 * kop omhoog, wat op de homepage klopt (de foto hoort eronder door te lopen) en
 * hier de titel achter het menu zou zetten.
 */
/* Geen schaduw zolang de kop gewoon bovenaan staat (Tim, 8 september); die
   hoort bij de omgeklapte stand, als hij over de pagina heen ligt. */
body:not(.home) .swipe-kop {
	background: var(--swipe-creme);
	box-shadow: none;
	margin-bottom: 0;
}

body:not(.home) .swipe-kop__logo,
body:not(.home) .swipe-kop__logo:hover { color: var(--swipe-petrol); }
body:not(.home) .swipe-kop__menu > a:not(.swipe-knop) { color: var(--swipe-petrol); }
body:not(.home) .swipe-kop__menu > a:not(.swipe-knop):hover { color: var(--swipe-rood); }

body:not(.home) .site-main {
	box-sizing: content-box;
	max-width: 780px;
	margin: 0 auto;
	padding: 56px 30px 96px;
}

body:not(.home) .page-header { margin-bottom: 30px; }

/* de h1 van de hero is 60 px en staat op een foto; op een witte pagina is dat
   te zwaar */
body:not(.home) .entry-title {
	margin: 0;
	font-size: clamp(32px, 4vw, 44px);
	line-height: 1.15;
	color: var(--swipe-petrol);
}

/* alleen de koppen in losse tekst, niet die binnen een sectie: op een petrol
   vlak zou deze kleur ze onzichtbaar maken (zie de alinea's hieronder) */
body:not(.home) .page-content > h2 {
	margin: 42px 0 14px;
	font-size: 26px;
	color: var(--swipe-petrol);
}

/*
 * Alleen de losse tekst op een tekstpagina, dus de directe kinderen van
 * .page-content (Tim, 8 september: de contact- en vragenpagina).
 *
 * Zonder dat kleine teken gold dit voor élke alinea en elke link binnen de
 * pagina, dus ook voor de alinea's diep in een sectie. Die kregen daarmee de
 * donkere tekstkleur van een tekstpagina, en op een petrol vlak zag je ze niet
 * meer staan. De selector met .page-content erin is specifieker dan die van de
 * sectie zelf, dus de sectie kon het niet terugwinnen.
 */
body:not(.home) .page-content > p,
body:not(.home) .page-content > ul > li,
body:not(.home) .page-content > ol > li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--swipe-tekst);
}

body:not(.home) .page-content > p { margin: 0 0 16px; }
body:not(.home) .page-content > ul { margin: 0 0 16px; padding-left: 22px; }
body:not(.home) .page-content > ul > li,
body:not(.home) .page-content > ol > li { margin-bottom: 8px; }

/* groen, want een link is geen donatie */
body:not(.home) .page-content > p a { color: var(--swipe-groen-diep); }
body:not(.home) .page-content > p a:hover { color: var(--swipe-petrol); }
body:not(.home) .page-content > ul a { color: var(--swipe-groen-diep); }


/* ==========================================================================
   De losse pagina's: veelgestelde vragen en contact
   ========================================================================== */

/* het regeltje boven een kop in de geschreven letter; rood hoort bij geven,
   groen bij padel en bij meedoen (de kleurregel van Veronic) */
.swipe-hand--groen { color: var(--swipe-groen-diep); }

/*
 * Een tekstpagina zonder kopfoto staat op wit in plaats van op creme (Tim,
 * 8 september, over de privacyverklaring). Een lange lap tekst leest daar
 * rustiger op. De kop van de site blijft creme: daarmee is te zien waar de balk
 * ophoudt zonder dat er een lijntje of een schaduw voor nodig is.
 */
body:not(.home):not(.swipe-kopfoto) { background: var(--swipe-wit); }

/* ------------------------------------------------- de kop van een pagina */

/*
 * Een pagina met [evi_kop] werkt als de homepage: de kop van de site ligt over
 * de foto en is doorzichtig. Zonder deze regels staat hij daar als creme balk,
 * want dat is wat elke pagina behalve de voorpagina krijgt.
 *
 * De :not() erbij is wat het bij elkaar houdt. Zodra je voorbij de foto scrolt
 * zet swipe-menu.js de klasse --om erop en klapt de kop om naar creme; die
 * regels staan eerder in dit bestand en zijn minder specifiek. Zonder de :not()
 * zou de kop hier doorzichtig blijven en over de tekst heen liggen.
 */
body.swipe-kopfoto .swipe-kop:not(.swipe-kop--om):not(.swipe-kop--menu-open) {
	background: transparent;
	box-shadow: none;
	margin-bottom: calc(-1 * var(--swipe-kop-hoogte, 110px));
}

body.swipe-kopfoto .swipe-kop:not(.swipe-kop--om):not(.swipe-kop--menu-open) .swipe-kop__logo,
body.swipe-kopfoto .swipe-kop:not(.swipe-kop--om):not(.swipe-kop--menu-open) .swipe-kop__logo:hover {
	color: var(--swipe-creme);
}

body.swipe-kopfoto .swipe-kop:not(.swipe-kop--om):not(.swipe-kop--menu-open) .swipe-kop__menu > a:not(.swipe-knop) {
	color: var(--swipe-creme);
}

/*
 * En de hover erbij (Tim, 9 september: "in de header van de contactpagina doet
 * de hover het niet, op de homepage wel").
 *
 * De regel hierboven zet de kleur met drie selectors ervoor; de gewone
 * hover-regel bij .swipe-kop__menu heeft er maar één en verliest het daarvan.
 * Op zo'n pagina bleef het menu dus onveranderd onder de muis staan, terwijl het
 * op de homepage groen kleurt. Dezelfde kleur als daar, zodat het overal
 * hetzelfde beweegt.
 */
body.swipe-kopfoto .swipe-kop:not(.swipe-kop--om):not(.swipe-kop--menu-open) .swipe-kop__menu > a:not(.swipe-knop):hover {
	color: var(--swipe-groen);
}

/*
 * De inhoud staat op zo'n pagina niet in de smalle kolom: de secties brengen
 * hun eigen ruimte mee, net als op de homepage. Losse tekst die iemand er in de
 * editor bij typt krijgt die kolom hieronder alsnog, anders loopt hij van rand
 * tot rand.
 *
 * De paginatitel van WordPress gaat weg: die staat al groot op de foto.
 */
body.swipe-kopfoto .site-main {
	max-width: none;
	/* geen ruimte eronder: de laatste sectie brengt zijn eigen ruimte mee en
	   sluit zo aan op de voet, zonder creme streep ertussen */
	padding: 0;
}

body.swipe-kopfoto .page-header { display: none; }

body.swipe-kopfoto .page-content > :is(p, h2, h3, h4, ul, ol, blockquote) {
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 30px;
}

.swipe-paginakop {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;

	/* lager dan de hero van de homepage (75%): op een binnenpagina wil je de
	   inhoud eronder al zien staan */
	min-height: min(65vh, 620px);
}

.swipe-paginakop__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--swipe-kopfoto-positie, 50% 45%);
}

.swipe-paginakop__waas {
	position: absolute;
	inset: 0;
	background: var(--swipe-petrol-diep);
	opacity: 0.72;
}

.swipe-paginakop__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	/* dezelfde afstand als in de hero van de homepage (Tim, 8 september) */
	gap: 28px;
	padding: clamp(120px, 11vw, 160px) var(--swipe-rand) clamp(70px, 7vw, 100px);
	max-width: calc(880px + 2 * var(--swipe-rand));
	color: var(--swipe-creme);
}

/*
 * Het regeltje boven de titel: dezelfde strakke hoofdletters met ruime
 * letterafstand als de datum in de hero van de homepage, maar wit in plaats van
 * groen (Tim, 8 september). Groen hoort bij de homepage; hier is het een
 * onderschrift en geen accent.
 */
.swipe-paginakop__eyebrow {
	margin: 0;
	font-family: var(--swipe-kop);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--swipe-wit);
}

.swipe-paginakop__inhoud h1 {
	margin: 0;
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.08;
	color: var(--swipe-creme);
}

/* de kleine onderzin: wit en niet creme, want op een foto met een waas erover
   heeft creme te weinig contrast (dezelfde uitzondering als in de hero) */
.swipe-paginakop__zin {
	max-width: 620px;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--swipe-wit);
}

/*
 * De omlijnde knop: alleen een groen randje, groene letter en het ballonnetje
 * van de chatbot (Tim, 8 september). Staat naast de doneerknop in de kop van
 * een pagina, en opent het chatvenster.
 *
 * De regel over de onderstreping is nodig omdat een knop op deze pagina's een
 * link binnen .page-content is, en die krijgt van het bovenliggende thema een
 * streep onder zich.
 */
.swipe-knop--lijn {
	border: 2px solid var(--swipe-groen);
	background: transparent;
	color: var(--swipe-groen);
	cursor: pointer;
}

/*
 * Als button houdt hij zijn randje. De regel `button.swipe-knop { border: 0 }`
 * hierboven is specifieker dan `.swipe-knop--lijn` en haalde de groene rand weg
 * bij "Stel je vraag", want dat is een knop en geen link.
 */
button.swipe-knop--lijn { border: 2px solid var(--swipe-groen); }

.swipe-knop--lijn:hover {
	background: rgba(61, 190, 176, 0.14);
	filter: none;
}

.swipe-knop--lijn[hidden] { display: none !important; }

.page-content .swipe-knop,
.page-content .swipe-knop:hover { text-decoration: none; }

/* --------------------------------------------------- de knop met Evi erin */

/*
 * De digitale Evi: het poppetje uit de huisstijl in een ronde bol met een groen
 * randje. Een klik opent de chat en stelt de vraag meteen.
 *
 * De knop staat hidden in de html en komt pas tevoorschijn als de chatbot echt
 * meedraait (swipe-menu.js). Daarom staat hier niets wat hem zichtbaar maakt.
 */
.swipe-evi-knop {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: var(--swipe-petrol);
	font-family: var(--swipe-kop);
	font-size: 17px;
	font-weight: 600;
}

.swipe-evi-knop[hidden] { display: none !important; }

/* geen rondje om het poppetje (Tim, 8 september): het figuurtje staat er los,
   zonder kader en zonder vlak eromheen */
.swipe-evi-knop__bol {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transition: transform 0.18s ease;
}

.swipe-evi-knop__bol .swipe-poppetje {
	width: 30px;
	height: auto;
	color: var(--swipe-petrol);
}

.swipe-evi-knop:hover .swipe-evi-knop__bol { transform: translateY(-2px); }

.swipe-evi-knop:focus-visible .swipe-evi-knop__bol {
	outline: 2px solid var(--swipe-groen-diep);
	outline-offset: 3px;
	border-radius: 8px;
}

/*
 * In een rijtje vragen staat het padelballetje ervoor, in dezelfde maat en met
 * dezelfde letter als een gewone regel tekst (Tim, 8 september). Het balletje is
 * het opsommingsteken dat de site overal gebruikt; vier keer het poppetje onder
 * elkaar werd een rijtje plaatjes in plaats van een lijstje vragen.
 */
.swipe-evi-knop--regel {
	gap: 12px;
	font-family: var(--swipe-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--swipe-tekst-licht);
}

.swipe-evi-knop--regel .swipe-evi-knop__bol { width: auto; height: auto; }
.swipe-evi-knop--regel .swipe-bal { color: var(--swipe-groen); }
.swipe-evi-knop--regel:hover { color: var(--swipe-groen-diep); }

/* op donker: de bol houdt zijn creme vulling, de tekst wordt creme */
.swipe-faqsectie--donker .swipe-evi-knop { color: var(--swipe-creme); }

/* -------------------------------------------------------- vraag het Evi */

/*
 * Wit vlak, geen creme (Tim, 8 september).
 *
 * Onderaan zit extra lucht: daar liggen de contactkaarten in, die met een
 * negatieve marge de sectie in worden getrokken. Zonder die ruimte komen ze over
 * de regel "Liever een mens?" heen te staan.
 */
.swipe-vraagevi {
	background: var(--swipe-wit);
	padding: clamp(70px, 8vw, 110px) var(--swipe-rand) clamp(190px, 20vw, 250px);

	/* het hart achter Evi is groter dan de sectie breed is en mag aan de
	   rechterkant gewoon aflopen */
	overflow: hidden;
}

/*
 * De tekst links, Evi rechts: dezelfde verdeling als bij de bekende namen op de
 * homepage (Tim, 8 september). Daar staat de tekst ook links en het beeld
 * rechts, en twee blokken die hetzelfde doen horen er hetzelfde uit te zien.
 */
.swipe-vraagevi__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(30px, 5vw, 70px);
	max-width: 1020px;
	margin: 0 auto;
}

/*
 * Het poppetje staat hier groot en in kleur, niet als bleke achtergrondvorm
 * zoals het in de sponsorsectie stond. Dit is de plek waar het iets betekent:
 * dit is de digitale Evi die zo antwoord geeft.
 *
 * Achter het figuurtje ligt de zachte hartvorm die op de FAQ-pagina ook al
 * achter de vragen staat, in dezelfde lichtroze kleur. Geen cirkel: die maakte
 * er eerder een knop van terwijl het een tekening is (Tim, 8 september).
 */
.swipe-vraagevi__beeld {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(260px, 26vw, 360px);
	height: clamp(260px, 26vw, 360px);

	/* het hart is groot genoeg om onder de tekst door te lopen; die moet er dus
	   overheen liggen en niet andersom */
	z-index: 0;
}

.swipe-vraagevi__tekst { position: relative; z-index: 1; }

/* het hart is ruim twee keer zo groot als het vlak eromheen (Tim, 8 september):
   het is een achtergrondvorm geworden en geen omlijsting van het figuurtje */
.swipe-vraagevi__vlak {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 155%;
	height: 155%;
	background: #FBEEF0;
	translate: -45% -50%;
	rotate: -12deg;
	clip-path: url(#swipe-hartvorm);
}

/*
 * Het poppetje houdt zijn eigen maat, los van hoe groot het hart erachter is.
 *
 * Gespiegeld, zodat ze naar de tekst kijkt in plaats van de pagina uit (Tim,
 * 8 september). Op een telefoon staat ze boven de tekst en kijkt ze er dus
 * overheen; dat blijft goed.
 *
 * De spiegeling staat in `scale` en niet in `transform`, want de uithaal die
 * swipe-menu.js aanzet gebruikt transform. In dezelfde eigenschap zou Evi
 * halverwege het zwaaien terugklappen naar rechts.
 *
 * Het draaipunt ligt bij haar voeten, zoals bij het poppetje in de
 * sponsorsectie: dan zwaait ze vanuit haar stand in plaats van om haar middel.
 */
.swipe-vraagevi__beeld .swipe-poppetje {
	position: relative;
	width: clamp(240px, 24vw, 340px);
	height: auto;
	color: var(--swipe-petrol);
	scale: -1 1;
	transform-origin: 50% 92%;
}

.swipe-vraagevi__tekst { max-width: 620px; }

.swipe-vraagevi__tekst h2 {
	margin: 0 0 14px;
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.12;
	color: var(--swipe-petrol);
}

.swipe-vraagevi__tekst > p:not(.swipe-hand) {
	font-size: 18px;
	line-height: 1.7;
	color: var(--swipe-tekst-licht);
}

.swipe-vraagevi__knoppen {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 30px 0 0;
}

/* de regel eronder gaat pas leven als er ook echt knoppen staan; zonder chatbot
   blijft hij als enige over en dan klopt "liever een mens" niet meer */
.swipe-vraagevi__zonder {
	margin: 26px 0 0;
	font-size: 15px;
	color: var(--swipe-tekst-zacht);
}

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

.swipe-faqsectie {
	position: relative;
	padding: clamp(70px, 8vw, 120px) var(--swipe-rand);
}

.swipe-faqsectie--donker { background: var(--swipe-petrol); }
.swipe-faqsectie--licht { background: var(--swipe-creme); }
.swipe-faqsectie--wit { background: var(--swipe-wit); overflow: hidden; }

/*
 * Het grote zachte hart op de achtergrond, dezelfde vorm en dezelfde kleur als
 * bij de bekende namen op de homepage, maar groter (Tim, 8 september): daar
 * staat het achter een foto en hier op een leeg wit vlak, dus het mag verder
 * doorlopen voordat het te veel wordt. Het staat linksonder, want de
 * filterkolom is kort en daaronder blijft die hoek de hele pagina leeg.
 */
.swipe-faqsectie--wit::before {
	content: "";
	position: absolute;
	bottom: -140px;
	left: -50px;
	height: min(760px, 78%);
	aspect-ratio: 700 / 760;
	background: #FBEEF0;
	transform: rotate(-20deg);
	clip-path: url(#swipe-hartvorm);
	pointer-events: none;
}

/*
 * Boxed en niet beperkt (Tim, 8 september): de sectie houdt zich aan dezelfde
 * 1320 px als de rest van de site in plaats van aan een eigen smalle kolom.
 * Dat geeft de filterkolom links de ruimte om breder te worden.
 */
.swipe-faqsectie__binnen {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}

/*
 * De titel met de inleidende alinea eronder (Tim, 8 september). Hier stond eerst
 * een lijntje; dat is eruit, de tekst doet nu het werk van de scheiding.
 */
.swipe-faqsectie__kop {
	margin: 0 0 clamp(34px, 4vw, 56px);
}

.swipe-faqsectie h2 {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.12;
}

.swipe-faqsectie--donker h2 { color: var(--swipe-creme); }
.swipe-faqsectie--licht h2,
.swipe-faqsectie--wit h2 { color: var(--swipe-petrol); }

.swipe-faqsectie__zin {
	margin: 14px 0 0;
	font-size: 18px;
	line-height: 1.6;
	max-width: 820px;
}

/*
 * De naam Evi in de inleiding opent de chat en ziet er dus uit als een link,
 * in het groen (Tim, 8 september). Het is een knop en geen <a>, want er is geen
 * adres om naartoe te gaan; de opmaak haalt alles weg wat een knop een knop
 * maakt, zodat hij als woord in de zin staat.
 */
/*
 * De naam Evi middenin een zin, als woord dat de chat opent. Dit heette
 * .swipe-faqsectie__evi toen het alleen in de vragensectie stond; het staat nu ook
 * bij "Vraag het Evi" en onder de contactkaarten (Tim, 9 september), dus de naam
 * hangt niet meer aan één sectie.
 *
 * Het is een <button> en geen <a>, want er is geen adres om heen te gaan: hij
 * drukt de zwevende knop van de chatbot in. Alle knopopmaak gaat er daarom af en
 * hij erft de letter van de zin waar hij in staat.
 */
.swipe-evilink {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--swipe-groen-diep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.swipe-evilink:hover { color: var(--swipe-groen); }

/* op een donkere ondergrond het lichtere groen: de diepe variant verdwijnt daar */
.swipe-faqsectie--donker .swipe-evilink,
.swipe-paginakop__zin .swipe-evilink,
.swipe-contact__vragenzin .swipe-evilink { color: var(--swipe-groen); }
.swipe-faqsectie--donker .swipe-evilink:hover,
.swipe-paginakop__zin .swipe-evilink:hover,
.swipe-contact__vragenzin .swipe-evilink:hover { color: var(--swipe-op-donker); }

.swipe-faqsectie--donker .swipe-faqsectie__zin { color: var(--swipe-op-donker); }
.swipe-faqsectie--licht .swipe-faqsectie__zin,
.swipe-faqsectie--wit .swipe-faqsectie__zin { color: var(--swipe-tekst-licht); }

/* ------------------------------------------------------------- contact */

/*
 * De foto vult de hele sectie en de twee kaarten worden er met een negatieve
 * marge bovenuit getrokken (Tim, 8 september). Ze steken dus met hun bovenkant
 * in het witte vlak erboven en de foto loopt eronder door tot het einde van de
 * sectie. Eerst was het andersom, met de foto alleen over de bovenkant en de
 * kaarten die er onderuit liepen.
 *
 * De foto krijgt dezelfde behandeling als bij de sponsors: een petrol vlak dat
 * de kleuren naar de huisstijl trekt en een verloop eroverheen, want er staan
 * witte kaarten op.
 */
.swipe-contact {
	position: relative;
	background: var(--swipe-petrol-diep);
	/* zeven pixels minder lucht onderaan (Tim, 9 september) */
	padding: 0 var(--swipe-rand) clamp(73px, 8.5vw, 123px);

	/*
	 * flow-root is hier geen sierlijkheid maar de reden dat het werkt. Zonder
	 * padding of rand aan de bovenkant klapt de negatieve marge van de kaarten
	 * samen met die van de sectie: dan schuift de hele sectie omhoog, foto en al,
	 * en liggen de kaarten weer precies op de rand in plaats van eroverheen.
	 */
	display: flow-root;
}

.swipe-contact__achtergrond {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.swipe-contact__achtergrond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--swipe-contactfoto-positie, 50% 42%);
}

/* iets donkerder dan bij de sponsors (Tim, 9 september): hier staat niet alleen
   een rij logo's op de foto maar ook een hele vragenlijst */
.swipe-contact__kleur {
	position: absolute;
	inset: 0;
	background: var(--swipe-petrol-diep);
	mix-blend-mode: multiply;
	opacity: 0.88;
}

.swipe-contact__verloop {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 52, 68, 0.92) 0%, rgba(29, 60, 77, 0.84) 50%, rgba(29, 60, 77, 0.92) 100%);
}

/* de negatieve marge trekt de kaarten omhoog, het witte vlak in */
.swipe-contact__binnen {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	max-width: 1020px;
	margin: clamp(-150px, -11vw, -90px) auto 0;
}

/*
 * Geen lijntje om de kaarten: het onderscheid komt van de vulling en de
 * schaduw, zoals overal op deze site.
 *
 * De schaduw valt hier ook naar boven (Tim, 8 september). Dat is nodig omdat de
 * bovenkant van een witte kaart tegen het witte vlak erboven staat: zonder die
 * schaduw zie je niet dat de kaart erop ligt.
 *
 * Het is letterlijk --swipe-schaduw van de dagkaarten in het programma, met de
 * verschuiving omgekeerd. Er stond een eigen, veel zwaardere waarde en die viel
 * op als een tweede soort schaduw.
 */
.swipe-contact__kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: clamp(28px, 3vw, 40px);
	border-radius: var(--swipe-rond);
	background: var(--swipe-wit);
	box-shadow: 0 -10px 22px -14px rgba(8, 24, 34, 0.26), var(--swipe-schaduw);
}

.swipe-contact__kaart h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	color: var(--swipe-petrol);
}

.swipe-contact__kaart p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--swipe-tekst);
}

.swipe-contact__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/*
 * Twee gewone regels tekst: "Telefoon: 06 ..." en "E-mail: info@ ...". Het woord
 * ervoor is donker en vet, de rest is de gewone lopende letter (Tim,
 * 8 september). Geen lijntjes ertussen en geen labeltjes in hoofdletters meer:
 * dit is informatie en geen rijtje knoppen.
 */
.swipe-contact__lijst li {
	display: block;
	padding: 4px 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--swipe-tekst);
}

/* het woord ervoor is groen en vet (Tim, 8 september), de waarde erachter blijft
   de gewone tekstkleur */
.swipe-contact__label {
	font-weight: 700;
	color: var(--swipe-groen-diep);
}

.swipe-contact__lijst a {
	color: var(--swipe-tekst);
	text-decoration: none;
}

.swipe-contact__lijst a:hover { color: var(--swipe-groen-diep); }

.swipe-contact__klein {
	font-size: 15px !important;
	color: var(--swipe-tekst-zacht) !important;
	line-height: 1.6;
}

/* onderaan de kaart, zodat de link op beide kaarten op dezelfde hoogte staat */
.swipe-contact__link--onder { margin-top: auto; padding-top: 10px; }

/*
 * De veelgestelde vragen onder de twee kaarten (Tim, 9 september): dezelfde
 * breedte als het kaartenraster, op de foto met de petrol waas, met lucht boven
 * en onder. De kop en de uitlegzin lopen over de volle breedte; daaronder staan
 * de onderwerpen links en de lijst rechts, zoals op de oude FAQ-pagina.
 */
.swipe-contact__vragen {
	position: relative;
	max-width: 1020px;
	/* negentien pixels dichter op de kaarten dan eerst (Tim, 9 september: eerst
	   twaalf, daarna nog zeven) */
	margin: clamp(51px, 7.4vw, 91px) auto 0;

	/*
	 * Waar een sprong naar #vragen landt (Tim, 9 september). De kop van de site
	 * plakt bovenaan (position: sticky), dus zonder deze regel schuift het blok
	 * tot y=0 en verdwijnt "dit vroegen anderen ook" eronder. De kop is smaller
	 * zodra je gescrold hebt (26 px padding wordt 12), dus wat hier boven de
	 * balk overblijft is lucht: het regeltje komt vrij te staan in plaats van
	 * tegen de balk aan te plakken.
	 */
	scroll-margin-top: calc(var(--swipe-kop-hoogte, 110px) + 30px);
}


.swipe-contact__vragen h2 {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.12;
	color: var(--swipe-creme);
}

/*
 * Even veel lucht onder de zin als erboven (Tim, 9 september): veertien pixels,
 * dezelfde afstand als tussen de titel en deze zin.
 *
 * En dezelfde regellengte als de zin in de kopfoto: 620 px, zo'n zestig procent
 * van de kolom. Over de volle 1020 px werd het een te lange regel om vlot te
 * lezen.
 */
.swipe-contact__vragenzin {
	max-width: 620px;
	margin: 14px 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--swipe-op-donker);
}

/*
 * De onderwerpenkolom is hier smaller dan op de FAQ-pagina, want deze sectie is
 * 1020 px breed en niet 1320.
 *
 * Alleen op een breed scherm, en dat is geen sierlijkheid: onder die grens zet
 * de plugin de lijst onder elkaar, en dan wijst flex-basis niet meer de breedte
 * aan maar de hoogte. Zonder deze grens stond er op een telefoon 240 px leegte
 * tussen de onderwerpen en het zoekveld (Tim, 9 september). De FAQ-pagina had
 * daar al dezelfde regel voor.
 */
@media (min-width: 783px) {
	.swipe-contact__vragen .aichatbot-faq-facet {
		flex: 0 0 240px;
		max-width: 240px;
	}

	/*
	 * De eerste vraag begint acht pixels hoger dan de rest (Tim, 9 september).
	 * Daarmee komt het lijntje onder die eerste vraag precies op de onderrand van
	 * het zoekveld ernaast te liggen: 16 px padding gaf een verschil van zeven
	 * pixels, en juist die twee randen liggen naast elkaar in beeld.
	 *
	 * Alleen op een breed scherm, want onder deze grens staat het zoekveld boven
	 * de lijst en valt er niets uit te lijnen.
	 */
	.swipe-contact__vragen .elementor-accordion-item:first-child .elementor-tab-title {
		padding-top: 8px;
	}
}

/*
 * Hier stond een lijn onder de alinea over de volle breedte. Die is er weer uit
 * (Tim, 9 september): de vragenlijst brengt zelf al lijntjes mee en dan wordt
 * het er een te veel. De ruimte blijft wel, want die stond goed.
 */
.swipe-contact__vragen .aichatbot-faq-wrap {
	padding-top: 15px;
}

/* het zoekveld staat sinds 9 september bovenin de onderwerpenkolom (blok 7c in
   swipe-menu.js), dus het houdt daar de afstand van een lijstregel aan */
.swipe-contact__vragen .aichatbot-faq-facet .aichatbot-faq-zoek {
	margin: 0 0 18px;
}

/*
 * Hier stond de strook onderaan met drie kaarten: contact, vragen en doneren.
 * Die is eruit (Tim, 8 september): de voet van de site zegt dat allemaal al, en
 * twee bijna gelijke blokken boven elkaar maken het einde van een pagina rommelig.
 */

/* een melding die alleen beheerders zien, bijvoorbeeld als de chatbot uit staat */
.swipe-melding {
	max-width: 780px;
	margin: 30px auto;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--swipe-creme-diep);
	color: var(--swipe-tekst);
}

@media (max-width: 860px) {
	/* Evi boven de tekst in plaats van ernaast; column-reverse zet haar bovenaan
	   terwijl de tekst in de html eerst blijft staan */
	.swipe-vraagevi__binnen { flex-direction: column-reverse; align-items: flex-start; }
	.swipe-vraagevi__beeld { width: 250px; height: 250px; margin: 0 auto 10px; }
	.swipe-vraagevi__beeld .swipe-poppetje { width: 210px; }

	/* op deze breedte is het hart net zo breed als het scherm; dan hoeft het niet
	   ook nog eens over de titel eronder te lopen */
	.swipe-vraagevi__vlak { width: 180%; height: 180%; translate: -50% -50%; }
	.swipe-paginakop { min-height: min(65vh, 520px); }

	/* op een telefoon steken de kaarten minder ver omhoog dan op een breed scherm,
	   maar wel twintig pixels verder dan eerst (Tim, 9 september) */
	.swipe-contact__binnen { margin-top: -80px; }

	/* het hart achter de vragen mee omlaag; op deze breedte staat de filterkolom
	   boven de lijst en is de hoek linksonder niet meer leeg */
	.swipe-faqsectie--wit::before {
		height: min(500px, 70%);
		bottom: -95px;
		left: -150px;
	}
}


/* ==========================================================================
   De opmaak van de vragenlijst zelf
   --------------------------------------------------------------------------
   Overgenomen van ONS welzijn (chatbot-faq en chatbot-faq-wit) en omgezet naar
   het palet van deze site. Twee varianten, allebei zonder kader: alleen een dun
   lijntje onder elk item, en alles doorzichtig zodat het vlak eronder de kleur
   bepaalt.

     [aichatbot_faq class="swipe-faq"]          op een licht vlak
     [aichatbot_faq class="swipe-faq-donker"]   op een petrol vlak

   Twee dingen uit het origineel zijn er met reden in blijven staan. Het
   antwoord heeft geen verticale padding maar spacers via ::before en ::after,
   want met padding zie je in dichte stand een streepje onder de vraag staan:
   max-height:0 snijdt de padding niet weg. En overflow:hidden houdt de
   afgeronde hoeken heel.
   ========================================================================== */

:root {
	/*
	 * Licht vlak (creme en wit). De plusjes zijn groen en niet petrol: op het
	 * petrol vlak waren ze mint, en die blijven bij de overstap naar wit (Tim,
	 * 8 september). Het diepe groen in plaats van het mint, want mint op wit is
	 * te licht om het teken nog te zien.
	 */
	--swipe-faq-tekst:   #264A5E;
	--swipe-faq-accent:  #31A99C;
	--swipe-faq-link:    #E14757;
	--swipe-faq-lijn:    rgba(38, 74, 94, 0.18);

	/* donker vlak: de vragen en de antwoorden zijn wit, alleen de plus is mint
	   (Tim, 8 september). Crème was te warm naast het groen van de plusjes. */
	--swipe-faq-tekst-d:  #FFFFFF;
	--swipe-faq-accent-d: #3DBEB0;
	--swipe-faq-link-d:   #3DBEB0;
	--swipe-faq-lijn-d:   rgba(255, 252, 240, 0.18);
}

.swipe-faq,
.swipe-faq-donker {
	border-radius: 14px;
	overflow: hidden;
	background: transparent;
}

.swipe-faq .elementor-accordion-item {
	border-bottom: 1px solid var(--swipe-faq-lijn);
	background: transparent;
}
.swipe-faq-donker .elementor-accordion-item {
	border-bottom: 1px solid var(--swipe-faq-lijn-d);
	background: transparent;
}
.swipe-faq .elementor-accordion-item:last-child,
.swipe-faq-donker .elementor-accordion-item:last-child { border-bottom: none; }

.swipe-faq .elementor-tab-title,
.swipe-faq-donker .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 500;
	background: transparent;
}

.swipe-faq .elementor-tab-title,
.swipe-faq .elementor-accordion-title { color: var(--swipe-faq-tekst); text-decoration: none; }

/*
 * De vragen krijgen bij hover, focus en klik onze eigen accentkleur (Tim,
 * 9 september). Zonder deze regel valt de FAQ terug op de kleur die Elementor
 * zelf aan een accordeon-titel geeft, en dat is een paars dat nergens in de
 * huisstijl voorkomt.
 *
 * Het is dezelfde soort fout als bij de knoppen: alles wat wij niet vastzetten,
 * vult een ander thema of een plugin voor ons in.
 */
.swipe-faq .elementor-accordion-title:hover,
.swipe-faq .elementor-accordion-title:focus,
.swipe-faq .elementor-accordion-title:active,
.swipe-faq .elementor-tab-title:hover .elementor-accordion-title {
	color: var(--swipe-faq-accent);
}

body .swipe-faq-donker .elementor-accordion-title:hover,
body .swipe-faq-donker .elementor-accordion-title:focus,
body .swipe-faq-donker .elementor-accordion-title:active,
body .swipe-faq-donker .elementor-tab-title:hover .elementor-accordion-title {
	color: var(--swipe-faq-accent-d);
}
/*
 * De vraag zelf is wit. Zonder body ervoor wint de plugin met haar eigen kleur
 * en staat de vraag in het mint van de plusjes; dan is niet meer te zien wat de
 * vraag is en wat het teken ervoor.
 */
body .swipe-faq-donker .elementor-tab-title,
body .swipe-faq-donker .elementor-tab-title a,
body .swipe-faq-donker .elementor-accordion-title {
	color: var(--swipe-faq-tekst-d);
	text-decoration: none;
}

.swipe-faq .elementor-accordion-icon,
.swipe-faq-donker .elementor-accordion-icon {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.swipe-faq .elementor-accordion-icon { color: var(--swipe-faq-accent); }
.swipe-faq-donker .elementor-accordion-icon { color: var(--swipe-faq-accent-d); }

/* + en - wisselen op open en dicht */
.swipe-faq .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon-closed,
.swipe-faq-donker .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon-closed { display: none; }
.swipe-faq .elementor-tab-title[aria-expanded="false"] .elementor-accordion-icon-opened,
.swipe-faq-donker .elementor-tab-title[aria-expanded="false"] .elementor-accordion-icon-opened { display: none; }

.swipe-faq .elementor-tab-content,
.swipe-faq-donker .elementor-tab-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: transparent;
	padding: 0 20px;
	line-height: 1.7;
}
.swipe-faq .elementor-tab-content { color: var(--swipe-faq-tekst); }
.swipe-faq-donker .elementor-tab-content { color: var(--swipe-faq-tekst-d); }

.swipe-faq .elementor-tab-content::before,
.swipe-faq .elementor-tab-content::after,
.swipe-faq-donker .elementor-tab-content::before,
.swipe-faq-donker .elementor-tab-content::after { content: ""; display: block; height: 14px; }

.swipe-faq .elementor-tab-content > :first-child,
.swipe-faq-donker .elementor-tab-content > :first-child { margin-top: 0; }
.swipe-faq .elementor-tab-content > :last-child,
.swipe-faq-donker .elementor-tab-content > :last-child { margin-bottom: 0; }

.swipe-faq .elementor-tab-content a { color: var(--swipe-faq-link); }
.swipe-faq-donker .elementor-tab-content a { color: var(--swipe-faq-link-d); }

/* de filterkolom en het zoekveld van de plugin */
body .aichatbot-faq-wrap { gap: 37px; }

/*
 * De plugin zet de filterkolom op 240 px en de lijst op maximaal 820. Nu de
 * sectie de volle 1320 gebruikt mag de kolom breder (Tim, 8 september), zodat
 * een onderwerp als "Programma en clinics" niet meer afbreekt, en groeit de
 * lijst mee met wat er overblijft.
 *
 * De lopende tekst in een antwoord houdt wel zijn eigen leesbreedte: een regel
 * van bijna duizend pixels leest niet meer prettig. De vragen en de lijntjes
 * lopen dus wel door tot de rand, het antwoord niet.
 *
 * De grens van 783 px is die van de plugin zelf: daaronder zet zij de kolom
 * boven de lijst, en dan moet deze breedte juist niet gelden.
 */
@media (min-width: 783px) {
	.swipe-faqsectie .aichatbot-faq-facet {
		flex: 0 0 300px;
		max-width: 300px;
	}

	.swipe-faqsectie .aichatbot-faq-lijst { max-width: none; }
	.swipe-faqsectie .elementor-tab-content > * { max-width: 820px; }
}

.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-facet label {
	color: var(--swipe-faq-tekst);
	align-items: center;
	font-size: 90%;
}
.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-aantal { color: rgba(38, 74, 94, 0.55); }

.aichatbot-faq-wrap .aichatbot-faq-facet input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: 0;
	flex: 0 0 auto;
	border: 1px solid rgba(38, 74, 94, 0.35);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-facet input[type="checkbox"]:checked {
	background: var(--swipe-faq-accent);
	border-color: var(--swipe-faq-accent);
}
.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-zoek {
	width: 100%;
	max-width: none;
	margin: 0 0 25px;
	border: 1px solid rgba(38, 74, 94, 0.2);
	background: rgba(38, 74, 94, 0.04);
	color: var(--swipe-faq-tekst);
	border-radius: 8px;
	padding: 12px 14px;
}
.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-zoek::placeholder { color: rgba(38, 74, 94, 0.45); }

.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-facet label {
	color: var(--swipe-faq-tekst-d);
	align-items: center;
	font-size: 90%;
}
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-aantal { color: rgba(255, 252, 240, 0.6); }
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-facet input[type="checkbox"] {
	border: 1px solid rgba(255, 252, 240, 0.5);
}
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-facet input[type="checkbox"]:checked {
	background: var(--swipe-faq-accent-d);
	border-color: var(--swipe-faq-accent-d);
}
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-zoek {
	width: 100%;
	max-width: none;
	margin: 0 0 25px;
	border: 1px solid rgba(255, 252, 240, 0.25);
	background: rgba(255, 252, 240, 0.08);
	color: var(--swipe-faq-tekst-d);
	border-radius: 8px;
	padding: 12px 14px;
}
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-zoek::placeholder { color: rgba(255, 252, 240, 0.6); }

/* het blauwe wis-kruisje van de browser vervangen door er een in de accentkleur */
.aichatbot-faq-wrap .aichatbot-faq-zoek::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	cursor: pointer;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.aichatbot-faq-wrap:has(.swipe-faq) .aichatbot-faq-zoek::-webkit-search-cancel-button { background: var(--swipe-faq-accent); }
.aichatbot-faq-wrap:has(.swipe-faq-donker) .aichatbot-faq-zoek::-webkit-search-cancel-button { background: var(--swipe-faq-accent-d); }