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

/* -------------------------------------------------------
   GLOBAL FORM VARS
------------------------------------------------------- */
:root {
	--theme-form-field-padding: 0 25px;
}

textarea {
	--theme-form-field-padding: 20px 25px;
}

/* -------------------------------------------------------
   CONTACT FORM
------------------------------------------------------- */
.ct-contact-form {
	--theme-form-text-initial-color: rgba(255, 255, 255, 0.5);
	--theme-form-text-focus-color: rgba(255, 255, 255, 1);
	--theme-form-field-border-initial-color: transparent;
	--theme-form-field-background-initial-color: #121b1f;
	--theme-form-field-background-focus-color: #121b1f;
}

.ct-contact-form .ff-btn-submit {
	width: 100%;
	--theme-button-text-initial-color: var(--theme-palette-color-4);
	--theme-button-background-initial-color: #fff;
}

/* -------------------------------------------------------
   GLOBAL ICON STAGGER — PAGE LOAD INTRO ANIMATION
------------------------------------------------------- */

a svg,
button svg,
.ct-toggle-dropdown-desktop .ct-icon,
.gspb-buttonbox .gspb-buttonbox-icon > svg {
	opacity: 0;
	transform: translateY(8px);
	animation: staggerIcon 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Stagger op DOM volgorde */
a svg:nth-of-type(1),
button svg:nth-of-type(1),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(1),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(1) {
	animation-delay: 0ms;
}

a svg:nth-of-type(2),
button svg:nth-of-type(2),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(2),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(2) {
	animation-delay: 120ms;
}

a svg:nth-of-type(3),
button svg:nth-of-type(3),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(3),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(3) {
	animation-delay: 240ms;
}

a svg:nth-of-type(4),
button svg:nth-of-type(4),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(4),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(4) {
	animation-delay: 360ms;
}

@keyframes staggerIcon {
	0% { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------
   GREENSHIFT BUTTON ICON ANIMATIE
------------------------------------------------------- */

.gspb-buttonbox .gspb-buttonbox-icon {
	position: relative;
	display: inline-flex;
	overflow: visible;
}

.gspb-buttonbox .gspb-buttonbox-icon > svg {
	display: inline-block;
	animation: iconSlideIn 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}

.gspb-buttonbox:hover .gspb-buttonbox-icon > svg {
	animation: iconSlideIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.gspb-buttonbox:not(:hover) .gspb-buttonbox-icon > svg {
	animation: iconSlideOut 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes iconSlideIn {
	0% { transform: translateX(0); opacity:1; }
	35% { transform: translateX(10px); opacity:0; }
	36% { transform: translateX(-10px); opacity:0; }
	100% { transform: translateX(0); opacity:1; }
}

@keyframes iconSlideOut {
	0% { transform: translateX(0); opacity:1; }
	35% { transform: translateX(-10px); opacity:0; }
	36% { transform: translateX(10px); opacity:0; }
	100% { transform: translateX(0); opacity:1; }
}

/* -------------------------------------------------------
   BLOCKSY NAV MENU — DROPDOWN ICON ANIMATIE
------------------------------------------------------- */

.ct-toggle-dropdown-desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.ct-toggle-dropdown-desktop .ct-icon {
	display: inline-block;
	transition: none;
	animation: navIconIdle 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.menu-item.menu-item-has-children:hover 
    > .ct-menu-link 
    > .ct-toggle-dropdown-desktop 
    .ct-icon {
	animation: navIconUp 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes navIconUp {
	0% { opacity:1; transform: translateY(0); }
	35% { opacity:0; transform: translateY(8px); }
	36% { opacity:0; transform: translateY(-8px); }
	100% { opacity:1; transform: translateY(0); }
}

@keyframes navIconIdle {
	0% { opacity:1; transform: translateY(0); }
	35% { opacity:0; transform: translateY(-8px); }
	36% { opacity:0; transform: translateY(8px); }
	100% { opacity:1; transform: translateY(0); }
}

/* -------------------------------------------------------
   .mttr-trigger — CONTAINER TRIGGER VOOR BUTTON ICONS
------------------------------------------------------- */

.mttr-trigger:hover .gspb-buttonbox .gspb-buttonbox-icon > svg {
	animation: iconSlideIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.mttr-trigger:not(:hover) .gspb-buttonbox .gspb-buttonbox-icon > svg {
	animation: iconSlideOut 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* -------------------------------------------------------
   .mttr-ico-trigger — NIEUW:
   HOVER OP CONTAINER → ALLE ICONEN + DE CONTAINER ANIMEREN
------------------------------------------------------- */

/* Container zelf */
.mttr-ico-trigger {
	transition: 
		transform .35s cubic-bezier(0.4,0,0.2,1),
		box-shadow .35s cubic-bezier(0.4,0,0.2,1);
}

.mttr-ico-trigger:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

/* Iconen binnen deze container */
.mttr-ico-trigger svg,
.mttr-ico-trigger .gspb_iconBox__wrapper svg {
	display: inline-block;
	transition: none;
}

/* Hover → icon animatie */
.mttr-ico-trigger:hover svg,
.mttr-ico-trigger:hover .gspb_iconBox__wrapper svg {
	animation: iconSlideIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Hover-out → reverse animatie */
.mttr-ico-trigger:not(:hover) svg,
.mttr-ico-trigger:not(:hover) .gspb_iconBox__wrapper svg {
	animation: iconSlideOut 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}