/*
Theme Name: Twenty Twenty-Five Child
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Template: twentytwentyfive
Version: 1.0.0
Description: A child theme for Twenty Twenty-Five.
Text Domain: twentytwentyfive-child
*/


/* Extra page links */
.navigation-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.previous-link,
.contact-link {
	margin-top: -150px !important;
	padding: 0 10px;
}

.previous-link a,
.contact-link a {
    padding: 10px 15px;
	font-size: 1.2rem;
    color: #000000!important;
    text-decoration: underline;
    text-underline-offset: 7px;
}

.previous-link a:hover,
.contact-link a:hover {
    color: #00000094 !important;
    text-decoration-color: #00000094 !important;
}

/* Elementor styles */
.service-item .elementor-button:hover:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-bottom: 2px solid #689729!important;
   cursor: pointer;
   transition: 0;
}

.service-box:hover:after {
   content: '';
   position: absolute;
   border-radius:8px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 1px solid #689729!important;
   cursor: pointer;
   transition: 0;
}

.service-box:hover * { color: #689729!important; }
.service-box:hover .service-text p { color: #000!important; }
.bdt-scroll-down:hover, .bdt-scroll-down:focus { background-color: transparent!important; }

.bdt-prime-slider-skin-general .bdt-slide-btn:hover { background-color: #689729 !important; }
.elementor-120 .elementor-element.elementor-element-62026ff .bdt-prime-slider .bdt-slide-btn:hover { border-color: #689729; }
.elementor-120 .elementor-element.elementor-element-62026ff .bdt-prime-slider .bdt-slide-btn .bdt-slide-btn-icon:hover { background-color: #689729; }
.bdt-slide-btn:hover .bdt-slide-btn-icon { background-color: #689729!important; }

/* Slider overlay */
.bdt-ps-slide-img { z-index:1; }
.bdt-ps-slide-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #51442b, #3B2F18);
    opacity: .8;
	z-index: 2;
}
.bdt-prime-slider-skin-general .bdt-prime-slider-wrapper {
	z-index: 3;
}

.bdt-slideshow-items { max-height: 800px; }

/* full-width custom styles */

.full-width-custom {
    width: 100vw; /* Full viewport width */
    max-width: 100%; /* Ensure it doesn't exceed viewport width */
    margin-left: 0;
    margin-right: 0;
    padding: 0; /* Adjust padding as needed */
}
.full-width-custom {
    width: 100vw;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.full-width-custom .entry-content {
    width: 100%;
    max-width: 100%;
}
.full-width-custom,
.full-width-custom .entry-content,
.full-width-custom .elementor {
    width: 100vw !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}


/* Basic Header Styles */
.site-header {
    position: relative;
    width: 100%;
    background: white;
    z-index: 10;
}
.site-header.sticky {
    position: fixed;
    top: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

/* Footer Styles */
.site-footer {
    background: #333;
    color: #fff;
    padding: 20px 0;
}
.footer-widgets {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.footer-column {
    flex: 1;
}
.footer-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
	font-size: 0.85em !important;
}

.page-img-head { align-content: space-evenly; clip-path: ellipse(100% 70% at 50% 25%); }

.page-img-head::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgb(255 255 255 / 80%), rgb(141 198 63 / 80%));
	z-index: 1;
}
.page-img-head > * {
	position: relative;
	z-index: 2;
}

.main-content-block { z-index: 5; }

.offerte-block { margin: 5px!important; }

.top-content-column { padding: 0 !important; }

/* Wrap block */
.click-block {
    position: relative;
}

.click-block a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.click-block :where(.wp-element-button, .wp-block-button__link) { background-color: transparent; }
.click-block :where(.wp-element-button:hover, .wp-block-button__link:hover) { background-color: transparent; }

/* Form style */
.wp-block-gutena-forms:not(.input-box-border-bottom-only) .wp-block-gutena-form-field:not(.gutena-forms-radio-field):not(.gutena-forms-checkbox-field):not(.gutena-forms-range-field):not(.gutena-forms-optin-field) { border-color: #aeaeae !important; }

/* Part of the default navigation styles */
.wp-block-navigation__responsive-container-open {
	display: flex;
}

/* Project style */

.post-type-archive-projecten .is-layout-grid { display: contents; }

.project-label { margin-bottom: 65px; margin-top: -35px; }
.project-label a { display: inline; background: #ececec; color: #000; padding: 0px 24px; float: right; }

.meer-projecten { display: flex!important; }

/* 9x9 Grid Layout */
.wp-block-query {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-card {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.project-image {
    position: relative;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Project Tag Overflow on Top-Right */
.project-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
}

/* Title Styling */
.project-title {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Project style End*/

@media only screen and (max-width: 1285px) and (min-width: 1024px)  { .diensten-block { gap: 20px!important; } }

@media (min-width: 1380px) {
.breadcrumbs span { padding: 0 10px; }
}

/* Reset core style */
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Footer nax widgets open on desktop */
@media (min-width: 601px) {
	.footer-nav-bedrijf nav,
	.footer-nav-inspiratie nav {
		display: block; /* Always visible on desktop */
    }
	.footer-nav-bedrijf h3 span,
	.footer-nav-inspiratie h3 span {
		display: none; /* Hide the icon on desktop */
    }
	.offerte-mobile-btn { display:none!important; }
}

/* Apply the core style at 800px again */
@media (min-width: 1028px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
	.email-mobile-btn, .whatsapp-mobile-btn, .nummer-mobile-btn { display:none!important; }
	.avg-mobile-link-1, .avg-mobile-link-2 { display: none; }
}

/* Hide regular nav at 1027px */
@media (max-width: 1028px) {
.wp-container-core-group-is-layout-f4c28e8b { margin-left: auto!important; margin-right: 0!important; }
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none;
	}
.wp-container-core-group-is-layout-1 {
	margin-left: auto!important;
	}
.wp-block-navigation__submenu-container { padding-left: 0!important; padding-right: 0!important; }
.wp-block-navigation__responsive-container-content ul li, .submenu-link a { font-size: 1.5em!important; }
.wp-block-navigation__responsive-container-content ul .nummer-mobile-btn { font-size: 1.1em!important; }
.email-mobile-btn a svg { width:30px!important; }
.instagram-mobile-btn a svg { width:26px!important; }
.whatsapp-mobile-btn a svg { width:24px!important; }

.bdt-slideshow-items { min-height: 580px!important; }
/* Page layout padding */
.has-global-padding { padding-right: 15px; padding-left: 15px; }
footer .has-global-padding { padding-right: 20px; padding-left: 20px; }

.page-head-title { padding: 5px!important; }
	
/* Mobile effects */
/* --- Reset the default theme animation --- */
.wp-block-navigation__responsive-container {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- Custom sliding full screen effect --- */
.wp-block-navigation__responsive-container {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.75)!important; /* White with transparency */
  backdrop-filter: blur(10px)!important; /* Fancy blur */
  -webkit-backdrop-filter: blur(10px)!important;
  transform: translateX(100%); /* Hide off screen */
  transition: transform 1.6s ease;
  z-index: 9999;
  padding: 2rem;
  box-sizing: border-box;
}

/* 1. Prepare main menu list */
.wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 2. Animate main menu list when menu is open */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Animate each top-level menu item */
.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 4. When menu open: */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  opacity: 1;
  transform: translateY(0);
}

/* 5. Stagger menu links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:nth-child(1) { transition-delay: 0.2s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:nth-child(2) { transition-delay: 0.3s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:nth-child(3) { transition-delay: 0.4s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:nth-child(4) { transition-delay: 0.5s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:nth-child(5) { transition-delay: 0.6s; }

/* 6. Fade submenus (if needed) */
.wp-block-navigation__submenu-container li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li {
  opacity: 1;
  transform: translateY(0);
}
/* Mobile effects end */
}

@media (max-width: 782px) {
.top-content-img-2 { max-width: 200px; margin-top: -185px!important; }
.img-content-block { margin-bottom: -75px!important; }
}

@media (max-width: 768px) {
.page-img-head { min-height: 315px!important; }
.page-img-head h1 { margin-top: -60px!important; font-size: 2rem; }
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon, .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon { float: right; } .elementor-widget-icon-box .elementor-icon-box-content { float: left; } .elementor-widget-icon-box.elementor-mobile-position-top .elementor-icon-box-icon { margin-bottom: 0!important; }
/* Page layout padding */
.has-global-padding { padding-right: 10px; padding-left: 10px; }
footer .has-global-padding { padding-right: 20px; padding-left: 20px; }
.page-img-head .has-global-padding { padding-right: 0; padding-left: 0; }
.page-img-head h1 { padding: 0 20px !important; }
}

/* Hide offerte btn on mobile */
@media (max-width: 600px) {
  .offerte-button { display:none!important; }
  .footer-nav-collapsed h3 {
    cursor: pointer;
  }
  .footer-nav-bedrijf nav,
  .footer-nav-inspiratie nav {
    display: none;
  }
  .footer-nav-bedrijf h3,
  .footer-nav-inspiratie h3 {
    display: flex;
    align-items: center;
  }
  .meer-projecten .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid { grid-template-columns: inherit; }
  .meer-projecten-link { font-size: 14px!important; }
	
/* Contact info */
  .wp-container-core-group-is-layout-19 { grid-template-columns: min-content!important; }
  .gutena-forms-offerte-formulier { padding-bottom: 2rem!important; }

.bdt-slideshow-items { min-height: 620px !important; }

/* Extra page links */
.navigation-container { margin-bottom: 25px; }
.previous-link, .contact-link {	padding: 0 20px; }
.previous-link a, .contact-link a { padding: 10px 0; font-size: 0.8rem; { text-underline-offset: 5px; }

/* content container */
.wp-container-core-group-is-layout-8 .alignfull { padding: 0 20px; }

}

@media (max-width: 480px) {
    .img-content-block {
        margin-bottom: -50px !important;
    }
	    .top-content-img-2 {
        margin-top: -130px !important;
		max-width: 135px;
    }
	.project-label a { float: left; }
	.project-label { margin-bottom: 75px; margin-top: 15px; }
	.project-link { font-size: 14px!important; }

.bdt-slideshow-items { min-height: 660px !important; }
}

@media (max-width: 441px) {
.last .elementor-icon-box-title { margin-top: -24px; margin-bottom: 7px; }
}