/**
 * Theme Name: Make it Matter
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

.logoheader {
	margin-top:-25px;
}

.iconlefty {
	transform: rotate(15deg)!important;
}

.sketchydark {
    border: 1px solid #1d1d1d;

    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;

    background: #1d1d1d;
    position: relative;
    
    &::before {
        content: '';
        border: 1px solid #1d1d1d;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 28% 2% 4% / 2% 6% 5% 4%;
    }
}
.sketchygold {
    border: 3px solid #D79C31;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;

    background: #D79C31;
    position: relative;
    
    &::before {
        content: '';
        border: 2px solid #D79C31;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
	}
}
.sketchycreme {
    border: 3px solid #F6F4F2;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;

    background: #F6F4F2;
    position: relative;
    
    &::before {
        content: '';
        border: 2px solid #F6F4F2;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
    }
}
.sketchy {

    border: 3px solid #ffffff;

    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;

    background: #ffffff;
    position: relative;
    
    &::before {
        content: '';
        border: 2px solid #ffffff;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
    }
}

.sketchybuttonblack {
    border: 3px solid #1d1d1d;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;

    background: #1d1d1d;
    position: relative;
    
    &::before {
        content: '';
        border: 2px solid #1d1d1d;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
    }
}

.ct-header-trigger[data-design*=outline] {

    border: 1px solid #4b4c4f;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
    
    &::before {
        content: '';
        border: 1px solid #4b4c4f;
        display: block;
        width: 98%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
    }
}

.ctashape {
	clip-path: polygon(20% 0%, 95% 6%, 97% 92%, 4% 95%);
	    border: 1px solid #1d1d1d;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
    
    &::before {
        content: '';
        border: 1px solid #1d1d1d;
        display: block;
        width: 98%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;

}
}
	.footlink {
		color:#ffffff;
}

.footlink a {
	color:#ffffff;
}

.footlink a:hover {
	color:#ffffff!important;
}

/* main icon boxes */
.ct-mainbox h1,
.ct-mainbox h2,
.ct-mainbox h3,
.ct-mainbox h4,
.ct-mainbox h5,
.ct-mainbox h6,
.ct-mainbox p {
	transition: all 0.2s ease;
}
.ct-mainbox:hover h1,
.ct-mainbox:hover h2,
.ct-mainbox:hover h3,
.ct-mainbox:hover h4,
.ct-mainbox:hover h5,
.ct-mainbox:hover h6,
.ct-mainbox:hover p { 
	color: var(--theme-palette-color-8) !important;
}

.elementor-shortcode [data-products] figure {
	margin-bottom: var(--product-element-spacing, 10px) !important;
}

/* -------------------------------------------------------
   CTA BUTTON ICON — CROOKED / ORGANIC CIRCLE BACKGROUND
------------------------------------------------------- */

.ctbutton .elementor-button-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CROOKED cirkel achter het icoon — polygon variant (WP-safe) */
.ctbutton .elementor-button-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
    transform: scale(1.8);
    z-index: 1;
    pointer-events: none;

    /* Imperfecte vorm (veilig in minify en WP!) */
    clip-path: polygon(
        50% 0%,
        78% 8%,
        95% 30%,
        100% 55%,
        88% 82%,
        60% 100%,
        35% 95%,
        12% 75%,
        5% 50%,
        15% 20%
    );
}

/* Het icoon zelf */
.ctbutton .elementor-button-icon > * {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: none;
}

/* -------------------------------------------------------
   HOVER ANIMATIE — BUTTON
------------------------------------------------------- */
.ctbutton:hover .elementor-button-icon > * {
    animation: ctSlide 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -------------------------------------------------------
   KEYFRAMES — SLIDE-OUT → JUMP → SLIDE-IN
------------------------------------------------------- */
@keyframes ctSlide {
    0% { transform: translateX(0); opacity: 1; }
    30% { transform: translateX(9px); opacity: 0; }
    31% { transform: translateX(-9px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* -------------------------------------------------------
   HOVER TRIGGERS — CONTAINERS
------------------------------------------------------- */
.elementor-widget-container:hover .ctbutton .elementor-button-icon > *,
.elementor-column:hover .elementor-widget-container .ctbutton .elementor-button-icon > *,
.elementor-container:hover .elementor-widget-container .ctbutton .elementor-button-icon > *,
.elementor-element:hover .elementor-widget-container .ctbutton .elementor-button-icon > * {
    animation: ctSlide 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* -------------------------------------------------------
   HOVER TRIGGERS — CONTAINERS
   (Correcte relatie → container hover activeert ctbutton)
------------------------------------------------------- */

.elementor-widget-container:hover .ctbutton .elementor-button-icon > *,
.elementor-column:hover .elementor-widget-container .ctbutton .elementor-button-icon > *,
.elementor-container:hover .elementor-widget-container .ctbutton .elementor-button-icon > *,
.elementor-element:hover .elementor-widget-container .ctbutton .elementor-button-icon > * {
    animation: ctSlide 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -------------------------------------------------------
   ANIMATIE
------------------------------------------------------- */
@keyframes ctSlide {
    0%   { transform: translateX(0);   opacity: 1; }
    30%  { transform: translateX(9px); opacity: 0; }
    31%  { transform: translateX(-9px);opacity: 0; }
    100% { transform: translateX(0);   opacity: 1; }
}

/* -------------------------------------------------------
   MAKE IT MATTER — INTERACTIVE TEXT LINK
   Gebruik: <a class="mttr_link">Link</a>
   Arrow wordt automatisch toegevoegd
------------------------------------------------------- */

.mttr_link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    cursor: pointer;
    color: inherit; /* Arrow volgt tekstkleur */
}

/* -------------------------------------------------------
   CUSTOM SVG ARROW VIA CSS MASK
------------------------------------------------------- */

.mttr_link::after {
    content: "";
    width: 18px;
    height: 18px;

    /* jouw aangeleverde SVG, converted naar mask */
    mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M9 6s6 4.419 6 6s-6 6-6 6"/>\
</svg>') center/contain no-repeat;

    background: currentColor; /* maakt icoon wit/zwart afhankelijk van tekst */
    transition: transform .32s cubic-bezier(0.4,0,0.2,1);
}

/* Hover-effect — arrow schuift subtiel */
.mttr_link:hover::after {
    transform: translateX(4px);
}

/* -------------------------------------------------------
   CTBUTTON — voeg autom. dezelfde SVG-arrow toe als mttr_link
------------------------------------------------------- */

.ctbutton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

/* Reset default Elementor icon area (indien aanwezig) */
.ctbutton .elementor-button-icon {
    display: none !important;
}

/* Arrow toevoegen rechts */
.ctbutton::after {
    content: "";
    width: 18px;
    height: 18px;

    mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M9 6s6 4.419 6 6s-6 6-6 6"/>\
</svg>') center/contain no-repeat;

    background: currentColor;
    transition: transform .32s cubic-bezier(0.4,0,0.2,1);
    z-index: 2;
}

/* Hover → arrow beweegt */
.ctbutton:hover::after {
    transform: translateX(4px);
}