/*
 * Sanitas Facilities — Huisstijl CSS
 * assets/css/sanitas.css
 *
 * Structuur:
 *   1.  CSS Custom Properties (merktkleuren, typografie, spacing)
 *   2.  Base & reset overrides
 *   3.  Typografie
 *   4.  Knoppen
 *   5.  Navigatie (Kadence header)
 *   6.  Hero / banner-sectie
 *   7.  Dienstenkaarten
 *   8.  Over-ons sectie + portret
 *   9.  Werkgebieden
 *  10.  CTA-banner
 *  11.  Footer
 *  12.  Formulieren
 *  13.  Hulpklassen (utility classes)
 *  14.  Responsive overrides
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Merktkleuren */
    --s-black:    #16161D;
    --s-dark:     #22222D;
    --s-mid:      #3A3A48;
    --s-gold:     #AD9164;
    --s-goldlt:   #C9AD83;
    --s-stone:    #7E7D78;
    --s-cream:    #F3F0E9;
    --s-ivory:    #FAFAF8;
    --s-border:   #E0DDD5;

    /* Kadence palette-overrides (CSS variabelen die Kadence gebruikt) */
    --global-palette1: #16161D;
    --global-palette2: #22222D;
    --global-palette3: #AD9164;
    --global-palette4: #C9AD83;
    --global-palette5: #7E7D78;
    --global-palette6: #F3F0E9;
    --global-palette7: #FAFAF8;
    --global-palette8: #E0DDD5;

    /* Typografie */
    --s-font:       'DM Sans', Arial, sans-serif;
    --s-size-base:  16px;
    --s-lh-base:    1.75;
    --s-lh-heading: 1.2;

    /* Spacing */
    --s-section:  96px;
    --s-inner:    1140px;
    --s-radius:   6px;
    --s-radius-sm: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BASE & RESET
   ═══════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--s-font);
    font-weight: 300;
    font-size: var(--s-size-base);
    line-height: var(--s-lh-base);
    color: var(--s-black);
    background-color: var(--s-ivory);
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--s-black);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--s-gold);
}

::selection {
    background: var(--s-gold);
    color: var(--s-ivory);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--s-font);
    font-weight: 500;
    line-height: var(--s-lh-heading);
    letter-spacing: -0.01em;
    color: var(--s-black);
}

h1 { font-size: clamp(32px, 4vw, 48px);  letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 22px); }
h4 { font-size: 18px; }

p {
    font-weight: 300;
    line-height: var(--s-lh-base);
    color: var(--s-stone);
    margin-bottom: 1rem;
}

/* Accent label (uppercase, goud) */
.sanitas-label,
.wp-block-kadence-advancedheading.is-style-sanitas-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-gold);
    font-family: var(--s-font);
}

/* Citaat / quote */
blockquote,
.wp-block-quote {
    border-left: 4px solid var(--s-gold);
    padding: 16px 24px;
    margin: 24px 0;
    background: var(--s-cream);
    border-radius: 0 var(--s-radius) var(--s-radius) 0;
    font-style: italic;
    font-weight: 300;
    color: var(--s-stone);
}

blockquote p,
.wp-block-quote p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. KNOPPEN
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-button__link,
.button,
button[type="submit"],
.wpcf7-submit {
    font-family: var(--s-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: var(--s-radius-sm);
    border: 1.5px solid var(--s-black);
    background: var(--s-black);
    color: var(--s-ivory);
    display: inline-block;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
    background: var(--s-dark);
    color: var(--s-ivory);
    border-color: var(--s-dark);
}

/* Secundaire knop (outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.button-secondary {
    background: transparent;
    color: var(--s-black);
    border: 1.5px solid var(--s-black);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button-secondary:hover {
    background: rgba(22,22,29,0.06);
    color: var(--s-black);
}

/* Gouden CTA-knop */
.wp-block-button.is-style-sanitas-gold .wp-block-button__link,
.button-gold {
    background: var(--s-gold);
    color: var(--s-black);
    border-color: var(--s-gold);
}

.wp-block-button.is-style-sanitas-gold .wp-block-button__link:hover,
.button-gold:hover {
    background: var(--s-goldlt);
    border-color: var(--s-goldlt);
}


/* ═══════════════════════════════════════════════════════════════════════
   5. NAVIGATIE (Kadence header)
   ═══════════════════════════════════════════════════════════════════════ */

/* Header-balk */
#masthead,
.site-header,
.kadence-header {
    background-color: var(--s-black);
    border-bottom: 1px solid #2a2a35;
}

/* Logo in header */
.site-branding .custom-logo,
.kadence-site-branding img {
    max-height: 56px;
    width: auto;
}

/* Navigatielinks */
#site-navigation a,
.kadence-navigation a {
    font-family: var(--s-font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--s-stone);
    transition: color 0.2s ease;
}

#site-navigation a:hover,
.kadence-navigation a:hover,
#site-navigation .current-menu-item > a {
    color: var(--s-ivory);
}

