/*
Theme Name: Kop Digitaal
Theme URI: https://kopdigitaal.nl
Author: Kop Digitaal
Author URI: https://kopdigitaal.nl
Description: Kop Digitaal WordPress thema.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.5
Tested up to: 6.5.2
Requires PHP: 7.0
Version: 1.1.1
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kop-digitaal
*/


/* Defaults
---------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
    transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
    text-decoration-thickness: 1px;
}

b,
strong,
th {
    font-weight: var(--wp--custom--font-weight--medium);
}

mark {
    background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
    background-position: 0 85%;
    background-repeat: repeat-x;
    background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--contrast);
    border-radius: 0;
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--font-weight--light);
    line-height: var(--wp--custom--line-height--body);
    padding: 10px 20px;
    width: 100%;
}

input:focus,
textarea:focus {
    background-color: var(--wp--preset--color--neutral);
    outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
    width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
    -webkit-appearance: none;
}

::placeholder {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
    background-color: var(--wp--preset--color--neutral);
    font-size: var(--wp--preset--font-size--small);
    padding: 5px 8px;
}

/* -- Navigation -- */

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    border: 1px solid currentColor;
    padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
    color: var(--wp--preset--color--base);
}

.site-header {
    z-index: 100;
    position: relative;
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--contrast);
    border: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
    padding: 2px 10px;
}

.wp-block-navigation-item__content:hover {
    color: #FAFAFA;
    transition: all 300ms;
}

.wp-block-navigation-item.wp-block-navigation-link {
    border-bottom: 3px solid transparent !important;
}

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
    border-bottom: 3px solid #00BBDB !important;
}

.cases-link a, .about-us-link a, .contact-link a {
    overflow: hidden;
    position: relative;
    display: inline-block !important;
}

.cases-link a::before, .about-us-link a::before, .contact-link a::before {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
}

.cases-link a::after {
    content: "DARES";
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
    position: absolute;
    width: 100%;
    left: 0;
    color: white;
}

.cases-link a span, .about-us-link a span, .contact-link a span {
    display: inline-block;
    transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
}

.cases-link a:hover span, .about-us-link a:hover span, .contact-link a:hover span {
    transform: translate3d(-200%, 0, 0);
}

.cases-link a:hover::after, .about-us-link a:hover::after, .contact-link a:hover::after {
    transform: translate3d(0, 0, 0);
}

.about-us-link a::after {
    content: "The dare story";
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
    position: absolute;
    width: 100%;
    left: 0;
    color: white;
}

.about-us-link {
    display: inline-block;
}

.about-us-link a {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    transition: min-width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    white-space: nowrap;
}

.about-us-link a:hover {
    min-width: 160px;
}

.cases-link a {
    display: inline-flex;
    align-items: center;
    min-width: 60px;
    transition: min-width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    white-space: nowrap;
}

.cases-link a:hover {
    min-width: 70px;
}

