/* Frontend Styles for Fixed Background Block */
.mdsa-fixed-background-section {
  position: relative;
  width: 100%;
 background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px; /* Default height */
}

/* Ensure the block wrapper has proper height */
.wp-block-mdsa-fixed-background {
  width: 100%;
  min-height: 500px;
}

/* Force height on the section */
.wp-block-mdsa-fixed-background .mdsa-fixed-background-section {
  min-height: 500px !important;
  height: auto !important;
}

/* Overlay */
.mdsa-fixed-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Content */
.mdsa-fixed-background-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  width: 75% !important;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Fixed inner block styling */
.mdsa-fixed-background-content .fixed-inner-block {
  border: 10px solid #ffffff;
  width: auto !important;
  height: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.mdsa-fixed-background-content .fixed-inner-block .wp-block-heading {
  color: rgb(255, 255, 255);
  font-size: 50px;
  margin: 0px;
}

.mdsa-fixed-background-content .fixed-inner-block p {
  color: rgb(255, 255, 255);
  font-size: 24px;
  margin: 0px;
}



/* Touch device parallax (iOS, iPad, Android tablets) - Device-based detection */
body.touch-device-parallax .mdsa-fixed-background-section {
  background-attachment: scroll !important;
  background-size: 120% auto !important; /* Larger background for parallax movement */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  /* Enable hardware acceleration for smoother scrolling */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Prepare for JavaScript parallax */
  position: relative;
}

/* Create pseudo-element for true parallax background on touch devices */
body.touch-device-parallax .mdsa-fixed-background-section::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  right: -10%;
  bottom: -20%;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  z-index: 0;
  /* Enable hardware acceleration */
  -webkit-transform: translate3d(0, var(--parallax-y, 0px), 0);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Touch device parallax optimizations */
body.touch-device-parallax .mdsa-fixed-background-section.touch-parallax-active {
  /* Improve scrolling performance */
  -webkit-overflow-scrolling: touch;
  /* Create stacking context for better compositing */
  isolation: isolate;
}

body.touch-device-parallax .mdsa-fixed-background-section.touch-parallax-active::before {
  /* Ultra-smooth transforms with optimized properties */
  -webkit-transform: translate3d(0, var(--parallax-y, 0px), 0);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  /* CSS transition fallback for ultra-smooth interpolation */
  -webkit-transition: -webkit-transform 0.016s linear;
  transition: transform 0.016s linear;
  /* Force hardware acceleration and smooth rendering */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  /* Optimize for transform changes */
  will-change: transform;
  /* Prevent flickering on some devices */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* Additional smoothness optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Reduce repaints */
  contain: layout style paint;
}

/* Device-specific optimizations */
body.touch-device-parallax .mdsa-fixed-background-section.ipad-parallax::before {
  /* iPad-specific optimizations */
  -webkit-transition: -webkit-transform 0.012s ease-out;
  transition: transform 0.012s ease-out;
}

body.touch-device-parallax .mdsa-fixed-background-section.android-tablet-parallax::before {
  /* Android tablet optimizations */
  -webkit-transition: -webkit-transform 0.020s linear;
  transition: transform 0.020s linear;
}

/* Ultra-smooth variant for devices that support it */
@supports (contain: layout style paint) {
  body.touch-device-parallax .mdsa-fixed-background-section.ultra-smooth::before {
    /* Even smoother transition for modern devices */
    -webkit-transition: -webkit-transform 0.008s ease-out;
    transition: transform 0.008s ease-out;
  }
}

/* Ensure content stays above background on touch devices */
body.touch-device-parallax .mdsa-fixed-background-overlay,
body.touch-device-parallax .mdsa-fixed-background-content {
  position: relative;
  z-index: 1;
}

/* Alternative CSS-only parallax for iOS using perspective (experimental) */
@supports (-webkit-overflow-scrolling: touch) {
  .mdsa-fixed-background-section.css-parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
  }
  
  .mdsa-fixed-background-section.css-parallax::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateZ(-1px) scale(2);
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
  }
}

@media only screen and (max-width: 768px) {
  .mdsa-fixed-background-content {
    padding: 0px !important;
    margin: 0px !important;
    width: 75% !important;
    
  }

  .mdsa-fixed-background-content .fixed-inner-block {
    padding: 40px 10px !important;
   
  }
  .mdsa-fixed-background-content .fixed-inner-block .wp-block-heading {
    font-size: 34px;
    line-height: 1;
  }
  .mdsa-fixed-background-content .fixed-inner-block .wp-block-paragraph,
  .mdsa-fixed-background-content .fixed-inner-block p {
    font-size: 20px;
    line-height: 1.05;
  }
  .mdsa-fixed-background-content .fixed-inner-block .wp-block-button__link {}

  .mdsa-fixed-background-section {
   background-attachment: scroll !important; /* Fallback for older mobile browsers */
  }

}

@media only screen and (max-width: 500px) {
  .mdsa-fixed-background-content {
    padding: 0px !important;
    margin: 0px !important;
    width: 85% !important;

    
  }
}

/* Typography enhancements for content */
.mdsa-fixed-background-content h1,
.mdsa-fixed-background-content h2,
.mdsa-fixed-background-content h3,
.mdsa-fixed-background-content h4,
.mdsa-fixed-background-content h5,
.mdsa-fixed-background-content h6 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mdsa-fixed-background-content p {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mdsa-fixed-background-content a {
  color: #ffffff;
  text-decoration: underline;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mdsa-fixed-background-content a:hover {
  color: #f0f0f0;
}



/* High contrast mode support */
@media (prefers-contrast: high) {
  .mdsa-fixed-background-content {
    color: #000000;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
  }
  
  .mdsa-fixed-background-content h1,
  .mdsa-fixed-background-content h2,
  .mdsa-fixed-background-content h3,
  .mdsa-fixed-background-content h4,
  .mdsa-fixed-background-content h5,
  .mdsa-fixed-background-content h6,
  .mdsa-fixed-background-content p,
  .mdsa-fixed-background-content a {
    color: #000000;
    text-shadow: none;
  }
}

/* Reduced motion support 
@media (prefers-reduced-motion: reduce) {
  .mdsa-fixed-background-section {
    background-attachment: scroll;
  }
}
  */

 
/* Desktop parallax - Pure CSS background-attachment: fixed */
body.desktop-parallax .mdsa-fixed-background-section {
  background-attachment: fixed !important;
  /* Reset any JavaScript transforms on desktop - use pure CSS parallax */
  transform: none !important;
  -webkit-transform: none !important;
}

/* Ensure desktop gets clean CSS parallax regardless of screen size */
body.desktop-parallax .mdsa-fixed-background-section::before {
  display: none; /* No pseudo-element needed for desktop */
}

/* Fallback media query for cases where JavaScript doesn't load */
@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mdsa-fixed-background-section {
    background-attachment: fixed !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  .mdsa-fixed-background-section::before {
    display: none;
  }
}

@supports (-webkit-touch-callout: none) {
  .mdsa-fixed-background-section {
    background-attachment: scroll !important;
  }
}

/* WOW.js has been removed - these styles are no longer needed */