/*
 * 15, contact: [sm_contactblok] en [sm_faq].
 *
 * Kaal, zoals Tim het wil: geen vlakken, geen schaduw, geen afgeronde hoeken.
 * De achtergrond komt van de Elementor-container: bovenaan de kleur van de
 * pagina, onder de vragen het lichtgele vlak (--swipe-vlak).
 *
 * De FAQ volgt de vorm van Evi Verbindt, Tims standaard voor elke FAQ: plusje
 * links, de vragen plat op het vlak met alleen een dun lijntje eronder, de
 * vraag op gewicht 300. De vinkjes zijn die van de shopfilter (04).
 */

/* ------------------------------------------------------------------ */
/* [sm_contactblok]                                                    */
/* ------------------------------------------------------------------ */

.swipe-contact {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 48px;
	color: var( --swipe-tekst, #111 );
}

.swipe-contact--met-formulier {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 64px;
}

.swipe-contact__tekst {
	max-width: 520px;
}

.swipe-contact__eyebrow,
.swipe-faq__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --swipe-tekst-zacht, #6b6b6b );
}

.swipe-contact .swipe-contact__kop {
	margin: 0 0 18px;
}

.swipe-contact__zin {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
}

.swipe-contact__mail {
	margin: 0;
	font-size: 16px;
}

.swipe-contact__label {
	margin-right: 8px;
	font-weight: 500;
}

