/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');


body.oplossingen-template-default .heading-title {
    display: none;
}

body.oplossingen-template-default .container-wrap {
    padding-top: 0;
}

body.oplossingen-template-default .post-area {
    margin-top: 0;
}

/* =====================================================================
   FINAL DESIGN — "Industrial Precision"
   Design tokens (zie final/industrial_precision/DESIGN.md)
   Let op: lettertypes/-groottes worden in de Salient THEME-OPTIONS gezet
   (body=Hanken Grotesk, koppen=Montserrat). Hier alleen component-styling.
   ===================================================================== */
:root {
    --mcs-navy: #2F4458;
    --mcs-navy-deep: #182e41;
    --mcs-yellow: #FBBF24;
    --mcs-surface: #f9f9f9;
    --mcs-surface-dim: #F4F4F4;
    --mcs-outline: #c3c7cd;
    --mcs-on-surface: #1a1c1c;
    --mcs-on-surface-variant: #43474c;
    --mcs-font-head: 'Montserrat', sans-serif;
    --mcs-font-body: 'Hanken Grotesk', sans-serif;
}

/* =====================================================================
   STAP 3a — HEADER / NAVIGATIE
   ===================================================================== */

/* --- Tekst-logo "MCS" (theme-optie use-logo = 0 -> Salient toont tekst,
       filter nectar_logo_text -> "MCS"). Wit in beide header-staten. --- */
#header-outer #top a#logo,
#header-outer.transparent #top a#logo {
    color: #ffffff !important;
}

/* --- Tekstkleur wit in zowel transparante als (scrolled) navy staat --- */
#header-outer #top nav > ul.sf-menu > li > a,
#header-outer.transparent #top nav > ul.sf-menu > li > a,
#header-outer #top nav > ul.sf-menu > li > a .menu-title-text {
    color: #ffffff;
}

/* --- Hover / actief: caution-yellow --- */
#header-outer #top nav > ul.sf-menu > li > a:hover,
#header-outer #top nav > ul.sf-menu > li.sfHover > a,
#header-outer #top nav > ul.sf-menu > li.current-menu-item > a:hover,
#header-outer #top nav > ul.sf-menu > li > a:hover .menu-title-text,
#header-outer #top nav > ul.sf-menu > li.sfHover > a .menu-title-text {
    color: var(--mcs-yellow) !important;
}

/* Salient's eigen hover-underline / accent in geel */
#header-outer #top nav > ul.sf-menu > li > a:before,
#header-outer #top nav > ul.sf-menu > li.current-menu-item > a:before,
#header-outer #top nav > ul.sf-menu > li.sfHover > a:before {
    background-color: var(--mcs-yellow) !important;
}

/* --- Dropdown / submenu: witte kaart, navy tekst, gele hover --- */
#header-outer #top nav ul.sf-menu ul.sub-menu {
    background-color: #ffffff;
    border: 1px solid var(--mcs-outline);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(24,46,65,0.12);
    padding: 8px 0;
}
#header-outer #top nav ul.sf-menu ul.sub-menu li a,
#header-outer #top nav ul.sf-menu ul.sub-menu li a .menu-title-text {
    color: var(--mcs-on-surface-variant) !important;
}
#header-outer #top nav ul.sf-menu ul.sub-menu li a:hover,
#header-outer #top nav ul.sf-menu ul.sub-menu li a:hover .menu-title-text {
    color: var(--mcs-navy) !important;
    background-color: var(--mcs-surface-dim);
}

/* --- CTA "Vraag advies aan" (menu-item 2058) ---
   Bewust GEEN Salient-knopstijl: die rendert de achtergrond als pseudo-element
   met geforceerde border-radius 4px + eigen padding, niet exact stuurbaar.
   Daarom is 2058 een gewone link die we hier zelf EXACT als de mockup-knop
   stylen: bg geel, navy tekst, padding 24/12px, radius 2px, label-caps. */
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a {
    display: inline-block !important;
    background-color: var(--mcs-yellow) !important;
    color: var(--mcs-navy-deep) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(24,46,65,0.15) !important;
    transition: filter .2s ease, box-shadow .2s ease !important;
}
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a .menu-title-text {
    color: var(--mcs-navy-deep) !important;
    font-weight: 700 !important;
}
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a:hover {
    filter: brightness(0.95);
    box-shadow: 0 2px 4px rgba(24,46,65,0.25) !important;
    color: var(--mcs-navy-deep) !important;
}
/* Eventuele Salient pseudo-box / icon-placeholder uitschakelen */
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a:before,
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a:after,
#header-outer #top nav .buttons.sf-menu > li#menu-item-2058 > a i.nectar-menu-icon {
    display: none !important;
}

