/*
Theme Name: Kraft
Theme URI: https://stanclassens.nl/
Author: Stan Classens
Author URI: https://stanclassens.nl
Description: Custom wordpress thema met custom fields en custom post types
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Kraft
*/

@font-face {
    font-family: 'Inter';
    src:url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
        url('assets/fonts/Inter-VariableFont_opsz,wght.woff') format('woff'),
        url('assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: 'normal';
    font-display: swap;
}

:root {
    --font-family: 'Inter', sans-serif;

    /* --clr-primary-110: #0f1127; */
    --clr-primary: #00bfff;

    --clr-secondary: #194383;
   
    --clr-dark: #2e3f4a;
    --clr-dark-rgb: 46, 63, 74;
    --clr-dark-20: #cccccc;

    --clr-dark-130: #141d23;
    --clr-dark-130-rgb: 20, 29, 35;

    --clr-light: #E5E5E5;

    --clr-text: #232425;
    --clr-border: #e0e0e0;

    --ts-duration: 450ms;
    --ts-function: cubic-bezier(.58,.22,.2,.96);

    --border-radius: ..45rem;

    --inline-spacing: 2.4rem;

    --linear-gradient: linear-gradient(to left,var(--clr-primary) 0%,var(--clr-secondary) 100%, var(--clr-primary) 100%,var(--clr-secondary) 100%);

    --bg-gradient: linear-gradient(to top, rgba(var(--clr-dark-rgb), .8) 0%, rgba(var(--clr-dark-rgb), .1) 40%);
}

html { scroll-behavior: smooth; scroll-padding-top: 9.8rem; }
body { font-family: var(--font-family); font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); background-color: var(--clr-dark); color: #fff; }
main { background-color: var(--clr-dark); z-index: 2; position: static; }

.kraft-breadcrumbs * { color: #fff; font-size: 1.4rem; }
.kraft-breadcrumbs > span { padding: .8rem 2rem; border-radius: 3rem; background-color: rgba(0, 0, 0, .15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.kraft-breadcrumbs .breadcrumb_last { font-weight: 500; } 

.kraft-mice { width: 2.2rem; min-width: 2.2rem; height: 3.3rem; padding: .7rem 0; border-radius: 3rem; border: 2px solid rgba(255,255,255,.5); position: relative; display: flex; justify-content: center; transition: transform var(--ts-duration) ease; }
.kraft-mice::before { content: ''; display: inline-block; width: .4rem; height: .7rem; background: #fff; border-radius: 3rem; animation: miceAnimation 2s forwards infinite; }
.kraft-mice:hover { transform: scale(1.1); }

@keyframes miceAnimation {
    0% {
        margin-top: 0;
    }
    50% {
        margin-top: .7rem;
    }
    100% {
        margin-top: 0;
    }
}

/*** ---------- Typography ---------- ***/
.text p:has(em) + :is(h1, h2, h3, h4, h5) { --mt: .5rem; }
.text p:has(+ :is(h1, h2, h3, h4, h5)) em { color: var(--clr-primary); font-style: normal; font-weight: 700; }

.bg--dark .text p:has(+ :is(h1, h2, h3, h4, h5)) em { color: rgba(255,255,255,.75); }

.bg--pattern { position: relative; z-index: 1; }
.bg--pattern::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to bottom, rgba(var(--clr-dark-rgb), 1) 20%, rgba(var(--clr-dark-rgb), .75) 45%, rgba(var(--clr-dark-rgb), .75) 66%, rgba(var(--clr-dark-rgb), 1) 80%); }
.bg--pattern > .kraft-icon.kraft-icon--bg-pattern { z-index: -2; --w: 100%; --h: 100%; --clr: rgba(255, 255, 255, .3); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.text-label { text-transform: uppercase; font-size: 1.2rem; } 

.contact-link { display: flex; align-items: center; column-gap: 1.6rem; max-width: 25rem; }
.contact-link .contact-link__image { --size: 4.8rem; width: var(--size); height: var(--size); min-width: var(--size); border-radius: 50%; background-color: var(--clr-primary); }
.contact-link .contact-link__image img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.contact-link .contact-link__text { font-size: 1.6rem; color: #fff; }
.contact-link .contact-link__text small { display: block; width: 100%; }
.contact-link i { color: #fff; font-size: .85em; min-width: 3.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; transition-property: background-color, border-color, transform; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);  }
.contact-link:hover i { transform: rotate(-45deg); background-color: var(--clr-primary); border-color: var(--clr-primary); }

/*** ---------- Background colors ---------- ***/
.bg--dark { --bg-clr: var(--clr-text); --contrast-clr: #fff; background-color: var(--bg-clr); color: var(--contrast-clr); }
.bg--dark .card { color: var(--clr-text); }

/*** ---------- Buttons ---------- ***/
.btn, .wpcf7-submit { --br: 3rem; font-weight: 500; }
.btn.btn--primary { --clr: #fff; --bg-clr: var(--clr-primary); }

.page-numbers { --clr: var(--clr-primary); --bg-clr: #fff; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); }

/*** ---------- Navigation ---------- ***/
.header { position: fixed; top: 0; left: 0; right: 0; background-color: transparent; z-index: 1030; transition-property: top, transform; transition-duration: var(--ts-duration), 750ms; transition-timing-function: var(--ts-function) ease; }
.header .header__main { padding: 3.2rem var(--inline-spacing); transition-property: padding; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
.header .header__main .btn-group { flex-wrap: nowrap; margin-left: auto; gap: 1rem; z-index: 1030; }
.header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); background-color: rgba(var(--clr-dark-rgb),.2); transform: translateY(-100%); transition: transform .35s var(--ts-function); }
.header.is-scrolled-up .header__main,
.header.is-scrolled-down .header__main { padding: 2rem var(--inline-spacing); }
.header.is-scrolled-up::after,
.header.is-scrolled-down::after { transform: translateY(0); }

.header { transform: translateY(-100%); }
body.in .header { transform: translateY(0); }

body.nav-open .header .header__main .btn-group :is(.btn.btn--link-icon:not(:hover) i, .nav-toggle:not(:hover) .nav-toggle__lines) { background-color: rgba(255,255,255,.1); }

@media (max-width: 575.98px) {
    .header .header__main .btn-group .btn--link-icon:not(.nav-toggle) .btn__words { display: none; }
}

@media (min-width: 768px) {
    .header__search { max-width: 50rem; }
}

@media (min-width: 992px) {
    .header.is-scrolled-up { top: 0; }
    body.admin-bar .header.is-scrolled-up { top: 32px; }

    .header .header__top { padding: 1.4rem 0; }
    .header .header__bottom { background-color: var(--clr-primary); }
    .header .header__bottom .nav > .nav__item { color: #fff; }
    .header .header__bottom .nav > .nav__item > .nav__link { color: #fff; transition: color var(--ts-duration) var(--ts-function); }
    .header .header__bottom .nav > .nav__item > .nav__link:hover { color: rgba(255,255,255,.8); }
    .header .header__bottom .navigation__footer .nav > .nav__item:last-child { margin-right: -2.4rem; }
    .header .header__bottom .navigation__footer .btn { display: none; }

    .nav__item--categories { border-left: 1px solid rgba(255,255,255,.3); border-right: 1px solid rgba(255,255,255,.3); }
}

@media (min-width: 1200px) {
    .header .header__main { padding: 6.4rem var(--inline-spacing); }
    .header.is-scrolled-up { top: 0; }
    .header .logo img { width: 20rem; }
}

@media (min-width: 1600px) {
    .header .header__main { padding: 6.4rem calc( var(--inline-spacing) * 3); }
    .header .header__main .btn-group { column-gap: 3.2rem; }
    .header.is-scrolled-up .header__main,
    .header.is-scrolled-down .header__main { padding: 2rem calc( var(--inline-spacing) * 3); }
}

/*** ---------- Footer ---------- ***/
footer { background-color: var(--clr-dark-130); }
footer .footer__main :is(p, a, h3) { color: #fff; }
footer .footer__main .footer-menu.footer-menu--contact { border: 1px solid rgba(255,255,255,.2); padding: 2rem; border-radius: var(--border-radius); }
footer .footer__main .footer-menu.footer-menu--contact .btn-wrapper { display: flex; justify-content: space-between; align-items: center; }
footer .social-media { margin-top: 2rem; }
footer.kraft-block .kraft-block__bg-assets .kraft-icon.kraft-icon--wheel { --clr: #fff; opacity: .1; }

footer .footer__bottom { border-top: 1px solid rgba(255,255,255,.2); }
footer .footer__bottom :is(p, a, span) { font-size: 1.4rem; color: #fff; opacity: .5; }

@media (min-width: 992px) {
    footer .social-media { justify-content: end; margin-top: -4.2rem; }
    footer .footer__main .footer-menu { padding-bottom: 6.2rem; }
}

@media (min-width: 1400px) {
    footer .footer__main .footer-menu.footer-menu--contact { padding: 3.2rem; }
}

/*** ---------- Kraft carousel ---------- ***/
.kraft-carousel .kraft-carousel__container { display: grid; grid-template-areas: "carouselContainer"; align-items: end; }
.kraft-carousel .kraft-carousel__container .kraft-carousel__item { grid-area: carouselContainer; pointer-events: none; }
.kraft-carousel .kraft-carousel__container .kraft-carousel__item.is-current { pointer-events: all; }

.kraft-carousel .kraft-carousel__container .kraft-carousel__item .kraft-carousel__item-image { opacity: 0; transition: opacity 1000ms ease; }
.kraft-carousel .kraft-carousel__container .kraft-carousel__item.is-current .kraft-carousel__item-image { opacity: 1; }

.kraft-carousel .kraft-carousel__container .kraft-carousel__item .kraft-carousel__item-text { opacity: 0; }
.kraft-carousel .kraft-carousel__container .kraft-carousel__item.is-current .kraft-carousel__item-text { opacity: 1; }

.kraft-carousel .kraft-carousel__indicators { display: flex; align-items: center; gap: .5rem; }
.kraft-carousel .kraft-carousel__indicators .kraft-carousel__indicator { cursor: pointer; width: 2rem; height: .4rem; padding: 0; border-radius: 0; border: none; background-color: rgba(255,255,255,.5); transition-property: background-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
.kraft-carousel .kraft-carousel__indicators .kraft-carousel__indicator.is-current { background-color: #fff; }

/*** ---------- Blocks ---------- ***/
.kraft-block.has-bg-image { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.kraft-block.has-bg-image::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to bottom, rgba(var(--clr-dark-rgb), 1) 0%, rgba(var(--clr-dark-rgb), .6) 50%, rgba(var(--clr-dark-rgb), 1) 100%); }

/*** ---------- Header ---------- ***/
/* .kraft-block--header { min-height: 50vh; } */
.kraft-block.kraft-block--header .container { z-index: 1; }
.kraft-block.kraft-block--header.has-bg-image::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to bottom, rgba(var(--clr-dark-rgb), .8) 0%, rgba(var(--clr-dark-rgb), .4) 33%, rgba(var(--clr-dark-rgb), .4) 55%, rgba(var(--clr-dark-rgb), 1) 100%); }
.kraft-block.kraft-block--header.has-bg-image { color: #fff; }
.kraft-block.kraft-block--header.has-bg-image .btn.btn--link { --clr: #fff; }
.kraft-block.kraft-block--header .kraft-block__bg-image { z-index: -2; }
/* .kraft-block.kraft-block--header .kraft-block__bg-image img { object-position: bottom; } */
.kraft-block.kraft-block--header .kraft-icon--bg-pattern { --w: 100%; --h: 100%; --clr: rgba(255,255,255,.3); position: absolute; top: 0; bottom: 0; left: 0; width: 25%; z-index: -2; }  
.kraft-block.kraft-block--header .text { font-size: clamp(1.6rem, 1vw + 1rem, 2rem); }
.kraft-block.kraft-block--header .header__body { margin-top: auto; } 
.kraft-block.kraft-block--header .header__footer { margin-top: auto; } 
.kraft-block.kraft-block--header .kraft-breadcrumbs { margin-bottom: 3.2rem; }


.kraft-block.kraft-block--header .text { transform: translateY(6.4rem); opacity: 0; transition-property: transform, opacity; transition-duration: 750ms; transition-timing-function: ease; }
body.in .kraft-block.kraft-block--header .text { transform: translateY(0); opacity: 1; }



.kraft-block.kraft-block--header-home { min-height: 100dvh; display: flex; justify-content: center; flex-direction: column; position: relative; --pt: 8rem; --pb: 3.2rem;
    .header__video { pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -2;
        video { width: 100%; height: 100%; object-fit: cover; } 
    }
}
.kraft-block.kraft-block--header-home .header__footer .container { display: flex; justify-content: space-between; align-items: end; column-gap: 2rem; }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text { width: 100%; max-width: 36rem; position: relative; padding: 0 2rem 2rem 2rem; border-left: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 1.6rem; }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text::before, .kraft-block--header-home .kraft-carousel .kraft-carousel__item-text::after { content: ''; display: inline-block; border-radius: 50%; background: #fff; position: absolute; }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text::before { width: .9rem; height: .9rem; top: 0; left: 0; transform: translate(-50%, -50%); } 
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text::after { width: .5rem; height: .5rem; bottom: 0; right: 0; transform: translate(50%, 50%); } 
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text .btn { margin-top: .5rem; }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item-text .btn::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item h2 { transition: color var(--ts-duration) var(--ts-function); }
.kraft-block.kraft-block--header-home .kraft-carousel .kraft-carousel__item:hover h2 { color: var(--clr-primary); }

.kraft-block.kraft-block--header .kraft-carousel .kraft-carousel__item-image { pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -2; }
.kraft-block.kraft-block--header .kraft-carousel .kraft-carousel__item-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.kraft-block.kraft-block--header-subpage { --nav-height: 10.9rem; padding-top: calc(var(--pt) + var(--nav-height)); }
.kraft-block.kraft-block--header-subpage .kraft-carousel__indicators { justify-content: end; }
.kraft-block.kraft-block--header-subpage .kraft-block__bg-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -2; }
.kraft-block.kraft-block--header-subpage .kraft-block__bg-video video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 575.98px) {
    .kraft-block.kraft-block--header-home .btn-group { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 992px) {
    .kraft-block.kraft-block--header .text { max-width: 50%; }

    .kraft-block.kraft-block--header-home { --pt: 10rem; --pb: 6.4rem; }
}

@media (min-width: 1200px) {
    .kraft-block.kraft-block--header-home { --pt: 12rem; }

    .kraft-block.kraft-block--header-subpage { --nav-height: 18rem; }
}

/*** ---------- Search ---------- ***/
.kraft-block--header-search .container { text-align: center;}
.kraft-block--header-search .container .text { margin: auto; }  
.kraft-block--header-search .search-form input { background-color: #fff; }

@media (min-width: 992px) {
    .kraft-block--header-search .search-form input { min-height: 5.5rem; padding: .4rem 2rem; }
}

/*** ---------- Single Product ---------- ***/
.kraft-block--header-single-product .text { max-width: 100%; }
.kraft-block--header-single-product .blaze-slider { background-color: #fff; padding: 2rem; border-radius: .35rem; }
.kraft-block--header-single-product .blaze-slider .blaze-track { align-items: center; }
.kraft-block--header-single-product .kraft-breadcrumbs * { color: var(--clr-text); }
.kraft-block--header-single-product .kraft-breadcrumbs > span { background-color: rgba(255, 255, 255, 0.5); }

.product-price { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; font-weight: 700; color: var(--clr-primary); }
.product-price small { font-size: .5em; color: var(--clr-text); }

@media (min-width: 1200px) {
    .kraft-block--header-single-product .blaze-slider { padding: 3.2rem; }
}
 
/*** ---------- Archive: Projects ---------- ***/
@media (min-width: 768px) {
    body.post-type-archive-projects .kraft-filter-results { --gc: 2; }  
}

@media (min-width: 992px) {
    body.post-type-archive-projects .kraft-filter-results { --gc: 3; }  
}


/*** ---------- Accordion ---------- ***/
.accordion { color: var(--clr-text); }
.accordion__item .accordion__toggle { font-weight: 500; min-height: 5.4rem; }

.single-vacancies .kraft-block--header .text { margin: auto; text-align: center; }
.single-vacancies .kraft-block--header .text h1 { --mt: .5em; }

.kraft-team-detail .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.8rem; }   
.kraft-team-detail .profile-picture { width: 10rem; height: 10rem; border-radius: 50%; border: .4rem solid var(--clr-dark); overflow: hidden; margin-top: -5rem; z-index: 1; position: relative; margin-bottom: 4.8rem; }   
.kraft-team-detail .profile-picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }   
.kraft-team-detail .btn-group + * { --mt: 2em; }
.kraft-team-detail .btn.btn--link-icon i { background: var(--clr-dark-130); }
.kraft-team-detail .team-projects {
    h2 { font-size: 2rem; margin-bottom: 1em; }
    .card { margin-top: 1em; }
}


@media (min-width: 992px) {
    .kraft-team-detail .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .kraft-team-detail .team-projects { margin-top: 4.8rem; }
}

@media (min-width: 1200px) {
    .kraft-team-detail .container { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } 
    .kraft-team-detail .profile-picture { width: 16rem; height: 16rem; }
    .kraft-team-detail .team-projects { margin-top: 6.4rem; }
}

.lp-generated-page {
    .lp-generated-page__main {
        p + h2 { --mt: 2em; }
        h2 { font-size: clamp(2.4rem, 1vw + 3rem, 3.2rem); }
        h3 { font-size: clamp(2rem, 1vw + 2rem, 2.4rem); }
    }
    .lp-generated-page__aside {
        .lp-sticky { position: sticky; top: 12rem; }
        .card { height: auto; border: none; background: var(--clr-dark-130); 
            &.bg--pattern {
                &::after { display: none; }
                > .kraft-icon.kraft-icon--bg-pattern { opacity: .5;
                    &::after { -webkit-mask-position: center; mask-position: center; }
                }
            }
        }
        .lp-aside-projects { color: #fff; padding-top: 3.2rem;
            h3 { font-size: 2.4rem; margin-bottom: 2rem; }
            a { display: flex; justify-content: space-between; align-items: center; color: #fff; text-decoration: none; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.2);
                i { font-size: .85em; border: 2px solid var(--clr-primary); background-color: transparent; width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: rgba(var(--clr-dark-rgb), .4); display: grid; place-items: center; transition-property: background-color, border-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
                &:hover i { background-color: var(--clr-primary); border-color: var(--clr-primary); }
            }  
        }
    }

    &.lp-generated-page--sidebar .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.8rem; }
}

@media (min-width: 992px) {
    .lp-generated-page.lp-generated-page--sidebar .container { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

@media (min-width: 1200px) {
    .lp-generated-page.lp-generated-page--sidebar .container { gap: 10rem; }
}

.sticky-cta { color: #fff; position: fixed; bottom: 2rem; right: 0; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.4rem .5rem .5rem; border-radius: 4rem 0 0 4rem; z-index: 500; background-color: rgba(var(--clr-dark-rgb),.2); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); transition: padding-right 250ms ease; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; box-shadow: 0 0 10px rgba(255, 255, 255, .1);
    .sticky-cta__image { width: 4.2rem; height: 4.2rem; border-radius: 50%; overflow: hidden;
        img { width: 100%; height: 100%; object-fit: contain; }
    }
    .sticky-cta__text { line-height: 1.1;
        strong { color: var(--clr-primary); font-size: 1.4rem; line-height: 1.1; display: block; width: 100%; }
        span { font-size: 1.2rem; line-height: 1.1; }
    }
    > i { color: #fff; font-size: .85em; min-width: 3.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; transition-property: background-color, border-color, transform; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }

    &:hover { padding-right: 3.2rem;
        > i { transform: rotate(-45deg); background-color: var(--clr-primary); border-color: var(--clr-primary); }
    }
    &.sticky-cta--desktop { display: none; }
}  

@media (min-width: 768px) {
    .sticky-cta {
        .sticky-cta__text { 
            strong { font-size: 1.6rem; }
            span { font-size: 1.4rem; }
        }
    }
}

@media (min-width: 992px) {
    .sticky-cta { column-gap: 1.6rem;
        .sticky-cta__image { width: 5.4rem; height: 5.4rem; }
        .sticky-cta__text { 
            strong { font-size: 1.7rem; }
            span { font-size: 1.5rem; }
        }
        &.sticky-cta--desktop { display: flex; }
        &.sticky-cta--mobile { display: none; }
    }
}

@media (min-width: 1200px) {
    .sticky-cta {
        .sticky-cta__image { width: 6.4rem; height: 6.4rem; }
        .sticky-cta__text { 
            strong { font-size: 1.8rem; }
            span { font-size: 1.6rem; }
        }
    }
}