/*
      ___           ___           ___                       ___           ___     
     /\  \         /\  \         /\__\          ___        /\  \         /\  \    
    /::\  \       /::\  \       /:/  /         /\  \      /::\  \       /::\  \   
   /:/\ \  \     /:/\:\  \     /:/  /          \:\  \    /:/\:\  \     /:/\:\  \  
  _\:\~\ \  \    \:\~\:\  \   /:/  /  ___      /::\__\  /:/  \:\__\   /:/  \:\  \ 
 /\ \:\ \ \__\    \:\ \:\__\ /:/__/  /\__\  __/:/\/__/ /:/__/ \:|__| /:/__/ \:\__\
 \:\ \:\ \/__/     \:\/:/  / \:\  \ /:/  / /\/:/  /    \:\  \ /:/  / \:\  \ /:/  /
  \:\ \:\__\        \::/  /   \:\  /:/  /  \::/__/      \:\  /:/  /   \:\  /:/  / 
   \:\/:/  /        /:/  /     \:\/:/  /    \:\__\       \:\/:/  /     \:\/:/  /  
    \::/  /        /:/  /       \::/  /      \/__/        \::/__/       \::/  /   
     \/__/         \/__/         \/__/                     ~~            \/__/    
   
Squido css - v1.0

*/
/* Alle footer menu's onder elkaar (1 kolom) */

#footer .widget_nav_menu ul {
    display: flex;
    flex-direction: column;
}

#footer .widget_nav_menu ul li {
    width: 100%;
    display: block;
}

aside.thb-cookie-bar {
    bottom: 13px;
}

.squido-top-btn {
        bottom: 10px !important;
        right: 24px !important;
    }
    
.thb-cookie-bar p {
    font-size: 18px !important;
}

.button.thb-border-style.white {
    font-size: 15px !important;
    font-family: 'sora-bold' !important;
}

#scroll_to_top {
    width: 60px !important;
    height: 60px !important;
    border-radius: 40px !important;
}

aside.thb-categories span {
    font-size: 18px;
}

a.portfolio-link h2 {
    font-size: 44px;
    line-height: 1;
}

.portfolio-link,
.portfolio-link h2,
.portfolio-holder,
.portfolio-inner {
    overflow: visible !important;
}

aside.thb-categories span {
    font-size: 13px;
    font-family: 'sora-regular';
    margin-top: 10px;
}

/* Kleurengolf kopteksten */
a.portfolio-link h2 span, .thb-mobile-menu .nav-link-mask .nav-link-mask-text {
    display: inline-block;
    color: #000;
    transition: background-position .45s ease, color .45s ease;
}

a.portfolio-link h2 span:hover, .thb-mobile-menu .nav-link-mask .nav-link-mask-text:hover{
    background-image: linear-gradient(
            135deg,
    #f6c222 0%,
    #f6c222 30%,
    #00b1c9 60%,
    #f6c222 100%
    );
    background-size: 300% 300%;
    background-position: 100% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: squido-wave 3s ease-in-out infinite;
}

@keyframes squido-wave{
    0%   { background-position: 0% 100%; }
    50%  { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}
/* Kleurengolf kopteksten einde */

.footer h6 {
    font-size: 20px !important;
    letter-spacing: 0.2px;
    text-transform: none;
}

.squido-footer-logo {
    opacity: 1;
}

a#quick_search svg {
    width: 23px;
    height: 23px;
}

#scroll_to_top svg {
    display: none !important;
}

#scroll_to_top {
    width: 50px;
    height: 50px;
}

#scroll_to_top::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/03/pijl-to-top.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

a#scroll_to_top {
    bottom: -70px;
}

.thb-mobile-menu a {
        font-size: 54px !important;
        font-family: 'sora-extrabold' !important;
    }

