/* public/css/kq-bg-core.css - core helpers (robust attached-mode + safe fallbacks)
*/

/* Section wrapper used by shortcode */
.kq-bg-section {
  position: relative;
  overflow: visible;
  min-height: 100vh;
  background: transparent;
  --kq-overlay-z: 0;
}

/* section-scoped canvas if present */
.kq-bg-section .kq-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--kq-overlay-z);
}

/* fallback canvas (used when overlay appended to body) */
.kq-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--kq-overlay-z);
}

/* Force content above overlays (very large z-index to avoid theme stacking surprises) */
.kq-bg-section .kq-bg-content,
.kq-leaderboard,
.kq-bg-content {
  position: relative !important;
  z-index: 100001 !important;
  box-sizing: border-box;
  pointer-events: auto !important;
}

/* Global overlay containers (default absolute; JS may switch to fixed for rare full-screen fallback) */
.kq-bg-asteroids-overlay,
.kq-bg-fairy-overlay,
.kq-bg-firecrackers-overlay,
.kq-bg-bouncing-overlay,
.kq-bg-snake-overlay,
.kq-bg-ocean-overlay,
.kq-bg-moonrain-overlay,
.kq-bg-generic-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0 !important;
}

/* when JS marks ANY overlay as auto full (compat fallback), keep fixed fallback
   and ensure it covers the whole document visual (prevents top-only coverage). */
.kq-bg-asteroids-overlay[data-kq-bg-auto="1"],
.kq-bg-fairy-overlay[data-kq-bg-auto="1"],
.kq-bg-firecrackers-overlay[data-kq-bg-auto="1"],
.kq-bg-bouncing-overlay[data-kq-bg-auto="1"],
.kq-bg-snake-overlay[data-kq-bg-auto="1"],
.kq-bg-ocean-overlay[data-kq-bg-auto="1"],
.kq-bg-moonrain-overlay[data-kq-bg-auto="1"],
.kq-bg-generic-overlay[data-kq-bg-auto="1"] {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

/* interactive elements inside overlays must receive pointer events */
.kq-bg-asteroids-overlay .kq-bg-rocket,
.kq-bg-section .kq-bg-rocket,
.kq-bg-fairy-overlay .kq-fairy,
.kq-bg-generic-overlay .kq-bg-interactive {
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}

/* reduced motion helper */
.kq-bg-reduced-motion * { animation: none !important; transition: none !important; }

/* The intent: neutralize solid theme block backgrounds while preserving text color & blending.
   Use conservative defaults that avoid bright white / heavy tinting. */
.kq-bg-active .site-main,
.kq-bg-active .site-content,
.kq-bg-active #primary,
.kq-bg-active .entry-content,
.kq-bg-active .page-content {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  /* subtle dark dim so text keeps contrast, avoids brightening below content */
  background: rgba(0,0,0,0.02) !important;
}

/* For attached mode, prefer making the attach element's children transparent */
.kq-bg-section.kq-bg-attached.kq-bg-active > * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep WP adminbar visible and functional */
.kq-bg-active #wpadminbar,
.kq-bg-section.kq-bg-active #wpadminbar { z-index: 100000 !important; position: relative !important; }

/* small responsive tweak */
@media (max-width:760px) {
  .kq-bg-section .kq-bg-rocket { transform-origin: 40% 50%; }
}