/*
 Theme Name:   Kingster Child
 Theme URI:    http://demo.goodlayers.com/kingster
 Description:  Goodlayers Kingster Child Theme
 Author:       Goodlayers
 Author URI:   http://goodlayers.com
 Template:     kingster
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, right-sidebar, responsive-layout
 Text Domain:  kingster-child

 START YOUR CHILD THEME CSS HERE
*/

/* ==========================================================================
   Inleiding onder de paginatitel
   ========================================================================== */

/* Zie itqan_inleiding_buffer_sluit(): dit blok wordt achter de titel in de
   kopafbeelding gezet. De kleur komt inline mee uit de themaoptie, zodat de
   inleiding dezelfde kleur heeft als de titel erboven. Rond de 70 tekens per
   regel leest prettiger dan de volle breedte van de hero. */
/* --itqan-tekst komt uit de thema-instelling (Typografie → Content Font Size);
   zie itqan_tekstmaat_variabele(). De afgeleide maten verderop rekenen daarop
   door, zodat het overzicht meeschaalt als die instelling verandert.

   De inleiding hieronder is de uitzondering: die draagt ook de themaclass
   .kingster-page-caption en erft daarmee de tekstmaat die bij de gekozen
   titelstijl hoort (21px bij "medium"). Alleen plaatsing en breedte staan hier;
   de marge van de caption hoort bóven de titel en moet hier juist weg. */
.kingster-page-intro {
	max-width: 640px;
	margin-top: 16px;
	margin-bottom: 0;
	line-height: 1.5;
}

.kingster-page-intro p {
	margin: 0;
}

.kingster-page-intro p + p {
	margin-top: 10px;
}


/* ==========================================================================
   Aanbodpagina: filterkolom
   ========================================================================== */

.itqan-filters {
	background: #f6f8fb;
	border: 1px solid #e4e9f0;
	border-radius: 6px;
	padding: 28px 26px 22px;
	margin-bottom: 40px;
}

.itqan-filters__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e0e6ef;
}

.itqan-filters h4.itqan-filters__titel {
	margin: 0;
	font-family: LeBeauneNew, Jost, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #192f59;
}

.itqan-filters__wissen {
	flex: 0 0 auto;
	font-size: calc(var(--itqan-tekst, 16px) - 1px);
	color: #0082fa;
	text-decoration: underline;
}

.itqan-filters__zoek {
	display: block;
	margin-bottom: 26px;
}

.itqan-filters__zoek input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	font-size: var(--itqan-tekst, 16px);
	line-height: 1.4;
	color: #293a5b;
	background: #fff;
	border: 1px solid #d5dce6;
	border-radius: 4px;
}

.itqan-filters__zoek input[type="text"]:focus {
	border-color: #0082fa;
	outline: 2px solid rgba(0, 130, 250, .18);
	outline-offset: 1px;
}

/* Filtergroep */
.itqan-filters .itqan-filters__groep {
	display: block;
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}

.itqan-filters .itqan-filters__groep:last-of-type {
	margin-bottom: 8px;
}

.itqan-filters .itqan-filters__legenda {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
	font-family: LeBeauneNew, Jost, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #192f59;
}

/* Eén optie per regel. Het thema maakt labels inline, vandaar de nadruk. */
.itqan-filters .itqan-filters__optie {
	display: flex !important;
	float: none;
	width: 100%;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	margin: 0;
	font-family: Jost, sans-serif;
	font-size: calc(var(--itqan-tekst, 16px) + 2px);
	line-height: 1.45;
	color: #34405a;
	cursor: pointer;
}

.itqan-filters .itqan-filters__optie + .itqan-filters__optie {
	border-top: 1px solid #eaeef4;
}

.itqan-filters .itqan-filters__optie:hover {
	color: #0082fa;
}

.itqan-filters .itqan-filters__optie input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #0082fa;
	cursor: pointer;
}

.itqan-filters .itqan-filters__optie input[type="checkbox"]:focus-visible {
	outline: 3px solid rgba(0, 130, 250, .5);
	outline-offset: 2px;
}

.itqan-filters__naam {
	flex: 1 1 auto;
}

.itqan-filters__aantal {
	flex: 0 0 auto;
	min-width: 30px;
	padding: 3px 9px;
	font-size: calc(var(--itqan-tekst, 16px) - 2px);
	line-height: 1.3;
	text-align: center;
	color: #5a6880;
	background: #e7ecf3;
	border-radius: 999px;
}