/* --- Scrolled header: navy achtergrond expliciet borgen --- */
#header-outer:not(.transparent),
.small-nav #header-outer {
    background-color: var(--mcs-navy) !important;
}

/* --- Mega-menu "Oplossingen" (3-koloms look, nu 2 kolommen) --- */
/* Paneel = witte kaart */
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu,
#header-outer.transparent #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu {
    background-color: #ffffff !important;
    border: 1px solid var(--mcs-outline) !important;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(24,46,65,0.12);
    padding: 32px !important;
    gap: 32px;
}
/* Kolomkop = navy, vet, met onderlijn (zoals h4 in mockup) */
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > a {
    color: var(--mcs-navy) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--mcs-outline);
    padding-bottom: 10px;
    margin-bottom: 6px;
}
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > a .menu-title-text {
    color: var(--mcs-navy) !important;
}
/* Verberg het pijltje naast de kolomkop */
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > a .sf-sub-indicator {
    display: none !important;
}
/* Kolomlinks = geen extra kaartrand/schaduw, navy-variant tekst, gele hover */
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > ul.sub-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a .menu-title-text {
    color: var(--mcs-on-surface-variant) !important;
}
/* Mega-menu link-hover: gele tekst, GEEN donkere achtergrond (Salient zet hier
   standaard de accentkleur/navy als hover-bg; daarom met !important neutraliseren). */
/* Mega-menu hover: alleen tekstkleur wijzigt, nooit een achtergrondkleur. */
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li:hover,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li.sfHover,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li:hover > a,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li.sfHover > a,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:hover,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:focus,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:active,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:hover .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:focus .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:active .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li:hover > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li.sfHover > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:hover:before,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:hover:after,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:focus:before,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:focus:after,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:active:before,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item ul.sub-menu li a:active:after {
    background: transparent !important;
    background-color: transparent !important;
}
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > ul.sub-menu li a:hover,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > ul.sub-menu li:hover > a,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > ul.sub-menu li a:hover .menu-title-text {
    color: var(--mcs-yellow) !important;
}
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li:hover > a,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li:hover > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > a:hover,
#header-outer #top nav ul.sf-menu li.nectar-megamenu-menu-item > ul.sub-menu > li > a:hover .menu-title-text {
    color: var(--mcs-navy) !important;
}

/* =====================================================================
   RECHTER-MENU (pull-right): telefoonnummer + zoek-icoon + CTA-knop
   Layout (logo links / menu links / dit rechts) regelt Salient's
   header-formaat "menu-left-aligned" native.
   ===================================================================== */
/* Volgorde rechts: telefoon -> zoek -> CTA-knop (conform design) */
#header-outer #top nav ul.buttons.sf-menu {
    display: flex !important;
    align-items: center !important;
}
#header-outer #top nav ul.buttons.sf-menu > li,
#header-outer #top nav ul.buttons.sf-menu > a {
    float: none !important;
}
#header-outer #top nav ul.buttons.sf-menu > li#menu-item-2345 { order: 1 !important; }
#header-outer #top nav ul.buttons.sf-menu > li#search-btn { order: 2 !important; }
#header-outer #top nav ul.buttons.sf-menu > li#menu-item-2058 { order: 3 !important; margin-left: 4px !important; }

/* Telefoon + zoek = wit (over hero en in navy scroll-staat) */
#header-outer #top nav .buttons.sf-menu > li > a,
#header-outer #top nav .buttons.sf-menu > li > a .menu-title-text,
#header-outer #top nav .buttons.sf-menu > li > a i,
#header-outer #top .icon-salient-search,
#header-outer #top .icon-salient-search:before {
    color: #ffffff !important;
}
/* Telefoonnummer bold (conform design) */
#header-outer #top nav .buttons.sf-menu > li:not([class*="menu-item-btn-style-button"]) > a .menu-title-text {
    font-weight: 700 !important;
}

/* =====================================================================
   NAV SPACING / PADDING (desktop) — conform design (gap ~24px, h-20)
   ===================================================================== */
