/*

    Theme Name: Basetheme Child
    Theme URI: http://www.qreative-web.com
    Description: Is een korte omschrijving echt nodig?
    Version: 1.0

    Template: basetheme

    Author: Qreative-Web
    Author URI: http://www.qreative-web.com

    License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

nav:is(.wp-block-navigation) {
    display: block;
    ul {
        display: flex;
    }
}

header,
nav ul li,
banner,
.wp-block-button__link,
.border-radius {
    corner-shape: squircle;
}

#header {
    padding: var(--spacing);
    & nav ul.menu {
        display: flex;
        gap: 0.5rem;
        justify-content: end;
        flex-wrap: wrap;
    }
    & nav ul.sub-menu {
        --_width: 350px;
    }
    & nav ul.sub-menu li > a {
        display: grid;
        gap: 0.25em;
    }
    .menu-item-icon {
        transform: none;
        position: relative;
        left: -0.25em;
        opacity: 0.6;
    }
}

:is(#banner, .bg-pattern, .cards > [class^="wp-block-"]) {
    position: relative;
    isolation: isolate;
    &::before {
        --linecolor: currentColor;
        --size: 2px;
        --color-mix: 20%;
        --line: color-mix(
            in hsl,
            var(--linecolor) var(--color-mix),
            transparent
        );
        content: "";
        position: absolute;
        background: radial-gradient(
            circle,
            var(--line) var(--size),
            transparent var(--size)
        );
        background-size: 20px 20px;
        mask: radial-gradient(circle at top left, white, transparent 35%);
        inset: 0;
        transform-style: flat;
        pointer-events: none;
        z-index: -1;
    }
}
#banner::before {
    --color-mix: 40%;
    mask: radial-gradient(circle at top, white, transparent);
}
#banner {
    min-height: 400px;
}
.bg-pattern--main::before {
    --linecolor: var(--primary) !important;
    --color-mix: 30% !important;
}
.cards {
    & > [class^="wp-block-"] {
        border-radius: var(--border-radius);
        corner-shape: squircle;
        padding: 2rem;
        border: 2px solid var(--wp--preset--color--main-shade-lighter);
        --_background-color: var(--wp--preset--color--main-shade-lighter);
        --_shadow: color-mix(in hsl, var(--_background-color) 40%, transparent);
        --_shine: color-mix(in hsl, var(--_background-color) 50%, #fff);
        box-shadow:
            2px 2px 18px var(--_shadow),
            inset 0px 4px 4px var(--_shine);
    }
    & .featured {
    }
}

@font-face {
    font-family: "Anybody";
    src:
        url("fonts/Anybody.woff2") format("woff2 supports variations"),
        url("fonts/Anybody.woff2") format("woff2") tech("variations"),
        url("fonts/Anybody.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "BalooDa2";
    src:
        url("fonts/BalooDa2.woff2") format("woff2 supports variations"),
        url("fonts/BalooDa2.woff2") format("woff2") tech("variations"),
        url("fonts/BalooDa2.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "BricolageGrotesque";
    src:
        url("fonts/BricolageGrotesque.woff2")
            format("woff2 supports variations"),
        url("fonts/BricolageGrotesque.woff2") format("woff2") tech("variations"),
        url("fonts/BricolageGrotesque.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "NationalPark";
    src:
        url("fonts/NationalPark.woff2") format("woff2 supports variations"),
        url("fonts/NationalPark.woff2") format("woff2") tech("variations"),
        url("fonts/NationalPark.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src:
        url("fonts/Nunito.woff2") format("woff2 supports variations"),
        url("fonts/Nunito.woff2") format("woff2") tech("variations"),
        url("fonts/Nunito.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Outfit";
    src:
        url("fonts/Outfit.woff2") format("woff2 supports variations"),
        url("fonts/Outfit.woff2") format("woff2") tech("variations"),
        url("fonts/Outfit.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    ascent-override: 100%;
    descent-override: 26%;
    line-gap-override: 0;
}

@font-face {
    font-family: "PathwayExtreme";
    src:
        url("fonts/PathwayExtreme.woff2") format("woff2 supports variations"),
        url("fonts/PathwayExtreme.woff2") format("woff2") tech("variations"),
        url("fonts/PathwayExtreme.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Quicksand";
    src:
        url("fonts/Quicksand.woff2") format("woff2 supports variations"),
        url("fonts/Quicksand.woff2") format("woff2") tech("variations"),
        url("fonts/Quicksand.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk";
    src:
        url("fonts/SpaceGrotesk.woff2") format("woff2 supports variations"),
        url("fonts/SpaceGrotesk.woff2") format("woff2") tech("variations"),
        url("fonts/SpaceGrotesk.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "WinkySans";
    src:
        url("fonts/WinkySans.woff2") format("woff2 supports variations"),
        url("fonts/WinkySans.woff2") format("woff2") tech("variations"),
        url("fonts/WinkySans.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;

    ascent-override: 105.7%;
    descent-override: 43%;
    line-gap-override: 0;
}

.has-anybody-font-family {
    font-family: "Anybody";
}
.has-balooda2-font-family {
    font-family: "BalooDa2";
}
.has-bricolagegrotesque-font-family {
    font-family: "BricolageGrotesque";
}
.has-nationalpark-font-family {
    font-family: "NationalPark";
}
.has-nunito-font-family {
    font-family: "Nunito";
}
.has-outfit-font-family {
    font-family: "Outfit";
}
.has-pathwayextreme-font-family {
    font-family: "PathwayExtreme";
}
.has-quicksand-font-family {
    font-family: "Quicksand";
}
.has-spacegrotesk-font-family {
    font-family: "SpaceGrotesk";
}
.has-winkysans-font-family {
    font-family: "WinkySans";
}