/*
 * SVM Huisstijl-override — Jupiter-thema naar Kleurentabel (jul 2026)
 *
 * OPBOUW (n.a.v. keuze "kleuren via Theme Options"):
 *   DEEL A = TIJDELIJKE KLEUR-OVERRIDES. Deze kleuren komen uit Jupiter Theme
 *            Options-velden die nog niet zijn bijgewerkt. Zodra je die velden in
 *            wp-admin op de huisstijlwaarden zet (zie THEME-OPTIONS-migratie.md),
 *            kan DEEL A wég en beheer je kleuren voortaan met de kleurenpickers.
 *   DEEL B = STRUCTURELE CSS. Kan Jupiter NIET via Theme Options (knoppen per stuk,
 *            formulier-layout, mega-menu-paneel, logo-uitlijning, footer-scheiding).
 *            Dit blijft klein en versiebeheerd.
 *
 * Uitzetten zonder deploy: define( 'SVM_HUISSTIJL_UIT', true ); in wp-config.php.
 *
 * Kleurentabel:
 *  Dark Coffee #2B1A12 · Racing Red #E30613 · Bone #EEE3D3 · Linen #F5EFE6
 *  White #FFFFFF · Ash Grey #B7CECE · Dusk Blue #3E517A
 */

:root {
	--svm-coffee: #2B1A12;
	--svm-red: #E30613;
	--svm-red-donker: #C10511;
	--svm-bone: #EEE3D3;
	--svm-linen: #F5EFE6;
	--svm-wit: #FFFFFF;
	--svm-ash: #B7CECE;
	--svm-dusk: #3E517A;
}

/* ============================================================
   DEEL A — TIJDELIJKE KLEUR-OVERRIDES (verhuizen naar Theme Options)
   ============================================================ */

/* A1. Basistekst + koppen (Theme Options → Typography; was bruin #47362a) */
body,
p,
.master-holder strong,
.master-holder h1,
.master-holder h2,
.master-holder h3,
.master-holder h4,
.master-holder h5,
.master-holder h6 {
	color: var(--svm-coffee);
}
/* Bodytekst: thema-standaard aangehouden (13px/1.66). Een eerdere verhoging naar
   15px/1.7 maakte tekstblokken hoger en vergrootte daardoor het hoogteverschil
   tussen kolommen, waardoor knoppen onder elkaar verder uit lijn liepen
   (op /opleiding 49px -> 71px). Niet essentieel, dus teruggedraaid. */

/* A2. Links (Theme Options → Styling → hyperlink kleur; was lime #89ba17 / hover #a37463).
       Hover = donker rood: gewoon Racing Red haalt op Linen maar 4.27:1 (onder AA 4.5);
       #C10511 haalt 5.57:1. */
a {
	color: var(--svm-dusk);
}
a:hover {
	color: var(--svm-red-donker);
}

/* A3. Content-achtergrond -> Linen (Theme Options → content/page background; was grijs #eeeeee).
       Keuze Wessel (24-07, terug naar footer-optie 1): content warm Linen, frame White (A5). */
.master-holder-bg,
.mk-news-tab .mk-tabs-tabs .is-active a,
.mk-fancy-title.pattern-style span,
.mk-fancy-title.pattern-style.color-gradient span:after,
.page-bg-color {
	background-color: var(--svm-linen) !important;
}

/* A4. Header/navigatiebalk -> Linen, zelfde kleur als de content. Was grijs #eeeeee.
       LET OP (fix 24-07): alleen de gelaagde bg-elementen (.mk-header-bg,
       .mk-classic-nav-bg) dragen de kaartkleur. Het <header>-element zelf (z-index
       301!) en .mk-header-nav-container zijn dekkende vlakken ZONDER radius die de
       afgeronde hoeken van de kop-kaart vierkant maakten — die moeten transparant
       (weglaten is niet genoeg: het thema zet er zelf #eeeeee op). */
.hb-custom-header #mk-page-introduce,
.mk-header-bg,
.mk-classic-nav-bg,
.mk-header-toolbar {
	background-color: var(--svm-linen) !important;
}
.mk-header,
.mk-header-nav-container {
	background-color: transparent !important;
}
/* Jupiter zet op sommige pagina's een 1px #ededed border-bottom op het
   header-element (stak 1px onder de kaart uit; door de kaartschaduw rendert
   dat als grijs haarlijntje op het reepje — melding Wessel 27-07). */