@media only screen and (min-width: 1000px) {
    /* Header-content beperken tot de design-container (max 1280px) + 30px
       gutter, gecentreerd. Salient's container is standaard ~1425px (te breed). */
    #header-outer #top .container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }
    /* Gelijkmatige item-spacing (~28px tussen items) */
    #header-outer #top nav > ul.sf-menu > li > a {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* Wat lucht tussen logo en eerste menu-item */
    #header-outer #top nav > ul.sf-menu {
        margin-left: 24px !important;
    }
    /* Logo iets kleiner, conform design (~26px i.p.v. 30px) */
    #header-outer #top a#logo {
        font-size: 26px !important;
    }
    /* Telefoon iets meer ruimte t.o.v. zoek/knop */
    #header-outer #top nav ul.buttons.sf-menu > li#menu-item-2345 { margin-right: 8px !important; }
}
/* Telefoon hover -> geel */
#header-outer #top nav .buttons.sf-menu > li:not([class*="menu-item-btn-style-button"]) > a:hover,
#header-outer #top nav .buttons.sf-menu > li:not([class*="menu-item-btn-style-button"]) > a:hover .menu-title-text,
#header-outer #top nav .buttons.sf-menu > li:not([class*="menu-item-btn-style-button"]) > a:hover i {
    color: var(--mcs-yellow) !important;
}
/* De CTA-knop houdt navy tekst (overschrijft het wit hierboven) */
#header-outer #top nav .buttons.sf-menu > li[class*="menu-item-btn-style-button"] > a,
#header-outer #top nav .buttons.sf-menu > li[class*="menu-item-btn-style-button"] > a .menu-title-text,
#header-outer #top nav .buttons.sf-menu > li[class*="menu-item-btn-style-button"] > a i {
    color: var(--mcs-navy-deep) !important;
}

/* =====================================================================
   STAP 3b — FOOTER (licht, conform design)
   Kleuren via theme-options (footer-background #F4F4F4 etc.); hier layout.
   ===================================================================== */
#footer-outer { border-top: 1px solid var(--mcs-outline) !important; }
#footer-outer #footer-widgets { padding-top: 64px !important; padding-bottom: 24px !important; }

/* Container gelijk aan design/header: max 1280px + 30px gutter */
@media only screen and (min-width: 1000px) {
    #footer-outer #footer-widgets .container,
    #footer-outer #copyright .container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }
    /* Vier widgetkolommen gegarandeerd op één rij (flexbox over Salient-floats heen) */
    #footer-outer #footer-widgets .container .row { display: flex !important; flex-wrap: nowrap; align-items: flex-start; }
    #footer-outer #footer-widgets .container .row > .col { float: none !important; flex: 1; min-width: 0; margin-right: 0 !important; }
}

/* Kolom 1 — merk */
#footer-outer #footer-widgets .mcs-foot-logo {
    display: block;
    font-family: var(--mcs-font-head);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--mcs-navy) !important;
    margin-bottom: 16px;
}
#footer-outer #footer-widgets .mcs-foot-tagline {
    margin-bottom: 20px;
}
#footer-widgets .mcs-foot-social { display: flex; gap: 12px; }
#footer-widgets .mcs-foot-social a {
    width: 40px; height: 40px;
    border-radius: 9999px;
    background: var(--mcs-navy);
    color: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}
#footer-widgets .mcs-foot-social a:hover {
    background: var(--mcs-yellow);
    color: var(--mcs-navy-deep) !important;
}

/* Kolomkoppen — label-caps navy */
#footer-widgets .mcs-foot-head {
    font-family: var(--mcs-font-body) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
}

/* Link-lijsten */
#footer-widgets .mcs-foot-links { list-style: none; margin: 0; padding: 0; }
#footer-widgets .mcs-foot-links li { margin-bottom: 10px; }
#footer-outer #footer-widgets .mcs-foot-links a {
    transition: color .2s ease;
}
#footer-outer #footer-widgets .mcs-foot-links a:hover { color: var(--mcs-navy) !important; }

/* Contact-kolom */
#footer-outer #footer-widgets .mcs-foot-contact { margin-bottom: 14px; }
#footer-outer #footer-widgets a.mcs-foot-contact-link {
    display: block;
    margin-bottom: 6px;
    transition: color .2s ease;
}
#footer-widgets a.mcs-foot-contact-link:hover { color: var(--mcs-navy) !important; }

/* Onderbalk (copyright) */
#footer-outer #copyright { border-top: 1px solid var(--mcs-outline) !important; }

/* Onderbalk — partnerlabels rechts (i.p.v. social) */
#footer-outer #copyright .col_last { display: flex; justify-content: flex-end; align-items: center; }
#footer-outer #copyright .mcs-foot-partners { display: flex; gap: 24px; align-items: center; }
#footer-outer #copyright .mcs-foot-partners span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mcs-on-surface-variant);
}

/* =====================================================================
   HERO-KNOPPEN (homepage) — twee gelijke knoppen, conform design
   px-8 py-4 (32/16px), 2px radius, label-caps uppercase.
   ===================================================================== */
