/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

/*
 * Gravity Forms 3.0 datepicker — terug naar de vormgeving van GF 2.10.5
 * ---------------------------------------------------------------------
 * GF 3.0 (hier geïnstalleerd 8 aug 2026) verving de jQuery UI-datepicker door
 * een eigen kalender: andere HTML, andere classnames, andere vormgeving.
 * De oude stylesheet is niet terug te zetten — die hangt volledig aan
 * .ui-datepicker-selectors die in 3.0 nergens meer voorkomen.
 *
 * Deze regels bouwen de oude vormgeving na op de nieuwe markup. Alle waarden
 * komen letterlijk uit .gravity-theme.ui-datepicker in
 * gravityforms/assets/css/dist/theme.min.css van GF 2.10.5 (laatste versie
 * vóór 3.0, draait 12 aug 2026 nog op avps, sterkhuis, wunderinkmakelaars
 * en cmtc).
 *
 * LET OP: niet de stylesheet uit legacy/css/ gebruiken. Die is van 2014, hoort
 * bij de oude GF-markup en heeft op dit formulier nooit iets gedaan.
 *
 * Markup GF 3.0 (geverifieerd op de live site, 12 aug 2026):
 *   div.gform-datepicker-calendar > div > table.calendar
 *     tr: td.nav.prev.btn.year  | td.year (select)  | td.nav.next.btn.year
 *     tr: td.nav.prev.btn.month | td.month (select) | td.nav.next.btn.month
 *     tr: th.week x7 (dagletter zit in een <span>)
 *     tr: td.empty | td.day.dayInMonth[.disabled][.dayToday][.selected] > span
 *   div.monthMessage
 *
 * Twee dingen zijn met CSS niet te herstellen:
 *   - de jaar- en maandkiezer staan in GF 3.0 op twee losse rijen binnen
 *     dezelfde tabel als de dagen; samenvoegen tot één kopregel kan alleen
 *     door de tabelopbouw te breken. Ze krijgen hier wel de oude vormgeving.
 *   - de dagletters staan in het Engels (S M T W T F S); die komen uit de
 *     JavaScript van de nieuwe kalender, niet uit CSS.
 *
 * Dit formulier draait op .gravity-theme; .gform-theme--framework staat erbij
 * zodat de styling blijft werken als het formulier ooit overgaat.
 */