.mk-header {
	border-bottom: 0 !important;
}

/* A5. Pagina-/boxed-frame -> Dark Coffee (variant 2, keuze Wessel 24-07: het lichte
       frame gaf te weinig contrast met de Linen-kaarten). De footer wordt Dusk Blue
       (A10) zodat die niet met het frame samensmelt. Theme Options-veld
       Layout → boxed/body background staat toevallig al op deze kleur. */
body {
	background-color: var(--svm-coffee) !important;
}
#mk-boxed-layout {
	background-color: transparent !important;
}
/* Kapotte oude achtergrondfoto (nw.-subdomein, HTTP 500) uitzetten */
body {
	background-image: none !important;
}

/* A6. Sub-footer: kleur staat bij A10 (Dusk Blue, samen met de footer). */

/* A7. Paginatitels (Theme Options → Page title styling; was #4d4d4d / #a3a3a3) */
.page-title,
.page-subtitle {
	color: var(--svm-dusk);
}

/* A8. Hoofdmenu-items (Theme Options → Header → Navigation kleuren; was bruin/lime) */
.main-navigation-ul > li.menu-item > a.menu-item-link,
.mk-vm-menuwrapper ul li a,
.mk-vm-menuwrapper li > a:after,
.mk-vm-menuwrapper li.mk-vm-back:after {
	color: var(--svm-coffee);
}
.mk-vm-menuwrapper .mk-svg-icon {
	fill: var(--svm-coffee);
}
.main-navigation-ul > li.menu-item > a.menu-item-link:hover,
.main-navigation-ul > li.menu-item:hover > a.menu-item-link,
.main-navigation-ul > li.current-menu-item > a.menu-item-link,
.main-navigation-ul > li.current-menu-ancestor > a.menu-item-link,
.mk-vm-menuwrapper li a:hover,
.mk-vm-menuwrapper li.current-menu-item > a,
.mk-vm-menuwrapper li.current-menu-ancestor > a,
.menu-hover-style-1 .main-navigation-ul > li.menu-item > a.menu-item-link:hover,
.menu-hover-style-1 .main-navigation-ul > li.menu-item:hover > a.menu-item-link,
.menu-hover-style-1 .main-navigation-ul > li.current-menu-item > a.menu-item-link,
.menu-hover-style-1 .main-navigation-ul > li.current-menu-ancestor > a.menu-item-link,
.menu-hover-style-2 .main-navigation-ul > li.menu-item > a.menu-item-link:hover,
.menu-hover-style-2 .main-navigation-ul > li.menu-item:hover > a.menu-item-link,
.menu-hover-style-2 .main-navigation-ul > li.current-menu-item > a.menu-item-link,
.menu-hover-style-2 .main-navigation-ul > li.current-menu-ancestor > a.menu-item-link,
.menu-hover-style-2.mk-vm-menuwrapper li > a:hover,
.menu-hover-style-2.mk-vm-menuwrapper li.current-menu-item > a,
.menu-hover-style-2.mk-vm-menuwrapper li.current-menu-ancestor > a,
.menu-hover-style-5 .main-navigation-ul > li.menu-item > a.menu-item-link:hover,
.menu-hover-style-5 .main-navigation-ul > li.menu-item:hover > a.menu-item-link,
.menu-hover-style-5 .main-navigation-ul > li.current-menu-item > a.menu-item-link,
.menu-hover-style-5 .main-navigation-ul > li.current-menu-ancestor > a.menu-item-link {
	color: var(--svm-dusk) !important;
}
.menu-hover-style-1 .main-navigation-ul > li.dropdownOpen > a.menu-item-link,
.menu-hover-style-1 .main-navigation-ul > li.active > a.menu-item-link,
.menu-hover-style-1 .main-navigation-ul > li.current-menu-item > a.menu-item-link,
.menu-hover-style-1 .main-navigation-ul > li.current-menu-ancestor > a.menu-item-link {
	border-top-color: var(--svm-dusk) !important;
}
.menu-hover-style-1.mk-vm-menuwrapper li > a:hover,
.menu-hover-style-1.mk-vm-menuwrapper li.current-menu-item > a,
.menu-hover-style-1.mk-vm-menuwrapper li.current-menu-ancestor > a {
	border-left-color: var(--svm-dusk) !important;
}
.menu-hover-style-3 .main-navigation-ul > li.menu-item > a.menu-item-link:hover,
.menu-hover-style-3 .main-navigation-ul > li.menu-item:hover > a.menu-item-link,
.menu-hover-style-3 .main-navigation-ul > li.current-menu-item > a.menu-item-link,
.menu-hover-style-3 .main-navigation-ul > li.current-menu-ancestor > a.menu-item-link,
.menu-hover-style-3.mk-vm-menuwrapper li > a:hover,
.menu-hover-style-3.mk-vm-menuwrapper li.current-menu-item > a,
.menu-hover-style-3.mk-vm-menuwrapper li.current-menu-ancestor > a {
	border-color: var(--svm-dusk) !important;
	background-color: var(--svm-dusk) !important;
	color: var(--svm-wit) !important;
}
.menu-hover-style-4 .main-navigation-ul li.menu-item > a.menu-item-link:hover,
.menu-hover-style-4 .main-navigation-ul li.menu-item:hover > a.menu-item-link,
.menu-hover-style-4 .main-navigation-ul li.current-menu-item > a.menu-item-link,
.menu-hover-style-4 .main-navigation-ul li.current-menu-ancestor > a.menu-item-link {
	background-color: var(--svm-dusk) !important;
	color: var(--svm-wit) !important;
}

