/**
Theme Name: Bouwdagen Langenboom
Template:  wuxnl-theme
Author: Wux
Author URI: https://wux.nl/
*/

@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&family=Glegoo:wght@400;700&display=swap');

:root {
    --fs: 1.4rem;
    --lh: 1.6;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #E7D1AF;
    --clr-primary-80: #F3E1C6;
    --clr-primary-20: #cce2e7;
    --clr-primary-rgb: 231, 209, 175;
    --clr-primary-80-rgb: 243, 225, 198;

    --clr-secondary: #F38E28;

    --clr-heading: #152F33;
    --clr-text: #152F33;

    --clr-dark: #152F33;
    --clr-light: #f2f2f2;

    --clr-border: rgb(222, 226, 230); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    --clr-background: var(--clr-primary);

    /* Font variables */
    --font-primary: 'Glegoo', sans-serif;
    --font-secondary: 'Finger Paint', sans-serif;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1140px;
    --container-width--xxl: 1320px;
    --container-width--xxxl: 1560px;

    --ts-duration: var(--ts-25);
    --ts-function: var(--cb--smooth);

}

@media (min-width: 768px) {
    :root {
        --fs: 1.6rem;
    }
}

body { font-family: var(--font-primary); background-color: var(--clr-background);}

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { }
h1, .h1 { --fs: clamp(3.2rem, 5vw, 8rem); --lh: 1; }
h2, .h2 { --fs: clamp(2.8rem, 4vw, 6.4rem); --lh: 1; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

/*** ---------- Whitespace ---------- ***/
[class*="wpb-wst"] { --pt: 0; padding-top: var(--pt); }
[class*="wpb-wsb"] { --pb: 0; padding-bottom: var(--pb); }

.wpb-wst--none { --pt: 0; }
.wpb-wst--small { --pt: 1.8rem; }
.wpb-wst--medium { --pt: 2.5rem; }
.wpb-wst--large { --pt: 4rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 1.8rem; }
.wpb-wsb--medium { --pb: 2.5rem; }
.wpb-wsb--large { --pb: 4rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 6.4rem; }
    .wpb-wst--medium { --pt: 8rem; }
    .wpb-wst--large { --pt: 11rem; }
    
    .wpb-wsb--small { --pb: 6.4rem; }
    .wpb-wsb--medium { --pb: 8rem; }
    .wpb-wsb--large { --pb: 11rem; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--transparant {background-color: transparant;}
.wpb-bg-clr--primary {background-color: var(--clr-primary);}
.wpb-bg-clr--secondary {background-color: var(--clr-secondary);}
.wpb-bg-clr--light {background-color: var(--clr-primary-80);}
.wpb-bg-clr--dark {background-color: var(--clr-dark);}