/*
Theme Name:     Pagecraft Child
Description:    Custom WordPress Child theme for theme "PageCraft"
Author:         Pagecraft
Author URI: 	https://pagecraft.nl
Tested up to:   6.2
Requires PHP:   8.2
Template:       pagecraft
Text Domain:    pagecraft-child
Version:        1.0.1
*/


/****************************************** GLOBAL ******************************************/

/* Variables */

:root {
	--pc-black: #000;
	--pc-white: #fff;
	--pc-transparent: #FFFFFF00;
	--light-gray: #F5F5F5;
	
	--spacing-desktop: 100px;
	--spacing-laptop: 50px;
	--spacing-tablet: 50px;
	--spacing-mobile: 40px;
	
	--gform-asterix-color: #3f3f3f;
	--gform-error-color: #ff0000;
	--gform-placeholder-color: #3f3f3f;
	--gform-border-color: #c5c5c5;
	--gform-active-border-color: #000;
	--gform-font-size: var(--e-global-typography-text-font-size);

}

/*  Variable COLORS - globals form Elementor page builder
	var(--e-global-color-primary);
	var(--e-global-color-secondary);
	var(--e-global-color-accent);
	var(--e-global-color-text);
	var(--e-global-color-584f52f) // Globale kleur 'Zwart'
	var(--e-global-color-43f9ea8) // Globale kleur 'Wit'
*/

/*  Variable Fonts - globals form Elementor page builder
	var(--e-global-typography-primary-font-family);
	var(--e-global-typography-secondary-font-family);
*/
/*  Default Elementor colors from plugin
	var(--e-a-color-black);
	var(--e-a-color-white);
*/

/**********    Disable default styling    ***************/
ol, ul {
	padding-left: 20px;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.elementor-widget-text-editor p:first-of-type {
    margin-top: 0;
}

img {
	object-fit: cover;
}

.elementor-button-icon {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 1024px) {
	h1, h2, h3, h4, p {
		overflow-wrap: break-word;
	}
}


/****************************************** Spacing classes *****************************************/
.padding-section {
	padding-top: var(--spacing-desktop);
	padding-bottom: var(--spacing-desktop);
}

.padding-top {
	padding-top: var(--spacing-desktop);
}

.padding-bottom {
	padding-bottom: var(--spacing-desktop);
}

@media screen and (min-width: 1366px) {
	.padding-left {
		padding-left: calc((100vw - var(--content-width)) / 2);
	}
	
	.padding-right {
		padding-right: calc((100vw - var(--content-width)) / 2);
	}
}

@media screen and (max-width: 1366px) {
	.padding-section {
		padding-top: var(--spacing-laptop);
		padding-bottom: var(--spacing-laptop);
	}

	.padding-top {
		padding-top: var(--spacing-laptop);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-laptop);
	}
}


@media screen and (max-width: 1024px) {
	.padding-section {
		padding-top: var(--spacing-tablet);
		padding-bottom: var(--spacing-tablet);
	}

	.padding-top {
		padding-top: var(--spacing-tablet);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-tablet);
	}
}

@media screen and (max-width: 767px) {
	.padding-section {
		padding-top: var(--spacing-mobile);
		padding-bottom: var(--spacing-mobile);
	}

	.padding-top {
		padding-top: var(--spacing-mobile);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-mobile);
	}
}

/****************************************** Sticky header styles ****************************************/

header .elementor-sticky--effects {
	background-color: #00000050;
	backdrop-filter: blur(10px);
	box-shadow: 0px 0px 5px #00000014;
	transition: all ease .2s;
	min-height: 80px;
}

header .elementor-sticky--effects .e-con-inner {
	padding: 10px 0px 10px 0px;
}

header .elementor-sticky--effects .elementor-widget-theme-site-logo img {
	width: 80px !important;
	height: 48px !important;
	content: url("/wp-content/uploads/2025/05/Beeldmerk.png");
}

header:not(.elementor-sticky--effects) {
}

