/* 
Theme Name: FUZIION Maatwerk Theme
Theme URI: https://fuziion.nl
Description: FUZIION Maatwerk Theme is a child theme of Hello Elementor
Author: FUZIION
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: fuziion-custom-theme
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


.spacer-border-top {
	border-top: 2px white solid!important;
	opacity: 0.6!important;
}


.footer-menu-items p a {
	color: inherit;
}

.footer-menu-items p a:hover {
	color: #fff;
}


.maps-card {
	background: #fff!important;
	border-radius: 8px!important;
	padding: 20px;
}

/**
 * Atelier27 WordPress Animation Styles
 */
/* Section Badge/Pill Style - matches React badge component */
.section-badge {
	display: inline-block;
	padding: 0.25rem 1rem; /* py-1 px-4 */
	background: rgba(153, 118, 118, 0.1); /* bg-primary/10 */
	border-radius: 9999px; /* rounded-full */
	margin-bottom: 1rem; /* mb-4 */
}

.section-badge span,
.section-badge p,
.section-badge {
	font-size: 0.875rem; /* text-sm = 14px */
	color: #997676; /* text-primary */
	font-weight: 400;
	line-height: 1.5;
}

/* Alternative: Apply directly to text element */
.badge-text {
	display: inline-block;
	padding: 0.25rem 1rem;
	background: rgba(153, 118, 118, 0.1);
	border-radius: 9999px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: #997676;
	font-weight: 400;
	line-height: 1.5;
}

.header-border-b {
  border-bottom: solid 1px var(--e-global-color-primary);
}

/* ============================================
   CSS CUSTOM PROPERTIES (Colors)
   ============================================ */
