/*
Theme Name: landmarq
Theme URI: https://wordpress.org/themes/landmarq/
Author: Bureau Boits en Setestrel
Author URI: https://7Strel.nl
Description: LandmarQ is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: landmarq
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@import url('assets/css/werkgebieden.css');

@import url('assets/css/navigation.css');

@import url('assets/css/form.css');

/***
* -- Margin -- *
***/

:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
}

.wp-block-group.alignfull, .editor-styles-wrapper .wp-block-group.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/***
* -- Utility -- *
***/
.not-visible {
	display: none;
}

/***
* -- Gallery -- *
***/
.gallery {
  display: flex;
  overflow-x: auto;
	scroll-padding: 0 40%;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Para esconder a scrollbar no Firefox */
  -ms-overflow-style: none; /* Para esconder a scrollbar no IE e Edge */
	padding-left: .5rem !important;
}

.gallery::-webkit-scrollbar {
  display: none; /* Para esconder a scrollbar no Chrome, Safari e Edge */
}

.wp-block-gallery {
  display: flex;
  flex-wrap: nowrap;
	gap: 10px !important;
}

.wp-block-gallery .wp-block-image {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 70vw; /* Ajuste conforme necessário */
  max-width: 600px;
}

.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: auto;
  /* border-radius: 10px; */
  object-fit: cover;
}


/***
* -- Marquee -- *
***/

/* .container-marquee {
	margin-left: 0 !important;
	margin-right: 0 !important;
} */

.marquee-container {
	width: 100%;
	/* max-width: 1280px; */
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	/* -webkit-mask-image: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent); */
}

.marquee-content {
	/* display: inline-block;
	overflow: hidden;
	animation: marquee 10s linear infinite; */
	display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-content:hover {
	animation-play-state: paused;
}

/* .marquee-content::after { */
	/* content: '';
	display: inline-block;
	white-space: nowrap;
	margin-right: 20px;  */
	/* Adjust this to match margin-right of images */
/* } */

/* .marquee-content::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 100%;
	white-space: nowrap;
} */

@keyframes marquee {
	/* 0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); } */
	0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* .marquee-content::after {
	content: attr(data-images); /* Use data attribute to store image HTML 
	display: inline-block;
	white-space: nowrap;
	margin-right: 20px; /* Adjust this to match margin-right of images 
} */

/* .marquee-content figure.wp-block-image {
	width: 200px !important;
	padding: 20px;
	max-width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


.marquee-content figure.wp-block-image img {
	max-width: 100%;
  height: auto;
  display: block;
} */

.marquee-content figure.wp-block-image {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 350px !important;
  max-width: 600px;
}

/***
* -- Q watermerk/logo -- *
***/

.group-feature-image{
	position: relative;
}

.group-feature-image figure.wp-block-post-featured-image::before,
.group-feature-image figure.wp-block-image::before {
	content: "";
	position: absolute;
	left: 0;
	transform: translate(0%, -50%);
	background-image: url(assets/images/q-dienst-img.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.group-feature-image figure.wp-block-post-featured-image::before{
	top: 60%;
	width: 65%;
	height: 65%;
}

.group-feature-image figure.wp-block-image::before {
	top: 70%;
	width: 45%;
	height: 45%;
}

li.project:nth-child(even) div.wp-block-group div.wp-block-columns {
	display: flex;
	flex-direction: row-reverse;
}

@media screen and (max-width: 475px) {
	h2.has-text-align-right,
	p.has-text-align-right {
		text-align: left;
	}
}

/* .dienst-3d-ontwerpen {
	position: relative;
}

.diensten-image-container-3d-ontwerpen figure img:hover{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
	background-image: url(https://landmarq.local/wp-content/uploads/2025/03/diensten_3d-ontwerpen_hover.png);
	background-size: contain;
	background-repeat: no-repeat;
} */

.dienst-visualiseren,
.dienst-3d-ontwerpen {
	position: relative;
}

.diensten-image-container-3d-ontwerpen,
.diensten-image-container-visualiseren {
	position: relative;
	display: inline-block;
}

.diensten-image-container-3d-ontwerpen .hover-image,
.diensten-image-container-visualiseren .hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.diensten-image-container-3d-ontwerpen:hover .hover-image,
.diensten-image-container-visualiseren:hover .hover-image {
	opacity: 1;
}