/* ============================================================================
   KP BASE CSS — Samenvoeging van variables + reset + typography + layout
   Vervangt de losse bestanden uit css/base/ en css/layout/ zodat er één
   HTTP-request overblijft i.p.v. vier.
   ============================================================================ */


/* ============================================================================
   VARIABLES — CSS custom properties (kleuren, spacing, breakpoints)
   Bron: css/base/variables.css
   ============================================================================ */

:root {
   /* ============================================================================
      LAYOUT & SPACING (Gebaseerd op design ritme)
      ============================================================================ */
   --inner-width: 1448px;
   --small-padding: 40px 0px;
   --medium-padding: 80px 0px;
   --large-padding: 120px 0px;
   /* Mobile spacings */
   --padding-mobile: 24px;
   --gap-mobile: 16px;
   /* ============================================================================
      COLORS (Gebaseerd op Figma & Logo)
      ============================================================================ */
   /* Brand Colors */
   --color-primary: #0D1C38;
   /* Klaas Puul Donkerblauw */
   --color-primary-hover: #091428;
   /* Iets donkerder voor hover */
   --color-secondary: #002240;
   /* Diep donkerblauw (Search buttons, etc.) */
   --color-text-dark: #131313;
   /* De standaard donkere tekstkleur */
   --color-text-grey: #666666;
   /* Subtitels / placeholders */
   --color-text-light: #FFFFFF;
   /* Witte tekst */
   /* Status Colors */
   --color-success: #34A853;
   /* Groene puntje bij openingstijden */
   /* Backgrounds */
   --bg-light: #FFFFFF;
   --bg-grey: #F6F6F6;
   /* Gebruikt in Topbar & Footer categories */
   --bg-dark: #131313;
   /* Button Variables (Global mapping) */
   --btn-primary-bg: var(--color-primary);
   --btn-primary-color: var(--color-text-light);
   --btn-primary-hover: var(--color-primary-hover);
   /* ============================================================================
      TYPOGRAPHY MAPPING
      De groottes zelf staan in typography.css, hier regelen we de font-family
      ============================================================================ */
   --font-main: "acumin-pro", sans-serif;
   --font-heading: "sofia-pro", sans-serif;
   /* ACF Opties Mapping (voor backwards compatibility met je PHP bestanden) */
   --donker-bg: var(--color-text-dark);
   --donker-bg-hover: #000000;
   --donker-text: #FFFFFF;
   --licht-bg: #FFFFFF;
   --licht-text: var(--color-text-dark);
}
/* ============================================================================
   GLOBAL BUTTON STYLES (Update op basis van Figma)
   ============================================================================ */

/* ============================================================================
   SPECIFIEKE ACF KNOP STIJLEN OVERRIDES
   Dit zorgt dat de knoppen uit je pagebuilder (cta.php etc.) ook direct goed staan
   ============================================================================ */

/* Als er in ACF 'Donker met lichte tekst' is gekozen */


.rank-math-breadcrumb .separator {
   font-size: 0;
   color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14' fill='none'%3E%3Cpath d='M0 0C0.018969 1.33921 0.682885 2.85673 1.91208 4.08781C3.14127 5.3189 4.66069 5.98091 5.9999 5.99988L0 0Z' fill='%230D1C38'/%3E%3Cpath d='M5.9999 7.08887C4.66069 7.10784 3.14317 7.77175 1.91208 9.00094C0.680988 10.2301 0.018969 11.7495 0 13.0887L5.9999 7.08887Z' fill='%230D1C38'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 6px 14px;
   width: 22px;
   height: 14px;
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
}
/* Het Icoon */

.custom-faq-icon {
   display: block;
   width: 24px;
   height: 24px;
   min-width: 24px;
   padding: 12px;
   box-sizing: content-box;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z' fill='%23131313'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================================
   RESET — browser normalisatie
   Bron: css/base/reset.css
   ============================================================================ */

/* Reset CSS */
html {
    font-size: 16px;
    line-height: 24px;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    width: 100%;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
}

b,
strong {
    font-weight: 700;
}

p {
    margin: 0px 0px;
}

a {
    text-decoration: none;
    transition: .1s ease-in-out;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: none;
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    padding-right: 2px;
    width: 100%;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: none;
    vertical-align: top;
}

img {
    border-style: none;
}

img,
video {
    height: auto;
    max-width: 100%;
}

:focus {
    outline: 0;
    outline-color: transparent;
    outline-style: none;
}

/* ============================================================================
   TYPOGRAPHY — font families, sizes, weights
   Bron: css/base/typography.css
   ============================================================================ */

/* Typography CSS */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-weight: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
    color: var(--font-dark);
}

h1 {
    font-size: var(--h1-font-size-mobile);
    line-height: var(--h1-line-height-mobile);
}

h2 {
    font-size: var(--h2-font-size-mobile);
    line-height: var(--h2-line-height-mobile);
}