:root {
  --atelier-primary: var(--e-global-color-primary);
  --atelier-secondary: var(--e-global-color-secondary);
  --atelier-accent: var(--e-global-color-accent);
  --atelier-background: var(--e-global-color-background);
  --atelier-text: var(--e-global-color-text);
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Slow pulse animation */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Gradient shift animation */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Fade in from bottom */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in animation */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade in only */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Base class for scroll animations - elements start hidden */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade up on scroll */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade in from left on scroll */
.animate-fade-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade in from right on scroll */
.animate-fade-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Scale in on scroll */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fade in on scroll */
.animate-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* When element is in view (requires JavaScript - see below) */
.animate-on-scroll.in-view,
.animate-fade-up.in-view,
.animate-fade-left.in-view,
.animate-fade-right.in-view,
.animate-scale-in.in-view,
.animate-fade-in.in-view {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Delayed animations */
.animate-fade-up-delay-1 {
  transition-delay: 0.1s;
}

.animate-fade-up-delay-2 {
  transition-delay: 0.2s;
}

.animate-fade-up-delay-3 {
  transition-delay: 0.3s;
}

.animate-fade-up-delay-4 {
  transition-delay: 0.4s;
}

/* ============================================
   CONTINUOUS ANIMATIONS
   ============================================ */

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
  animation-delay: 1s;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 3s linear infinite;
}

.animate-gradient {
  animation: gradient-shift 8s ease infinite;
  background-size: 200% 200%;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Card hover lift effect */
.card-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  /* Multilayered box shadows for depth */
}

.card-hover-lift:hover {
  transform: translateY(-8px);
  /* Larger multilayered box shadows on hover for enhanced depth */
  box-shadow: 0 10px 15px rgba(33,33,33,.1);
}

/* Image hover scale */
.img-hover-scale {
  transition: transform 0.7s ease;
  overflow: hidden;
}

.img-hover-scale img {
  transition: transform 0.7s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Button hover scale */
.btn-hover-scale > a:hover {
  transform: scale(1.05);
  transition: transform 0.1s ease;
}

/* Glow on hover */
.glow-on-hover {
  transition: box-shadow 0.1s ease;
}

.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(153, 118, 118, 0.4);
}

/* Group hover effect - child element moves */
.group-hover-slide {
  transition: transform 0.3s ease;
}

.group:hover .group-hover-slide {
  transform: translateX(4px);
}

/* Image overlay on hover */
.img-overlay-hover {
  position: relative;
  overflow: hidden;
}

.img-overlay-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.img-overlay-hover:hover::before {
  opacity: 1;
}

/* ============================================
   DECORATIVE BACKGROUND ELEMENTS
   ============================================ */

/* Decorative Background - Gradient Orbs */
.decorative-background {
  position: relative;
  overflow: hidden;
}

.decorative-background::before,
.decorative-background::after {
  content: '';
  position: absolute;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.decorative-background::before {
  top: 0;
  right: 0;
  background: rgba(153, 118, 118, 0.1);
  transform: translateX(50%) translateY(-50%);
}

.decorative-background::after {
  bottom: 0;
  left: 0;
  background: rgba(171, 157, 142, 0.1);
  transform: translateX(-50%) translateY(50%);
}

/* Floating Shapes Container - Use with HTML elements */
.floating-shapes-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Ensure parent has position relative and minimum height */
.floating-shapes-container-parent {
  position: relative;
  min-height: 400px;
}

/* Elementor widget fix - ensure widget has height when containing floating shapes */
.elementor-widget-html:has(.floating-shapes-container),
.elementor-widget:has(.floating-shapes-container) {
  position: relative;
  min-height: 400px;
}

/* Fallback for browsers that don't support :has() */
.elementor-widget-html .floating-shapes-container,
.elementor-widget .floating-shapes-container {
  /* Force parent to have height by using a different approach */
}

/* Alternative approach: Use fixed positioning relative to nearest positioned ancestor */
.floating-shapes-container-fixed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Better solution: Container that matches parent's content height */
.floating-shapes-wrapper {
  position: relative;
  min-height: 400px;
}

.floating-shapes-wrapper .floating-shapes-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Individual floating shape elements */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Floating shape sizes */
.floating-shape-small {
  width: 100px;
  height: 100px;
}

.floating-shape-medium {
  width: 128px;
  height: 128px;
}

.floating-shape-large {
  width: 160px;
  height: 160px;
}

.floating-shape-xl {
  width: 200px;
  height: 200px;
}

/* Floating shape colors */
.floating-shape-primary {
  background: rgba(153, 118, 118, 0.2);
}

.floating-shape-accent {
  background: rgba(171, 157, 142, 0.2);
}

.floating-shape-secondary {
  background: rgba(191, 177, 168, 0.3);
}

.floating-shape-light {
  background: rgba(153, 118, 118, 0.15);
}

/* Floating shape animations */
.floating-shape-float {
  animation: float 6s ease-in-out infinite;
}

.floating-shape-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
  animation-delay: 1s;
}

/* Floating shape positions (use these classes or inline styles) */
.floating-shape-top-left {
  top: 80px;
  left: 40px;
}

.floating-shape-top-right {
  top: 160px;
  right: 80px;
}

.floating-shape-bottom-left {
  bottom: 128px;
  left: 25%;
}

.floating-shape-bottom-right {
  bottom: 80px;
  right: 33.33%;
}

.floating-shape-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Floating lines (for decorative lines) */
.floating-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(153, 118, 118, 0.2), transparent);
  pointer-events: none;
  z-index: 0;
}

.floating-line-45 {
  transform: rotate(45deg);
}

.floating-line-minus-45 {
  transform: rotate(-45deg);
}

.floating-line-pulse {
  animation: pulse-slow 4s ease-in-out infinite;
}

/* Gradient Background Overlay */
.gradient-overlay {
  position: relative;
}

.gradient-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Smooth transitions */
.transition-all {
  transition: all 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

.transition-opacity {
  transition: opacity 0.3s ease;
}

/* Z-index utilities for layering */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }

/* Pointer events */
.pointer-events-none {
  pointer-events: none;
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-left,
  .animate-fade-right,
  .animate-scale-in,
  .animate-fade-in,
  .animate-float,
  .animate-float-delayed,
  .animate-pulse-slow,
  .animate-shimmer,
  .animate-gradient {
    animation: none;
    transition: opacity 0.3s ease;
  }
  
  .animate-fade-up,
  .animate-fade-left,
  .animate-fade-right,
  .animate-scale-in {
    transform: none;
    opacity: 1;
  }
  
  .card-hover-lift:hover,
  .img-hover-scale:hover,
  .btn-hover-scale:hover {
    transform: none;
  }
}

.meetaimy-booking-widget-button-wrapper .meetaimy-booking-widget-button {
	border: none!important;
}