/* A9. Header-iconen en tagline (Theme Options → Header; was bruin, hover lime) */
.mk-header-tagline,
.header-toolbar-contact,
.mk-header-date,
.mk-search-trigger,
.mk-header .mk-header-cart-count {
	color: var(--svm-coffee);
}
.mk-header-toolbar .mk-header-social svg,
.mk-toolbar-resposnive-icon svg,
.mk-header .mk-shoping-cart-link svg,
.header-section.mk-header-social svg {
	fill: var(--svm-coffee);
}
.header-section.mk-header-social a:hover svg,
.mk-search-trigger:hover .mk-svg-icon,
.mk-header-start-tour:hover .mk-svg-icon {
	fill: var(--svm-dusk);
}
.mk-search-trigger:hover,
.mk-header-start-tour:hover {
	color: var(--svm-dusk);
}

/* A10. Footer -> Dusk Blue vlak (variant 2: contrast met het Dark Coffee-frame),
       tekst/links in Bone, hover wit. Alles AA (Bone/Dusk 6.2, Wit/Dusk 7.9). */
#mk-footer {
	background-color: var(--svm-dusk) !important;
}
#mk-footer .widget:not(.widget_social_networks) a {
	color: var(--svm-bone);
}
#mk-footer .widget:not(.widget_social_networks) a:hover {
	color: var(--svm-wit);
}
#mk-footer,
#mk-footer p,
#mk-footer .widget,
#sub-footer,
#sub-footer p {
	color: var(--svm-bone);
}
#sub-footer {
	background-color: var(--svm-dusk) !important;
}

/* A11. Cookiemelding (plugin-instelling of Theme Options). Dusk i.p.v. Coffee:
       de balk ligt tegen het Dark Coffee-frame en zou anders onzichtbaar overlopen. */
#cookie-notice .cookie-notice-container {
	background-color: var(--svm-dusk);
	color: var(--svm-bone);
}
#cookie-notice .cn-button {
	background-color: var(--svm-red) !important;
	color: var(--svm-wit) !important;
}


/* ============================================================
   DEEL B — STRUCTURELE CSS (blijft; niet mogelijk in Theme Options)
   ============================================================ */

/* B1. Knoppen — uniforme huisstijl. WPBakery zet per knop een #mk-button-NN-regel
       IN DE BODY (laadt ná deze CSS), dus hogere specificiteit is nodig:
       #theme-page .mk-button-container .mk-button = (1,2,0) > #mk-button-NN .mk-button (1,1,0). */
