/* Werken in Eemsdelta – vormgeving van wat niet in Elementor kan: de vacature-onderdelen van WP Job Manager,
   de formulieren van deze plugin en een paar details (rode stempel, header, footer).
   Kleuren en lettertypes staan in Elementor → Site-instellingen; hier dezelfde waarden als variabelen. */
/* Lettertypes zelf gehost (geen verbinding met Google, AVG). Licentie SIL OFL, bron fontsource. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800 900; font-display: swap; src: url(fonts/montserrat-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/open-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/open-sans-latin-600-normal.woff2) format('woff2'); }

:root {
	--wie-blauw: #15285A;
	--wie-nacht: #0E1C40;
	--wie-rood: #DC2E22;
	--wie-rood-d: #B8231A;
	--wie-kalk: #F4F2EC;
	--wie-staal: #E6EBF3;
	--wie-tekst: #1D2433;
	--wie-grijs: #5A6374;
	--wie-lijn: #DCE1EA;
	--wie-kop: 'Montserrat', 'Arial Black', sans-serif;
}

body { color: var(--wie-tekst); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--wie-rood); outline-offset: 2px; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Tekst ---------- */
.wie-lead { font-size: 19px; max-width: 680px; }
.wie-smal { max-width: 720px; }
.wie-smal-band > .e-con-inner { max-width: 820px !important; }
.wie-op-donker, .wie-op-donker .elementor-heading-title, .wie-op-donker p { color: #fff !important; }
.wie-leestekst { max-width: 720px; }
.wie-leestekst h2 { font-family: var(--wie-kop); font-weight: 800; font-size: 24px; color: var(--wie-blauw); margin: 1.6em 0 .4em; }
.wie-blok h3, .wie-blok .elementor-heading-title { font-size: 20px; }
.wie-blok { padding-top: 0 !important; }
.wie-punten { border-top: 2px solid var(--wie-blauw); gap: 0 !important; max-width: 920px; }
.wie-rij-punt { padding: 22px 0 !important; border-bottom: 1px solid var(--wie-lijn); }
.wie-rij-punt > .elementor-widget-heading { flex: 0 0 280px; }
.wie-rij-punt .elementor-heading-title { font-size: 19px !important; line-height: 1.4; }
.wie-rij-punt > .elementor-widget-text-editor { flex: 1; }
@media (max-width: 767px) { .wie-rij-punt > .elementor-widget-heading { flex-basis: auto; } }

/* ---------- Knoppen ---------- */
.wie-knop-w .elementor-button, .wie-knop, .wie-zoek button, .job-manager-form input[type=submit], .application_button, .wie-form button {
	font-family: var(--wie-kop); font-weight: 700; font-size: 16px; line-height: 1.2;
	background: var(--wie-rood); color: #fff; border: 0; border-radius: 6px; padding: 14px 24px; cursor: pointer;
	transition: background .15s;
}
.wie-knop-w .elementor-button:hover, .wie-knop:hover, .wie-zoek button:hover, .job-manager-form input[type=submit]:hover, .application_button:hover, .wie-form button:hover { background: var(--wie-rood-d); color: #fff; }
.wie-knop-rand .elementor-button { background: transparent !important; border: 2px solid #fff; color: #fff; border-radius: 6px; padding: 12px 22px; }
.wie-knop-rand .elementor-button:hover { background: #fff !important; color: var(--wie-blauw); }
.wie-knop-rand-donker .elementor-button { background: transparent !important; border: 2px solid var(--wie-blauw); color: var(--wie-blauw); border-radius: 6px; padding: 12px 22px; }
.wie-knop-rand-donker .elementor-button:hover { background: var(--wie-blauw) !important; color: #fff; }
.wie-link-pijl .elementor-button { background: none !important; padding: 0 !important; border-radius: 0; color: var(--wie-blauw); font-size: 16px; text-decoration: underline; text-underline-offset: .25em; }
.wie-link-pijl .elementor-button:hover { background: none; color: var(--wie-rood); }
.wie-link-pijl .elementor-button-text::after { content: " →"; }

/* ---------- Header ---------- */
.wie-header { position: sticky; top: 0; z-index: 50; }
.wie-logo img { display: block; width: 168px; height: auto; }
.wie-logo--footer img { width: 190px; }
.wie-nav .hfe-nav-menu a.hfe-menu-item { font-family: var(--wie-kop); font-weight: 700; font-size: 15px; }
.wie-nav .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item { box-shadow: inset 0 -3px 0 var(--wie-rood); }
.wie-header-knop .elementor-button { padding: 11px 18px; font-size: 15px; }
@media (max-width: 767px) {
	.wie-logo img { width: 128px; }
	.wie-header-knop .elementor-button { padding: 9px 12px; font-size: 13.5px; }
}

/* ---------- Hero ---------- */
.wie-hero .elementor-heading-title { color: #fff !important; font-size: clamp(38px, 6vw, 68px); line-height: 1.05; max-width: 820px; }
.wie-stempel { display: inline-block; background: var(--wie-rood); color: #fff; padding: .02em .22em .08em; transform: rotate(-2.5deg); margin-left: .1em; }
.wie-hero-tekst, .wie-hero-tekst p { color: #fff !important; font-size: 19px; max-width: 600px; }
.wie-zoek { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 0; background: #fff; border-radius: 8px; padding: 6px; max-width: 820px; box-shadow: 0 18px 40px rgba(0,0,0,.25); margin-top: 8px; }
.wie-zoek label { display: flex; flex-direction: column; padding: 8px 16px; margin: 0; }
.wie-zoek label + label { border-left: 1px solid var(--wie-lijn); }
.wie-zoek span { font-size: 12.5px; font-weight: 600; color: var(--wie-grijs); }
.wie-zoek input { border: 0 !important; padding: 2px 0 !important; font-size: 17px; color: var(--wie-tekst); background: transparent; box-shadow: none !important; }
.wie-zoek input:focus { outline: none; }
.wie-zoek button { align-self: stretch; }
@media (max-width: 767px) {
	.wie-zoek { grid-template-columns: 1fr; }
	.wie-zoek label + label { border-left: 0; border-top: 1px solid var(--wie-lijn); }
	.wie-zoek button { margin-top: 6px; }
}

/* ---------- Vacaturelijst (WP Job Manager) ---------- */
ul.job_listings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wie-lijn); }
ul.job_listings li.job_listing { border-bottom: 1px solid var(--wie-lijn); margin: 0; padding: 0; background: #fff; }
ul.job_listings li.job_listing a { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 18px; align-items: center; padding: 18px 12px; text-decoration: none; color: inherit; border-left: 4px solid transparent; transition: border-color .15s, background .15s; }
ul.job_listings li.job_listing a:hover { background: var(--wie-kalk); border-left-color: var(--wie-rood); }
ul.job_listings li.job_listing img.company_logo { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--wie-lijn); padding: 4px; margin: 0; position: static; }
ul.job_listings .position h3 { font-family: var(--wie-kop); font-weight: 700; font-size: 18px; color: var(--wie-blauw); margin: 0 0 2px; line-height: 1.3; }
ul.job_listings .position .company { font-size: 15px; color: var(--wie-grijs); }
ul.job_listings .position .company .tagline { display: none; }
ul.job_listings .location { font-size: 15px; color: var(--wie-tekst); white-space: nowrap; }
ul.job_listings ul.meta { list-style: none; margin: 0; padding: 0; text-align: right; font-size: 13.5px; color: var(--wie-grijs); }
ul.job_listings ul.meta li { margin: 0 0 4px; }
ul.job_listings ul.meta li.job-type { display: inline-block; background: var(--wie-staal); color: var(--wie-blauw); font-weight: 600; padding: 2px 10px; border-radius: 99px; }
ul.job_listings li.job_position_featured a { background: #FFF8F2; border-left-color: var(--wie-rood); }
ul.job_listings li.job_position_featured .position h3::after { content: "Uitgelicht"; display: inline-block; margin-left: 10px; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 700; color: #fff; background: var(--wie-rood); padding: 2px 8px; border-radius: 4px; vertical-align: 3px; }
@media (max-width: 767px) {
	ul.job_listings li.job_listing a { grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 16px 8px; }
	ul.job_listings li.job_listing img.company_logo { width: 44px; height: 44px; grid-row: span 3; align-self: start; }
	ul.job_listings .location, ul.job_listings ul.meta { grid-column: 2; text-align: left; }
	ul.job_listings ul.meta li { display: inline-block; margin-right: 8px; }
}
.job_listings .no_job_listings_found, li.no_job_listings_found { padding: 20px 12px; color: var(--wie-grijs); }
.load_more_jobs { display: block; text-align: center; padding: 16px; font-weight: 700; color: var(--wie-blauw); border: 2px solid var(--wie-blauw); border-radius: 6px; margin-top: 20px; text-decoration: none; }
.load_more_jobs:hover { background: var(--wie-blauw); color: #fff; }

/* Standaardopmaak van WP Job Manager (floats en vaste breedtes) uitzetten in de lijst */
ul.job_listings li.job_listing a div.position, ul.job_listings li.job_listing a div.location, ul.job_listings li.job_listing a ul.meta,
ul.job_listings li.job_listing a img.company_logo { float: none !important; width: auto !important; padding: 0 !important; position: static !important; left: auto !important; visibility: visible !important; margin: 0 !important; line-height: 1.4 !important; }
ul.job_listings li.job_listing a img.company_logo { width: 56px !important; height: 56px !important; padding: 4px !important; }
ul.job_listings li.job_listing a div.location { font-size: 15px !important; text-align: left !important; }
ul.job_listings li.job_listing a ul.meta { text-align: right !important; }
@media (max-width: 767px) {
	ul.job_listings li.job_listing a img.company_logo { width: 44px !important; height: 44px !important; }
	ul.job_listings li.job_listing a ul.meta { text-align: left !important; }
}

/* Filters */
.job_filters { background: var(--wie-kalk); border-radius: 8px; padding: 18px; margin-bottom: 24px; }
.job_filters .search_jobs { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 12px; padding: 0 !important; background: none !important; align-items: stretch; }
.job_filters .search_jobs::before, .job_filters .search_jobs::after { display: none !important; }
.job_filters .search_jobs > div { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.job_filters .search_jobs > div:not([class]) { display: none !important; }
.job_filters .search_jobs .search_submit input { height: 48px; width: 100%; padding: 0 22px; }
.job_filters .select2-container, .job_filters .chosen-container { width: 100% !important; }
.job_filters input[type=text], .job_filters select { width: 100% !important; height: 48px; border: 1px solid #C9D0DC !important; border-radius: 6px !important; padding: 0 14px !important; font-size: 16px !important; background-color: #fff; color: var(--wie-tekst); box-shadow: none !important; }
.job_filters select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315285A' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.job_filters input[type=text]:focus, .job_filters select:focus { border-color: var(--wie-blauw) !important; outline: 2px solid var(--wie-staal); }
.job_filters .search_jobs label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.job_filters .job_types { list-style: none; margin: 14px 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px; border: 0 !important; background: none !important; }
.job_filters .job_types::before, .job_filters .job_types::after { display: none !important; }
.job_filters .job_types li { border: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; width: auto !important; font-size: 15px; }
.job_filters .job_types label { position: relative; display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #C9D0DC; border-radius: 99px; background: #fff; color: var(--wie-grijs); cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; font-weight: 600; line-height: 1.2; }
.job_filters .job_types input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.job_filters .job_types label:has(input:checked) { background: var(--wie-staal); border-color: #B9C4D8; color: var(--wie-blauw); }
.job_filters .job_types label:not(:has(input:checked)) { color: #8A92A1; text-decoration: line-through; text-decoration-color: rgba(138,146,161,.6); }
.job_filters .job_types label:has(input:checked)::before { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--wie-blauw); border-bottom: 2px solid var(--wie-blauw); transform: rotate(-45deg) translateY(-2px); }
.job_filters .job_types label:hover { border-color: var(--wie-blauw); }
.job_filters .job_types label:has(input:focus-visible) { outline: 3px solid var(--wie-rood); outline-offset: 2px; }
.job_filters .showing_jobs { background: none; padding: 10px 0 0; font-size: 14px; color: var(--wie-grijs); border: 0; }
@media (max-width: 900px) { .job_filters .search_jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .job_filters .search_jobs { grid-template-columns: 1fr; } }

/* ---------- Losse vacature ---------- */
.single-job_listing .page-header .entry-title { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: clamp(30px, 4vw, 44px); }
.single-job_listing .site-main, .single-wie_bedrijf .site-main { max-width: 860px; margin: 0 auto; padding: 48px 20px 80px; }
.single_job_listing .company { display: flex; gap: 16px; align-items: center; border: 0; padding: 0; margin: 0 0 18px; }
.single_job_listing .company img.company_logo { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--wie-lijn); border-radius: 8px; padding: 6px; position: static; margin: 0; }
.single_job_listing .company .name { font-family: var(--wie-kop); font-weight: 700; color: var(--wie-blauw); }
.single_job_listing .company .name a { font-size: 15px; font-weight: 600; margin-left: 10px; }
.single_job_listing ul.job-listing-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; background: none; border: 0; }
.single_job_listing ul.job-listing-meta li { background: var(--wie-staal); color: var(--wie-blauw); padding: 4px 12px; border-radius: 99px; font-size: 14px; margin: 0; }
.single_job_listing ul.job-listing-meta li.job-type { background: var(--wie-blauw); color: #fff; }
.single_job_listing ul.job-listing-meta li::before { display: none; }
.single_job_listing .job_description { font-size: 17px; margin: 24px 0 32px; }
.wie-naar-bedrijf { font-weight: 600; margin: -6px 0 18px; }
.single_job_listing .application { background: var(--wie-kalk); border-radius: 10px; padding: 24px; margin-top: 32px; }
.single_job_listing .application .application_details { background: none; border: 0; box-shadow: none; padding: 18px 0 0; margin: 0; position: static; }
.job-manager-message, .job-manager-info { background: var(--wie-staal); border-left: 4px solid var(--wie-blauw); padding: 12px 16px; }

/* ---------- Formulieren (sollicitatie, profiel, vacature plaatsen) ---------- */
.wie-form p { margin: 0 0 14px; }
.wie-form label, .job-manager-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--wie-blauw); }
.wie-form label small, .job-manager-form small { font-weight: 400; color: var(--wie-grijs); }
.wie-form input:not([type=checkbox]):not([type=file]), .wie-form textarea, .job-manager-form input.input-text, .job-manager-form textarea, .job-manager-form select {
	width: 100%; border: 1px solid #C9D0DC; border-radius: 6px; padding: 11px 12px; font-size: 16px; background: #fff;
}
.wie-form input:focus, .wie-form textarea:focus, .job-manager-form input:focus, .job-manager-form textarea:focus { border-color: var(--wie-blauw); outline: 2px solid var(--wie-staal); }
.wie-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .wie-rij { grid-template-columns: 1fr; } }
.wie-akkoord label { font-weight: 400; color: var(--wie-tekst); display: flex; gap: 10px; align-items: flex-start; }
.wie-akkoord input { margin-top: 5px; flex: none; }
.wie-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
.wie-melding { background: var(--wie-staal); border-left: 4px solid var(--wie-blauw); padding: 12px 16px; margin: 0 0 16px; }
.wie-melding--ok { background: #E8F4EC; border-color: #2E7D4F; }
.wie-melding--fout { background: #FDECEA; border-color: var(--wie-rood); }
.job-manager-form fieldset { border: 0; padding: 0; margin: 0 0 18px; display: block; }
.job-manager-form fieldset > label { float: none; width: auto; padding: 0; }
.job-manager-form fieldset div.field { float: none; width: auto; }
.job-manager-form h2 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 24px; margin: 32px 0 14px; }

/* ---------- Dashboard ---------- */
.wie-dashboard .job-manager-jobs { font-size: 15px; }
.wie-reacties { display: block; font-weight: 600; color: var(--wie-blauw); }
.wie-promo-status { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--wie-rood); }
.wie-profiel-kop { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 28px; border-top: 1px solid var(--wie-lijn); padding-top: 32px; margin: 8px 0 12px; }
.wie-profiel { max-width: 640px; }

/* ---------- Bedrijven ---------- */
ul.wie-bedrijven { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 40px; border-top: 1px solid var(--wie-lijn); }
ul.wie-bedrijven li { border-bottom: 1px solid var(--wie-lijn); }
ul.wie-bedrijven a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 0; text-decoration: none; color: var(--wie-tekst); }
ul.wie-bedrijven a:hover strong { color: var(--wie-rood); }
ul.wie-bedrijven strong { font-family: var(--wie-kop); color: var(--wie-blauw); font-size: 17px; align-self: end; transition: color .15s; }
ul.wie-bedrijven span { font-size: 14.5px; color: var(--wie-grijs); align-self: start; }
.wie-bedrijven-logo { grid-row: span 2; width: 56px; height: 56px; display: grid !important; place-items: center; }
.wie-bedrijven-logo img { max-width: 56px; max-height: 56px; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.wie-bedrijf-letter { width: 56px; height: 56px; display: grid !important; place-items: center; background: var(--wie-staal); color: var(--wie-blauw) !important; font-family: var(--wie-kop); font-weight: 800; font-size: 24px !important; border-radius: 6px; }
.single-wie_bedrijf .page-header .entry-title { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); }
.wie-bedrijf-kop { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.wie-bedrijf-logo img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--wie-lijn); border-radius: 10px; padding: 8px; }
.wie-bedrijf-gegevens { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.wie-bedrijf-vacatures { margin-top: 40px; }
.wie-bedrijf-vacatures h2 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 26px; }

/* ---------- Footer ---------- */
.wie-footer, .wie-footer p, .wie-footer a { color: #C9D2E3; font-size: 15px; }
.wie-footer a:hover { color: #fff; }
.wie-footer-kop .elementor-heading-title { color: #fff !important; font-family: var(--wie-kop); font-weight: 700; font-size: 16px; }
.wie-footer-lijst { list-style: none; margin: 0; padding: 0; }
.wie-footer-lijst li { margin-bottom: 8px; }
.wie-footer-onder { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; margin: 0; font-size: 14px !important; }

/* Kleine correcties */
ul.job_listings li.job_listing a ul.meta li.job-type { display: inline-block !important; width: auto !important; float: none !important; }
.job_filters .showing_jobs a.rss_link { display: none; }
.wie-header-rechts { flex-wrap: nowrap !important; }
@media (max-width: 1024px) {
	.wie-header-rechts > .elementor-widget-navigation-menu, .wie-header-rechts .elementor-widget-navigation-menu { width: auto !important; order: 2; }
	.wie-header-rechts .wie-header-knop { order: 1; }
}
.single_job_listing .company img.company_logo[src*="wp-job-manager/assets/images/company"] { display: none; }
.wie-header-knop .elementor-button { white-space: nowrap; }
@media (max-width: 767px) {
	.wie-header-knop .elementor-button { padding: 9px 12px !important; font-size: 13.5px !important; }
	.wie-header-rechts { gap: 4px !important; }
	.wie-header-rechts .hfe-nav-menu__toggle { margin-left: 0 !important; }
}
.wie-header-knop { flex-shrink: 0 !important; }
@media (max-width: 1024px) {
	.wie-header-rechts .elementor-widget-navigation-menu { flex: 0 0 44px !important; max-width: 44px; }
}

/* ---------- Pakketten en partners: lijst met lijnen, geen kaarten ---------- */
.wie-pakketten { border-top: 2px solid var(--wie-blauw); max-width: 920px; }
.wie-pakket { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--wie-lijn); }
.wie-pakket h3 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 19px; line-height: 1.4; margin: 0 0 4px; }
.wie-pakket-prijs { margin: 0; font-weight: 700; font-size: 17px; color: var(--wie-tekst); }
.wie-pakket-prijs span { display: block; font-weight: 400; font-size: 15px; color: var(--wie-grijs); }
.wie-pakket-inhoud ul { list-style: none; margin: 0 0 10px; padding: 0; }
.wie-pakket-inhoud li { margin: 0 0 6px; font-size: 16.5px; }
.wie-pakket-hoe { font-size: 14.5px; color: var(--wie-grijs); margin: 0; }
@media (max-width: 767px) { .wie-pakket { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } }

.wie-partners { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 32px; align-items: center; }
.wie-partners h2 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 26px; margin: 0 0 6px; }
.wie-partners p { margin: 0; color: var(--wie-grijs); }
.wie-partners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.wie-partners li a { display: block; text-decoration: none; font-family: var(--wie-kop); font-weight: 700; color: var(--wie-blauw); }
.wie-partners li img { display: block; height: 56px; width: auto; max-width: 180px; object-fit: contain; border-radius: 4px; }
@media (max-width: 767px) { .wie-partners { grid-template-columns: 1fr; gap: 18px; } .wie-partners li img { height: 44px; } }

.wie-label-partner { display: inline-block; background: var(--wie-rood); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 4px; margin-top: 4px; width: fit-content; }

.wie-bedrijf-video { margin: 24px 0; aspect-ratio: 16 / 9; }
.wie-bedrijf-video iframe { width: 100%; height: 100%; border-radius: 10px; }
.wie-partnerblok { background: var(--wie-staal); border-radius: 8px; padding: 16px 18px; margin: 0 0 22px; max-width: 640px; }
.wie-partnerblok p { margin: 0 0 10px; }
.wie-knop--licht { background: var(--wie-blauw) !important; padding: 10px 18px !important; font-size: 15px !important; }
.wie-partners { padding-bottom: 40px; margin-bottom: 16px; border-bottom: 1px solid var(--wie-lijn); }

/* ---------- Bedrijfspagina (templates/bedrijf.php) ----------
   Rustig en redactioneel: geen kaarten of labels, één ritme van witruimte (--bp-ruimte tussen secties). */
.wie-bp { --bp-ruimte: 80px; --bp-kop: 20px; --bp-breed: 1180px; --bp-zij: 300px; }
.wie-bp-pagina { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.wie-bp h2 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 30px; line-height: 1.2; margin: 0 0 var(--bp-kop); }
.wie-bp p { margin: 0 0 1em; }
.wie-bp p:last-child { margin-bottom: 0; }

.wie-bp-hero { background: var(--wie-blauw); color: #fff; }
.wie-bp-hero--foto { background: linear-gradient(180deg, rgba(14,28,64,0) 25%, rgba(14,28,64,.9) 100%), var(--wie-omslag) center 40% / cover no-repeat; min-height: 520px; display: flex; align-items: flex-end; }
.wie-bp-hero-in { width: 100%; max-width: var(--bp-breed); margin: 0 auto; padding: 72px 24px 56px; }
.wie-bp-kop { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.wie-bp-logo { flex: none; width: 84px; height: 84px; background: #fff; border-radius: 10px; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.wie-bp-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wie-bp-logo span { font-family: var(--wie-kop); font-weight: 800; font-size: 40px; color: var(--wie-blauw); }
.wie-bp-kop h1 { font-family: var(--wie-kop); font-weight: 800; color: #fff !important; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; margin: 0; }
.wie-bp-meta { font-size: 17px; color: #DCE3F0; margin: 0 0 28px !important; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.wie-bp-meta span { white-space: nowrap; }
.wie-bp-punt { opacity: .6; }
.wie-bp-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 !important; }
.wie-bp .wie-knop { display: inline-block; text-decoration: none; }
.wie-bp-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.wie-bp-link:hover { color: #fff; text-decoration-color: var(--wie-rood); }

.wie-bp-body { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--bp-zij); gap: 72px; align-items: start; }
.wie-bp-main > * + * { margin-top: var(--bp-ruimte); }
.wie-bp-over { font-size: 18px; line-height: 1.7; max-width: 680px; }

.wie-bp-waarom dl { margin: 0; max-width: 760px; }
.wie-bp-waarom dl > div { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--wie-lijn); }
.wie-bp-waarom dl > div:last-child { border-bottom: 1px solid var(--wie-lijn); }
.wie-bp-waarom dt { font-family: var(--wie-kop); font-weight: 700; color: var(--wie-blauw); font-size: 18px; line-height: 1.4; }
.wie-bp-waarom dd { margin: 0; font-size: 17px; }

.wie-bp-citaat { margin: var(--bp-ruimte) 0 0; max-width: 720px; }
.wie-bp-citaat blockquote { margin: 0 0 22px; padding: 0; border: 0; }
.wie-bp-citaat blockquote p { font-family: var(--wie-kop); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--wie-blauw); font-style: normal; margin: 0; text-indent: -.45em; }
.wie-bp-citaat blockquote p::before { content: "“"; color: var(--wie-rood); }
.wie-bp-citaat blockquote p::after { content: "”"; color: var(--wie-rood); }
.wie-bp-citaat figcaption { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--wie-grijs); }
.wie-bp-citaat figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.wie-bp-citaat figcaption strong { display: block; color: var(--wie-tekst); font-size: 16px; }

.wie-bp-video { aspect-ratio: 16 / 9; }
.wie-bp-video iframe { width: 100%; height: 100%; border-radius: 8px; }
.wie-bp-galerij { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 8px; }
.wie-bp-galerij a { display: block; overflow: hidden; border-radius: 6px; }
.wie-bp-galerij a:first-child { grid-column: span 2; grid-row: span 2; }
.wie-bp-galerij a:last-child:not(:first-child) { grid-column: span var(--sd, 1); }
.wie-bp-galerij img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wie-bp-galerij a:hover img { transform: scale(1.03); }

.wie-bp-zij { position: sticky; top: 104px; font-size: 15.5px; }
.wie-bp-feiten { margin: 0 0 32px; }
.wie-bp-feiten > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--wie-lijn); }
.wie-bp-feiten > div:first-child { border-top: 2px solid var(--wie-blauw); }
.wie-bp-feiten dt { color: var(--wie-grijs); }
.wie-bp-feiten dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.wie-bp-contact p { margin: 0 0 14px; color: var(--wie-grijs); }
.wie-bp-persoon { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.wie-bp-persoon img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.wie-bp-persoon strong { display: block; color: var(--wie-blauw); font-size: 17px; }
.wie-bp-persoon span { color: var(--wie-grijs); }
.wie-bp-tel { font-weight: 700; font-size: 17px; color: var(--wie-blauw); text-decoration: none; }
.wie-bp-tel:hover { color: var(--wie-rood); }
.wie-bp-partnerregel { margin: 32px 0 0 !important; font-size: 14px; color: var(--wie-grijs); }

.wie-bp-vacatures { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px var(--bp-ruimte); }
.wie-bp-open { background: var(--wie-kalk); scroll-margin-top: 80px; }
.wie-bp-open-in { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px; display: grid; grid-template-columns: var(--bp-zij) minmax(0, 720px); gap: 72px; }
#vacatures { scroll-margin-top: 80px; }

@media (max-width: 1024px) {
	.wie-bp { --bp-ruimte: 64px; }
	.wie-bp-body { grid-template-columns: 1fr; gap: var(--bp-ruimte); }
	.wie-bp-zij { position: static; max-width: 560px; }
	.wie-bp-open-in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
	.wie-bp { --bp-ruimte: 48px; --bp-kop: 14px; }
	.wie-bp h2 { font-size: 24px; }
	.wie-bp-hero--foto { min-height: 440px; }
	.wie-bp-hero-in { padding: 48px 16px 36px; }
	.wie-bp-kop { gap: 14px; }
	.wie-bp-logo { width: 60px; height: 60px; padding: 6px; }
	.wie-bp-meta { margin-bottom: 22px !important; }
	.wie-bp-body, .wie-bp-vacatures, .wie-bp-open-in { padding-left: 16px; padding-right: 16px; }
	.wie-bp-over { font-size: 17px; }
	.wie-bp-waarom dl > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
	.wie-bp-galerij { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
	.wie-bp-galerij a:last-child:not(:first-child) { grid-column: span var(--sm, 1); }
}

/* Profielformulier: partnervelden */
.wie-partnervelden { border: 1px solid var(--wie-lijn); border-radius: 10px; padding: 18px 20px 6px; margin: 8px 0 18px; }
.wie-partnervelden legend { font-family: var(--wie-kop); font-weight: 700; color: var(--wie-blauw); padding: 0 6px; }
.wie-partnervelden--uit .wie-veld { opacity: .5; }
.wie-hulp { display: block; font-size: 13.5px; color: var(--wie-grijs); margin-top: 4px; }
.wie-form select { width: 100%; border: 1px solid #C9D0DC; border-radius: 6px; padding: 11px 12px; font-size: 16px; background: #fff; }
.wie-check { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 400 !important; color: var(--wie-tekst) !important; }
.wie-foto-nu, .wie-galerij-nu { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; align-items: flex-end; }
.wie-foto-nu img, .wie-galerij-nu img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.wie-galerij-nu > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wie-bp-hero a.wie-bp-link { color: #fff !important; display: inline; }
.wie-bp-citaat figcaption, .wie-bp-citaat figcaption * { font-style: normal; }
.wie-bp a.wie-knop, .wie-bp a.wie-knop:hover { color: #fff !important; }
.wie-job-video { aspect-ratio: 16 / 9; margin: 28px 0 0; }
.wie-job-video iframe { width: 100%; height: 100%; border-radius: 8px; }
.wie-promo-status { display: block; }
.wie-intro .elementor-widget-heading h1 { max-width: 780px; }

/* ---------- Vacaturepagina (templates/vacature.php): zelfde ritme als de bedrijfspagina ---------- */
.wie-vp { --bp-ruimte: 72px; --bp-kop: 18px; --bp-breed: 1180px; --bp-zij: 320px; }
.wie-vp h2 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 28px; line-height: 1.2; margin: 0 0 var(--bp-kop); }
.wie-vp p { margin: 0 0 1em; }
.wie-vp p:last-child { margin-bottom: 0; }
.wie-vp-hero { background: var(--wie-blauw); color: #fff; }
.wie-vp-hero-in { max-width: var(--bp-breed); margin: 0 auto; padding: 56px 24px 52px; }
.wie-vp-bedrijf { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; margin: 0 0 14px !important; }
.wie-vp-bedrijf a { color: #fff !important; text-decoration: none; }
.wie-vp-bedrijf a:hover { text-decoration: underline; text-underline-offset: .2em; }
.wie-vp-logo { width: 44px; height: 44px; background: #fff; border-radius: 6px; display: grid; place-items: center; padding: 4px; overflow: hidden; }
.wie-vp-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wie-vp-hero h1 { font-family: var(--wie-kop); font-weight: 800; color: #fff !important; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; margin: 0 0 18px; max-width: 900px; }
.wie-vp-kenmerken { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 17px; color: #DCE3F0; margin: 0 0 28px !important; }
.wie-vp-kenmerken span { white-space: nowrap; }
.wie-vp-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 !important; }
.wie-vp a.wie-knop, .wie-vp a.wie-knop:hover { color: #fff !important; display: inline-block; text-decoration: none; }
.wie-vp-hero a.wie-bp-link { color: #fff !important; }
.wie-vp-dicht { background: rgba(255,255,255,.1); border-left: 4px solid var(--wie-rood); padding: 12px 16px; margin: 0 !important; }
.wie-vp-dicht a { color: #fff !important; font-weight: 600; }
.wie-vp-hero--foto .wie-vp-hero-in { padding-bottom: 136px; }
.wie-vp-foto { margin: -96px auto 0; max-width: var(--bp-breed); padding: 0 24px; position: relative; }
.wie-vp-foto img { display: block; width: 100%; height: clamp(240px, 38vw, 480px); object-fit: cover; border-radius: 10px; }

.wie-vp-body { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px var(--bp-ruimte); display: grid; grid-template-columns: minmax(0, 1fr) var(--bp-zij); gap: 72px; align-items: start; }
.wie-vp-tekst { font-size: 17.5px; line-height: 1.7; max-width: 700px; }
.wie-vp-tekst h2, .wie-vp-tekst h3 { font-family: var(--wie-kop); font-weight: 800; color: var(--wie-blauw); font-size: 22px; line-height: 1.3; margin: 40px 0 12px; }
.wie-vp-tekst > :first-child { margin-top: 0; }
.wie-vp-tekst ul { margin: 0 0 1em; padding-left: 1.2em; }
.wie-vp-tekst li { margin-bottom: .4em; }
.wie-vp-tekst li::marker { color: var(--wie-rood); }
.wie-vp-video { margin-top: 48px; }
.wie-vp-zij { position: sticky; top: 104px; font-size: 15.5px; }
.wie-vp-zij h2 { font-size: 20px; margin-bottom: 12px; }
.wie-vp-zij .wie-bp-feiten { margin-bottom: 24px; }
.wie-vp-zijknop { width: 100%; text-align: center; margin-bottom: 32px; }

.wie-vp-solliciteren { scroll-margin-top: 80px; }
.wie-vp-over { border-bottom: 1px solid var(--wie-lijn); }
.wie-vp-over-in { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px; display: grid; grid-template-columns: var(--bp-zij) minmax(0, 720px); gap: 72px; }
.wie-vp-over-in h2 { grid-row: span 2; }
.wie-vp-meer { font-weight: 700; color: var(--wie-blauw); }
.wie-vp-meer-vacatures { max-width: var(--bp-breed); margin: 0 auto; padding: var(--bp-ruimte) 24px; }

@media (max-width: 1024px) {
	.wie-vp { --bp-ruimte: 56px; }
	.wie-vp-body { grid-template-columns: 1fr; gap: 48px; }
	.wie-vp-zij { position: static; max-width: 560px; }
	.wie-vp-over-in { grid-template-columns: 1fr; gap: 0; }
	.wie-vp-over-in h2 { grid-row: auto; }
}
@media (max-width: 767px) {
	.wie-vp { --bp-ruimte: 44px; --bp-kop: 14px; }
	.wie-vp h2 { font-size: 24px; }
	.wie-vp-hero-in { padding: 40px 16px 36px; }
	.wie-vp-hero--foto .wie-vp-hero-in { padding-bottom: 36px; }
	.wie-vp-foto { padding: 0; margin-top: 0; }
	.wie-vp-foto img { border-radius: 0; }
	.wie-vp-body, .wie-vp-over-in, .wie-vp-meer-vacatures { padding-left: 16px; padding-right: 16px; }
	.wie-vp-tekst { font-size: 17px; }
}

/* ---------- Banner "Uitgelichte vacature" boven de header ---------- */
.wie-banner { background: #F1F0EC; padding: 5px 16px 8px; }
.wie-banner-kop { max-width: 970px; margin: 0 auto 4px; display: flex; justify-content: space-between; font-size: 11.5px; line-height: 1.3; color: var(--wie-grijs); }
.wie-banner-items { position: relative; max-width: 970px; height: 76px; margin: 0 auto; }
.wie-banner-item { position: absolute; inset: 0; display: grid; grid-template-columns: 170px 1fr auto; align-items: center; background: #fff; border: 1px solid #D9D6CE; text-decoration: none !important; color: var(--wie-tekst) !important; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.wie-banner-item.is-actief { opacity: 1; visibility: visible; }
.wie-banner-item:not(:has(.wie-banner-foto)) { grid-template-columns: 1fr auto; }
.wie-banner-foto { align-self: stretch; background: center / cover no-repeat; }
.wie-banner-tekst { display: flex; align-items: center; gap: 16px; padding: 0 24px; min-width: 0; }
.wie-banner-logo { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.wie-banner-logo img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.wie-banner-tekst > span:last-child { min-width: 0; }
.wie-banner-tekst strong { display: block; font-family: var(--wie-kop); font-weight: 800; font-size: 21px; line-height: 1.15; color: var(--wie-blauw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wie-banner-info { display: block; font-size: 14.5px; color: var(--wie-grijs); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wie-banner-knop { margin-right: 20px; background: var(--wie-rood); color: #fff; font-family: var(--wie-kop); font-weight: 700; font-size: 14.5px; padding: 9px 16px; border-radius: 6px; white-space: nowrap; transition: background .15s; }
.wie-banner-item:hover .wie-banner-knop { background: var(--wie-rood-d); }
.wie-banner-item:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

@media (max-width: 767px) {
	.wie-banner { padding: 4px 12px 6px; }
	.wie-banner-kop { font-size: 11px; margin-bottom: 3px; }
	.wie-banner-items { height: 56px; }
	.wie-banner-item, .wie-banner-item:not(:has(.wie-banner-foto)) { grid-template-columns: 64px 1fr; }
	.wie-banner-item:not(:has(.wie-banner-foto)) .wie-banner-tekst { grid-column: 1 / -1; }
	.wie-banner-tekst { padding: 0 12px; gap: 10px; }
	.wie-banner-logo { display: none; }
	.wie-banner-tekst strong { font-size: 16px; }
	.wie-banner-info { font-size: 13px; margin-top: 2px; }
	.wie-banner-knop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wie-banner-item { transition: none; } }

/* Header blijft bovenaan plakken als de banner weggescrold is */
header#masthead, .ehf-header #masthead { position: sticky; top: 0; z-index: 60; }
body.admin-bar header#masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar header#masthead { top: 46px; } }