/****************************************** Gravity form style ******************************************/
/*** https://docs.gravityforms.com/css-targeting-examples/ ***/
body .gform_heading .gform_required_legend,
body .gform_footer.top_label .gform-loader {
	display: none;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_required.gfield_required_asterisk {
	color: var(--gform-asterix-color);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input::placeholder,
body .gform_wrapper .gform_body .gfield .ginput_container textarea::placeholder {
	font-family: var(--e-global-typography-primary-font-family);
	color: var(--gform-placeholder-color);
	font-size: var(--gform-font-size);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']),
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select {
	box-shadow: none;
	border: solid 1px var(--gform-border-color);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']):focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']):active,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:active,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:active {
/* 	box-shadow: none; */
	border: solid 1px var(--gform-active-border-color);
	outline: none;
}


body .gform_wrapper .gform_footer input[type=submit] {
	font-family: var(--e-global-typography-primary-font-family);
	background-color: var(--e-global-color-secondary) !important;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: var(--e-global-color-primary) !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container label.error {
	color: var(--gform-error-color);
}


/* Swiper center align*/
.swiper-slide {
	display: flex !important;
	justify-content: center !important;
}

/* Elementor Cart Button*/
.elementor-menu-cart__toggle_button {
	background-color: var(--pc-transparent) !important;
	padding: 0 !important;
}

/* WooCommerce Buttons */

.woocommerce .button {
	color: var(--pc-white) !important;
	background-color: var(--e-global-color-primary) !important;
	transition: all ease .2s;
}

.woocommerce .button:hover {
	color: var(--pc-white) !important;
	background-color: var(--e-global-color-accent) !important;
}

/* WooCommerce My Account */

.woocommerce-MyAccount-content {
	font-family: var(--e-global-typography-text-font-family);
}

.woocommerce-MyAccount-content p {
	font-size: var(--e-global-typography-text-font-size);
}

.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-content-wrapper > p:first-of-type {
	margin-block-start: 0 !important;
}

.woocommerce-MyAccount-content-wrapper p a,
p.woocommerce-LostPassword.lost_password a {
	color: var(--e-global-color-accent) !important;
}

.woocommerce-MyAccount-content-wrapper p a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
	color: var(--e-global-color-primary) !important;
}

/* Heading styling */

/* h5 {
	padding-left: 30px;
}

h5:before {
    content: "//";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--e-global-color-primary);
    font-weight: 400;
}
 */

.marquee,
.marquee-2 {
	overflow: hidden;
	display: flex;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    text-transform: var(--e-global-typography-secondary-text-transform);
	gap: 30px !important;
}

.marquee h2,
.marquee p,
.marquee-2 h2 {
 	white-space: nowrap;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    text-transform: var(--e-global-typography-secondary-text-transform);
	color: var(--e-global-color-primary);
}


.text-stroke,
.elementor-counter-number,
.elementor-counter-number-suffix {
	-webkit-text-stroke-width: 1px;
    stroke-width: 1px;
    -webkit-text-stroke-color: var(--e-global-color-primary);
    stroke: var(--e-global-color-primary);
    color: var(--pc-transparent);
}

@media screen and (min-width: 1024px) {
	.text-stroke,
	.elementor-counter-number,
	.elementor-counter-number-suffix {
		-webkit-text-stroke-width: 2px !important;
		stroke-width: 2px !important;
	}
}


.elementor-counter {
	gap: 20px;
}

.elementor-counter-number-wrapper {
	gap: 10px;
}

.image-glow {
	filter: drop-shadow(0 0 40px rgba(226, 13, 24, 0.5));
}

.svg-fill {
	filter: invert(1) brightness(10);
}

/* Button mimic */

.button-hover,
.button-hover-black,
.button-hover-white {
	transition: all ease .2s !important;
}

.button-hover:hover .elementor-heading-title {
	transition: all ease .2s !important;
	color: var(--pc-white) !important;	
}

.button-hover:hover svg {
	transition: all ease .2s !important;
	fill: var(--pc-white) !important;
}

.button-hover-black:hover .elementor-heading-title {
	transition: all ease .2s !important;
	color: var(--e-global-color-primary) !important;	
}

.button-hover-black:hover svg {
	transition: all ease .2s !important;
	fill: var(--e-global-color-primary) !important;
}

.button-hover-white:hover .elementor-heading-title {
	transition: all ease .2s !important;
	color: var(--pc-black) !important;	
}

.button-hover-white:hover svg {
	transition: all ease .2s !important;
	fill: var(--pc-black) !important;
}

/* Diensten loop item */

.diensten-loop-item {
	transition: all ease .3s;
}

@media screen and (min-width: 1024px) {
	.diensten-loop-item:hover {
		background-color: var(--e-global-color-primary) !important;
	}

	.diensten-loop-item:hover img {
		filter: invert(1) brightness(10) !important;
	}

	.diensten-loop-item:hover p,
	.diensten-loop-item:hover .elementor-heading-title {
		color: var(--e-global-color-text) !important;
	}

	.diensten-loop-item:hover svg {
		fill: var(--e-global-color-text) !important;
	}
}

/* Diensten list */
.diensten-list .elementor-icon-list-text {
    position: relative;
    padding-left: 0px;
    transition: all ease .3s;
}

.diensten-list .elementor-icon-list-text::before {
    content: "\f061"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--e-global-color-primary);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
    opacity: 0;
    transition: all ease .3s;
}

.diensten-list .elementor-icon-list-item:hover .elementor-icon-list-text::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.diensten-list .elementor-icon-list-item .elementor-icon-list-text {
	transition: all ease .3s;
	padding-left: 15px;
}

.diensten-list .elementor-icon-list-item:hover .elementor-icon-list-text {
	transition: all ease .3s;
    padding-left: 30px;
}




/****************************************** Projecten ***********************************************/

/* Projecten category categorie filter */

.project-category-filter .search-filter-input-button-group {
	gap: 30px;
}

button.search-filter-input-button {
	transition: all ease .2s;
	padding: 0px !important;
	border: none !important;
	background-color: var(--pc-transparent) !important;
	font-size: 20px;
}

button.search-filter-input-button:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.project-category-filter button.search-filter-input-button {
	position: relative;
	color: var(--pc-white) !important;
}

.project-category-filter button.search-filter-input-button:hover {
	color: var(--e-global-color-primary) !important; 
}

.project-category-filter button.search-filter-input-button::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--e-global-color-primary);
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.2s ease-out;
}