#theme-page .mk-button-container .mk-button {
	background-color: var(--svm-coffee) !important;
	color: var(--svm-wit) !important;
	border-radius: 8px !important;
}
#theme-page .mk-button-container .mk-button .mk-svg-icon {
	color: var(--svm-wit) !important;
	fill: var(--svm-wit) !important;
}
#theme-page .mk-button-container .mk-button:hover {
	background-color: var(--svm-dusk) !important;
	color: var(--svm-wit) !important;
}
#theme-page .mk-button-container .mk-button:hover .mk-svg-icon {
	color: var(--svm-wit) !important;
	fill: var(--svm-wit) !important;
}

/* B2. Formulier-verzendknoppen = CTA in Racing Red (WPForms + Jupiter contact) */
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit,
.submit-button-contact-form {
	background-color: var(--svm-red) !important;
	border-color: var(--svm-red) !important;
	color: var(--svm-wit) !important;
	border-radius: 8px !important;
}
.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover,
.submit-button-contact-form:hover {
	background-color: var(--svm-red-donker) !important;
	border-color: var(--svm-red-donker) !important;
	color: var(--svm-wit) !important;
}

/* B3. Mega-menu / dropdown-paneel — licht i.p.v. donker (#333), Dusk Blue hover.
       Rood blijft weg uit het menu (alleen CTA's), conform de gebruiksregels.
       Jupiter tekent bovenop het paneel een 2px ::after-balk (oud oranje #fda600) —
       die en de eerdere blauwe border-top gaven losse geel/blauwe lijntjes: beide uit. */
.main-navigation-ul ul.sub-menu:after,
.main-navigation-ul ul.sub-menu:before {
	display: none !important;
}
.mk-main-navigation li.no-mega-menu ul.sub-menu,
.mk-main-navigation li.has-mega-menu > ul.sub-menu,
.main-navigation-ul ul.sub-menu {
	background-color: var(--svm-wit) !important;
	box-shadow: 0 12px 30px rgba(43, 26, 18, 0.16) !important;
	border-top: 0 !important;
	border-radius: 0 0 10px 10px !important;
}
.main-navigation-ul ul.sub-menu li > a,
.main-navigation-ul ul.sub-menu li > a.menu-item-link {
	color: var(--svm-coffee) !important;
}
/* Hover/actief in de dropdown. LET OP specificiteit: Jupiter zet met theme-options
   'color:#ffffff !important' (submenu-hover, ooit voor het donkere paneel) en
   'background-color:transparent !important' met 4-5 klassen — dat gaf witte tekst
   op het witte paneel. Deze selectors tellen 6 klassen en winnen. */
.mk-header-nav-container .mk-main-navigation ul.sub-menu li.menu-item a.menu-item-link:hover,
.mk-header-nav-container .main-navigation-ul ul.sub-menu li.menu-item:hover > a.menu-item-link,
.mk-header-nav-container .main-navigation-ul ul.sub-menu li.current-menu-item > a.menu-item-link,
.main-navigation-ul ul.sub-menu li > a:hover,
.main-navigation-ul ul.sub-menu li:hover > a,
.main-navigation-ul ul.sub-menu li.current-menu-item > a {
	color: var(--svm-dusk) !important;
	background-color: var(--svm-bone) !important;
}
/* Submenu-pijltje werd wit bij hover; en mega-menu-kolomtitels stonden op wit. */
.mk-header-nav-container .mk-main-navigation ul.sub-menu li:hover .menu-sub-level-arrow svg {
	fill: var(--svm-dusk) !important;
}
.mk-main-navigation ul .megamenu-title {
	color: var(--svm-coffee) !important;
}
.mk-main-navigation ul .megamenu-title:after {
	background-color: var(--svm-ash) !important;
}

/* B4. Logo + navigatie uitlijnen op het (verbrede) content-grid.
       Content = .mk-grid (max-width 1475, padding 0 20px, gecentreerd). De
       header-content-container krijgt dezelfde box zodat het logo op de
       content-linkerrand start. */