body.home .nectar-button {
    font-family: var(--mcs-font-body) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    border-radius: 2px !important;
    border-width: 2px !important;
    border-style: solid !important;
    margin-top: 40px !important;
}
/* Primair = geel, navy tekst */
body.home .nectar-button.regular,
body.home .nectar-button.regular:hover {
    background-color: var(--mcs-yellow) !important;
    border-color: var(--mcs-yellow) !important;
    color: var(--mcs-navy-deep) !important;
}
body.home .nectar-button.regular:hover { filter: brightness(0.95); }
/* Secundair = transparant, witte rand, witte tekst */
body.home .nectar-button.see-through-2 {
    background-color: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    margin-left: 16px !important;
}
body.home .nectar-button.see-through-2:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}
/* Geen pseudo-box/icoon van Salient op de hero-knoppen */
body.home .nectar-button:before,
body.home .nectar-button:after { display: none !important; }

/* =====================================================================
   STAP 4b — DOMEIN-KAARTEN (homepage)
   ===================================================================== */
.mcs-domain-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.mcs-domain-card {
    display: flex;
    flex-direction: column;
    background: var(--mcs-surface, #fff);
    background-color: #ffffff;
    border: 1px solid var(--mcs-outline);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important;
    transition: box-shadow .3s ease, transform .3s ease;
}
.mcs-domain-card:hover {
    box-shadow: 0 12px 30px rgba(24,46,65,0.14);
}
.mcs-domain-card .mcs-card-img {
    display: block;
    height: 192px;
    overflow: hidden;
    background: var(--mcs-surface-dim);
}
.mcs-domain-card .mcs-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.mcs-domain-card:hover .mcs-card-img img { transform: scale(1.05); }
.mcs-domain-card .mcs-card-body {
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.mcs-domain-card .mcs-card-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mcs-on-surface-variant);
}
.mcs-domain-card .mcs-card-title {
    font-family: var(--mcs-font-head);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--mcs-navy);
    margin: 4px 0 0 0;
}
.mcs-domain-card .mcs-card-more {
    margin-top: 16px;
    color: var(--mcs-navy);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap .2s ease;
}
.mcs-domain-card:hover .mcs-card-more { gap: 12px; }
@media only screen and (max-width: 999px) {
    .mcs-domain-cards { grid-template-columns: 1fr; }
}


/* =====================================================================
   STAP 4c — "WAAROM MCS" USP-STRIP
   ===================================================================== */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:48px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}
.mcs-usp-row{border-top:1px solid var(--mcs-outline)!important;border-bottom:1px solid var(--mcs-outline)!important;}
.mcs-usp{text-align:center;}
.mcs-usp-label{display:block;font-size:14px;line-height:20px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--mcs-navy);margin-bottom:48px;}
.mcs-usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.mcs-usp-item{display:flex;flex-direction:column;align-items:center;gap:16px;}
.mcs-usp-item .material-symbols-outlined{font-size:48px;color:var(--mcs-navy);}
.mcs-usp-title{font-family:var(--mcs-font-head);font-size:24px;line-height:30px;font-weight:600;color:var(--mcs-navy);}
@media only screen and (max-width:999px){.mcs-usp-grid{grid-template-columns:repeat(2,1fr);gap:40px 24px;}}
@media only screen and (max-width:600px){.mcs-usp-grid{grid-template-columns:1fr;}}

/* =====================================================================
   Herbruikbare content-knoppen (secties)
   ===================================================================== */
