/* ============================================================================
   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;
}

/* ============================================================================
   KP Pattern Overlay — Subtle texture on dark backgrounds
   Figma: background: url(<path>) lightgray 50% / cover no-repeat
   ============================================================================ */

/* Hero banner: nieuw patroon */
.kp-hero-banner__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/04/Hero_Pattern.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Overige secties: origineel patroon */
.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/02/KP_Pattern-scaled.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.06;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}
.kp-hero-banner.kp-hero-centered .kp-hero-banner__bg::before{
    display: none;
}
body.thanks-page .kp-hero-banner__bg::before {
    display: none;
}

/* Hero banner ::before pattern: extend up to touch the header */
@media (min-width: 1025px) {
    body.kp-transparent-header .kp-hero-banner {
        overflow: visible;
    }
    body.kp-transparent-header .kp-hero-banner__bg::before {
        height: calc(100% + 24px);
        top: -24px;
    }
}

/* 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 */