.mk-header-inner .add-header-height {
	max-width: 1475px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
/* Logo-blok over de volle breedte van de header-box, zodat het logo op de
   content-linkerrand begint.

   HISTORIE (belangrijk): hier stond een `content: url("logo-breed.png")` die het
   thema-logo verving door een zelfgemaakte brede versie. Gevolg: een logo dat in
   de Jupiter-instellingen werd geüpload had op desktop GEEN effect (alleen op
   mobiel) en de bron-URL kwam niet overeen met wat je zag. Verwijderd op 27-07 —
   het logo wordt weer volledig via de thema-instellingen beheerd.

   `object-fit: contain` houdt de beeldverhouding intact: zonder deze regel wordt
   een logo dat niet exact de verhouding van de header-box (1435:138 ≈ 10,4:1)
   heeft horizontaal uitgerekt (de huidige balk van 2560x287 = 8,9:1 zou 16,6%
   vervormen). Wil je dat de balk exact van rand tot rand loopt, exporteer hem
   dan op verhouding 10,4:1 (bijv. 2985x287). Mobiel logo blijft ongemoeid. */
@media only screen and (min-width: 1256px) {
	.mk-header .header-logo a {
		display: block !important;
		width: calc(100% - 40px) !important;
		margin: 0 20px !important;
	}
	.mk-header .header-logo a img.mk-desktop-logo,
	.mk-header .header-logo a img.mk-sticky-logo {
		width: 100% !important;
		object-fit: contain;
		object-position: left center;
	}
}

/* B5. Footer-scheiding (optie 1) — dunne Racing Red accentlijn tussen content en footer.
       De donkere leegte is al opgelost via A5 (frame White). */
#mk-footer {
	border-top: 3px solid var(--svm-red) !important;
}

/* B6. Variant 2 — "gesplitste panelen" op Dark Coffee frame: kop-kaart en
       content-kaart (#theme-page t/m footer) allebei afgerond, reepje ertussen.
       - Kaart-stijl van de kop zit op de ACHTERGRONDLAGEN (.mk-header-bg +
         .mk-classic-nav-bg), niet op holder/containers: overflow op de holder
         clipte de dropdowns (bug), en dekkende container-vlakken zonder radius
         maakten de hoeken vierkant (zie A4). Niet in sticky-toestand (fixed balk).
       - Het reepje komt van margin-top op #theme-page (header-hoogtes zijn
         thema-gestuurd en per schermformaat anders — daar blijven we af).
       - Content-kaart = ronde bovenhoeken op #theme-page + ronde onderhoeken op
         #mk-footer; overflow:hidden clipt de binnenvlakken netjes mee.
       - .bottom-corner-btns (go-top) staat buiten de kaarten en position:fixed
         ontsnapt aan overflow:hidden — blijft dus gewoon werken. */
body.mk-boxed-enabled #mk-boxed-layout {
	margin-top: 22px;
	margin-bottom: 30px;
}
/* Kop-kaart: radius/schaduw op de ACHTERGRONDLAGEN, niet op de holder —
   overflow:hidden op de holder clipte de uitklapmenu's weg (bug 24-07).
   .mk-classic-nav-bg krijgt onderhoeken mee zodat hij niet uit de ronde
   hoeken steekt; de naad tussen beide vlakken is zelfde-kleur en onzichtbaar. */
/* Vorm + kleur op de bg-laag met clip-path: bij fractionele schermschaling
   (Windows 125%, DPR 1.25) bloedde de bg 1 device-pixel onder de afgeronde
   rand uit — zichtbaar als licht lijntje op het donkere reepje. clip-path
   rasterizeert exact. De schaduw zit op de holder (clip-path zou hem van
   het element zelf wegknippen); de holder clipt niets (geen overflow),
   dus dropdowns blijven werken. */
