/* Updated styles to fix video cutting and ensure titles/captions are visible under the video */
/* Make video smaller on desktop while keeping full-width on mobile */
/* Added handling for vertical (tall) videos on desktop: cap max-height without distortion, center if needed */
/* Enhanced caption: smaller letters, red glow effect */

/* Wrapper for the video block */
.wp-block-video {
    max-width: 640px !important; /* Smaller max width for desktop (adjust as needed) */
    margin: 0 auto !important; /* Center the figure */
    padding: 5px !important; /* Reduced padding to avoid cutting edges */
    background: #000 !important; /* Dark background for contrast */
    border-radius: 8px !important; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */
    text-align: center !important; /* Ensure centering for captions */
    overflow: hidden !important; /* Prevent overflow */
    display: block !important; /* Natural block flow */
}

/* Style the video element - fully responsive without distortion */
.wp-block-video video {
    max-width: 100% !important; /* Cap width */
    height: auto !important; /* Maintain original aspect ratio */
    width: auto !important; /* Allow width to adjust based on aspect */
    display: block !important; /* Remove inline-block spacing */
    border: 2px solid #333 !important; /* Add border for definition */
    border-radius: 4px !important; /* Slight rounding for video */
    object-fit: contain !important; /* Ensure full video fits without cropping */
    margin: 0 auto !important; /* Center horizontally for vertical videos */
}

/* Desktop-specific: Cap height for tall videos */
@media (min-width: 769px) {
    .wp-block-video video {
        max-height: 600px !important; /* Adjust this value to make tall videos smaller on desktop */
    }
}

/* Mobile-specific: Force full width, no height cap */
@media (max-width: 768px) {
    .wp-block-video {
        max-width: 100% !important; /* Full width on mobile */
        padding: 2px !important; /* Further reduced padding */
    }
   
    .wp-block-video video {
        width: 100% !important; /* Force full width */
        max-height: none !important; /* No height limit on mobile */
        margin: 0 !important; /* No extra margin */
    }
   
    .wp-block-video .wp-element-caption {
        font-size: 0.8em !important; /* Even smaller on mobile */
        padding: 8px !important; /* Adjust padding */
    }
}

/* Style the caption - ensured visible and positioned under the video, with smaller letters and red glow */
.wp-block-video .wp-element-caption {
    display: block !important; /* Ensure it's visible and block-level */
    text-align: center !important; /* Center caption text */
    font-size: 0.9em !important; /* Smaller font size (adjust as needed) */
    color: #fff !important; /* White text for visibility */
    background: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent dark background */
    padding: 10px !important; /* Padding for readability */
    margin-top: 5px !important; /* Space between video and caption */
    border-radius: 4px !important; /* Match video's rounded corners */
    font-family: Arial, sans-serif !important; /* Clean font */
    font-weight: 400 !important; /* Normal weight */
    line-height: 1.4 !important; /* Improved line spacing */
    opacity: 1 !important; /* Full visibility */
    text-shadow: 0 0 5px #e50914, 0 0 10px #e50914 !important; /* Red glow effect (Netflix red) */
}

/* Hover effect for video */
.wp-block-video video:hover {
    border-color: #e50914 !important; /* Red border on hover (Netflix-like) */
    transition: border-color 0.3s ease !important; /* Smooth transition */
}

/* Accessibility: Focus styles for video controls */
.wp-block-video video:focus {
    outline: 2px solid #e50914 !important; /* Visible focus outline */
    outline-offset: 2px !important;
}







/* Video Navigation Arrows */
.video-nav-arrows {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none;
  max-width: 100vw; /* Fit screen width */
  padding: 0 10px; /* Prevent edge overlap */
  box-sizing: border-box; /* Include padding in width */
}

.video-nav-arrows .nav-left,
.video-nav-arrows .nav-right {
  pointer-events: auto;
  margin: 0 5px; /* Additional spacing from edges */
}

.video-nav-arrows a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.2rem; /* smaller arrow */
  color: #ffffff;
  text-decoration: none;
  padding: 0 12px; /* tighter edge spacing */
  text-shadow: 0 0 8px #ff4444, 0 0 16px #ff4444, 0 0 32px #ff4444;
}

.video-nav-arrows .nav-label {
  font-weight: bold;
  font-size: 0.9rem; /* smaller label */
  color: #ffffff;
  text-shadow: 0 0 8px #00ccff, 0 0 16px #00ccff, 0 0 32px #00ccff;
  margin-bottom: 4px; /* tighter gap between label and arrow */
}

/* ✅ Mobile fix */
@media (max-width: 768px) {
  .video-nav-arrows {
    padding: 0 5px; /* Tighter on mobile */
  }
  .video-nav-arrows a {
    padding: 0 10px;
  }
}







/* Wrapper for section */
.footer-random-videos-wrapper {
  padding: 30px 20px;
  background: #000; /* footer background */
  text-align: center;
}

/* Section title */
.footer-random-videos-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  margin: 0 0 20px 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px #ff4444, 0 0 20px #ff4444;
}

/* Video row */
.footer-random-videos {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* allow wrapping on smaller screens */
}

/* Each video item */
.footer-video-item {
  text-align: center;
  max-width: 200px;
  flex: 1 1 200px; /* responsive sizing */
}

/* Thumbnail styling - uniform size */
.footer-video-item img {
  width: 200px;          /* fixed width */
  height: 120px;         /* fixed height */
  object-fit: cover;     /* crop to fill box */
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  margin: 0 auto;
}

.footer-video-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,68,68,0.8);
}

/* Video title */
.footer-video-title {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #fff;
}











.video-wrapper {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;   /* keeps 16:9 shape */
  background: #000;
}

.video-wrapper iframe,
.video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;    /* shows the whole video, no cropping */
}