/*
Theme Name: Wux Theme
Author: Wux
Author URI: https://wux.nl/
Description: Wux is het custom wordpress thema van Wux - Digital Agency
Version: 3.0.0
Requires PHP: 8.3.0
Text Domain: wuxnl-theme
*/

:root {
    /* Font variables */
    --fs            : 1.4rem;
    --lh            : 1.6;

    --fs-h1-lg      : clamp(2.8rem, 4vw, 5.6rem);
    --fs-h1         : clamp(2.8rem, 4vw, 5.6rem);
    --fs-h1-xl      : clamp(3.6rem, 5vw, 6.4rem);

    --fs-h2         : clamp(2.8rem, 4vw, 4.4rem);

    --fs-h3         : clamp(2.2rem, 2.8vw, 3.2rem);
        
    /* Color variables */
    --clr-primary-120   : #006ea2;
    --clr-primary       : #008ACB;
    --clr-primary-60    : #39B9F5;
    --clr-primary-20    : #cce2e7;
    --clr-primary-10    : #E5EEF4;
    --clr-primary-rgb   : 0, 138, 203;

    --clr-secondary     : #F6F3F0;
    --clr-secondary-120 : #cbc3bc;

    --clr-dark          : #0D2B40;
    --clr-dark-rgb      : 13, 43, 64;

    --clr-heading       : var(--clr-dark);
    --clr-text          : var(--clr-dark);
    --clr-text-rgb      : var(--clr-dark-rgb);

    --clr-light         : var(--clr-secondary);

    --clr-beige         : #EBE9E6;

    --clr-border        : #dbdfe2; 

    --clr-danger        : #e2401c;
    --clr-info          : #3d9cd2;
    --clr-success       : #1CB435;

    /* Font variables */
    --font-primary      : 'Hind', sans-serif;
    --font-secondary    : 'TitilliumWeb', sans-serif;

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 566px;
    --container-width--md   : 826px;
    --container-width--lg   : 960px;
    --container-width--xl   : 1140px;
    --container-width--xxl  : 1320px;
    --container-width--xxxl : 1476px;

    /* Transition variables */
    --ts-duration            : var(--ts-35);
    --ts-function            : cubic-bezier(.58,.22,.2,.96);

    --nav-height: calc(7.2rem + var(--wp-admin--admin-bar--height, 0px));
}

@media (min-width: 992px) {
    :root {
        --fs: 1.6rem;
        --nav-height: calc(15.6rem + var(--wp-admin--admin-bar--height, 0px));
    }
}

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

*:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 3.2rem; --p-y-medium: 4rem; --p-y-large: 6rem;
    /* -- Top -- */
    &.wpb-wst--small { --pt: var(--p-y-small); }
    &.wpb-wst--medium { --pt: var(--p-y-medium); }
    &.wpb-wst--large { --pt: var(--p-y-large); }

    /* -- Bottom -- */
    &.wpb-wsb--small { --pb: var(--p-y-small); }
    &.wpb-wsb--medium { --pb: var(--p-y-medium); }
    &.wpb-wsb--large { --pb: var(--p-y-large); }

    &.content-section { --p-y-small: 2rem; --p-y-medium: 2.4rem; --p-y-large: 3.2rem; }
}

@media (min-width: 768px) {
    *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 4.5rem; --p-y-medium: 6rem; --p-y-large: 8rem; 
        &.content-section { --p-y-small: 2.4rem; --p-y-medium: 3.2rem; --p-y-large: 4.8rem; }
    }
}
@media (min-width: 1200px) {
    *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 6rem; --p-y-medium: 9rem; --p-y-large: 12rem; 
        &.content-section { --p-y-small: 3.2rem; --p-y-medium: 4.8rem; --p-y-large: 5.6rem; }
    }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); 
    &.wpb-bg-clr--transparent { --block-bg: transparent; }
    &.wpb-bg-clr--light { --block-bg: var(--clr-light); }
    &.wpb-bg-clr--primary { --block-bg: var(--clr-primary); }
    &.wpb-bg-clr--secondary { --block-bg: var(--clr-secondary); }
    &.wpb-bg-clr--dark { --block-bg: var(--clr-dark); --clr-contrast-text: #FFFF; --clr-contrast: #FFFF; }

    &.text-light { --clr-contrast: #FFFF; --clr-contrast-text: rgb(255, 255, 255, .75); }
}

.by-wux { display: flex; align-items: center; gap: .3rem; text-decoration: none; transition: opacity var(--ts-duration) var(--ts-function);
    span { font-size: 1.4rem; line-height: 1; }
    img { width: 4.4rem; height: 1.3rem; margin-bottom: .2rem; }

    &:hover { opacity: .75; }
}

.otgs-development-site-front-end { display: none; }