.thb-mobile-menu .nav-link-mask .nav-link-mask-text {
   background: linear-gradient(135deg, #00b1c9 0%, #f6c222 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

#mobile-menu .thb-close svg {
    display: none !important;
}

#mobile-menu .thb-close {
    width: 22px;
    height: 22px;
    background-image: url('/wp-content/uploads/2026/03/sluit-knop.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

#mobile-menu .thb-close:hover {
    background-image: url('/wp-content/uploads/2026/03/sluit-knop-hover.svg');
}

.widget a, .footer p {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.8 !important;
}

/* Squido menu wave hover

.menu li a {
    position: relative;
    display: inline-block;
    color: #ffffff;
    transition: color .25s ease;
}

.menu li a:hover {

    background-image: linear-gradient(
        135deg,
        #f6c222 0%,
        #f6c222 30%,
        #00b1c9 60%,
        #f6c222 100%
    );

    background-size: 300% 300%;
    background-position: 100% 0%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: squido-wave 3s ease-in-out infinite;
}

.menu li a:before,
.thb-full-menu li a:before,
.widget_nav_menu li a:before {
    display: none !important;
    content: none !important;
}

.menu li a:hover,
.thb-full-menu li a:hover,
.widget_nav_menu li a:hover {
    padding-left: 0 !important;
}

Squido menu wave hover einde */

.gradient-bg {
    background: linear-gradient(
  45deg,
  #f7d774 0%,
  #5fc3d3 100%
);
}

.portfolio-title.style1 .entry-title > div {
    display: inline-block !important;
    color: inherit !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    background-repeat: no-repeat !important;
}

.portfolio-title.style1 .entry-title:hover > div {
    display: inline-block !important;
    background-image: linear-gradient(
        45deg,
        #f5c024 0%,
        #07b1c8 15%,
        #f5c024 30%,
        #07b1c8 45%,
        #f5c024 60%,
        #07b1c8 75%,
        #f5c024 100%
    ) !important;
    background-size: 300% 300% !important; /* belangrijk! */
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: squido-wave-45 3s ease-in-out infinite !important;
}

@keyframes squido-wave-45 {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.portfolio-attributes.style3 .attribute strong {
    opacity: 1.0 !important;
    font-size: 17px !important;
    font-weight: 600;
    color: #000 !important;
    font-family: 'sora-extrabold';
}

.portfolio-attributes.style3 .attribute {
    opacity: 1 !important;
    font-size: 18px !important;
    color: #9e9e9e !important;
}

.portfolio-attributes.style3 .attribute a {
    color: #9e9e9e !important;
}

.light-title .portfolio-title.style1 h4 {
    line-height: 2;
    margin-top: 14px;
}

.wpb_wrapper h1 {
    line-height: 1.1;
    margin-bottom: 28px;
}

/* oude SVG weg */
span.back svg,
span.back .menu_arrow {
    display: none !important;
}

/* container groter maken */
span.back {
    display: inline-block;
    width: 48px;   /* 2x groter */
    height: 48px;
    position: relative;
}

/* pijltje */
span.back::before {
    content: "";
    position: absolute;
    inset: 0;

    /* default wit */
    background: #ffffff;

    /* jouw SVG */
    -webkit-mask: url("/wp-content/uploads/2026/03/back-arrow.svg") center/contain no-repeat;
    mask: url("/wp-content/uploads/2026/03/back-arrow.svg") center/contain no-repeat;

    transition: background 0.3s ease;

    /* belangrijke fix voor animatie */
    will-change: background-position;
}

/* hover = bewegend verloop */
.menu-item:hover span.back::before,
span.back:hover::before {

    background: linear-gradient(
        135deg,
        #f6c222 0%,
        #f6c222 30%,
        #00b1c9 60%,
        #f6c222 100%
    );

    background-size: 400% 400%; /* groter = zichtbare beweging */
    animation: squido-back-wave 2s linear infinite;
}

/* animatie (nu écht zichtbaar) */
@keyframes squido-back-wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ALLEEN forward pijltjes */
span.next {
    display: none !important;
}