.mk-header:not(.a-sticky) .mk-header-holder {
	border-radius: 16px;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
.mk-header:not(.a-sticky) .mk-header-bg {
	border-radius: 16px;
	clip-path: inset(0 round 16px);
	box-shadow: none;
}
/* .mk-classic-nav-bg is in de normale staat een redundante tweede Linen-laag
   bovenop .mk-header-bg; twee gestapelde rondingen gaven een subtiel
   antialiasing-lijntje bij de onderhoeken. Normaal: transparant. In sticky-staat
   is deze laag juist de ENIGE achtergrond van de vaste balk (de kaart-bg scrollt
   weg) — daar houdt hij de Linen-kleur uit A4. */
.mk-header:not(.a-sticky) .mk-classic-nav-bg {
	background-color: transparent !important;
	border-radius: 0;
}
#theme-page {
	margin-top: 12px;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	/* Blink clipt absolute lagen (o.a. de slider) niet altijd op de ronde
	   overflow-hoeken; clip-path snijdt gegarandeerd alles op de kaartvorm af. */
	clip-path: inset(0 round 16px 16px 0 0);
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.30);
}
#mk-footer {
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	clip-path: inset(0 round 0 0 16px 16px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
@media handheld, only screen and (max-width: 767px) {
	body.mk-boxed-enabled #mk-boxed-layout {
		margin-top: 8px;
		margin-bottom: 12px;
	}
	.mk-header:not(.a-sticky) .mk-header-holder {
		border-radius: 10px;
	}
	.mk-header:not(.a-sticky) .mk-header-bg {
		border-radius: 10px;
		clip-path: inset(0 round 10px);
	}
	#theme-page {
		margin-top: 8px;
		border-radius: 10px 10px 0 0;
		clip-path: inset(0 round 10px 10px 0 0);
	}
	#mk-footer {
		border-radius: 0 0 10px 10px;
		clip-path: inset(0 round 0 0 10px 10px);
	}
}
/* B7. Sticky menubalk — logo + Racing Red hairline (keuze Wessel, variant 2).
       Jupiter toont bij header-style-2 geen logo in de vaste balk (alleen de
       navigatiebalk stickt; het thema-veld "sticky logo" is daar verborgen).
       Een ::before op de vaste balk voegt het logo toe zonder DOM- of
       thema-wijziging. Balkkleur = Linen via .mk-classic-nav-bg (A4);
       hairline spiegelt de footer-lijn (B5). Asset: logo-sticky.svg — het compacte
       huisstijllogo (400x152 = 2,63:1, past exact in het kader van 105x40). Bij een
       nieuw logo alleen dit bestand vervangen; de rest van de regel blijft gelijk.
       (logo-blok uit de originele PNG, 1074x409 — scherp op elke schaal). */
@media only screen and (min-width: 1256px) {
	.mk-header.a-sticky .mk-header-nav-container {
		border-bottom: 3px solid var(--svm-red) !important;
	}
	/* Soepele entree: balk schuift van boven in beeld i.p.v. plots verschijnen.
	   LET OP: de trigger-hoogte zelf is een thema-instelling — Theme Options →
	   Header → Sticky Header → offset staat op "50%"; op "Header" zetten laat
	   de balk verschijnen zodra de gewone menubalk uit beeld scrollt. */
	@media (prefers-reduced-motion: no-preference) {
		.mk-header.a-sticky .mk-header-nav-container {
			animation: svm-sticky-in 0.28s ease-out;
		}
	}
	.mk-header.a-sticky .mk-header-nav-container::before {
		content: "";
		position: absolute;
		left: 22px;
		top: 50%;
		transform: translateY(-50%);
		width: 105px;
		height: 40px;
		background: url("logo-sticky.svg") no-repeat left center / contain;
		pointer-events: none;
		/* boven de .mk-classic-nav-bg-laag (z-index:1), onder het menu (z:30) */
		z-index: 2;
	}
}

/* B8. Social-iconen in de footer (HTML-blokwidget in de eerste footerkolom).
       De thema-eigen social-widget bewaarde zijn instellingen niet via de API en
       gaf serverfouten; dit blok is eigen markup (inline SVG, currentColor) en
       dus volledig hier te stylen. Iconen Bone, hover wit — beide ruim boven de
       contrastnorm op de Dusk Blue footer (6,2:1 en 7,9:1). */
.svm-social {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 4px;
}
.svm-social__link {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--svm-bone);
	background: rgba(255, 255, 255, 0.10);
	transition: color 0.15s ease, background-color 0.15s ease;
}
.svm-social__link svg {
	width: 19px;
	height: 19px;
	display: block;
}
.svm-social__link:hover,
.svm-social__link:focus-visible {
	color: var(--svm-wit);
	background: rgba(255, 255, 255, 0.22);
}
#mk-footer .widget .svm-social__link {
	color: var(--svm-bone);
}
#mk-footer .widget .svm-social__link:hover {
	color: var(--svm-wit);
}