/* a. ervoor: de Elementor-kit zet alle links bruin en wint anders. */
.swipe-contact a,
.swipe-contact a:visited {
	color: var( --swipe-tekst, #111 );
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.swipe-contact a:hover {
	opacity: .65;
}

/* ------------------------------------------------------------------ */
/* [sm_faq]                                                            */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Het Elementor-formulier naast [sm_contactblok]                      */
/* ------------------------------------------------------------------ */

/*
 * De Formulier-widget krijgt in Elementor de klasse swipe-contactformulier
 * (Geavanceerd, CSS-klassen). Lijn en afronding zijn die van het zoekveld in
 * de header: rgba(17,17,17,.15) en 3 px, met een zwarte lijn bij focus (Tim).
 * Daarom staan ze hier en niet in de widget, dan lopen ze samen op.
 */
.swipe-contactformulier {
	--contact-lijn: rgba( 17, 17, 17, .15 );
}

.swipe-contactformulier .elementor-field-group .elementor-field-textual,
.swipe-contactformulier .elementor-field-group input.elementor-field,
.swipe-contactformulier .elementor-field-group textarea.elementor-field {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --contact-lijn );
	border-radius: 3px;
	background: transparent;
	box-shadow: none;
	color: var( --swipe-tekst, #111 );
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

.swipe-contactformulier .elementor-field-group .elementor-field-textual:focus {
	border-color: var( --swipe-tekst, #111 );
	outline: none;
	box-shadow: none;
}

.swipe-contactformulier .elementor-field-textual::placeholder {
	color: var( --swipe-tekst-zacht, #6b6b6b );
	opacity: 1;
}

/* De knop staat links en is zo breed als zijn tekst, niet over de hele kolom. */
.swipe-contactformulier .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

/* De knop: zwart met witte letters, dezelfde vorm als Add to cart. */
.swipe-contactformulier .elementor-button,
.swipe-contactformulier .elementor-button:hover,
.swipe-contactformulier .elementor-button:focus {
	min-height: 44px;
	padding: 12px 36px;
	border: 0;
	border-radius: 30px;
	background: var( --swipe-tekst, #111 );
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	box-shadow: none;
}

.swipe-contactformulier .elementor-button:hover {
	opacity: .85;
}

/* ------------------------------------------------------------------ */

.swipe-faq {
	--faq-lijn: rgba( 17, 17, 17, .15 );
	--faq-groen: var( --swipe-merk, #2B3319 );
	--faq-goud: var( --e-global-color-text, #F0E7C6 );

	color: var( --swipe-tekst, #111 );
}

.swipe-faq__kop {
	margin-bottom: 40px;
	max-width: 680px;
}

.swipe-faq .swipe-faq__titel {
	margin: 0;
}

.swipe-faq__intro {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.swipe-faq__binnen {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

.swipe-faq--met-kolom .swipe-faq__binnen {
	grid-template-columns: 240px minmax( 0, 1fr );
	gap: 37px;
	align-items: start;
}

/* --- De kolom: onderwerpen en zoeken --- */

.swipe-faq__onderwerpen {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.swipe-faq__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.35;
}

.swipe-faq__optie:hover .swipe-faq__naam {
	opacity: .65;
}

.swipe-faq__aantal {
	color: var( --swipe-tekst-zacht, #6b6b6b );
	font-size: 13px;
}

input.swipe-faq__vink {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var( --swipe-tekst, #111 );
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.swipe-faq__optie:hover input.swipe-faq__vink {
	background: rgba( 43, 51, 25, .08 );
}

input.swipe-faq__vink:checked,
.swipe-faq__optie:hover input.swipe-faq__vink:checked {
	background: var( --faq-groen );
	border-color: var( --faq-groen );
}

input.swipe-faq__vink:checked::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	margin: 1px auto 0;
	border: solid var( --faq-goud );
	border-width: 0 1.5px 1.5px 0;
	transform: rotate( 45deg );
}

input.swipe-faq__vink:focus-visible {
	outline: 2px solid rgba( 17, 17, 17, .5 );
	outline-offset: 2px;
}

/* input ervoor: reset.css van Hello geeft elk zoekveld een rand en afronding. */
input.swipe-faq__zoek {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	/* Zelfde lijn en afronding als het zoekveld in de header. */
	border: 1px solid rgba( 17, 17, 17, .15 );
	border-radius: 3px;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	color: inherit;
}

input.swipe-faq__zoek:focus {
	outline: 1px solid var( --swipe-tekst, #111 );
	outline-offset: 0;
	border-color: var( --swipe-tekst, #111 );
}

/* --- De vragen --- */

.swipe-faq__item {
	border-bottom: 1px solid var( --faq-lijn );
}

.swipe-faq__item[hidden] {
	display: none;
}

.swipe-faq__vraag {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	list-style: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.swipe-faq__item:first-of-type .swipe-faq__vraag {
	padding-top: 8px;
}

.swipe-faq__vraag::-webkit-details-marker {
	display: none;
}

/* Het plusje links; open wordt het een min. */
.swipe-faq__vraag::before {
	content: "+";
	flex: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.swipe-faq__item[open] > .swipe-faq__vraag::before {
	content: "\2212";
}

.swipe-faq__vraag:hover {
	opacity: .7;
}

.swipe-faq__vraag:focus-visible {
	outline: 1px solid var( --swipe-tekst, #111 );
	outline-offset: -1px;
}

.swipe-faq__antwoord {
	max-width: 820px;
	padding: 0 20px 14px 46px;
	font-size: 16px;
	line-height: 1.7;
}

.swipe-faq__antwoord > :first-child {
	margin-top: 0;
}

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

.swipe-faq__antwoord a {
	color: inherit;
	text-decoration: underline;
}

.swipe-faq__leeg {
	margin: 8px 20px;
	color: var( --swipe-tekst-zacht, #6b6b6b );
}

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

/* ------------------------------------------------------------------ */
/* Smallere schermen                                                   */
/* ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.swipe-contact--met-formulier {
		grid-template-columns: minmax( 0, 1fr );
		gap: 40px;
	}
}

@media ( max-width: 767px ) {
	.swipe-faq--met-kolom .swipe-faq__binnen {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	.swipe-faq__vraag {
		padding-left: 0;
		padding-right: 0;
	}

	.swipe-faq__antwoord {
		padding: 0 0 14px 26px;
	}
}