/* CTA-knop in navigatie (geef menu-item klasse 'nav-cta') */
#site-navigation .nav-cta > a,
.kadence-navigation .nav-cta > a {
    background: var(--s-gold);
    color: var(--s-black) !important;
    padding: 8px 18px;
    border-radius: var(--s-radius-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
}

#site-navigation .nav-cta > a:hover,
.kadence-navigation .nav-cta > a:hover {
    background: var(--s-goldlt);
}

/* Mobiel hamburger */
.kadence-menu-toggle,
.menu-toggle {
    color: var(--s-ivory);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. HERO / BANNER SECTIE
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero-wrapper: voeg klasse .sanitas-hero toe aan Kadence-sectie */
.sanitas-hero {
    background-color: var(--s-cream);
    position: relative;
}

/* Gouden accentlijn links */
.sanitas-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--s-gold);
    z-index: 1;
}

.sanitas-hero h1 {
    color: var(--s-black);
}

.sanitas-hero h1 em {
    font-style: normal;
    color: var(--s-gold);
}

.sanitas-hero p {
    font-size: 16px;
    max-width: 480px;
}

/* Stat-card (donkere kaart naast hero-tekst) */
.sanitas-stat-card {
    background: var(--s-black);
    border-radius: var(--s-radius);
    padding: 36px 32px;
}

.sanitas-stat-num {
    font-size: 40px;
    font-weight: 500;
    color: var(--s-goldlt);
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}

.sanitas-stat-label {
    font-size: 13px;
    font-weight: 300;
    color: var(--s-stone);
}


/* ═══════════════════════════════════════════════════════════════════════
   7. DIENSTENKAARTEN
   ═══════════════════════════════════════════════════════════════════════ */

/* Grid-wrapper: voeg klasse .sanitas-diensten-grid toe aan Kadence-kolommen */
.sanitas-diensten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--s-border);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    overflow: hidden;
}

/* Individuele kaart */
.sanitas-dienst-card,
.sanitas-diensten-grid .wp-block-kadence-column {
    background: var(--s-ivory);
    padding: 36px 32px;
    transition: background 0.2s ease;
}

.sanitas-dienst-card:hover,
.sanitas-diensten-grid .wp-block-kadence-column:hover {
    background: var(--s-cream);
}

.sanitas-dienst-num {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--s-gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.sanitas-dienst-card h3 {
    font-size: 17px;
    font-weight: 500;
    color: var(--s-black);
    margin-bottom: 10px;
}

.sanitas-dienst-card p {
    font-size: 14px;
    font-weight: 300;
    color: var(--s-stone);
}

/* Donkere kaart (laatste / CTA) */
.sanitas-dienst-card.dark,
.sanitas-diensten-grid .wp-block-kadence-column.dark {
    background: var(--s-black);
}

.sanitas-dienst-card.dark:hover,
.sanitas-diensten-grid .wp-block-kadence-column.dark:hover {
    background: var(--s-dark);
}

.sanitas-dienst-card.dark h3 { color: var(--s-ivory); }
.sanitas-dienst-card.dark p  { color: var(--s-stone); }


/* ═══════════════════════════════════════════════════════════════════════
   8. OVER-ONS SECTIE + PORTRETFOTO
   ═══════════════════════════════════════════════════════════════════════ */

/* Donkere sectie-achtergrond */
.sanitas-over {
    background: var(--s-black);
}

.sanitas-over h2 { color: var(--s-ivory); }
.sanitas-over p  { color: var(--s-stone); }

/* Merkwaarden-rij */
.sanitas-value-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #2a2a35;
}