/* B9. Titelbalk boven blogberichten weg (verzoek Wessel 27-07: "blauwe titel
       tussen header en content moet weg").
       Jupiter rendert op single posts een sectie #mk-page-introduce met daarin de
       H1 (.page-title). De titel staat daarnaast NOG een keer in de content als
       H2 (.blog-single-title) — visueel dubbel. Gewone pagina's hebben deze balk
       al niet (thema-instelling page_title_global staat op false); voor
       berichten was in het optiepaneel geen bijpassende schakelaar te vinden,
       vandaar hier.
       LET OP (SEO): hiermee verdwijnt de H1 uit beeld; de zichtbare titel is dan
       de H2 in de content. Alternatief zonder dat nadeel: juist de H2 verbergen
       en deze balk opmaken als artikelkop — zie toelichting bij de oplevering. */
body.single-post #mk-page-introduce {
	display: none;
}

/* B10. Marge rondom het logo in de responsieve header (< 1256px).
        Het thema schaalt het logo daar naar de VOLLE hoogte van de headerbalk:
        gemeten liep het vanaf ~768px precies van boven- tot onderrand (90px in een
        balk van 90px) en op smallere schermen bleef er maar 7px over. Resultaat:
        het logo plakte tegen de randen.

        Oplossing: het logo houdt height:100%, maar krijgt binnenmarge. Met
        box-sizing:border-box wordt de zichtbare afbeelding dus 90 - 2x19 = 52px
        hoog en blijft hij automatisch verticaal gecentreerd — dat laatste lukt
        NIET met max-height (dan zakt hij naar de onderkant, getest).
        max-width houdt hem op smalle schermen weg bij het hamburgermenu. */
@media only screen and (max-width: 1255px) {
	.mk-header .header-logo a img.mk-resposnive-logo,
	.mk-header .header-logo a img.mk-desktop-logo {
		height: 100% !important;
		width: auto !important;
		max-width: min(200px, 46vw) !important;
		box-sizing: border-box !important;
		padding: 19px 0 !important;
	}
}

@keyframes svm-sticky-in {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

/* deploy-marker 1.7.2 */

/* ============================================================
   DEEL C — LAYOUTCORRECTIES (batch 12-08-2026, Wessel akkoord)
   Alleen C1 (S1) en C5 (S5); overige S-punten zijn bewust
   pagina-niveau (WPBakery) gefixt, geen CSS-overrides.
   ============================================================ */

/* C1 (S1). Kopafbeelding-rij: gelijke marge rondom, uitgelijnd
   met de content-kolom, hoeken passend bij de kaartstijl. */
#theme-page .wpb-content-wrapper > .wpb_row.mk-fullwidth-false[class*="vc_custom_"]:first-of-type {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 20px !important;
	padding-left: 0 !important;
	border-radius: 10px;
	overflow: hidden;
}
@media handheld, only screen and (max-width: 767px) {
	#theme-page .wpb-content-wrapper > .wpb_row.mk-fullwidth-false[class*="vc_custom_"]:first-of-type {
		margin-top: 35px !important;
	}
}

/* C5 (S5). Grote knoppen meeschalen op mobiel/tablet (Jupiter
   kent buiten de slider geen responsive knopmaten). */
@media handheld, only screen and (max-width: 767px) {
	#theme-page .mk-button.mk-button--size-x-large  { padding: 16px 22px !important; font-size: 13px !important; letter-spacing: 1px !important; }
	#theme-page .mk-button.mk-button--size-xx-large { padding: 18px 24px !important; font-size: 14px !important; letter-spacing: 1px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	#theme-page .mk-button.mk-button--size-x-large  { padding: 22px 30px !important; font-size: 15px !important; }
	#theme-page .mk-button.mk-button--size-xx-large { padding: 26px 34px !important; font-size: 16px !important; }
}

/* C3 (S3). Inschrijf-CTA rood. De knoppen dragen el_class="svm-cta"
   (Jupiter zet die klasse op de .mk-button-container). Specifieker dan
   de generieke B1-knopregel, dus deze wint. */
#theme-page .mk-button-container.svm-cta .mk-button {
	background-color: var(--svm-red) !important;
	color: var(--svm-wit) !important;
}
#theme-page .mk-button-container.svm-cta .mk-button:hover {
	background-color: var(--svm-red-donker) !important;
	color: var(--svm-wit) !important;
}
#theme-page .mk-button-container.svm-cta .mk-button .mk-svg-icon,
#theme-page .mk-button-container.svm-cta .mk-button svg {
	color: var(--svm-wit) !important;
	fill: var(--svm-wit) !important;
}

