/* =======================================================
   AXM Smart BG Core Layout (v2.0.0)
   Classic Oxygen: Section.axm-smart-bg > .ct-section-inner-wrap > Code Block
   Oxygen 6: Container > Shortcode element [axm_smart_bg] (see "Shortcode layers")
   ======================================================= */

/* Main smart background containers - FIXED */
.axm-smart-bg { 
  position: relative !important;
  overflow: hidden !important;
  z-index: 0; /* Establish stacking context */
  
  /* ANTI-FLASH FIX: Smooth background transitions */
  background-color: transparent;
  transition: background-image 0.3s ease-in-out;
}

/* Prevent flash on initial load - smooth fade in */
.axm-smart-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
  opacity: 0;
  animation: fadeInBackground 0.4s ease-in forwards;
  animation-delay: 0.1s;
}

@keyframes fadeInBackground {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Oxygen inner wrapper is the clipping container - FIXED */
.axm-smart-bg > .ct-section-inner-wrap,
.axm-smart-bg-debug > .ct-section-inner-wrap,
.hero-video > .ct-section-inner-wrap {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important; /* Move spacing to your content wrapper */
  z-index: 1;
  isolation: isolate; /* Creates new stacking context - CRITICAL */
  contain: paint; /* Prevents stray scrollbars on iOS */
}


/* Auto-inserted background layer (video or image) - CRITICAL FIX */
.axm-sb-wrap,
.vbg-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important; /* Behind content but visible */
  pointer-events: none !important;
  overflow: hidden !important;
  
  /* Prevent gray flash during loading */
  background: #000 !important; /* Black instead of gray */
  
}

/* Video iframe/video element - CRITICAL POSITIONING FIX */
.axm-sb-iframe,
.vbg-iframe,
.axm-sb-video-el {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 0; /* Will be set to 1 by JavaScript */
  transition: opacity 800ms ease; /* Slower transition for smoother reveal */
}

/* Poster image covers (shown while video loads) */
.axm-sb-poster,
.vbg-poster {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important; /* Above iframe until video loads */
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 600ms ease;
}

/* Ensure video iframes are properly sized - ENHANCED */
.axm-sb-iframe[src*="vimeo"],
.vbg-iframe[src*="vimeo"] {
  /* Initial size will be overridden by JavaScript */
  width: 100vw;
  height: 56.25vw; /* 16:9 aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

/* Foreground content must sit above the background layer - ENHANCED */
.axm-smart-bg > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child):not(.axm-sb-holder),
.axm-smart-bg-debug > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child):not(.axm-sb-holder),
.hero-video > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child):not(.axm-sb-holder) {
  position: relative !important;
  z-index: 10 !important;
}


/* Utility: absolute child inside Smart BG (opt-out class) */
.axm-smart-bg > .ct-section-inner-wrap > .abs-child {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 20 !important;
}


/* =======================================================
   Shortcode layers (2.0) — Oxygen 6 containers and any shortcode element
   [axm_smart_bg] prints a .axm-sb-layer. Its builder wrapper (e.g. Oxygen 6's
   .oxy-shortcode) becomes .axm-sb-holder and the container around it the
   .axm-sb-host. The :has() rules cover the first paint before scripts run.
   ======================================================= */

.axm-sb-host {
  position: relative;
  isolation: isolate; /* the layer's negative z-index stays inside the container */
}