.sanitas-value-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s-gold);
    flex-shrink: 0;
    margin-top: 6px;
}

.sanitas-value-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--s-ivory);
    min-width: 90px;
}

.sanitas-value-desc {
    font-size: 13px;
    font-weight: 300;
    color: var(--s-stone);
    margin: 0;
}

/* Sylvani-profielkaart */
.sanitas-profile-card {
    background: var(--s-dark);
    border-radius: var(--s-radius);
    overflow: hidden;
    border: 1px solid #2a2a35;
}

/* Portretfoto: zwart-wit + zachte verloopoverlay onderaan */
.sanitas-portrait-wrap {
    position: relative;
    overflow: hidden;
}

.sanitas-portrait-wrap img,
.sanitas-profile-card .wp-block-image img {
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(1.05);
    object-fit: cover;
    object-position: center top;
}

.sanitas-portrait-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to top, #22222D, transparent);
    pointer-events: none;
}

/* Tekstdeel onder de foto */
.sanitas-profile-info {
    padding: 28px 32px;
}

.sanitas-profile-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--s-ivory);
    margin-bottom: 4px;
}

.sanitas-profile-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-gold);
    margin-bottom: 16px;
    display: block;
}

.sanitas-profile-quote {
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: var(--s-stone);
    line-height: 1.75;
    border-left: none;
    background: none;
    padding: 0;
    margin: 0 0 20px;
}

/* Scheiding en statistieken */
.sanitas-profile-divider {
    height: 1px;
    background: #2a2a35;
    margin: 16px 0;
}

.sanitas-profile-stat-num {
    font-size: 28px;
    font-weight: 500;
    color: var(--s-goldlt);
    letter-spacing: -0.02em;
    line-height: 1;
}

.sanitas-profile-stat-label {
    font-size: 13px;
    font-weight: 300;
    color: var(--s-stone);
    display: block;
    margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. WERKGEBIEDEN
   ═══════════════════════════════════════════════════════════════════════ */

.sanitas-werkgebieden {
    background: var(--s-cream);
}

.sanitas-wg-card {
    background: var(--s-ivory);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 28px 24px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sanitas-wg-card:hover {
    border-color: var(--s-gold);
}

.sanitas-wg-card h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--s-black);
    margin-bottom: 8px;
}

.sanitas-wg-card p {
    font-size: 13px;
    font-weight: 300;
    color: var(--s-stone);
    line-height: 1.7;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   10. CTA BANNER
   ═══════════════════════════════════════════════════════════════════════ */

.sanitas-cta {
    background: var(--s-black);
    text-align: center;
}

.sanitas-cta h2 { color: var(--s-ivory); }
.sanitas-cta p  { color: var(--s-stone); max-width: 560px; margin: 0 auto 32px; }

.sanitas-cta-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-gold);
    display: block;
    margin-bottom: 16px;
}

.sanitas-cta-tel {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 300;
    color: var(--s-mid);
}

.sanitas-cta-tel a {
    color: var(--s-stone);
}

.sanitas-cta-tel a:hover {
    color: var(--s-ivory);
}


/* ═══════════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

#colophon,
.site-footer,
.kadence-footer {
    background: var(--s-dark);
    border-top: 1px solid #2a2a35;
    color: var(--s-stone);
}

#colophon a,
.site-footer a,
.kadence-footer a {
    color: var(--s-stone);
    font-size: 13px;
    font-weight: 300;
}

#colophon a:hover,
.site-footer a:hover,
.kadence-footer a:hover {
    color: var(--s-ivory);
}

/* Footer kolomtitel */
.sanitas-footer-col-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--s-gold);
    margin-bottom: 16px;
    display: block;
}

