/* ================================================================
   🎯 EASY FIX – SPACING CONTROLS (Desktop vs Mobile)
   ================================================================ */

/* ---------- DESKTOP SPACING (default for screens > 768px) ---------- */
.wp-block-video {
    max-width: 860px !important;
    margin: 25px auto !important;    /* 25px top/bottom, centered */
    padding: 5px !important;
    aspect-ratio: 16/9 !important;   /* Widescreen */
}

/* ---------- MOBILE SPACING OVERRIDES (screens ≤ 768px) ---------- */
@media (max-width: 768px) {
    /* 🔥 ULTIMATE FIX: html body + doubled class = maximum specificity */
    html body .wp-block-video.wp-block-video {
        max-width: 100% !important;
        margin: -10px 0 !important;     /* ✅ -10px top/bottom, full width */
        padding: 2px !important;       /* ✅ minimal internal gap */
        aspect-ratio: 9/16 !important; /* Portrait/tall friendly */
        /* If you want a full‑bleed breakout like your iframe, uncomment:
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        */
    }
}

/* ================================================================
   BASE WRAPPER STYLES (shared)
   ================================================================ */
.wp-block-video {
    background: #000 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    text-align: center !important;
    display: block !important;
    position: relative !important;
}

/* ================================================================
   VIDEO ELEMENT – fully responsive, fills the wrapper
   ================================================================ */
.wp-block-video video {
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    border: 2px solid #e50914 !important; /* Netflix red */
    border-radius: 4px !important;
    object-fit: cover !important;          
    margin: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: border-color 0.3s ease, transform 0.2s ease !important;
}

/* Desktop: show full video with letterboxing */
@media (min-width: 769px) {
    .wp-block-video video {
        object-fit: contain !important;
    }
}

/* Mobile: additional video tweaks (caption space) */
@media (max-width: 768px) {
    .wp-block-video video {
        width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        top: 0 !important;
        height: calc(100% - 40px) !important; /* leaves room for caption */
    }
}

/* ================================================================
   CAPTION STYLING
   ================================================================ */
.wp-block-video .wp-element-caption {
    display: block !important;
    text-align: center !important;
    font-size: 0.9em !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 10px !important;
    margin-top: 0 !important;
    border-radius: 4px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    text-shadow: 0 0 5px #e50914, 0 0 10px #e50914 !important;
    position: relative !important;   /* Overlaid on top of the video */
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* Mobile caption – matches desktop position (overlaid at bottom) */
@media (max-width: 768px) {
    .wp-block-video .wp-element-caption {
        position: relative !important; 
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-bottom: 0 !important;
        font-size: 0.8em !important;
        padding: 8px !important;
        z-index: 1 !important;
    }
}

/* ================================================================
   HOVER & FOCUS EFFECTS
   ================================================================ */
.wp-block-video video:hover {
    border-color: #ff1a1a !important;
    border-width: 3px !important;
    transform: scale(1.01) !important;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5) !important;
}

.wp-block-video:hover .wp-element-caption {
    background: rgba(229, 9, 20, 0.3) !important;
    text-shadow: 0 0 8px #ff1a1a, 0 0 12px #ff1a1a !important;
}

.wp-block-video video:focus {
    outline: 3px solid #e50914 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(229, 9, 20, 0.2) !important;
}







/* ============================================================
 * Redgifs Video CSS
 * ============================================================ */
.video-container {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 20px auto 40px auto; /* 20px top | 40px bottom */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid #e50914; /* Red line at the bottom */
  padding-bottom: 12px; /* Space between video and the red line */
}

.redgifs-style-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(10px) brightness(0.9);
  transform: scale(1.115);
  z-index: 1;
}