.mcs-btn{display:inline-block;font-family:var(--mcs-font-body);font-size:14px;line-height:20px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:16px 32px;border-radius:2px;border:2px solid transparent;text-decoration:none!important;transition:all .2s ease;cursor:pointer;}
.mcs-btn--yellow{background:var(--mcs-yellow);border-color:var(--mcs-yellow);color:var(--mcs-navy-deep)!important;}
.mcs-btn--yellow:hover{filter:brightness(.95);}
.mcs-btn--outline-white{background:transparent;border-color:#fff;color:#fff!important;}
.mcs-btn--outline-white:hover{background:rgba(255,255,255,.1);color:#fff!important;}

/* =====================================================================
   STAP 4d — EDUCATIE-TEASER (navy)
   ===================================================================== */
.mcs-edu-label{display:block;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mcs-yellow);margin-bottom:20px;}
.mcs-edu-title{font-family:var(--mcs-font-head)!important;font-size:42px;line-height:50px;font-weight:700;color:#fff!important;margin:0 0 20px 0;}
.mcs-edu-text{font-size:20px;line-height:32px;color:rgba(255,255,255,.9);margin:0 0 28px 0;}
.mcs-edu-img{border-radius:4px;overflow:hidden;height:384px;}
.mcs-edu-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;}
@media only screen and (max-width:999px){.mcs-edu-title{font-size:34px;line-height:42px;}.mcs-edu-img{height:280px;margin-top:24px;}}

/* =====================================================================
   STAP 4e — UITGELICHTE OCCASIONS
   ===================================================================== */
.mcs-occ-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--mcs-outline);padding-bottom:16px;margin-bottom:48px;gap:16px;}
.mcs-occ-head h2{font-family:var(--mcs-font-head)!important;font-size:32px;line-height:40px;font-weight:600;color:var(--mcs-navy)!important;margin:0;}
.mcs-occ-head .mcs-occ-all{font-weight:700;color:var(--mcs-navy)!important;text-decoration:none!important;white-space:nowrap;}
.mcs-occ-head .mcs-occ-all:hover{color:var(--mcs-navy-deep)!important;}
.mcs-occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.mcs-occ-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mcs-outline);border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(24,46,65,.06);}
.mcs-occ-img{position:relative;height:192px;background:var(--mcs-surface-dim);overflow:hidden;}
.mcs-occ-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;}
.mcs-occ-badge{position:absolute;top:16px;left:16px;color:#fff;font-size:12px;font-weight:700;line-height:1;padding:5px 9px;border-radius:2px;letter-spacing:.04em;}
.mcs-occ-badge--inruil{background:var(--mcs-outline);}
.mcs-occ-badge--demo{background:var(--mcs-navy);}
.mcs-occ-body{padding:24px;display:flex;flex-direction:column;gap:16px;}
.mcs-occ-cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mcs-on-surface-variant);}
.mcs-occ-title{font-family:var(--mcs-font-head)!important;font-size:22px;line-height:28px;font-weight:600;color:var(--mcs-navy)!important;margin:4px 0 0 0;}
.mcs-occ-specs{list-style:none;margin:0;padding:0;font-size:14px;line-height:22px;color:var(--mcs-on-surface-variant);display:flex;flex-direction:column;gap:2px;}
.mcs-occ-foot{margin-top:4px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--mcs-outline);padding-top:16px;}
.mcs-occ-price{font-size:18px;font-weight:700;color:var(--mcs-navy);}
.mcs-occ-aanvragen{font-size:14px;font-weight:700;color:var(--mcs-navy)!important;text-decoration:none!important;}
.mcs-occ-aanvragen:hover{color:var(--mcs-navy-deep)!important;}
@media only screen and (max-width:999px){.mcs-occ-grid{grid-template-columns:1fr;}}


/* =====================================================================
   STAP 4f — PARTNER-/DEALERBALK
   ===================================================================== */
.mcs-partners{text-align:center;}
.mcs-partners-label{display:block;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mcs-on-surface-variant);margin-bottom:28px;}
.mcs-partners-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 56px;}
.mcs-partners-logos img{max-height:46px;width:auto!important;object-fit:contain;}

/* =====================================================================
   STAP 4g — KLANTQUOTE
   ===================================================================== */
.mcs-quote{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;}
.mcs-quote-icon{font-size:64px!important;color:var(--mcs-yellow)!important;line-height:1;}
#ajax-content-wrap .mcs-quote blockquote.mcs-quote-text{font-family:var(--mcs-font-head)!important;font-size:30px;line-height:1.3;font-weight:600;color:var(--mcs-navy)!important;margin:0!important;padding:0!important;border:0!important;}
#ajax-content-wrap .mcs-quote blockquote.mcs-quote-text:before,#ajax-content-wrap .mcs-quote blockquote.mcs-quote-text:after{display:none!important;content:none!important;border:0!important;}
.mcs-quote-divider{display:block;width:64px;height:4px;background:var(--mcs-yellow);}
.mcs-quote-name{display:block;font-weight:700;color:var(--mcs-navy);font-size:18px;}
.mcs-quote-role{display:block;color:var(--mcs-on-surface-variant);}

/* =====================================================================
   STAP 4h — AFSLUITENDE CTA-BAND (navy)
   ===================================================================== */