/* Footer bottombar */
.sanitas-footer-bottom {
    border-top: 1px solid #2a2a35;
    padding-top: 24px;
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sanitas-footer-copy {
    font-size: 12px;
    font-weight: 300;
    color: #3A3A48;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. FORMULIEREN (Contact Form 7 / WPForms)
   ═══════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.wpcf7-form-control:not(.wpcf7-submit) {
    font-family: var(--s-font);
    font-size: 14px;
    font-weight: 300;
    color: var(--s-black);
    background: var(--s-ivory);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-sm);
    padding: 12px 16px;
    width: 100%;
    transition: border-color 0.2s ease;
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.wpcf7-form-control:focus {
    border-color: var(--s-gold);
}

label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--s-black);
    display: block;
    margin-bottom: 6px;
}

textarea {
    min-height: 140px;
    resize: vertical;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. HULPKLASSEN (utility classes)
   ═══════════════════════════════════════════════════════════════════════ */

/* Secties */
.sanitas-section        { padding: var(--s-section) 32px; }
.sanitas-section-cream  { background: var(--s-cream); }
.sanitas-section-dark   { background: var(--s-black); }
.sanitas-section-gray   { background: var(--s-dark); }

/* Sectie-header */
.sanitas-section-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-gold);
    display: block;
    margin-bottom: 10px;
}

/* Gouden accentlijn onder kop */
.sanitas-heading-underline {
    border-bottom: 2px solid var(--s-gold);
    padding-bottom: 8px;
    display: inline-block;
}

/* Kaart met rand */
.sanitas-card {
    background: var(--s-ivory);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 28px 24px;
}

/* Donkere kaart */
.sanitas-card-dark {
    background: var(--s-dark);
    border: 1px solid #2a2a35;
    border-radius: var(--s-radius);
    padding: 28px 24px;
}

/* Verticale gouden accentlijn (links) */
.sanitas-accent-left {
    border-left: 4px solid var(--s-gold);
    padding-left: 20px;
}

/* Divider */
.sanitas-divider {
    height: 1px;
    background: var(--s-border);
    border: none;
    margin: 48px 0;
}

.sanitas-divider-dark {
    background: #2a2a35;
}

/* Tekst-kleuren */
.sanitas-text-gold   { color: var(--s-gold); }
.sanitas-text-stone  { color: var(--s-stone); }
.sanitas-text-ivory  { color: var(--s-ivory); }
.sanitas-text-black  { color: var(--s-black); }

/* Achtergrond */
.sanitas-bg-black  { background: var(--s-black); }
.sanitas-bg-cream  { background: var(--s-cream); }
.sanitas-bg-dark   { background: var(--s-dark); }
.sanitas-bg-gold   { background: var(--s-gold); }


/* ═══════════════════════════════════════════════════════════════════════
   14. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sanitas-diensten-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --s-section: 64px;
    }

    .sanitas-diensten-grid {
        grid-template-columns: 1fr;
    }

    .sanitas-stat-num {
        font-size: 32px;
    }

    .sanitas-hero::before {
        width: 3px;
    }

    .sanitas-profile-info {
        padding: 20px 20px;
    }
}

@media (max-width: 480px) {
    :root {
        --s-section: 48px;
    }

    .wp-block-button__link,
    .button {
        padding: 12px 20px;
        font-size: 11px;
    }
}


/* ===============================================================
   15. ICONEN — CSS achtergrondafbeeldingen (WordPress-safe)

   Gebruik in Gutenberg via Custom HTML blok:
   <div class="sanitas-icon sanitas-icon-inkoop"></div>
   =============================================================== */

.sanitas-icon {
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.sanitas-icon-inkoop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='10' width='36' height='8' rx='3' fill='%2316161D'/%3E%3Crect x='6' y='22' width='36' height='8' rx='3' fill='%2316161D' opacity='.4'/%3E%3Crect x='6' y='34' width='22' height='8' rx='3' fill='%23AD9164'/%3E%3C/svg%3E");
}