.project-category-filter button.search-filter-input-button:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.project-category-filter button.search-filter-input-button--is-selected {
	color: var(--e-global-color-primary) !important;
}

.project-category-filter button.search-filter-input-button--is-selected::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.project-category-filter button.search-filter-input-button--is-selected:hover {
}

.e-loop__load-more a {
	color: var(--pc-white) !important;
	transition: all ease .3s !important;
}

.e-loop__load-more a:hover {
	color: var(--e-global-color-primary) !important;
	transition: all ease .3s !important;
}

.e-loop__load-more a .elementor-button-icon svg {
	fill: var(--e-global-color-primary) !important;
}

.e-loop__load-more a:hover .elementor-button-icon svg {
	fill: var(--e-global-color-primary) !important;
}

/* Project loop item */

@media screen and (min-width: 1024px) {
	.projecten-loop-item .projecten-loop-item-icon, 
	.projecten-loop-item .projecten-loop-item-info {
		opacity: 0;
		transition: all ease .2s;
	}

	.projecten-loop-item:hover .projecten-loop-item-icon, 
	.projecten-loop-item:hover .projecten-loop-item-info {
		opacity: 1;
	}
}

/* Single Project */


@media screen and (min-width: 1024px) {
	.single-projecten .elementor-widget-gallery {
		height: 600px;
		overflow: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.single-projecten .elementor-widget-gallery::-webkit-scrollbar {
		display: none;
	}
	
	.single-projecten .e-gallery-grid:last-child {
		padding-bottom: 100px;
	}
}

.single-projecten .elementor-slideshow__title,
.single-projecten .elementor-slideshow__counter {
	font-family: var(--e-global-typography-text-font-family);
	font-size: var(--e-global-typography-text-font-size);
	font-weight: 300;
}

.e-loop__load-more .elementor-button-content-wrapper {
	transition: all ease .2s;
}

.e-loop__load-more svg {
	fill: var(--e-global-color-primary);
}


@media screen and (min-width: 1024px) {
	.project-info::after {
		content: "";
		position: absolute;
		width: 1px;
		height: 50%;
		background-color: var(--e-global-color-54f3af8);
		right: 0;
		top: 30px;
	}
}

form.elementor-form .select-caret-down-wrapper svg {
  display: none; /* Hide original inline SVG */
}

form.elementor-form .select-caret-down-wrapper {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  background-image: url('https://mediamail.fbtest.io/wp-content/uploads/2025/06/caret-down.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  color: inherit;
}

/* Mobile menu */
.mobile-menu a{
	line-height: 1.1em !important;
}

/* Instagram Social section */

.sbi,
.sbi_lb-dataContainer {
	font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
}

.sbi h3 {
	font-size: var(--e-global-typography-1bb2f5b-font-size) !important;
	font-weight: var(--e-global-typography-1bb2f5b-font-weight) !important;
}

p.sbi_bio,
p.sbi_bio_info,
.sbi_caption_text {
	font-size: var(--e-global-typography-text-font-family) !important;
}

.sbi_link {
	background: rgba(0,0,0,0.3) !important;
}

.sb_instagram_header.sbi_medium .sbi_bio_info.sbi_feedtheme_bio, 
.sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio, 
.sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info  {
	font-size: 16px !important;
}

.sbi_more {
	color: var(--e-global-color-primary);
}

@media (max-width: 767px) {
	.sbi-theme:not(.sbi-social_wall,.sbi-outline,.sbi-overlap).sb_instagram_header:not(.sbi_centered) .sbi_header_text {
		flex-direction: row;
		gap: 15px;
	}
}