/*
Theme Enhancer Themer - Non-destructive overlay styles
Goal: do NOT reset typography, spacing, layout grids. Only add surface effects.
*/

/* ===========================
   Whole-page background overlay (transparent gradient)
   Uses ::before so it doesn't touch templates/layout.
   isolation:isolate ensures z-index works reliably.
=========================== */

body.teh-bg-enabled {
  position: relative;
  isolation: isolate;
}

body.teh-bg-enabled::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--teh-bg);
  opacity: var(--teh-bg-opacity);
  filter: blur(var(--teh-bg-blur));
  transform: translateZ(0);
  pointer-events: none;
  z-index: -1;
}

/* If theme sets a strong body background color, this helps the overlay show through.
   We keep it minimal to avoid breaking themes. */
body.teh-bg-enabled {
  background-color: transparent;
}

/* ===========================
   Panel variables
=========================== */

body.teh-enabled {
  --teh-panel-bg: rgba(255,255,255,var(--teh-opacity));
  --teh-panel-border: rgba(255,255,255,0.18);
  --teh-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Mode handling */
body.teh-enabled.teh-mode-dark {
  --teh-panel-bg: rgba(20,20,24,var(--teh-opacity));
  --teh-panel-border: rgba(255,255,255,0.10);
}

body.teh-enabled.teh-mode-light {
  --teh-panel-bg: rgba(255,255,255,var(--teh-opacity));
  --teh-panel-border: rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
  body.teh-enabled.teh-mode-auto {
    --teh-panel-bg: rgba(20,20,24,var(--teh-opacity));
    --teh-panel-border: rgba(255,255,255,0.10);
  }
}

/* Presets */
body.teh-enabled.teh-preset-glass {
  --teh-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

body.teh-enabled.teh-preset-neon {
  --teh-shadow:
    0 0 calc(30px * var(--teh-glow)) rgba(120,220,255,0.35),
    0 0 calc(60px * var(--teh-glow)) rgba(255,120,220,0.18);
}

body.teh-enabled.teh-preset-minimal {
  --teh-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

/* Default safe targets (conservative) */
body.teh-enabled .site-header,
body.teh-enabled header,
body.teh-enabled nav,
body.teh-enabled .wp-block-group,
body.teh-enabled .wp-block-cover__inner-container,
body.teh-enabled .entry-content .wp-block-group,
body.teh-enabled .wp-site-blocks .wp-block-group {
  border-radius: var(--teh-radius);
}

body.teh-enabled .site-header,
body.teh-enabled header,
body.teh-enabled nav,
body.teh-enabled .wp-block-group.is-style-default,
body.teh-enabled .wp-block-cover__inner-container {
  background: var(--teh-panel-bg);
  border: 1px solid var(--teh-panel-border);
  box-shadow: var(--teh-shadow);
  -webkit-backdrop-filter: blur(var(--teh-blur));
  backdrop-filter: blur(var(--teh-blur));
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.teh-enabled .site-header,
  body.teh-enabled header,
  body.teh-enabled nav,
  body.teh-enabled .wp-block-group.is-style-default,
  body.teh-enabled .wp-block-cover__inner-container {
    background: rgba(255,255,255,0.92);
  }
  @media (prefers-color-scheme: dark) {
    body.teh-enabled.teh-mode-auto .site-header,
    body.teh-enabled.teh-mode-auto header,
    body.teh-enabled.teh-mode-auto nav {
      background: rgba(20,20,24,0.92);
    }
  }
}

body.teh-enabled .site-header,
body.teh-enabled header,
body.teh-enabled nav,
body.teh-enabled .wp-block-group,
body.teh-enabled .wp-block-cover__inner-container {
  transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

/* ===========================
   Compatibility layering fixes
=========================== */

body.teh-enabled .site-header,
body.teh-enabled header,
body.teh-enabled nav {
  position: relative;
  z-index: 50;
  overflow: visible;
}

body.teh-enabled .sub-menu,
body.teh-enabled .dropdown-menu,
body.teh-enabled .menu .children {
  position: relative;
  z-index: 9999;
}

body.teh-enabled .product-category,
body.teh-enabled .product-categories {
  position: relative;
  z-index: 2;
}