.mcs-cta-band{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;}
.mcs-cta-title{font-family:var(--mcs-font-head)!important;font-size:42px;line-height:1.15;font-weight:700;color:#fff!important;margin:0;}
.mcs-cta-text{font-size:20px;line-height:32px;color:rgba(255,255,255,.9);margin:0;}
@media only screen and (max-width:999px){.mcs-quote-text{font-size:24px;}.mcs-cta-title{font-size:32px;}}

/* =====================================================================
   PAGINA: OPLOSSINGEN-CATEGORIE
   ===================================================================== */
.mcs-breadcrumb{font-size:14px;color:var(--mcs-on-surface-variant);}
.mcs-breadcrumb a{color:var(--mcs-on-surface-variant)!important;text-decoration:none!important;}
.mcs-breadcrumb a:hover{color:var(--mcs-navy)!important;}
.mcs-breadcrumb .sep{margin:0 8px;opacity:.5;}
.mcs-breadcrumb .current{color:var(--mcs-navy);font-weight:600;}

.mcs-cat-title{font-family:var(--mcs-font-head)!important;font-size:46px;line-height:1.12;font-weight:700;color:var(--mcs-navy)!important;margin:0 0 20px 0;}
.mcs-cat-intro{font-size:20px;line-height:32px;color:var(--mcs-on-surface-variant);margin:0 0 28px 0;}
img.mcs-cat-img{width:100%!important;height:384px!important;max-width:none!important;max-height:none!important;object-fit:cover;display:block;border-radius:4px;}

.mcs-sec-title{font-family:var(--mcs-font-head)!important;font-size:32px;line-height:40px;font-weight:600;color:var(--mcs-navy)!important;margin:0 0 36px 0;text-align:center;}

.mcs-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.mcs-prod-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mcs-outline);border-radius:4px;overflow:hidden;text-decoration:none!important;transition:box-shadow .3s ease;}
.mcs-prod-card:hover{box-shadow:0 12px 30px rgba(24,46,65,.14);}
.mcs-prod-card .mcs-prod-img{height:180px;overflow:hidden;background:var(--mcs-surface-dim);}
.mcs-prod-card .mcs-prod-img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;transition:transform .5s ease;}
.mcs-prod-card:hover .mcs-prod-img img{transform:scale(1.05);}
.mcs-prod-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.mcs-prod-title{font-family:var(--mcs-font-head)!important;font-size:20px;line-height:26px;font-weight:600;color:var(--mcs-navy)!important;margin:0;}
.mcs-prod-desc{font-size:14px;line-height:22px;color:var(--mcs-on-surface-variant);margin:0;flex:1;}
.mcs-prod-more{color:var(--mcs-navy);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:4px;}

.mcs-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.mcs-apps-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:#fff;border:1px solid var(--mcs-outline);border-radius:4px;padding:34px 20px;}
.mcs-apps-item .material-symbols-outlined{font-size:40px!important;color:var(--mcs-navy)!important;}
.mcs-apps-title{font-family:var(--mcs-font-head);font-size:18px;font-weight:600;color:var(--mcs-navy);}
@media only screen and (max-width:999px){.mcs-prod-grid,.mcs-apps{grid-template-columns:repeat(2,1fr);}.mcs-cat-title{font-size:34px;}img.mcs-cat-img{height:280px!important;margin-top:24px;}}
@media only screen and (max-width:600px){.mcs-prod-grid{grid-template-columns:1fr;}}

/* Salient/Yoast page-header breadcrumb verbergen (we gebruiken eigen .mcs-breadcrumb) */
#breadcrumbs{display:none!important;}
.mcs-cat-title{text-transform:none!important;}

/* =====================================================================
   PAGINA: PRODUCTDETAIL
   ===================================================================== */
.mcs-prod-hero-label{display:block;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mcs-on-surface-variant);margin-bottom:14px;}

/* Specificaties-tabel */
.mcs-spec-wrap{max-width:860px;margin:0 auto;}
.mcs-spec-table{width:100%;border-collapse:collapse;border:1px solid var(--mcs-outline);border-radius:4px;overflow:hidden;}
.mcs-spec-table th{background:var(--mcs-navy);color:#fff!important;text-align:left;padding:14px 20px;font-family:var(--mcs-font-head);font-size:15px;font-weight:600;}
.mcs-spec-table td{padding:14px 20px;border-top:1px solid var(--mcs-outline);font-size:15px;line-height:22px;color:var(--mcs-on-surface);}
.mcs-spec-table tr:nth-child(even) td{background:var(--mcs-surface-dim);}
.mcs-spec-table td:first-child{font-weight:700;color:var(--mcs-navy);width:38%;}

/* Beeldmateriaal */
.mcs-media-main{position:relative;border-radius:4px;overflow:hidden;height:440px;margin-bottom:16px;background:var(--mcs-surface-dim);}
.mcs-media-main img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;}
.mcs-media-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.mcs-media-play .material-symbols-outlined{font-size:48px!important;color:var(--mcs-navy-deep)!important;background:var(--mcs-yellow);border-radius:9999px;width:84px;height:84px;display:flex;align-items:center;justify-content:center;}
.mcs-media-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.mcs-media-thumb{height:150px;border-radius:4px;overflow:hidden;background:var(--mcs-surface-dim);}
.mcs-media-thumb img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;}