.contact-link a::after {
    content: "Dare us";
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
    position: absolute;
    width: 100%;
    left: 0;
    color: white;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
    box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
    box-shadow: var(--wp--preset--shadow--solid);
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {

    /* -- Utility -- */
    .is-style-hidden-mobile {
        display: none !important;
    }

    .taxonomy-case_category a {
        background: transparent !important;
    }

    .taxonomy-case_category {
        display: flex;
        flex-wrap: wrap;
    }

    .is-style-vertical-line {
        position: absolute !important;
        left: -15px !important;
    }

    .dares-title {
        position: relative !important;
        top: -15px !important;
    }

    .page-template-page-no-footer .is-style-vertical-line {
        rotate: 90deg;
        position: relative;
        left: -65px;
        width: 60px;
        top: 120px !important;
    }

    .is-style-animated-link:hover::after {
        animation: none !important;
    }

}

@media only screen and (max-width: 782px) {

    /* -- Columns -- */
    .is-style-columns-reverse {
        flex-direction: column-reverse;
    }

    .taxonomy-case_category a:hover::after {
        animation: taxonomy-jump-left-right 1s infinite  !important;
    }

    .taxonomy-case_category a:hover {
        animation: none !important;
        color: inherit; /* Verwijder de kleurverandering bij hover */
    }

    .is-style-animated-link:hover a{
        animation: none !important;
        animation-delay: 0.85s;
        color: white !important;
        transition: color 0.85s;
        transition-delay: 0.85s;
    }

    .cases-link a:hover span, .about-us-link a:hover span, .contact-link a:hover span {
        transform: translate3d(0%, 0, 0) !important;
    }

    .cases-link a:hover::after, .about-us-link a:hover::after, .contact-link a:hover::after {
        transform: translate3d(200%, 0, 0) !important;
    }
}

/* .taxonomy-case_category a {
    background-color: #02BBDB;
    padding: 5px 10px;
    margin-right: 10px;
} */

figure {
  display: inherit;
}

.swiper-wrapper{
    -webkit-transition-timing-function:linear!important;    transition-timing-function:linear!important;
    position: relative;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 0 50px;
}

.slider-position {
    width: calc(100vw + 50px);
    left: -25px;
    z-index: 10;
    top: -70px;
}

.wp-block-video video {
    height: 100vh;
    object-fit: cover;
}

.is-style-animated-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.is-style-animated-link a {
    background: linear-gradient(to left, transparent 50%, #00BBDB 50%);
    background-size: 210% 100%;
    background-position: 99% bottom;
    padding: 5px 10px;
    text-decoration: none;
}

.taxonomy-case_category {
    display: flex;
    position: relative;
    gap: 30px;
}

.taxonomy-case_category a{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.taxonomy-case_category a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    text-decoration: none;
    width: fit-content;
    background: linear-gradient(to left, transparent 50%, #00BBDB 50%);
    background-size: 215% 100%;
    background-position: 99% bottom;
    position: relative;
}

.taxonomy-case_category a::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg id='arrow_forward_ios' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect id='Base' width='30' height='30' fill='none'/%3E%3Cpath id='Icon' d='M.369,18.4a1.249,1.249,0,0,0,1.77,0l8.31-8.31a1,1,0,0,0,0-1.41L2.139.368a1.252,1.252,0,0,0-1.77,1.77l7.24,7.25-7.25,7.25A1.246,1.246,0,0,0,.369,18.4Z' transform='translate(10 6)' fill='%2302bbdb'/%3E%3C/svg%3E%0A");
    width: 30px;
    height: 30px;
    animation: taxonomy-jump-left-right 1s infinite;
    position: absolute;
    right: 0;
    pointer-events: none;
}

.taxonomy-case_category a:hover::after {
    animation: taxonomy-arrow-left-right 1.5s forwards;
    color: white !important;
}

.taxonomy-case_category a:hover {
    animation: animateLinkBackground 0.75s forwards;
    animation-delay: 0.85s;
    color: white !important;
    transition: color 0.85s;
    transition-delay: 0.85s;
}

@keyframes taxonomy-jump-left-right {
    0%{
        right: -17px;
    }
    50%{
        right: -23px;
    }
    100%{
        right: -17px;
    }
}

@keyframes taxonomy-arrow-left-right {
    0% {
        right: -17px;
        opacity: 1;
    }
    50% {
        right: 100%;
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        right: -17px;
        opacity: 0;
    }
}

@keyframes animateLinkBackground {
    0% {
        background-position: right bottom;
    }
    100% {
        background-position: left bottom;
    }
}

.is-style-animated-link::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg id='arrow_forward_ios' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect id='Base' width='30' height='30' fill='none'/%3E%3Cpath id='Icon' d='M.369,18.4a1.249,1.249,0,0,0,1.77,0l8.31-8.31a1,1,0,0,0,0-1.41L2.139.368a1.252,1.252,0,0,0-1.77,1.77l7.24,7.25-7.25,7.25A1.246,1.246,0,0,0,.369,18.4Z' transform='translate(10 6)' fill='%2302bbdb'/%3E%3C/svg%3E%0A");
    width: 30px;
    height: 30px;
    animation: jump-left-right 1s infinite;
    position: relative;
    pointer-events: auto;
}

.is-style-animated-link:hover::after {
    animation: arrow-left-right 1.5s forwards;
}

.is-style-animated-link:hover a{
    animation: animateLinkBackground 0.75s forwards;
    animation-delay: 0.85s;
    color: white !important;
    transition: color 0.85s;
    transition-delay: 0.85s;
}

@keyframes jump-left-right {
    0%{
        left: 0px;
    }
    50%{
        left: 5px;
    }
    100%{
        left: 0px;
    }
}

@keyframes arrow-left-right {
    0% {
        left: 0px;
        opacity: 1;
    }
    50% {
        left: -100%;
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 0;
    }
}

@keyframes animateLinkBackground {
    0% {
        background-position: right bottom;
    }
    100% {
        background-position: left bottom;
    }
}

.wp-block-post-content {
    margin: 0 !important;
}

.wp-block-post-content video {
    max-height: 100vh !important;
    height: 100vh;
    object-fit: cover;
}


.tax-case_category .wp-block-create-block-kd-sticky-header{
    background-color: #00BBDB !important;
}


.is-style-vertical-line {
    rotate: 90deg;
    position: relative;
    left: -150px;
    width: 60px;
}

.page-template-page-no-footer .is-style-vertical-line {
    rotate: 90deg;
    position: relative;
    left: -65px;
    width: 60px;
    top: -35px;
}

.dares-title {
    position: relative;
    top: -25px;
}

.home .landing-animation {
    position: fixed;
    display: block !important;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 190;
}

.landing-animation {
    display: none;
}

.landing-animation {
    width: 100%;
    height: auto;
    transition: opacity 2s ease-out; /* Fade effect in 2 sec */
}

.fade-out {
    opacity: 0;
}

.gone {
    z-index: -1 !important;
}