h3 {
    font-size: var(--h3-font-size-mobile);
    line-height: var(--h3-line-height-mobile);
}

h4 {
    font-size: var(--h4-font-size-mobile);
    line-height: var(--h4-line-height-mobile);
}

h5 {
    font-size: var(--h5-font-size-mobile);
    line-height: var(--h5-line-height-mobile);
}

h6 {
    font-size: var(--h6-font-size-mobile);
    line-height: var(--h6-line-height-mobile);
}

@media (min-width:768px) {
    h1 {
        font-size: var(--h1-font-size-ipad);
        line-height: var(--h1-line-height-ipad);
    }

    h2 {
        font-size: var(--h2-font-size-ipad);
        line-height: var(--h2-line-height-ipad);
    }

    h3 {
        font-size: var(--h3-font-size-ipad);
        line-height: var(--h3-line-height-ipad);
    }

    h4 {
        font-size: var(--h4-font-size-ipad);
        line-height: var(--h4-line-height-ipad);
    }

    h5 {
        font-size: var(--h5-font-size-ipad);
        line-height: var(--h5-line-height-ipad);
    }

    h6 {
        font-size: var(--h6-font-size-ipad);
        line-height: var(--h6-line-height-ipad);
    }

}

@media (min-width:1480px) {
    h1 {
        font-size: var(--h1-font-size-desktop-small);
        line-height: var(--h1-line-height-desktop-small);
    }

    h2 {
        font-size: var(--h2-font-size-desktop-small);
        line-height: var(--h2-line-height-desktop-small);
    }

    h3 {
        font-size: var(--h3-font-size-desktop-small);
        line-height: var(--h3-line-height-desktop-small);
    }

    h4 {
        font-size: var(--h4-font-size-desktop-small);
        line-height: var(--h4-line-height-desktop-small);
    }

    h5 {
        font-size: var(--h5-font-size-desktop-small);
        line-height: var(--h5-line-height-desktop-small);
    }

    h6 {
        font-size: var(--h6-font-size-desktop-small);
        line-height: var(--h6-line-height-desktop-small);
    }

}

@media (min-width:1920px) {
    h1 {
        font-size: var(--h1-font-size-desktop-large);
        line-height: var(--h1-line-height-desktop-large);
    }

    h2 {
        font-size: var(--h2-font-size-desktop-large);
        line-height: var(--h2-line-height-desktop-large);
    }

    h3 {
        font-size: var(--h3-font-size-desktop-large);
        line-height: var(--h3-line-height-desktop-large);
    }

    h4 {
        font-size: var(--h4-font-size-desktop-large);
        line-height: var(--h4-line-height-desktop-large);
    }

    h5 {
        font-size: var(--h5-font-size-desktop-large);
        line-height: var(--h5-line-height-desktop-large);
    }

    h6 {
        font-size: var(--h6-font-size-desktop-large);
        line-height: var(--h6-line-height-desktop-large);
    }

}

.sub-content h1 {
}

.sub-content h2 {
}

.sub-content h3 {
}

.sub-content h4 {
}

.color-light {
    color: var(--font-light);
}

.color-dark {
    color: var(--font-dark);
}

/* Pretitel styles */
.pretitel {
    color: #737373;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.44px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Desktop Typography */
@media (min-width:1024px) {
    h1 {
    }

    h2 {
    }

    h3 {
    }

    h4 {
    }

    .sub-content h1 {
    }

    .sub-content h2 {
    }

    .sub-content h3 {
    }

    .sub-content h4 {
    }

}

/* ============================================================================
   LAYOUT — basis containers en grid helpers
   Bron: css/layout/layout.css
   ============================================================================ */

/* Layout CSS */
html {
    scroll-padding-top: 140px;
}

body {
    overflow-x: visible;
}
#page.site {
    overflow-x: clip;
}

.inner {
    width: 100%;
    max-width: 116rem;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
}

.flexbox-wrapper {
    display: flex;
    flex-wrap: wrap;
}


.bg-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
}

.home-link {
    position: relative;
    display: block;
    width: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}



/* Clear floats */
section:after,
article:after,
.clear:after,
#inner-header:after,
.row:after,
.social:after,
.site-info:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/* Assistive text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute !important;
    height: 1px;
    width: 1px;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: normal;
    padding: 15px 23px 14px;
    position: absolute;
    left: 5px;
    top: 5px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
}

/* Mobile/Desktop visibility */
.desktop {
    display: none!important;
}

.mobile {
    display: block!important;
}

@media (min-width: 1024px) {
    .mobile {
        display: none!important;
    }
    
    .desktop {
        display: block!important;
    }
}

/* ============================================================================
   SMOOTH SCROLL — Lenis vereiste styles
   Bron: css/smooth-scroll.css
   ============================================================================ */

/* Basis Lenis vereisten */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}