.axm-sb-holder {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* Separate rule: browsers without :has() drop it without losing .axm-sb-holder. */
:is(.oxy-shortcode, .ct-shortcode, .bde-shortcode):has(> .axm-sb-layer) {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

.axm-sb-layer {
  position: absolute !important;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.axm-sb-image {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.axm-smart-bg .axm-sb-layer.axm-sb-wrap {
  min-height: 0; /* the layer fills its container exactly; no 400px floor */
}

.axm-sb-layer .axm-smart-bg-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.axm-sb-layer .axm-smart-bg-placeholder h2 { margin: 0; font-size: 24px; font-weight: 400; opacity: .5; }
.axm-sb-layer .axm-smart-bg-placeholder p { margin: 10px 0 0; font-size: 14px; opacity: .4; }

/* =======================================================
   Pause / play button (2.0, WCAG 2.2.2)
   Shown only once a video is really moving, or when the visitor paused it.
   ======================================================= */

.axm-sb-pause {
  --axm-sb-btn-size: 32px;
  --axm-sb-btn-bg: rgba(0, 0, 0, .35);
  --axm-sb-btn-inset: 16px;
  position: absolute;
  right: var(--axm-sb-btn-inset);
  bottom: var(--axm-sb-btn-inset);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--axm-sb-btn-size);
  height: var(--axm-sb-btn-size);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--axm-sb-btn-bg);
  color: #fff;
  line-height: 0;
  box-shadow: none;
  opacity: .6;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.axm-sb-pause--left {
  right: auto;
  left: var(--axm-sb-btn-inset);
}

.axm-sb-pause:hover,
.axm-sb-pause:focus {
  opacity: 1;
  background: var(--axm-sb-btn-bg);
  color: #fff;
}

.axm-sb-pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.axm-sb-pause[hidden] {
  display: none !important;
}

.axm-sb-pause__icon {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.axm-sb-pause .axm-sb-pause__icon--play,
.axm-sb-pause.is-paused .axm-sb-pause__icon--pause {
  display: none;
}

.axm-sb-pause.is-paused .axm-sb-pause__icon--play {
  display: block;
}

/* Loading ring (2.0.3): drawn on the button's own dark circle, after the visitor presses
   Play or while a moving video buffers. Fills with download progress; spins a short arc
   while the size is unknown (still, not spinning, for reduced motion). */
.axm-sb-pause__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 200ms ease;
  pointer-events: none;
}

.axm-sb-pause__ring circle {
  fill: none;
  stroke-width: 2;
}

.axm-sb-pause__track {
  stroke: rgba(255, 255, 255, .25);
}

.axm-sb-pause__bar {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 300ms ease;
}

.axm-sb-pause.is-loading {
  opacity: .85;
}

.axm-sb-pause.is-loading .axm-sb-pause__ring {
  opacity: 1;
}

.axm-sb-pause.is-indeterminate .axm-sb-pause__bar {
  stroke-dasharray: 25 75;
  stroke-dashoffset: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: axm-sb-spin 900ms linear infinite;
}

@keyframes axm-sb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .axm-sb-pause.is-indeterminate .axm-sb-pause__bar { animation: none; }
}

/* =======================================================
   Video Background States
   ======================================================= */

/* Video loaded state */
.axm-sb-wrap.video-loaded .axm-sb-iframe,
.vbg-wrap.video-loaded .vbg-iframe {
  opacity: 1 !important;
}

/* Poster fade out when video is ready */
.axm-sb-wrap.video-loaded .axm-sb-poster,
.vbg-wrap.video-loaded .vbg-poster {
  opacity: 0;
}

/* Hide poster completely after fade completes */
.axm-sb-wrap.poster-hidden .axm-sb-poster,
.vbg-wrap.poster-hidden .vbg-poster {
  display: none;
}

/* =======================================================
   Critical Fixes for Common Issues
   ======================================================= */

/* Ensure video container respects section height */
.axm-smart-bg .axm-sb-wrap,
.axm-smart-bg .vbg-wrap {
  min-height: 400px; /* Fallback minimum */
}

/* Override any conflicting Oxygen styles */
.axm-smart-bg .ct-section-inner-wrap {
  min-height: inherit !important;
  display: block !important;
  transform: none !important; /* Prevent transform conflicts */
}

/* Prevent theme/plugin CSS conflicts */
.axm-sb-iframe,
.vbg-iframe {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* =======================================================
   Mobile Optimizations & iOS Safari Fixes
   ======================================================= */

/* Base mobile optimizations */
@media (max-width: 768px) {
  .axm-smart-bg { min-height: 50svh; }
  
  /* Enhanced iOS Safari fixes for hero sections */
  .axm-hero,
  .axm-smart-bg.axm-hero {
    /* Use dynamic viewport units to handle Safari's changing viewport */
    min-height: 100dvh;
    /* Fallback for older iOS versions */
    min-height: 100vh;
    /* Additional fallback using svh (small viewport height) */
    min-height: 100svh;
    
    /* Ensure proper positioning context */
    position: relative;
    overflow: hidden;
    
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Prevent any potential scrolling issues */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Video wrapper adjustments for iPhone Safari */
  .axm-smart-bg .axm-sb-wrap,
  .axm-smart-bg .vbg-wrap {
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Prevent any gaps or spaces */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Ensure wrapper fills entire container on iOS Safari */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Reduce transition times on mobile for better performance */
  .axm-sb-poster,
  .vbg-poster,
  .axm-sb-iframe,
  .vbg-iframe {
    transition: opacity 400ms ease;
  }
  
  /* Enhanced mobile video sizing for iOS Safari - CRITICAL FIX */
  .axm-sb-iframe[src*="vimeo"],
  .vbg-iframe[src*="vimeo"] {
    /* Much more aggressive sizing for iOS Safari */
    width: 300vw !important;
    height: 168.75vw !important; /* 16:9 with massive buffer */
    min-width: 150% !important;
    min-height: 150% !important;
    
    /* Enhanced transform for better centering on iOS */
    transform: translate(-50%, -50%) translateZ(0) !important;
    -webkit-transform: translate(-50%, -50%) translateZ(0) !important;
    
    /* Force proper rendering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* Additional iOS Safari specific fixes */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
  }
  
  /* Additional fixes for portrait videos on mobile */
  .axm-sb-wrap[data-portrait="1"] .axm-sb-iframe,
  .vbg-wrap[data-portrait="1"] .vbg-iframe {
    width: 177.78vh !important; /* 9:16 mobile videos: height * (16/9) */
    height: 105vh !important; /* Slightly oversized to prevent gaps */
  }
  
  /* Enhanced poster image fixes */
  .axm-sb-poster,
  .vbg-poster {
    /* Use cover to fill container */
    object-fit: cover !important;
    object-position: center center !important;
    
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* Specific fixes for iPhone Safari only */
@supports (-webkit-appearance: none) {
  @media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    
    /* Force proper section sizing on actual iPhones */
    .axm-smart-bg.axm-hero,
    .axm-hero.axm-smart-bg {
      /* Use the most reliable viewport unit for iPhone */
      min-height: 100svh !important;
      
      /* Additional safety measures */
      contain: layout;
      isolation: isolate;
      
      /* Ensure full height coverage */
      height: auto;
      display: flex;
      flex-direction: column;
    }
    
    /* Ensure the inner wrap takes full height */
    .axm-smart-bg.axm-hero > .ct-section-inner-wrap,
    .axm-hero.axm-smart-bg > .ct-section-inner-wrap {
      flex: 1;
      min-height: 100%;
      height: 100%;
    }

    /* Enhanced video sizing for iPhone Safari specifically - NUCLEAR OPTION */
    .axm-sb-iframe,
    .vbg-iframe {
      /* Extreme aggressive sizing to combat Safari's quirks */
      width: 400vw !important;
      height: 225vw !important; /* 16:9 with massive buffer */
      
      /* Keep centered positioning - don't override with absolute positioning */
      transform: translate(-50%, -50%) scale(1.1) !important;
      -webkit-transform: translate(-50%, -50%) scale(1.1) !important;
      
      /* Additional iOS Safari hacks */
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      mask-image: radial-gradient(white, black);
    }
  }

  /* Specific fix for larger iPhone screens (Pro Max, etc.) */
  @media screen and (max-width: 768px) and (min-height: 800px) and (-webkit-min-device-pixel-ratio: 2) {
    .axm-sb-iframe,
    .vbg-iframe {
      /* Even more aggressive for larger iPhones */
      width: 450vw !important;
      height: 253vw !important;
      transform: translate(-50%, -50%) scale(1.15) !important;
      -webkit-transform: translate(-50%, -50%) scale(1.15) !important;
      
      /* Force positioning to account for larger screens */
      top: 48% !important; /* Slightly higher positioning */
    }
  }
}

/* Emergency fix for persistent gray space issues */
@media screen and (max-width: 768px) {
  /* If the above doesn't work, this nuclear option should */
  .axm-smart-bg.axm-hero.video-force-visible,
  .axm-hero.axm-smart-bg.video-force-visible {
    background: black !important; /* Hide any potential gray with black background */
  }
  
  .axm-smart-bg.axm-hero.video-force-visible .axm-sb-wrap,
  .axm-smart-bg.axm-hero.video-force-visible .vbg-wrap {
    background: black !important; /* Ensure wrapper has black background too */
  }
}

/* =======================================================
   Debug Mode Enhancements
   ======================================================= */

.axm-smart-bg-debug {
  outline: 2px dashed magenta !important;
  outline-offset: -2px;
}

/* Debug mode visual indicator - shows "AXM Smart BG: tag-name" label on ALL .axm-smart-bg sections
   This is controlled by .axm-show-debug-label class added dynamically via PHP
   The specific tag/mode is read from data-axm-bg-label attribute */
.axm-show-debug-label .axm-smart-bg:not(.axm-sb-has-label)::after {
  content: "AXM Smart BG: " attr(data-axm-bg-label);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Editor label (2.0.1): a real element, so it never merges with a theme's own
   ::after overlay on the section. Shown to users who can edit posts. */
.axm-sb-debug-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 40;
  display: block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font: 600 10px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
  text-align: left;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Fallback if no data attribute is set */
.axm-show-debug-label .axm-smart-bg:not([data-axm-bg-label]):not(.axm-sb-has-label)::after {
  content: "AXM Smart BG";
}

.axm-smart-bg-debug .axm-sb-wrap::before,
.axm-smart-bg-debug .vbg-wrap::before {
  content: "DEBUG: SmartBG active - Video mode";
  position: absolute;
  top: 0; 
  left: 0;
  background: rgba(255, 0, 255, 0.8);
  color: #fff;
  font: 10px/1.2 monospace;
  padding: 4px 6px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 0 4px 0;
}

/* Debug info for image-only mode */
.axm-smart-bg-debug:not(:has(.axm-sb-wrap)):not(:has(.vbg-wrap))::before {
  content: "DEBUG: SmartBG active - Image mode";
  position: absolute;
  top: 0; 
  left: 0;
  background: rgba(0, 150, 255, 0.8);
  color: #fff;
  font: 10px/1.2 monospace;
  padding: 4px 6px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 0 4px 0;
}

/* Enhanced debug visibility for video layers */
.axm-smart-bg-debug .axm-sb-wrap,
.axm-smart-bg-debug .vbg-wrap {
  outline: 2px solid lime !important;
  outline-offset: -2px;
  background: rgba(0, 255, 0, 0.1) !important; /* Slight green tint */
}

.axm-smart-bg-debug .axm-sb-iframe,
.axm-smart-bg-debug .vbg-iframe {
  outline: 2px solid cyan !important;
  outline-offset: -2px;
}

/* =======================================================
   Performance Optimizations
   ======================================================= */

/* Use GPU acceleration for smooth transitions */
.axm-sb-poster,
.vbg-poster,
.axm-sb-iframe,
.vbg-iframe {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: opacity;
}

/* Optimize rendering during transitions */
.axm-sb-wrap,
.vbg-wrap {
  contain: layout style paint;
}

/* =======================================================
   Accessibility Improvements  
   ======================================================= */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .axm-sb-poster,
  .vbg-poster,
  .axm-sb-iframe,
  .vbg-iframe {
    transition: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .axm-smart-bg-debug {
    outline-color: #ff00ff;
    outline-width: 3px;
  }
  
  .axm-smart-bg-debug .axm-sb-wrap::before,
  .axm-smart-bg-debug .vbg-wrap::before {
    background: #ff00ff;
    border: 1px solid #ffffff;
  }
}

/* =======================================================
   Emergency Fixes for Stubborn Video Issues
   ======================================================= */

/* If video still not showing, try this more aggressive approach */
.axm-smart-bg.video-force-visible .axm-sb-wrap,
.axm-smart-bg.video-force-visible .vbg-wrap {
  z-index: 1 !important;
  background: rgba(255, 0, 0, 0.1); /* Debug red tint */
}

.axm-smart-bg.video-force-visible .axm-sb-iframe,
.axm-smart-bg.video-force-visible .vbg-iframe {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(0, 0, 255, 0.1); /* Debug blue tint */
}

.axm-smart-bg.video-force-visible .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap) {
  z-index: 20 !important;
}