@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;600;700&display=swap'); /*primary_font_url*/
:root {
    --base-color: #0c373b;
    --primary-color: #f6896c;
    --navigation_font-family: 'DM Sans', sans-serif;
    --heading_font-family: 'DM Sans', sans-serif;
    --content_font-family: 'DM Sans', sans-serif;
    --footer_background: #0c373b;
    --footer_link_color: #ffffff;
    --footer_link_hover_color: #f6896c;
    --footer_h2_color: #ffffff;
    --footer_webring_li_icon_content: #f6896c;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: .25rem;
    --tw-translate-y: -.5rem;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    --tw-blur: blur(8px);
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: blur(4px);
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-space-x-reverse: 0;
    --tw-space-y-reverse: 0;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    --color-primary: #05343B;
    --color-secondary: #0C4043;
    --color-dark: #032B30;
    --color-accent: #F6896C;
}

/*###> custom ###*/
/* --- Font setup --- */
body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* normaal */
}

b, strong {
    font-weight: 700; /* bold */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600; /* semi-bold voor headings */
}

/* --- Stuur een appje knop --- */
a[data-element-label="Stuur een appje"] {
    background-color: #f6896c !important;
    border: 1px solid #f6896c !important;
    color: #ffffff !important;
    background-image: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6em 1.2em !important;
    border-radius: 0.5em !important;
    font-weight: 600 !important;
    transition: background-color 0.3s, transform 0.2s !important;
}

a[data-element-label="Stuur een appje"]:hover {
    background-color: #e5785b !important;
    border-color: #e5785b !important;
    transform: translateY(-2px) !important;
}

a[data-element-label="Stuur een appje"] i {
    color: #ffffff !important;
}

/* --- Solliciteer-knop, inclusief sticky header --- */
.apply-btn {
    background-color: #f6896c !important;
    border: 1px solid #f6896c !important;
    color: #ffffff !important;
    background-image: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6em 1.2em !important;
    border-radius: 0.5em !important;
    font-weight: 600 !important;
    transition: background-color 0.3s, transform 0.2s !important;
}

.apply-btn:hover {
    background-color: #e5785b !important;
    border-color: #e5785b !important;
    transform: translateY(-2px) !important;
}

.apply-btn i {
    color: #ffffff !important;
}

/* Sticky header padding */
header#mainHeader.is-sticky-header:not(.is-idle) .apply-btn {
    display: block;
    height: 100%;
    padding: 10px 30px;
}

/* Algemene marges */
.user-nav.component_button p {
    margin: 0;
}
/*###< custom ###*/