/* Gerelateerde oplossingen */
.mcs-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.mcs-related-card{background:#fff;border:1px solid var(--mcs-outline);border-radius:4px;padding:28px;text-decoration:none!important;display:flex;flex-direction:column;gap:10px;transition:box-shadow .3s ease;}
.mcs-related-card:hover{box-shadow:0 12px 30px rgba(24,46,65,.14);}
.mcs-related-title{font-family:var(--mcs-font-head)!important;font-size:22px;font-weight:600;color:var(--mcs-navy)!important;margin:0;}
.mcs-related-desc{font-size:14px;line-height:22px;color:var(--mcs-on-surface-variant);margin:0;flex:1;}
.mcs-related-more{color:var(--mcs-navy);font-weight:700;display:inline-flex;align-items:center;gap:6px;}
@media only screen and (max-width:999px){.mcs-related-grid,.mcs-media-thumbs{grid-template-columns:1fr;}.mcs-media-main{height:300px;}}

/* Oplossingen-CPT eigen post-header/hero verbergen op herontworpen detailpagina's
   (mijn content levert een eigen hero). Scoped per post-id. */
body.postid-1824 .mcs-post-header,
body.postid-1824 .mcs-post-hero,
body.postid-1824 .mcs-post-breadcrumb,
body.postid-1824 .mcs-post-related { display:none !important; }

/* =====================================================================
   PAGINA: GEBRUIKTE PRODUCTEN
   ===================================================================== */
.mcs-gp-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;}
.mcs-filter{border:1px solid var(--mcs-outline);border-radius:4px;padding:24px;background:#fff;}
.mcs-filter__head{display:flex;justify-content:space-between;align-items:center;}
.mcs-filter__head h3{font-family:var(--mcs-font-head);font-size:18px;font-weight:600;color:var(--mcs-navy);margin:0;}
.mcs-filter__reset{font-size:13px;color:var(--mcs-on-surface-variant);background:none;border:0;cursor:pointer;padding:0;}
.mcs-filter__group{border-top:1px solid var(--mcs-outline);padding:18px 0;}
.mcs-filter__group:last-child{padding-bottom:0;}
.mcs-filter__group h4{font-family:var(--mcs-font-body)!important;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mcs-navy)!important;margin:0 0 12px 0;}
.mcs-filter__opt{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mcs-on-surface-variant);margin-bottom:9px;cursor:pointer;}
.mcs-filter__opt input{width:16px;height:16px;accent-color:var(--mcs-navy);margin:0;}
.mcs-gp-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:var(--mcs-on-surface-variant);font-size:14px;}
.mcs-gp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mcs-gp-more{text-align:center;margin-top:40px;}
.mcs-btn--outline-navy{background:transparent;border-color:var(--mcs-navy);color:var(--mcs-navy)!important;}
.mcs-btn--outline-navy:hover{background:var(--mcs-navy);color:#fff!important;}
@media only screen and (max-width:999px){.mcs-gp-layout{grid-template-columns:1fr;}.mcs-gp-grid{grid-template-columns:repeat(2,1fr);}}
@media only screen and (max-width:600px){.mcs-gp-grid{grid-template-columns:1fr;}}
/* Hero met meerdere knoppen (productdetail) */
.mcs-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.mcs-hero-btns .mcs-btn{margin:0;}

/* Herontworpen oplossingen-detail: artikel-container (.mcs-post-content max-width 720)
   opheffen zodat de page-builder-rijen normaal/volle breedte renderen. */
body.postid-1824 .mcs-post-content{max-width:none!important;margin:0!important;padding:0!important;font-size:inherit!important;line-height:inherit!important;color:inherit!important;}
body.postid-1824 .mcs-post-article{max-width:none!important;margin:0!important;padding:0!important;}
body.postid-1824 .mcs-post-content > p{margin:0!important;}
body.postid-1824 .mcs-post-content a{text-decoration:none!important;}

/* Onderbalk — copyright-balk: tekst+link links, partners rechts, alles op één rij */
#footer-outer #copyright .col.span_5 p{margin:0;}
#footer-outer #copyright a.mcs-foot-legal{font-size:13px;color:var(--mcs-on-surface-variant)!important;margin-left:16px;transition:color .2s ease;white-space:nowrap;}
#footer-outer #copyright a.mcs-foot-legal:hover{color:var(--mcs-navy)!important;text-decoration:underline;}
@media only screen and (min-width:1000px){
  #footer-outer #copyright .container{display:flex!important;align-items:center;justify-content:space-between;}
  #footer-outer #copyright .col.span_5{float:none!important;width:auto!important;margin:0!important;display:flex;align-items:baseline;flex-wrap:nowrap;}
  #footer-outer #copyright .col.span_5 p{white-space:nowrap;}
  #footer-outer #copyright .col.span_7{float:none!important;width:auto!important;margin:0!important;}
}

/* Featured-image thumbnail in oplossing-kaarten (.mcs-related-card) */
.mcs-related-card{overflow:hidden;}
.mcs-related-card .mcs-related-thumb{display:block;height:190px;margin:-28px -28px 8px;overflow:hidden;background:var(--mcs-surface-dim);}
.mcs-related-card .mcs-related-thumb img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;transition:transform .5s ease;}
.mcs-related-card:hover .mcs-related-thumb img{transform:scale(1.05);}

