/* ============================================================================
   KLAAS PUUL — Custom Overrides
   ============================================================================
   Use this file for quick custom styles and client-specific tweaks.
   Loaded after all other stylesheets for maximum specificity.
   ============================================================================ */

body {
    background-color: #0D1C38;
}
.grecaptcha-badge {
    visibility: hidden!important;
}
body .wpa-test-msg {
    display: none !important;
}

/* Homepage: hero banner bg compacter (Figma: 368px mobile) */
body.home .kp-hero-banner__bg {
    min-height: 368px;
}

/* ============================================================================
   LAZY LOAD — fade in afbeeldingen zodra ze geladen zijn
   ============================================================================ */
img[data-lazy-src] {
    opacity: 0;
}
img.lazyloaded {
    transition: opacity 0.5s linear 0.2s;
    opacity: 1;
}

/* ============================================================================
   COMPLIANZ DOCUMENT STYLING
   ============================================================================ */
body .cmplz-document {
    font-size: 20px !important;
    max-width: 100% !important;
}
body .cmplz-document ul {
    list-style-position: inside;
}
body .cmplz-document p {
    margin: 1rem 0;
    font-size: 20px !important;
}
body .cmplz-document a,
body #cmplz-document a,
body .editor-styles-wrapper .cmplz-unlinked-mode a {
    color: #0D1C38 !important;
    text-decoration: underline !important;
}
body .cmplz-document a:hover,
body #cmplz-document a:hover,
body .editor-styles-wrapper .cmplz-unlinked-mode a:hover {
    text-decoration: none !important;
}

/* Hide right column in text-usp on compliance pages */
.kp-content .kp-text-usp__right {
    display: none;
}
/* ============================================================================
   KP Pattern Overlay — Subtle texture on dark backgrounds
   Figma: background: url(<path>) lightgray 50% / cover no-repeat
   ============================================================================ */
.kp-hero-banner__bg::before,
.kp-contact-cta::before,
.kp-section-label.bg-dark::before,
.kp-pd-cta-banner__bar::before,
.kp-cases-carousel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/04/KP_Pattern-tile-344.webp');
    background-repeat: repeat;
    background-size: 224px 224px;
    opacity: 0.06;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}

/* Mobile: kleinere tile-size */
@media (max-width: 1024px) {
    .kp-hero-banner__bg::before,
    .kp-contact-cta::before,
    .kp-section-label.bg-dark::before,
    .kp-pd-cta-banner__bar::before,
    .kp-cases-carousel::before {
        background-size: 112px 112px;
    }
}

/* Ensure parent sections have relative positioning for the overlay */
.kp-section-label.bg-dark {
    position: relative;
    overflow: hidden;
}
.kp-section-label.bg-light-blue,
.bg-light-blue { background-color: #EBF1F8; }
.kp-section-label.bg-grey,
.bg-grey { background-color: #F6F6F6; }

/* Ensure content stays above the pattern */
.kp-hero-banner__bg > *,
.kp-contact-cta > *,
.kp-section-label.bg-dark > *,
.kp-fullscreen-markets > * {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   Section Inner Width — ACF-driven
   Standaard: 116rem (1856px) — set in layout.css
   Breed: 1752px
   Smal: 1452px
   ============================================================================ */
/* Section Inner Width — ACF-driven
   Default .inner = 116rem (set in layout.css)
   inner-breed (default keuze) = 109.5rem (1752px)
   inner-groot = 116rem (1856px) — same as base .inner, explicit override
   inner-smal = 90.75rem (1452px)
*/
.inner-breed .inner { max-width: 109.5rem; }   /* 1752px */
.inner-groot .inner { max-width: 116rem; }     /* 1856px */
.inner-smal .inner { max-width: 90.75rem; }    /* 1452px */