.sanitas-icon-contract {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='6' width='36' height='36' rx='4' stroke='%2316161D' stroke-width='2.5' fill='none'/%3E%3Crect x='13' y='17' width='22' height='4' rx='2' fill='%23AD9164'/%3E%3Crect x='13' y='25' width='16' height='4' rx='2' fill='%2316161D' opacity='.3'/%3E%3Crect x='13' y='33' width='10' height='4' rx='2' fill='%2316161D' opacity='.15'/%3E%3C/svg%3E");
}

.sanitas-icon-proces {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='16' stroke='%2316161D' stroke-width='2.5' fill='none'/%3E%3Cpath d='M16 24 L21 30 L32 18' stroke='%23AD9164' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.sanitas-icon-duurzaam {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 38 L18 24 L26 29 L36 14' stroke='%2316161D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='36' cy='14' r='4' fill='%23AD9164'/%3E%3C/svg%3E");
}

.sanitas-icon-vsr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='12' width='36' height='26' rx='3' stroke='%2316161D' stroke-width='2.5' fill='none'/%3E%3Crect x='12' y='20' width='8' height='12' rx='2' fill='%23AD9164'/%3E%3Crect x='24' y='16' width='8' height='16' rx='2' fill='%2316161D' opacity='.3'/%3E%3Crect x='36' y='24' width='4' height='8' rx='1.5' fill='%2316161D' opacity='.15'/%3E%3C/svg%3E");
}

.sanitas-icon-zorg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='10' y='8' width='28' height='32' rx='3' stroke='%2316161D' stroke-width='2.5' fill='none'/%3E%3Crect x='18' y='18' width='12' height='4' rx='2' fill='%23AD9164'/%3E%3Crect x='22' y='14' width='4' height='12' rx='2' fill='%23AD9164'/%3E%3C/svg%3E");
}

.sanitas-icon-logistiek {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 38 L40 38' stroke='%2316161D' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='10' y='22' width='10' height='16' rx='2' fill='none' stroke='%2316161D' stroke-width='2'/%3E%3Crect x='28' y='12' width='10' height='26' rx='2' fill='%23AD9164' opacity='.8'/%3E%3C/svg%3E");
}

.sanitas-icon-onderwijs {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 8 L42 20 L42 40 L6 40 L6 20 Z' stroke='%2316161D' stroke-width='2.5' fill='none' stroke-linejoin='round'/%3E%3Crect x='18' y='26' width='12' height='14' rx='2' fill='%23AD9164' opacity='.7'/%3E%3C/svg%3E");
}

.sanitas-icon-kantoor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='12' width='36' height='28' rx='3' stroke='%2316161D' stroke-width='2.5' fill='none'/%3E%3Crect x='14' y='20' width='10' height='10' rx='2' fill='%23AD9164' opacity='.7'/%3E%3Crect x='28' y='20' width='6' height='4' rx='1.5' fill='%2316161D' opacity='.25'/%3E%3Crect x='28' y='27' width='4' height='4' rx='1.5' fill='%2316161D' opacity='.25'/%3E%3C/svg%3E");
}