body :is(.gravity-theme, .gform-theme--framework) .gform-datepicker-calendar {
	/* GF 2.10.5 deed 400px met cellen van 50x50. Op verzoek compacter gezet:
	   cellen 38x38 met cirkels van 32x32. Niet verder omlaag — onder ~32px
	   worden de dagen te klein om comfortabel aan te tikken. */
	max-width: 300px;
	width: auto;
	margin-top: 5px;
	padding: 12px;
	background: #fff;
	border: 1px solid #d0d1d3;
	border-radius: 3px;
	box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .11), 0 0 .25rem rgba(18, 25, 97, .0405344);
	color: #607382;
	font-size: .8125rem;
	font-weight: 500;

	& table.calendar {
		width: 100%;
		margin: 0;
		background: 0 0;
		border: 0;
		border-collapse: collapse;
		/* GF 2.10.5 had hier table-layout:fixed, maar daar bevatte de tabel
		   alleen de dagen — de kop stond in een eigen div. In 3.0 zitten de
		   jaar- en maandrij in dezelfde tabel, en dan verdeelt fixed de
		   kolommen op basis van die 3-cellige eerste rij. Vandaar auto. */
		table-layout: auto;

		& thead,
		& tbody,
		& tr {
			margin: 0;
			background: 0 0;
			border: 0;
		}

		/* de oude kalender had geen enkele rasterlijn */
		& td,
		& th {
			padding: 3px;
			background: 0 0;
			border: 0;
			text-shadow: none;
			text-transform: none;
		}

		/* --- jaar- en maandrij ------------------------------------------- */
		& td.nav,
		& td.year,
		& td.month {
			background: 0 0;
			color: #607382;
			font-weight: 500;
			text-align: center;
		}

		& td.nav.btn {
			width: 26px;
			height: 26px;
			background: 0 0;
			background-image: none;
			color: #607382;
			cursor: pointer;
			transition: color .3s ease-in-out;

			/* zonder eigen breedte erft deze span GF's `td span { width: 40px }`.
			   De pijlcel wordt daar 46px breed van, en omdat dat de breedste
			   cel in de kolom is, worden álle dagkolommen 46px. */
			& span {
				width: auto;
				color: inherit;
				font-size: 18px;
				line-height: 1;
			}

			&:hover:not(.disabled),
			&:focus:not(.disabled) {
				background: 0 0;
				color: #2f4054;
			}

			&.disabled {
				cursor: default;

				& span {
					opacity: .35;
				}
			}
		}

		/* --- weekdagkoppen ------------------------------------------------ */
		& th,
		& th.week {
			background: 0 0;
			border: 0;

			& span {
				display: flex;
				width: 32px;
				height: 18px;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				color: #2f4054;
				font-size: .8125rem;
				font-weight: 500;
			}
		}

		/* --- dagcellen: rond, transparant, pas kleur bij aanwijzen -------- */
		& td.day,
		& td.empty {
			width: 38px;
			height: 38px;
			background: 0 0;
			border: 0;
			font-size: .8125rem;
		}

		/* ook de lege cellen bevatten een span. Zonder eigen breedte erven die
		   GF's `td span { width: 40px }`, en omdat de kolombreedte door de
		   breedste cel wordt bepaald, rekken ze de hele kalender op. */
		& td.empty span {
			width: 32px;
			height: 32px;
		}

		& td.day span {
			display: flex;
			width: 32px;
			height: 32px;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			background: 0 0;
			border: 1px solid transparent;
			border-radius: 100%;
			box-shadow: none;
			color: #2f4054;
			font-weight: 400;
			text-decoration: none;
			transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
		}

		/* let op: .selected hier uitsluiten. De datepicker zet focus op de gekozen
		   dag, en td.day:not(.disabled):focus span is specifieker dan de
		   selected-regel hieronder — zonder deze uitzondering wordt de gevulde
		   cirkel weer transparant en blijft er een lege ring over. */
		& td.day:not(.disabled):not(.selected) {
			& span {
				cursor: pointer;
			}

			&:hover span,
			&:focus span,
			& span:hover,
			& span:focus {
				background: 0 0;
				border-color: #607382;
				outline: 0;
			}

			& span:active {
				background: #f2f3f5;
				border-color: #607382;
			}
		}

		/* gekozen dag: gevulde cirkel */
		& td.selected span,
		& td.day.selected span {
			background: #607382;
			border-color: #607382;
			box-shadow: 0 .125rem .125rem rgba(58, 58, 87, .0596411);
			color: #fff;
			cursor: pointer;
		}

		/* bij hover en focus blijft de gekozen dag gevuld — in GF 2.10.5 stond
		   hiervoor een eigen regel die alleen de randkleur aanpaste */
		& td.day.selected:hover span,
		& td.day.selected:focus span,
		& td.day.selected span:hover,
		& td.day.selected span:focus {
			background: #607382;
			border-color: #607382;
			color: #fff;
			outline: 0;
		}

		/* niet te kiezen dagen, o.a. door de 48-uursregel */
		& td.day.disabled span {
			background: #f2f3f5;
			border: 1px solid rgba(32, 32, 46, .079);
			border-radius: 100%;
			box-shadow: 0 .125rem .125rem rgba(58, 58, 87, .0596411);
			color: #686e77;
			cursor: text;
		}

		/* GF 2.10.5 markeerde 'vandaag' niet apart — gelijktrekken met de rest,
		   behalve wanneer die dag ook echt gekozen is */
		& td[aria-current="date"]:not(.selected):not(.disabled) span {
			background: 0 0;
			border-color: transparent;
			box-shadow: none;
			color: #2f4054;
		}
	}

	/* de jaar- en maandkiezer: geen randen, alleen tekst met een pijltje */
	& select {
		width: auto;
		max-width: 100%;
		height: auto;
		min-height: 0;
		margin: 0 auto;
		padding: 0 22px 0 0;
		-webkit-appearance: none;
		appearance: none;
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585e6a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-position: 100% 50%;
		background-repeat: no-repeat;
		background-size: 24px 24px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #585e6a;
		cursor: pointer;
		font-size: .875rem;
		font-weight: 500;
		line-height: 1;
		text-shadow: none;
	}

	/* "Press F1 for help" is onvertaald en bestond niet in 2.10.5 */
	& .monthMessage {
		display: none;
	}
}

/* Op mobiel was de kalender 235px in plaats van 400px. GF 3.0 schaalt niet
   meer mee, waardoor hij daar over het formulier heen valt. */
@media (max-width: 640px) {
	body :is(.gravity-theme, .gform-theme--framework) .gform-datepicker-calendar {
		max-width: 235px;

		& table.calendar {
			& td,
			& th {
				padding: 3px;
			}

			& th span {
				width: 20px;
				height: 20px;
			}

			& td.day,
			& td.empty {
				width: 30px;
				height: 30px;
			}

			& td.day span,
			& td.empty span {
				width: 20px;
				height: 20px;
			}
		}
	}
}

/* Blogberichten (Elementor-template "Blogbericht" #2125): koppen en links in huisstijl (2 okt 2026) */
.elementor-widget-theme-post-content {
	& h2,
	& h3 {
		font-family: "Roboto", sans-serif;
		font-weight: 600;
		color: #262262;
		line-height: 1.25;
		margin: 1.6em 0 .5em;
	}
	& h2 { font-size: 30px; }
	& h3 { font-size: 22px; }

	& a {
		color: #0D6E92;
		text-decoration: underline;
		text-underline-offset: 3px;
		&:hover { color: #262262; }
	}

	@media (max-width: 767px) {
		& h2 { font-size: 24px; }
		& h3 { font-size: 20px; }
	}
}