.itqan-filters__knop {
	width: 100%;
	margin-top: 10px;
	padding: 13px 20px;
	font-size: var(--itqan-tekst, 16px);
	color: #fff;
	background: #0082fa;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

/* Knop om de filters op mobiel te tonen; op desktop niet nodig. */
.itqan-filters__schakelaar {
	display: none;
	width: 100%;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: var(--itqan-tekst, 16px);
	font-weight: 600;
	text-align: left;
	color: #fff;
	background: #192f59;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.itqan-filters__schakelaar .fa {
	float: right;
	margin-top: 3px;
	transition: transform .2s ease;
}

.itqan-filters__schakelaar[aria-expanded="true"] .fa {
	transform: rotate(180deg);
}

/* ==========================================================================
   Aanbodpagina: resultaten
   ========================================================================== */

.itqan-aanbod-pagina h5.itqan-aanbod__telling {
	margin: 0 0 24px;
	font-family: LeBeauneNew, Jost, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #192f59;
}

/* Eén resultaat per rij: op volle breedte leest een liggende kaart prettiger. */
.itqan-kaarten {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.itqan-kaarten__leeg {
	grid-column: 1 / -1;
	padding: 40px 32px;
	text-align: center;
	font-size: calc(var(--itqan-tekst, 16px) + 1px);
	color: #7a879e;
	background: #f6f8fb;
	border-radius: 6px;
}

.itqan-kaart {
	background: #fff;
	border: 1px solid #e4e9f0;
	border-radius: 6px;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.itqan-kaart:hover,
.itqan-kaart:focus-within {
	border-color: #0082fa;
	box-shadow: 0 10px 28px rgba(25, 47, 89, .13);
	transform: translateY(-3px);
}

/* De hele kaart is de link; daarom geen losse knop onderaan. */
.itqan-kaart__link {
	display: block;
	height: 100%;
	text-decoration: none;
}

.itqan-kaart__link:focus-visible {
	outline: 3px solid #0082fa;
	outline-offset: 2px;
}

.itqan-kaart__body {
	display: flex;
	flex-direction: column;
	padding: 24px 28px 22px;
}

/* Labels boven de titel: soort, niveau en voertaal. */
.itqan-kaart__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 13px;
}

.itqan-kaart__badge {
	display: inline-block;
	padding: 4px 11px;
	font-family: Jost, sans-serif;
	font-size: calc(var(--itqan-tekst, 16px) - 3px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
	color: #5a6880;
	background: #eef1f6;
}

/* Het soort is de grofste indeling en krijgt daarom de accentkleur. */
.itqan-kaart__badge--soort {
	color: #0082fa;
	background: rgba(0, 130, 250, .1);
}

.itqan-kaart__badge--level {
	color: #1f7a4d;
	background: rgba(31, 122, 77, .1);
}

.itqan-kaart__badge--voertaal {
	color: #7a5a1f;
	background: rgba(122, 90, 31, .1);
}

.itqan-kaart__titel {
	display: block;
	margin-bottom: 10px;
	font-family: LeBeauneNew, Jost, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: #192f59;
	transition: color .18s ease;
}

.itqan-kaart:hover .itqan-kaart__titel {
	color: #0082fa;
}

.itqan-kaart__tekst {
	display: block;
	margin-bottom: 18px;
	font-family: Jost, sans-serif;
	font-size: var(--itqan-tekst, 16px);
	line-height: 1.6;
	color: #6b6b6b;
}

/* Feiten met een pictogram in plaats van een tekstlabel. */
.itqan-kaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #eef1f6;
}

.itqan-kaart__feit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Jost, sans-serif;
	font-size: calc(var(--itqan-tekst, 16px) - 1px);
	line-height: 1.4;
	color: #7a879e;
}

.itqan-kaart__feit [class^="icon_"] {
	font-size: calc(var(--itqan-tekst, 16px) + 2px);
	line-height: 1;
	color: #b3bdcd;
	transition: color .18s ease;
}

.itqan-kaart:hover .itqan-kaart__feit [class^="icon_"] {
	color: #0082fa;
}

/* Paginering */
.itqan-paginering {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid #e4e9f0;
}

.itqan-paginering__stand {
	font-family: Jost, sans-serif;
	font-size: var(--itqan-tekst, 16px);
	color: #7a879e;
}

.itqan-paginering__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.itqan-paginering__lijst li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.itqan-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: Jost, sans-serif;
	font-size: var(--itqan-tekst, 16px);
	line-height: 1;
	color: #34405a;
	background: #fff;
	border: 1px solid #d5dce6;
	border-radius: 4px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.itqan-paginering a.page-numbers:hover {
	border-color: #0082fa;
	color: #0082fa;
}

.itqan-paginering .page-numbers.current {
	color: #fff;
	background: #0082fa;
	border-color: #0082fa;
}

.itqan-paginering .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #a8b2c3;
}

.itqan-paginering a.page-numbers:focus-visible {
	outline: 3px solid rgba(0, 130, 250, .5);
	outline-offset: 2px;
}

/* ==========================================================================
   Mobiel: filters achter een uitklapper
   ========================================================================== */

/* Ruimte tussen de filterkolom en de resultaten. */
.itqan-aanbod-pagina .gdlr-core-column-20 {
	padding-right: 34px;
}

@media (max-width: 767px) {
	.itqan-aanbod-pagina .gdlr-core-column-20,
	.itqan-aanbod-pagina .gdlr-core-course-search-page-content-wrap {
		float: none;
		width: 100%;
		padding-right: 0;
	}

	.itqan-kaart__body {
		padding: 20px 20px 18px;
	}

	.itqan-filters__schakelaar {
		display: block;
	}

	.itqan-filters {
		padding: 22px 20px 18px;
		margin-bottom: 28px;
	}

	.itqan-filters[hidden] {
		display: none;
	}

	/* Ruimer aantikgebied op een aanraakscherm. */
	.itqan-filters .itqan-filters__optie {
		padding: 12px 0;
	}
}