/*
Theme Name: Wux Blog Theme - Child
Template: wux-blogs
Description: A child theme for the Wux Blogs theme
Author: Wux B.V.
Author URI: https://wux.nl/
Version: 1.0.0
Text Domain: wux-blogs-child
*/

@import url("../wux-blogs/style.css");

:root {
    --clr-light     : #edeae7a4;
    
    --header-logo-width: clamp(12rem, 14vw, 18rem);
    --footer-logo-width: clamp(20rem, 24vw, 36rem);
}

*:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-xsmall: .8rem; --p-y-small: 1.6rem; --p-y-medium: 3.2rem; --p-y-large: 4.8rem;
    /* -- Top -- */
    &.wpb-wst--xsmall { --pt: var(--p-y-xsmall); }
    &.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--xsmall { --pb: var(--p-y-xsmall); }
    &.wpb-wsb--small { --pb: var(--p-y-small); }
    &.wpb-wsb--medium { --pb: var(--p-y-medium); }
    &.wpb-wsb--large { --pb: var(--p-y-large); }

    @media (min-width: 768px) {
        --p-y-xsmall: 3.2rem; --p-y-small: 4.8rem; --p-y-medium: 6rem; --p-y-large: 8rem;
    }
    @media (min-width: 1200px) {
        --p-y-xsmall: 3.2rem; --p-y-small: 6.4rem; --p-y-medium: 8rem; --p-y-large: 10rem;
    }
}

h3 { --fs-h3: clamp(2.4rem, 2.5vw, 3rem); }

.wpb-navigation { border-bottom: 1px solid var(--clr-border); }

.wpb-hero--home { display: grid; align-items: center; padding-block: clamp(4.8rem, 7vw, 12rem);
    .wpb-text { max-width: 64rem;
        h1 { --fs-h1: clamp(4rem, 5vw, 10rem); }
        p { --fs: clamp(1.4rem, 1.6vw, 1.8rem); }
    }
}

.has-background-image::after { background: linear-gradient(to right, rgba(0,0,0,.6) 33%, rgba(0,0,0,0)); }

.wpb-swiper {
    & .wpb-swiper__pagination {
        .wpb-bg-clr--light & { --op: 1; --bg: #dfdad5a4; }
    }
}

.wpb-card {
    &.wpb-card--category .wpb-icon { --w: clamp(2rem, 2vw, 2.6rem); --h: clamp(2rem, 2vw, 2.6rem); }
}

.wpb-footer {
    .wpb-footer__main { border-top: .2rem solid var(--clr-border); }
}