/*
 * Custom Styles for Bootiful Theme
 * Add custom CSS rules here that aren't part of the main build process
 * This file is enqueued separately and can be modified without rebuilding
 */

/* ==========================================================================
   General
   ========================================================================== */

.w-full {
  width: 100% !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.hidden {
  display: none !important;
}

@media (min-width: 1024px) {
  .show-md {
    display: flex !important;
  }
}

/* ==========================================================================
   BENEFIT IMAGES
   ========================================================================== */

.benefit-image img {
  width: 90% !important;
  max-width: none !important;
  height: auto;
}

@media (max-width: 768px) {
  .benefit-image img {
    width: 100% !important;
    height: auto;
  }
}

/* ==========================================================================
   VIDEO CONTAINER BORDER
   ========================================================================== */

.wp-block-video {
  position: relative;
  border: 2px solid transparent;
  border-bottom-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

.wp-block-video video {
  border-radius: inherit;
}

/* ==========================================================================
   SUB-FOOTER
   ========================================================================== */

.sub-footer {
  width: 100% !important;
  margin: 0 !important;
}

.sub-footer p {
  margin: 0.5rem 0 !important;
  line-height: 1.4;
}

.model-button-full-width {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   LIGHTSABER BORDER ANIMATION
   ========================================================================== */

.wp-block-cma-block-theme-cma-flex-block.border-top,
.wp-block-cma-block-theme-cma-flex-block.border-bottom {
  position: relative;
  overflow: hidden;
  border-top: none !important;
  border-bottom: none !important;
  min-height: 2px;
}

.lightsaber-line {
  position: absolute;
  right: 0;
  left: auto !important;
  width: 0;
  height: 2px;
  z-index: 10;
}

.lightsaber-line.animate {
  animation: lightsaber-extend 0.8s ease-out forwards;
}

.lightsaber-line.retract {
  animation: lightsaber-retract 0.8s ease-in forwards;
}

@keyframes lightsaber-extend {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes lightsaber-retract {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* ==========================================================================
   TEXT SHADOW FOR LEGIBILITY
   ========================================================================== */

.text-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* More subtle version for lighter backgrounds */
.text-shadow-subtle {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Stronger version for very busy backgrounds */
.text-shadow-strong {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   CUSTOM STYLES PLACEHOLDER
   ========================================================================== */

/*
   Add your custom CSS rules below this line
   Examples:

   .custom-class {
       property: value;
   }

   .another-custom-element {
       background-color: #your-color;
   }
*/

/* ==========================================================================
   PARALLAX BACKGROUND
   ========================================================================== */

/* Ensure predictable background behavior and smoother updates */
.cover-background {
  background-repeat: no-repeat;
  background-size: cover;
  will-change: background-position;
}

/* Optional opt-in class for clarity; not required because JS targets inline bg */
.parallax-bg {
  background-repeat: no-repeat;
  background-size: cover;
}

/* Optional helper classes for speed tuning (or set --parallax-speed) */
.parallax-slow {
  /* ~0.15x scroll speed (set via JS) */
}
.parallax-fast {
  /* ~0.5x scroll speed (set via JS) */
}