.video-foreground {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.video-foreground video {
  width: 100%;
  max-height: 80vh;
  height: auto;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

/* ============================================================
 * Video Title Styling (Safe Font)
 * ============================================================ */
.video1-title {
  margin-top: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 15px #e50914, 0 0 10px #e50914;
}

h1.video1-title { font-size: 32px !important; }
h2.video1-title { font-size: 13px !important; }
h3.video1-title { font-size: 13px !important; }
h4.video1-title { font-size: 13px !important; }

/* ============================================================
 * Hover + Focus Effects (Netflix Red)
 * ============================================================ */
.video-foreground video:hover {
  border-color: #e50914;
}

.video-foreground video:focus {
  outline: 2px solid #e50914;
  outline-offset: 2px;
}




/* ============================================================
 * Videos Navigation Arrows (Desktop + Mobile)
 * ============================================================ */

/* Global controls */
:root {
  --arrow-size-desktop: 1.4rem;   /* arrow size on desktop */
  --label-size-desktop: 0.9em;    /* label size on desktop */
  --button-padding-desktop: 0 15px;

  --arrow-size-mobile: 1.5rem;    /* arrow size on mobile */
  --label-size-mobile: 0.6em;     /* label size on mobile */
  --button-padding-mobile: 0 5px;
}

.videos-nav-arrows {
  position: fixed !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

.videos-nav-arrows .nav-left,
.videos-nav-arrows .nav-right {
  pointer-events: auto !important;
}

.videos-nav-arrows .nav-left {
  margin-left: -30px !important;
}

.videos-nav-arrows .nav-right {
  margin-right: -10px !important;
}

.videos-nav-arrows a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-size: var(--arrow-size-desktop) !important;   /* arrow size */
  color: #ffffff !important;
  text-decoration: none !important;
  padding: var(--button-padding-desktop) !important; /* button area */
  text-shadow: 0 0 8px #ff4444, 0 0 16px #ff4444 !important;
}

.videos-nav-arrows .nav-label {
  font-weight: bold !important;
  font-size: var(--label-size-desktop) !important;   /* label size */
  color: #ffffff !important;
  text-shadow: 0 0 8px #00ccff, 0 0 16px #00ccff !important;
  margin-bottom: 8px !important;
}

/* Mobile Fix */
@media (max-width: 768px) {
  .videos-nav-arrows {
    max-width: 100% !important;
    margin: 0 0px !important;
  }
  .videos-nav-arrows .nav-left {
    margin-left: 5px !important;
  }
  .videos-nav-arrows .nav-right {
    margin-right: 5px !important;
  }
  .videos-nav-arrows a {
    font-size: var(--arrow-size-mobile) !important;   /* smaller arrow */
    padding: var(--button-padding-mobile) !important; /* tighter padding */
  }
  .videos-nav-arrows .nav-label {
    font-size: var(--label-size-mobile) !important;   /* smaller label */
  }
}




/* 🎬 Related Videos Section - Label 1 */
.related-videos {
  margin-top: 40px;
  padding: 20px;
  background: #0d0d0d;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);

  /* center the whole block's contents */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* [UNTOUCHED] Main Section Heading Style ("Related Videos") */
.related-videos h5 {
  font-size: 19px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: #fff;
  text-shadow:
    0 0 4px #ff0000,
    0 0 8px #ff0000,
    0 0 12px #ff0000,
    0 0 18px #ffffff,
    0 0 24px #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  position: relative;

  /* ensure the heading is centered inside the flex container */
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Neon underline effect (unchanged) */
.related-videos h5::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  margin-top: 8px;
  border-radius: 2px;
  animation: glowline 2s infinite alternate;
}

@keyframes glowline {
  from { box-shadow: 0 0 8px #ff00ff; }
  to   { box-shadow: 0 0 12px #00ffff; }
}

/* Center the Bootstrap row contents and keep responsive wrapping */
.related-videos .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers columns horizontally */
  gap: 1rem; /* optional spacing between items */
}

/* Make each column center its card and avoid full-width stretching */
.related-videos .col-md-4 {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 320px;
  flex: 0 1 32%;
}

/* Video item cards (keeps your existing look, centered inside column) */
.related-videos .related-videos-item {
  display: block;
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 8px;
  margin-bottom: 15px;
  width: 100%; /* fill the column's inner width */
}

/* Thumbnails and titles (unchanged except centering) */
.related-videos .related-videos-item img {
  width: 100%;
  height: var(--video-thumb-height, 150px);
  object-fit: contain;
  object-position: center center;
  background-color: #000;
  border-radius: 8px;
  transform: scale(var(--thumb-zoom, 1.2));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.related-videos .related-videos-item:hover img {
  transform: scale(var(--thumb-hover-zoom, 1));
  filter: brightness(1.2) saturate(1.3);
}

/* ============================================================
   📌 EDIT VIDEO BOX ITEM TITLES (INSIDE THUMBNAILS) HERE
   (Note: This does NOT change the main section heading above)
   ============================================================ */
:root {
  --video-box-title-size: 14px; /* Adjust this value to resize text inside the boxes! */
  --video-box-title-font: 'Poppins', sans-serif;
}

/* Individual Video Grid Titles (h6) */
.related-videos .related-videos-item h6 {
  margin-top: 19px;
  font-size: var(--video-box-title-size) !important; 
  font-family: var(--video-box-title-font) !important;
  color: #fff;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* hover title effect */
.related-videos .related-videos-item:hover h6 {
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff;
}

/* small-screen tweaks */
@media (max-width: 767px) {
  .related-videos .col-md-4 { flex: 0 1 48%; max-width: 48%; }
  .related-videos h5 { margin-bottom: 18px; }
}

@media (max-width: 420px) {
  .related-videos .col-md-4 { flex: 0 1 100%; max-width: 100%; }
  .related-icon-img { width: 18px; }
}



/* ============================================================
 * Footer: Random Video Strip Styles
 * ============================================================ */

.footer-random-video-wrapper {
  margin-top: 40px;
  padding: 20px;
  background: #0d0d0d; /* dark footer background */
  border-top: 2px solid #00ffff;
  box-shadow: 0 -4px 20px rgba(0, 255, 255, 0.2);
}

.footer-random-video-title .frv-icon {
  width: 54px;        /* desired width */
  height: auto;       /* preserve aspect ratio */
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.footer-random-video-title {
  font-size: 18px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: #fff;
  text-shadow:
    0 0 4px #ff0000,
    0 0 8px #ff0000,
    0 0 12px #ff0000,
    0 0 18px #ffffff,
    0 0 24px #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

/* Neon underline effect */
.footer-random-video-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 100px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  border-radius: 2px;
  animation: glowline 2s infinite alternate;
}

@keyframes glowline {
  from { box-shadow: 0 0 8px #ff00ff; }
  to   { box-shadow: 0 0 12px #00ffff; }
}

/* Grid of video items */
.footer-random-video {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
}

/* Video item card */
.footer-video-item {
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-video-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* Thumbnail images */
.footer-video-item img {
  width: 100%;
  height: 100px; /* control thumbnail height */
  object-fit: cover; /* zooms in tall pics to fill width */
  border-radius: 8px 8px 0 0;
  transition: filter 0.3s ease;
}

.footer-video-item:hover img {
  filter: brightness(1.2) saturate(1.3);
}

/* Video titles */
.footer-video-title {
  display: block;
  margin: 8px;
  font-size: 14px; /* control title size here */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.footer-video-item:hover .footer-video-title {
  color: #00ffff;
  text-shadow: 0 0 6px #00ffff;
}


/* ===== No Sidebar Mode ===== */
/* When hide_sidebar is checked, we add .no-sidebar to <body> */

/* Remove sidebar entirely */
.no-sidebar .sidebar,
.no-sidebar .sidebar .sidebar-inner {
  display: none !important;
}

/* Expand main content to full width */
.no-sidebar .content-with-sidebar .main-content,
.no-sidebar .main-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  order: 1; /* ensure main content comes first */
}

/* Ensure flex container allows expansion */
.no-sidebar .content-with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

/* ===== General Layout Enhancements ===== */

/* Smooth transition when widths change */
.content-with-sidebar .main-content {
  transition: all 0.3s ease-in-out;
}


.videos-tags {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.videos-tags .tag-box {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #ff1a1a; /* neon red base */
  color: #fff; /* white text for contrast */
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #ff1a1a, 0 0 15px #ff1a1a; /* glowing effect */
}

.videos-tags .tag-box:hover {
  background-color: #ff3333; /* brighter red on hover */
  color: #000;
  box-shadow: 0 0 12px #ff3333, 0 0 25px #ff3333; /* stronger glow */
}


/* ─────────────────────────────────────────────────────────────
   ✨ Post Categories Styling — Label 1
   Decorative, neon-style category chips; centered and responsive.
   Place this in your child theme stylesheet or Appearance → Customize → Additional CSS
   ───────────────────────────────────────────────────────────── */

.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  justify-content: center; /* center the category chips horizontally */
  align-items: center;
}

/* category chip */
.post-categories .category-box {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #ff1a1a; /* neon red base */
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #ff1a1a, 0 0 15px #ff1a1a; /* glowing effect */
  line-height: 1;
  white-space: nowrap;
}

/* hover state */
.post-categories .category-box:hover {
  background-color: #ff3333; /* brighter red on hover */
  color: #000;
  box-shadow: 0 0 12px #ff3333, 0 0 25px #ff3333; /* stronger glow */
  transform: translateY(-3px);
}

/* small-screen adjustments */
@media (max-width: 480px) {
  .post-categories { gap: 8px; }
  .post-categories .category-box { padding: 5px 10px; font-size: 0.85em; }
}


/* ─────────────────────────────────────────────────────────────
   🌟 Full Width for Single Posts When Sidebar Hidden — Label 1
   Applies only when <body> has the class: hide-sidebar
   Add this to your child theme stylesheet or Appearance → Customize → Additional CSS
   ───────────────────────────────────────────────────────────── */

body.single-post.hide-sidebar .container,
body.single-post.hide-sidebar .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

body.single-post.hide-sidebar .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* Force main column full width */
body.single-post.hide-sidebar .col-xl-8,
body.single-post.hide-sidebar .css_prefix-blog-main-list,
body.single-post.hide-sidebar .content-area,
body.single-post.hide-sidebar .site-main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide sidebar completely on regular posts when class present */
body.single-post.hide-sidebar .sidebar,
body.single-post.hide-sidebar .widget-area,
body.single-post.hide-sidebar .sidebar-service-right,
body.single-post.hide-sidebar .col-xl-4 {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
}

/* Small inner padding for readability (optional) */
body.single-post.hide-sidebar .css_prefix-blog-detail,
body.single-post.hide-sidebar .entry-content {
    padding: 0 15px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* ─────────────────────────────────────────────────────────────
   End Label 1
   ───────────────────────────────────────────────────────────── */


/* Display Post Types Last Resort Override */
.my-dpt-instance .dpt-title,
.my-dpt-instance .dpt-post-title {
  font-family: Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  color: #fff !important;
  text-shadow:
    0 0 4px #ff0000,
    0 0 8px #ff0000,
    0 0 12px #ff0000,
    0 0 18px #ffffff,
    0 0 24px #ffffff;
}

/* Style the top title (sidebar widget / main heading) */
.my-dpt-instance .dpt-main-title {   /* replace .dpt-main-title with the actual class */
  font-family: Arial, sans-serif;
  font-size: 21px !important;        /* change size as needed */
  font-weight: 600;
  color: #fff !important;         /* change color as needed */
  text-shadow: none;                  /* optional: remove or add your own */

  /* ---------- CENTERING FIX ---------- */
  display: flex;                     /* enables flexbox layout */
  justify-content: center;           /* centers children horizontally */
  align-items: center;               /* centers children vertically (if needed) */
  text-align: center;                /* fallback for older browsers / inline content */
  width: 100%;                       /* ensures the element takes full available width */
  box-sizing: border-box;            /* prevents width issues with padding */
}






/* ============================================================
   Video-HD-mp4 CSS
   ============================================================ */
/* Desktop */
#Video-HD-mp4 {
  max-width: 75%;
  max-height: 80vh;         /* 👈 limits height to 80% of viewport */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;      /* ensures no cropping, video stays proportional */
}

/* Mobile – keeps videos readable without being oversized */
@media (max-width: 768px) {
  #Video-HD-mp4 {
    max-width: 100%;
    max-height: 60vh;       /* 👈 tall videos become much smaller on phones */
    width: auto;
    height: auto;
    margin: 0 auto;
    /* removed width:100% and !important to prevent tall videos from stretching */
  }
}






/* --- UNIVERSAL ZOOM & SPACING --- */

/* 1. Targets images in Gutenberg blocks and standard content */
.wp-block-image, .wp-block-image img, .entry-content img, .post-content img {
    transition: transform 0.3s ease-in-out !important;
}

/* 2. Add consistent spacing to all image blocks */
.wp-block-image {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}









/* --- ELECTRIC BLUE ANIMATED GLOW --- */

/* 1. Base style for images */
.wp-block-image img, .entry-content img {
    /* We only transition the zoom here so it doesn't fight the electric animation */
    transition: transform 0.3s ease !important;
    border: 2px solid transparent !important;
    border-radius: 6px;
}

/* 2. Hover trigger (Starts the electric pulse) */
.wp-block-image:hover img, .entry-content img:hover {
    /* 0.6s is how fast it buzzes. 'infinite' makes it loop forever while hovering */
    animation: electricPulse 0.6s infinite !important;
    cursor: pointer;
}

/* 3. The Animation Keyframes (The moving electricity effect) */
@keyframes electricPulse {
    0% {
        box-shadow: 0 0 10px #00d4ff, 0 0 20px #0055ff, 0 0 30px #0000aa;
        border-color: #00d4ff;
    }
    25% {
        /* Flashes bright white/cyan (the spark) */
        box-shadow: 0 0 15px #ffffff, 0 0 35px #00d4ff, 0 0 60px #0055ff;
        border-color: #ffffff;
    }
    50% {
        /* Dims down quickly */
        box-shadow: 0 0 5px #00d4ff, 0 0 15px #0055ff, 0 0 25px #0000aa;
        border-color: #00d4ff;
    }
    75% {
        /* Surges back out */
        box-shadow: 0 0 20px #00d4ff, 0 0 40px #0055ff, 0 0 50px #0000aa;
        border-color: #00d4ff;
    }
    100% {
        /* Returns to start */
        box-shadow: 0 0 10px #00d4ff, 0 0 20px #0055ff, 0 0 30px #0000aa;
        border-color: #00d4ff;
    }
}







/* Desktop: leave your inline width alone */
/* Mobile: force all videos to fit */
@media (max-width: 768px) {
    video {
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}