/* C1b. Neutraliseer de per-pagina Jupiter-padding boven een kopfoto-rij
   (paginaoptie "content padding" op 6 pagina's; getest: /vacatures/ 70px -> 20px). */
#theme-page .theme-page-wrapper:has(> .theme-content > .wpb-content-wrapper > .wpb_row.mk-fullwidth-false[class*="vc_custom_"]:first-of-type) { margin-top: 0 !important; }
#theme-page .theme-content:has(> .wpb-content-wrapper > .wpb_row.mk-fullwidth-false[class*="vc_custom_"]:first-of-type) { padding-top: 0 !important; }

/* ============================================================
   DEEL C — ronde 3 (batch 13-08-2026)
   C6/C7 = uitlijning slider met kopfoto (F1)
   C8    = titelmarge op pagina's zonder kopfoto (F2)
   ============================================================ */

/* C6 (F1). Content-rijen even breed als de kopfoto-rij.
   Jupiter geeft elke .wpb_row ook de klasse .mk-grid (width:100%;max-width:1475px),
   terwijl WPBakery de rij margin-left/right:-15px geeft om de 15px kolom-padding te
   compenseren. Zodra de contentkolom breder is dan ~1435px wint width:100% en is de
   rij 30px te smal: links klopt het nog (-15px marge + 15px padding = rand kopfoto),
   rechts blijft de inhoud 30px binnen de kopfoto-rand steken. Met width:auto tellen
   de negatieve marges weer mee en lijnen beide randen exact uit met de kopfoto-rij
   (die via C1 marge 0 heeft). Gemeten basiscursus-meubelmaken 1600px:
   kopfoto rechts 1510 - slider rechts 1480 = 30px -> 0px. */
#theme-page .wpb-content-wrapper > .wpb_row.mk-fullwidth-false {
	width: auto;
}

/* C7 (F1). Afbeeldingen in een vc_images_carousel vullen hun slide.
   Veel bronbestanden zijn maar 640px breed; zonder deze regel rendert de afbeelding
   op natuurlijke breedte, eindigt de slider tot 117px links van de kopfoto-rand en
   verspringt de sliderbreedte per slide. width:100% schaalt maximaal ~10% op (640 ->
   max 703px binnen de 1475px-grid); height:auto houdt de beeldverhouding intact. */
#theme-page .wpb_images_carousel .vc_images_carousel .vc_inner img {
	width: 100% !important;
	height: auto !important;
}

/* C8 (F2). Pagina's zonder kopfoto-rij: dezelfde ruimte boven de eerste rij als C1
   aan de kopfoto-rij geeft (20px desktop / 35px mobiel). Twee condities:
   - .theme-content.no-padding  -> alleen pagina's waar de Jupiter-paginaoptie de
     content-padding op 0 zet; pagina's met de normale themapadding (25-50px, bv.
     /stap-naar-vakmanschap/) blijven ongemoeid, anders stapelt het.
   - :not([class*="vc_custom_"]) -> een kopfoto-rij draagt altijd een vc_custom_-klasse
     (Design Options met background-image), een kale eerste rij niet. Zo raakt deze
     regel nooit een pagina die al een kopfoto heeft.
   Gemeten /opleiding/: rij-offset 0px -> 20px (375px: 0px -> 35px). */
#theme-page .theme-content.no-padding > .wpb-content-wrapper > .wpb_row.mk-fullwidth-false:first-of-type:not([class*="vc_custom_"]) {
	margin-top: 20px !important;
}
@media handheld, only screen and (max-width: 767px) {
	#theme-page .theme-content.no-padding > .wpb-content-wrapper > .wpb_row.mk-fullwidth-false:first-of-type:not([class*="vc_custom_"]) {
		margin-top: 35px !important;
	}
}

/* deploy-marker 1.8.3 */

/* 1.8.4 — geen CSS-wijziging. Deze release voegt alleen
   svm-huisstijl/hero-slider-resize.js toe (hero-slider herberekent zijn
   achtergrondafbeelding weer bij venster-resize). Marker bijgewerkt zodat
   het deployen van 1.8.4 op dezelfde manier te controleren blijft. */

/* deploy-marker 1.8.4 */