/* Donkere variant */
.sanitas-icon.dark.sanitas-icon-inkoop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='10' width='36' height='8' rx='3' fill='%23FAFAF8'/%3E%3Crect x='6' y='22' width='36' height='8' rx='3' fill='%23FAFAF8' opacity='.4'/%3E%3Crect x='6' y='34' width='22' height='8' rx='3' fill='%23C9AD83'/%3E%3C/svg%3E");
}
.sanitas-icon.dark.sanitas-icon-contract {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='6' width='36' height='36' rx='4' stroke='%23FAFAF8' stroke-width='2.5' fill='none'/%3E%3Crect x='13' y='17' width='22' height='4' rx='2' fill='%23C9AD83'/%3E%3Crect x='13' y='25' width='16' height='4' rx='2' fill='%23FAFAF8' opacity='.3'/%3E%3Crect x='13' y='33' width='10' height='4' rx='2' fill='%23FAFAF8' opacity='.15'/%3E%3C/svg%3E");
}
.sanitas-icon.dark.sanitas-icon-proces {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='16' stroke='%23FAFAF8' stroke-width='2.5' fill='none'/%3E%3Cpath d='M16 24 L21 30 L32 18' stroke='%23C9AD83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.sanitas-icon.dark.sanitas-icon-duurzaam {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 38 L18 24 L26 29 L36 14' stroke='%23FAFAF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='36' cy='14' r='4' fill='%23C9AD83'/%3E%3C/svg%3E");
}
.sanitas-icon.dark.sanitas-icon-vsr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='12' width='36' height='26' rx='3' stroke='%23FAFAF8' stroke-width='2.5' fill='none'/%3E%3Crect x='12' y='20' width='8' height='12' rx='2' fill='%23C9AD83'/%3E%3Crect x='24' y='16' width='8' height='16' rx='2' fill='%23FAFAF8' opacity='.3'/%3E%3Crect x='36' y='24' width='4' height='8' rx='1.5' fill='%23FAFAF8' opacity='.15'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════════
   16. LAYOUT OVERRIDES — Kadence contentbreedte, padding & spacing
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Contentbreedte: volledige breedte op homepage ────────────────── */
.home .content-container,
.home .site-container,
.home .content-wrap,
.home #primary,
.home #content,
.home .wp-site-blocks,
.home .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Kadence entry-header verbergen op pagina's ───────────────────── */
.page .entry-header,
.page .entry-title,
.page .content-title-above-entry {
    display: none !important;
}

/* ── Kadence hero-header leegruimte verwijderen ───────────────────── */
.page-hero-section,
.kadence-page-header,
.hero-title-section {
    display: none !important;
}