/* homepage-occ-badges: canonieke occasion-badge-kleuren + placeholder ook op de homepage (mcs-occasions.css laadt alleen op de occasions-pagina) */
.mcs-occ-badge--demo{background:#E73B5E!important;color:#fff!important;}
.mcs-occ-badge--inruil{background:var(--mcs-navy)!important;color:#fff!important;}
.mcs-occ-badge--verhuur{background:var(--mcs-yellow)!important;color:var(--mcs-navy-deep)!important;}
.mcs-occ-badge--voorraad{background:var(--mcs-outline)!important;color:#fff!important;}
.mcs-occ-img.is-empty{display:flex;align-items:center;justify-content:center;background:var(--mcs-surface-dim);}
.mcs-occ-img.is-empty::after{content:attr(data-ph);font-family:var(--mcs-font-head);font-size:28px;font-weight:700;color:var(--mcs-outline);letter-spacing:.04em;}

/* foot-logo-width: footer-logo (SVG) op 170px */
#footer-outer #footer-widgets .mcs-foot-logo{width:170px;height:auto;}
#footer-outer #footer-widgets .mcs-foot-logo svg{width:100%;height:auto;display:block;}

/* footer-link-weight: Salient dynamic CSS forceert 700 op footer links — override naar normaal */
#footer-outer #footer-widgets .widget li a{font-weight:400!important;text-transform:none!important;letter-spacing:0!important;}

/* Footer bottom alignment: copyright/link left, partner labels right. */
#footer-outer #copyright .container{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
}
#footer-outer #copyright .col.span_5,
#footer-outer #copyright .col.span_7{
  float:none!important;
  width:auto!important;
  margin:0!important;
}
#footer-outer #copyright .col.span_5{
  display:flex!important;
  align-items:center!important;
  flex:1 1 auto!important;
  gap:16px!important;
  min-width:0!important;
}
#footer-outer #copyright .col.span_5 p{
  margin:0!important;
}
#footer-outer #copyright a.mcs-foot-legal{
  margin-left:0!important;
}
#footer-outer #copyright .col.span_7{
  display:flex!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
}
#footer-outer #copyright .mcs-foot-partners{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:24px!important;
  flex-wrap:nowrap!important;
}

@media only screen and (max-width: 1100px){
  #footer-outer #copyright .container{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  #footer-outer #copyright .col.span_5{
    flex-wrap:wrap!important;
    gap:8px 16px!important;
  }
  #footer-outer #copyright .col.span_7,
  #footer-outer #copyright .mcs-foot-partners{
    justify-content:flex-start!important;
  }
}

@media only screen and (max-width: 520px){
  #footer-outer #copyright .mcs-foot-partners{
    flex-wrap:wrap!important;
    gap:8px 16px!important;
  }
}

/* sub-menu-sfhover: Salient zet li.sfHover-achtergrond op accentkleur (navy); override naar lichtgrijs zodat tekst leesbaar blijft */
#header-outer #top nav ul.sf-menu ul.sub-menu li.sfHover > a,
#header-outer #top nav ul.sf-menu ul.sub-menu li:hover > a {
    background-color: var(--mcs-surface-dim) !important;
    color: var(--mcs-navy) !important;
}
#header-outer #top nav ul.sf-menu ul.sub-menu li.sfHover > a .menu-title-text,
#header-outer #top nav ul.sf-menu ul.sub-menu li:hover > a .menu-title-text {
    color: var(--mcs-navy) !important;
}

/* Footer bottom: one simple flex row. */
#footer-outer #copyright .container {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}

#footer-outer #copyright .col.span_5,
#footer-outer #copyright .col.span_7,
#footer-outer #copyright .col_last,
#footer-outer #copyright .mcs-foot-partners {
  display: contents !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

#footer-outer #copyright .col.span_5 p,
#footer-outer #copyright a.mcs-foot-legal,
#footer-outer #copyright .mcs-foot-partners span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

#footer-outer #copyright .col.span_5 p {
  flex: 0 1 auto !important;
}

#footer-outer #copyright a.mcs-foot-legal {
  flex: 0 0 auto !important;
}

#footer-outer #copyright .mcs-foot-partners span:first-child {
  margin-left: auto !important;
}

@media only screen and (max-width: 900px) {
  #footer-outer #copyright .container {
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  #footer-outer #copyright .mcs-foot-partners span:first-child {
    margin-left: 0 !important;
  }
}