/* ==========================================================================
   site.css - handgeschreven. Alles wat niet in base.css (transpiler: framework, fonts, Astra-basis) of
   header-footer.css zit: toegankelijkheid, dynamische inhoud (berichttekst), formulieren, vacaturefilter
   en -kaarten, zoekpagina, 404, overzichten. Laadt na base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: #054695;
	color: #fff;
	font: 600 16px/1 Montserrat, sans-serif;
	text-decoration: none;
	border-radius: 4px;
	outline: 2px solid #fff;
}
:focus-visible { outline: 2px solid #054695; outline-offset: 2px; }
.menu-link:focus-visible, .hdr-search-link:focus-visible { outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Rasters (aanvulling op base.css: kolommen per breekpunt via --grid-columns uit parts.css)
   -------------------------------------------------------------------------- */
.grid .grid-items { grid-template-columns: repeat(var(--grid-columns, 3), 1fr); }
.grid-empty { margin: 0; font-family: Montserrat, sans-serif; }
.grid-more { text-align: center; margin-top: 32px; }
.grid-more-btn { background: #054695; font-size: 18px; font-weight: 500; }
.grid-more-btn:hover, .grid-more-btn:focus { background: #082344; }
.post-thumb { width: 100%; height: auto; display: block; }
.post-thumb-link { display: block; }
.pinfo .il-icon svg { fill: #fff; }

/* --------------------------------------------------------------------------
   Berichttekst (nieuws en vacatures). Gemeten op de oude site: de koppen zijn de Astra-basis uit base.css
   (rem-maten met de 921px-schaal, clear:both, #1e293b, gewicht 600; de marges 1.5em / 0.3em+10px staan
   in parts.css), alinea's 1.75em, lijsten 1.5em onder en 3em inspringen. De oude site laadde GEEN
   blokstijlen van WordPress: kolommenblokken staan onder elkaar, een alignright-afbeelding zweeft rechts
   met 1.5em marge (Astra) en de kop erna begint onder de afbeelding.
   -------------------------------------------------------------------------- */
.post-content p { margin: 0 0 1.75em; }
/* Lijsten: op de single-templates (bericht, vacature) gold Astra's basis 0 0 1.5em 3em; de 18px/20px van
   base.css hoort bij .entry-content en geldt alleen op pagina's. */
.post-content ul, .post-content ol, .single .txt ul, .single .txt ol { margin: 0 0 1.5em 3em; padding: 0; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li > p { margin-bottom: 0; }
.post-content a { color: #046bd2; }
.post-content a:hover, .post-content a:focus { color: #045cb4; }
.post-content img { max-width: 100%; height: auto; vertical-align: middle; }
.post-content blockquote {
	border-left: 5px solid #d1d5db;
	padding: 20px;
	font-size: 1.2em;
	font-style: italic;
	margin: 0 0 1.5em;
}
.post-content figure { margin: 0 0 1em; }
.post-content table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; }
.post-content th, .post-content td { border: 1px solid #d1d5db; padding: .5em; text-align: left; }
/* Blokken zonder blokstijlen (wp-block-columns / wp-block-image laden wel hun core-CSS; hier teruggedraaid) */
.post-content .wp-block-columns { display: block; }
.post-content .wp-block-column { overflow-wrap: normal; word-break: normal; }
.post-content .wp-block-image.alignright, .post-content .wp-block-image .alignright { display: block; float: right; margin: 0 0 0 1.5em; }
.post-content .wp-block-image.alignleft, .post-content .wp-block-image .alignleft { display: block; float: left; margin: 0 1.5em 0 0; }
.post-content .wp-block-image.aligncenter, .post-content .wp-block-image .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 544px) {
	.post-content .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: 20px; }
}

/* Berichtinfo (post-info): de tekst erft lettertype en -gewicht van het item; de regel voor
   icoonlijsten in base.css (.il-item > .il-text, gewicht 400) geldt op de oude site niet voor post-info. */
.pinfo .il-item > .il-text { font-family: inherit; font-weight: inherit; }

/* --------------------------------------------------------------------------
   Formulieren (aanvulling op de primitieven in base.css)
   -------------------------------------------------------------------------- */
.ebn-form { width: 100%; }
.fg-100 { width: 100%; }
.fg-33 { width: 33.333%; }
.fg-hp { display: none !important; }
/* Uploadveld: op de oude site een kaal bestandsveld op eigen breedte (geen veldhoogte/-padding) */
.fld-upload {
	width: auto;
	max-width: none;
	min-height: 0;
	height: auto;
	color: inherit;
	font-family: inherit;
	padding: 0;
	background: transparent;
	border: 0;
}
/* Ruimte tussen vinkje en tekst (de oude markup had daar een spatie) */
.fld-acceptance, .fg-checkbox .fg-opt input, .fg-radio .fg-opt input { margin: 0 4px 0 0; }
/* Optielabels: Astra-basis label{line-height:20px} en de kit-tekstkleur; een formulier met eigen
   labelstijlen (contact: .e-… .fg-sub label) overschrijft dit via zijn pagina-css */
.fg-opt label { line-height: 20px; color: #7A7A7A; }
.fg-sub .fg-opt label { cursor: pointer; }
.fg textarea.fld { resize: vertical; }
.form-btn { cursor: pointer; }
.form-btn[disabled] { opacity: .7; cursor: wait; }
.form-error .fld { border: 1px solid #d9534f; }
.form-help {
	flex-basis: 100%;
	color: #d9534f;
	font-size: 14px; /* was .9em = 13,1px op een telefoon */
	font-family: Montserrat, sans-serif;
	margin-top: 4px;
}
/* Bewuste wijzigingen voor alle breedtes (zie _ebnbreda_migratie/reports/mobiel-fixes-toegepast.md):
   (b) label zichtbaar boven een bestandsveld (een bestandsknop heeft geen placeholder; inc/forms.php zet fld-label--visible) */
.fld-label--visible {
	flex-basis: 100%;
	width: 100%;
	margin: 0 0 6px;
	font: 600 14px/1.4 Montserrat, sans-serif;
	color: #333;
}
/* (e) Vinkjes op normale grootte: geen geërfde veldhoogte/-padding (.fld op contact, .contact-form input{min-height:52px!important}) */
.ebn-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 6px 0 0;
	vertical-align: middle;
	flex: 0 0 20px;
}
/* (e) Ongeldig veld: rode rand als outline (de per-formulier regels zetten border-width 0, dus een border zou niet tonen) en
   scroll-margin-top zodat de browser bij native validatie het veld onder de sticky header (93px) vandaan scrolt */
.ebn-form .fld, .ebn-form .fg { scroll-margin-top: 110px; }
.ebn-form .form-error .fld { outline: 2px solid #d9534f; outline-offset: -1px; }
.ebn-form .fld:user-invalid { outline: 2px solid #d9534f; outline-offset: -1px; }
/* (f) Werkgebied-icoon: geüploade SVG met stroke-paden en fill="none" op de root; de icon-list-regel (fill:#054695 op svg)
   vulde de paden en tekende een blauw vierkant. Vink-afbeeldingen (24x22) in een vak van 20x20 / 18x18: niet vervormen. */
.il-w .il-icon svg[fill="none"] { fill: none; }
.img img[src*="/Check-"] { object-fit: contain; }
/* Chevron in de inklapknop van het vacaturefilter: alleen op een telefoon zichtbaar (mobile.css) */
.filter-chevron { display: none; }
.form-msg[hidden] { display: none; }
.form-msg-ok { color: #009B34; }
.form-msg-err { color: #C95656; }
.form-msg { font-family: Montserrat, sans-serif; }
@media (max-width: 767px) {
	.fg-33 { width: 100%; }
	/* Bewuste afwijking van de oude site: daar stak het bestandsveld (361px) op 390px buiten het scherm
	   (pagina 406px breed, horizontaal scrollen). Hier past het binnen de kolom. */
	.fld-upload { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Vacaturefilter en -kaarten (overgenomen uit de Customizer-CSS en de oude inline stijlen)
   -------------------------------------------------------------------------- */
#vacancy-filter-wrapper { display: flex; gap: 80px; flex-wrap: wrap; }
#vacancy-filters { flex: 0 0 280px; }
#vacancy-results { flex: 1; min-width: 0; }
#vacancy-results.is-loading { opacity: .6; }
#vacancy-results > p { margin: 0; font-family: Montserrat, sans-serif; }
.vacancy-error { color: red; }
form#vacancy_filter_form * { font-family: Montserrat, sans-serif; }
.filter-group { margin-bottom: 40px; }
.filter-heading, .filter-toggle { margin: 0 0 8px; font-weight: 600; }
.filter-toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 18px; }
.filter-toggle-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	text-align: left;
	font: inherit;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}
.filter-group.collapsed .filter-content { display: none; }
/* Oud: label inline (Astra label{line-height:20px}), de margin-bottom van de Customizer-CSS deed daardoor niets;
   de regels staan 24px uit elkaar (regelhoogte van .filter-content). Inline-block zou de marge wel tellen (34px). */
.filter-group label { font-size: 14px; color: #333; margin-bottom: 10px; font-weight: 400; display: inline; line-height: 20px; }
.filter-group input[type="checkbox"] {
	border: 1px solid #C3C3C3;
	height: 16px;
	width: 16px;
	vertical-align: text-top;
	margin: 0 7px 0 0;
}
.filter-working-area { display: flex; column-gap: 16px; }
.filter-working-area div { flex-grow: 1; flex-basis: 0; position: relative; }
.filter-working-area input, .filter-working-area select {
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	border: 1px solid #C3C3C3;
	font-size: 14px;
	padding: 8px 10px;
	color: #333;
	background: #fff;
	/* Astra-basis op de oude site: input[type=text], select {height:40px; line-height:24px} */
	height: 40px;
	line-height: 24px;
	box-sizing: border-box;
}
.filter-working-area select { appearance: none; -webkit-appearance: none; }
.filter-working-area > div:last-child:after {
	content: '';
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #000;
	position: absolute;
	top: 18px;
	right: 10px;
	pointer-events: none;
}
#search_area_btn {
	border: 1px solid #054695;
	color: #054695;
	background: transparent;
	padding: 12px 20px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	text-decoration: none;
	text-align: center;
	transition: all .2s ease;
	width: 100%;
	margin-top: 24px;
	cursor: pointer;
}
#search_area_btn:hover, #search_area_btn:focus { background: #054695; color: #fff; }

.vacancy-card {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
	margin-bottom: 24px;
	transition: transform .2s ease;
}
.vacancy-image { flex: 0 0 43%; }
.vacancy-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vacancy-content * { font-family: Montserrat, sans-serif; }
.vacancy-content {
	flex: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.vacancy-title { font-size: 24px; font-weight: 600; color: #000; margin: 0 0 16px; line-height: 1.3; }
.vacancy-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.vacancy-tags .tag {
	background: #e9f0ff;
	color: #054695;
	font-size: 12px;
	font-weight: 400;
	padding: 8px 12px;
	border-radius: 4px;
	line-height: normal;
	font-family: Montserrat, sans-serif;
}
.vacancy-desc { color: #000; font-size: 16px; margin: 0 0 30px; line-height: 24px; }
.vacancy-buttons { display: flex; column-gap: 24px; }
.btn-outline, .btn-primary {
	padding: 12px 20px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	text-decoration: none;
	text-align: center;
	transition: all .2s ease;
}
.btn-outline { border: 1px solid #054695; color: #054695; background: transparent; }
.btn-outline:hover, .btn-outline:focus { background: #054695; color: #fff; }
.btn-primary { background: #054695; color: #fff; border: 1px solid #054695; }
.btn-primary:hover, .btn-primary:focus { color: #fff; }
@media (max-width: 768px) {
	.vacancy-card { flex-direction: column; }
	.vacancy-image { flex: 0 0 auto; }
	.vacancy-buttons { display: flex; column-gap: 10px; }
	.btn-outline, .btn-primary { padding: 10px 15px; font-size: 14px; }
	div#vacancy-filters { flex: 1 !important; }
	div#vacancy-filter-wrapper { flex-direction: column; gap: 0 !important; }
}

/* --------------------------------------------------------------------------
   Themapagina's zonder gegenereerd template: zoeken, 404, overzichten, generieke pagina
   -------------------------------------------------------------------------- */
.page-search, .page-404, .page-archive, .page-generic { --padding-top: 64px; --padding-bottom: 64px; }
.page-search > .ci, .page-404 > .ci, .page-archive > .ci, .page-generic > .ci { padding-inline: 20px; }
.page-header { text-align: center; margin: 0 0 48px; }
.page-title {
	margin: 0 0 12px;
	font: 600 32px/1.4 Montserrat, sans-serif;
	color: #1e293b;
}
.page-generic .page-title { text-align: left; margin-bottom: 24px; }
.crumbs { font: 400 14px/1.6 Montserrat, sans-serif; color: #334155; margin-bottom: 24px; }
.crumbs a { color: #046bd2; text-decoration: none; }
.search-none { text-align: center; font-family: Montserrat, sans-serif; }
.loop-grid-page { --grid-column-gap: 32px; --grid-row-gap: 32px; }
.loop-grid-page .grid-items > .loop-item { text-align: left; }
.page-404 .error-404 { text-align: center; }
.page-404 .page-title { font-size: 36px; font-weight: 400; line-height: 1.4; margin-bottom: 24px; }
.page-404 .page-sub-title { font-size: 24px; font-weight: 400; color: #1e293b; margin: 0 0 1.75em; line-height: 1.3; }
.page-404 .search-form { margin: 0 auto; }
@media (max-width: 921px) {
	.page-404 .page-title { font-size: 30px; }
	.page-404 .page-sub-title { font-size: 20px; }
}

/* Zoekformulier (WordPress-standaard, in Astra-stijl) */
.search-form {
	display: flex;
	max-width: 370px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.search-form label { flex: 1; display: block; min-width: 0; }
.search-form .search-field {
	width: 100%;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	font-size: 16px;
	line-height: 24px;
	color: #475569;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
.search-form .search-field:focus { border-color: #046bd2; outline: 0; }
.search-form .search-submit {
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: #054695;
	color: #fff;
	font: 600 15px/1 Montserrat, sans-serif;
	cursor: pointer;
	margin: 0;
}
.search-form .search-submit:hover, .search-form .search-submit:focus { background: #082344; }

/* Paginering */
.pagination.navigation { margin: 40px 0 0; text-align: center; font-family: Montserrat, sans-serif; }
.pagination .nav-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	color: #054695;
	text-decoration: none;
	font-weight: 500;
}
.pagination .page-numbers.current { background: #054695; border-color: #054695; color: #fff; }
.pagination .page-numbers.dots { border: 0; }

/* Terugvalweergaven voor nieuwsbericht en vacature (alleen zonder gegenereerde onderdelen) */
.sp-hero, .sv-hero { --min-height: 570px; --padding-top: 0; --padding-bottom: 0; background-size: cover; background-position: center; }
.sp-body, .sv-body, .sv-apply { --padding-top: 60px; --padding-bottom: 60px; }
.sp-body > .ci, .sv-body > .ci, .sv-apply > .ci, .sp-related > .ci { padding-inline: 20px; }
.single-post-fallback .post-title, .sv-title { font: 700 40px/1.2 Montserrat, sans-serif; color: #000; margin-bottom: 24px; }
.sp-info { margin-bottom: 32px; }
.sp-share { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }
.sp-share-label { font: 700 16px/1 Montserrat, sans-serif; color: #000; }
.sp-related { --padding-top: 60px; --padding-bottom: 60px; background: #F0F5FA; }
.sp-related-title { text-align: center; font: 700 30px/1.2 Montserrat, sans-serif; color: #000; margin-bottom: 40px; }
.sv-apply-box { background: #F1F6FB; border-radius: 8px; padding: 40px; max-width: 820px; margin: 0 auto; }
.sv-apply-title { font: 600 24px/1.3 Montserrat, sans-serif; color: #000; margin-bottom: 12px; }
.sv-apply-intro { font: 400 16px/1.5 Montserrat, sans-serif; color: #333; margin: 0 0 24px; }
@media (max-width: 767px) {
	.single-post-fallback .post-title, .sv-title { font-size: 26px; }
	.sv-apply-box { padding: 24px 16px; }
}

/* --------------------------------------------------------------------------
   Lightbox (main.js, a[data-lightbox]). Maten en kleuren gemeten op de oude Elementor-lightbox (1440 en 390):
   overlay rgba(0,0,0,.8), tekst/iconen rgba(237,237,237,.9) (wit bij hover), afbeelding passend binnen 70px
   (mobiel 70px boven/onder), sluitknop 30x30 rechtsboven (13/15px, icoon 20px), pijlen als kolommen van 15%
   (mobiel 20%, tegen de rand) met een icoon van 25px, teller linksboven, titel onderaan (15px 20px, vet 16/24).
   -------------------------------------------------------------------------- */
.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 70px; background: rgba(0, 0, 0, .8); color: rgba(237, 237, 237, .9); }
.lb[hidden], .lb [hidden] { display: none; }
.lb picture { display: contents; }
.lb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.lb button { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; }
.lb button:hover, .lb button:focus-visible { color: #fff; }
.lb svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: 13px; right: 15px; width: 30px; height: 30px; z-index: 2; }
.lb-close svg { width: 20px; height: 20px; }
.lb-prev, .lb-next { top: 0; bottom: 0; width: 15%; z-index: 1; }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb-prev svg, .lb-next svg { width: 25px; height: 25px; }
.lb-count { position: absolute; top: 19px; left: 20px; font-size: 15px; line-height: 1.5; }
.lb-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 15px 20px; text-align: center; font-size: 16px; font-weight: 700; line-height: 24px; }
@media (max-width: 767px) {
	.lb { padding: 70px 0; }
	.lb-prev, .lb-next { width: 20%; }
	.lb .lb-prev { justify-content: flex-start; }
	.lb .lb-next { justify-content: flex-end; }
}