/* ── Breedte inner-containers op 1140px max houden ───────────────── */
.sanitas-hero .hero-inner,
.sanitas-section .section-inner,
.wp-block-kadence-rowlayout > .kb-row-layout-inner {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Kadence standaard rij-padding resetten op homepage ──────────── */
.home .wp-block-kadence-rowlayout {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Sanitas secties krijgen hun eigen padding terug ─────────────── */
.home .wp-block-kadence-rowlayout.sanitas-section,
.home .wp-block-kadence-rowlayout.sanitas-hero,
.home .wp-block-kadence-rowlayout.sanitas-over,
.home .wp-block-kadence-rowlayout.sanitas-cta,
.home .wp-block-kadence-rowlayout.sanitas-werkgebieden {
    padding-top: var(--s-section) !important;
    padding-bottom: var(--s-section) !important;
}

.home .wp-block-kadence-rowlayout.sanitas-hero {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ── Kadence column-padding normaliseren ─────────────────────────── */
.wp-block-kadence-column.sanitas-dienst-card,
.wp-block-kadence-column.sanitas-wg-card {
    padding: 36px 32px !important;
}

/* ── Kadence block heading margins ───────────────────────────────── */
.home .wp-block-heading {
    margin-top: 0 !important;
}

.home h1.wp-block-heading,
.home h2.wp-block-heading {
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
}

/* ── Dienstenkaarten grid: geen extra Kadence-gaps ───────────────── */
.sanitas-diensten-grid.wp-block-kadence-rowlayout {
    gap: 2px !important;
    row-gap: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. TYPOGRAFIE OVERRIDES — DM Sans forceren boven Kadence
   ═══════════════════════════════════════════════════════════════════════ */

/* Forceer DM Sans op alle tekstelementen */
body,
.site,
.entry-content,
.wp-block-kadence-rowlayout,
.wp-block-kadence-column {
    font-family: 'DM Sans', Arial, sans-serif !important;
}

/* Headings: gewicht, grootte en tracking */
h1, .wp-block-heading.wp-block-heading-level-1,
.entry-content h1 {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    color: var(--s-black) !important;
}

h2, .wp-block-heading.wp-block-heading-level-2,
.entry-content h2 {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
    color: var(--s-black) !important;
}

h3, .wp-block-heading.wp-block-heading-level-3,
.entry-content h3 {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    color: var(--s-black) !important;
}

/* Body tekst */
p, li, td, th, label, input, textarea, select {
    font-family: 'DM Sans', Arial, sans-serif !important;
}

p {
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: var(--s-stone) !important;
    font-size: 15px !important;
}

/* Koppen in donkere secties wit maken */
.sanitas-over h1,
.sanitas-over h2,
.sanitas-over h3,
.sanitas-cta h1,
.sanitas-cta h2,
.sanitas-section-dark h1,
.sanitas-section-dark h2,
.sanitas-section-dark h3 {
    color: var(--s-ivory) !important;
}

/* Stat-nummers */
.sanitas-stat-num {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 40px !important;
    color: var(--s-goldlt) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.sanitas-stat-label {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--s-stone) !important;
    line-height: 1.5 !important;
}

/* Sectie-labels (uppercase goud) */
.sanitas-section-tag,
.sanitas-label {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--s-gold) !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* Dienstkaart nummers */
.sanitas-dienst-num {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    color: var(--s-gold) !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   18. NAVIGATIE OVERRIDES — Kadence header verfijnen
   ═══════════════════════════════════════════════════════════════════════ */

/* Header hoogte en achtergrond */
.site-header,
#masthead,
.kadence-header {
    background: var(--s-black) !important;
    border-bottom: 1px solid #2a2a35 !important;
}

.site-header .kadence-header-row,
.header-main-row-wrap,
.header-main-wrap {
    min-height: 76px !important;
}

/* Navigatielinks */
.primary-menu > li > a,
.kadence-navigation .nav-link,
#site-navigation a {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: var(--s-stone) !important;
    padding: 8px 12px !important;
}

.primary-menu > li > a:hover,
.kadence-navigation .nav-link:hover {
    color: var(--s-ivory) !important;
}

/* Actieve pagina in menu */
.primary-menu > .current-menu-item > a,
.primary-menu > .current-page-ancestor > a {
    color: var(--s-ivory) !important;
}

/* CTA-knop in navigatie */
.nav-cta a,
.primary-menu > li.nav-cta > a {
    background: var(--s-gold) !important;
    color: var(--s-black) !important;
    padding: 8px 18px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.nav-cta a:hover,
.primary-menu > li.nav-cta > a:hover {
    background: var(--s-goldlt) !important;
    color: var(--s-black) !important;
}

/* Logo in navigatie */
.custom-logo,
.site-branding img,
.kadence-site-branding img {
    max-height: 56px !important;
    width: auto !important;
}

/* Sitenaam als tekst (fallback als er geen logo is) */
.site-title,
.site-title a {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0.1em !important;
    color: var(--s-ivory) !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. FOOTER OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer,
#colophon,
.kadence-footer,
.footer-html,
.footer-wrap {
    background: var(--s-dark) !important;
    border-top: 1px solid #2a2a35 !important;
    color: var(--s-stone) !important;
}

.site-footer a,
#colophon a {
    color: var(--s-stone) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: var(--s-ivory) !important;
}

.site-footer p,
#colophon p {
    color: var(--s-stone) !important;
    font-size: 13px !important;
}

/* Kadence footer inner */
.footer-upper,
.footer-lower {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   20. RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sanitas-diensten-grid.wp-block-kadence-rowlayout {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    h1, .wp-block-heading.wp-block-heading-level-1 {
        font-size: 28px !important;
    }

    h2, .wp-block-heading.wp-block-heading-level-2 {
        font-size: 22px !important;
    }

    .sanitas-stat-num {
        font-size: 32px !important;
    }

    .sanitas-diensten-grid.wp-block-kadence-rowlayout {
        grid-template-columns: 1fr !important;
    }

    .wp-block-kadence-column.sanitas-dienst-card,
    .wp-block-kadence-column.sanitas-wg-card {
        padding: 24px 20px !important;
    }

    .home .wp-block-kadence-rowlayout.sanitas-hero {
        padding: 48px 20px !important;
    }
}


/* ── Logo navigatie uitlijning ─────────────────────────────────── */
.site-header-row-container-inner,
.site-container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    width: 100% !important;
}

.site-header-wrap,
.site-main-header-wrap {
    padding: 0 !important;
}

/* ── Portretfoto Sylvani — kleiner ──────────────────────────────── */
.sn-profile-img {
    max-height: 320px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.sn-profile-img-wrap {
    max-height: 320px !important;
    overflow: hidden !important;
}