/* Video section fixes */
.video-section {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translateZ(0);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: content;
}

.video-container {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translateZ(0);
  isolation: isolate;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  contain: strict;
}

.video-overlay {
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  -webkit-transform: translateZ(0);
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 17, 19, 0.5) !important;
  pointer-events: none;
  mix-blend-mode: normal;
  contain: strict;
  opacity: 0; /* Make overlay transparent by default */
}

/* Fix for video element */
#headerVideo {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  -webkit-transform: translateZ(0);
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  contain: strict;
}

/* Video content positioning */
.video-content {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 0 20px;
  transform: translateZ(0);
  will-change: transform;
}

/* Custom class to fix scrolling opacity issue */
/* Rules for .video-overlay, .video-container, and #headerVideo during scroll
   are now handled by assets/js/video-fixes.js to consolidate logic. */

.video-content h1 {
  font-size: 2.3rem; /* Default font size for desktop */
}

@media (max-width: 768px) {
  .video-section .video-content {
    position: absolute; /* Keep absolute positioning */
    top: 0 !important; /* Position from the top of the parent (.video-section) */
    bottom: 0 !important; /* Position from the bottom of the parent (.video-section) */
    left: 0; /* Keep left positioning */
    width: 100%; /* Keep width */
    /* Remove flexbox properties */
    display: block;
    flex-direction: unset;
    justify-content: unset;
    padding: 0 20px !important; /* Keep horizontal padding, remove vertical padding */
  }
  .video-section .video-content h1 {
    position: absolute; /* Position h1 absolutely */
    top: 75px !important; /* 50px from the top of .video-content */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: calc(100% - 40px); /* Adjust width for padding */
    text-align: center; /* Center text */
    font-size: 18px !important; /* Keep the reduced font size */
    margin-top: 0 !important; /* Remove margin */
    margin-bottom: 0 !important; /* Remove margin */
  }
  .video-section .video-content p {
    position: absolute; /* Position p absolutely */
    bottom: 100px !important; /* 100px from the bottom of .video-content */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: calc(100% - 40px); /* Adjust width for padding */
    text-align: center; /* Center text */
    font-size: 0.9rem !important; /* Keep the reduced font size */
    margin-top: 0 !important; /* Remove margin */
    margin-bottom: 0 !important; /* Remove margin */
  }

  .relative .video-content {
    position: absolute; /* Keep absolute positioning */
    top: 0 !important; /* Position from the top of the parent (.video-section) */
    bottom: 0 !important; /* Position from the bottom of the parent (.video-section) */
    left: 0; /* Keep left positioning */
    width: 100%; /* Keep width */
    /* Remove flexbox properties */
    display: block;
    flex-direction: unset;
    justify-content: unset;
    padding: 0 20px !important; /* Keep horizontal padding, remove vertical padding */
  }

  .relative .video-content h1 {
    position: absolute; /* Position h1 absolutely */
    top: 75px !important; /* 50px from the top of .video-content */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: calc(100% - 40px); /* Adjust width for padding */
    text-align: center; /* Center text */
    font-size: 18px !important; /* Keep the reduced font size */
    margin-top: 0 !important; /* Remove margin */
    margin-bottom: 0 !important; /* Remove margin */
  }
  .relative .video-content p {
    position: absolute; /* Position p absolutely */
    bottom: 100px !important; /* 100px from the bottom of .video-content */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: calc(100% - 40px); /* Adjust width for padding */
    text-align: center; /* Center text */
    font-size: 0.9rem !important; /* Keep the reduced font size */
    margin-top: 0 !important; /* Remove margin */
    margin-bottom: 0 !important; /* Remove margin */
  }
}