/**
 * WPE Position Block Frontend Styles - Fixed
 */

/* Base styling for elements with position control */
.has-position-control {
  box-sizing: border-box;
}

/* Ensure parent containers can handle absolutely positioned children */
.wp-block-group:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-row:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-column:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-columns:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-stack:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-grid:has(> .has-position-control[data-position-type="absolute"]),
.wp-block-group:has(> a.has-position-control[data-position-type="absolute"]),
.wp-block-row:has(> a.has-position-control[data-position-type="absolute"]),
.wp-block-column:has(> a.has-position-control[data-position-type="absolute"]),
.wp-block-columns:has(> a.has-position-control[data-position-type="absolute"]),
.wp-block-stack:has(> a.has-position-control[data-position-type="absolute"]),
.wp-block-grid:has(> a.has-position-control[data-position-type="absolute"]) {
  position: relative !important;
  min-height: 50px;
}

/* Special handling for fixed elements */
.has-position-control[data-position-type="fixed"] {
  /* Default high z-index for fixed elements if none specified */
  z-index: 100;
}

/*
 * Fallbacks for browsers that don't support :has()
 * These make sure containers have position:relative
 */
.wp-block-group,
.wp-block-row,
.wp-block-column,
.wp-block-columns,
.wp-block-stack,
.wp-block-grid {
  position: relative;
}

/* Ensure proper stacking in the frontend */
.has-position-control[style*="z-index"] {
  /* This ensures z-index works correctly */
  position: relative;
}

/* Handle absolute positioning - Force !important to override theme styles */
.has-position-control[data-position-type="absolute"] {
  position: absolute !important;
}

/* Handle fixed positioning */
.has-position-control[data-position-type="fixed"] {
  position: fixed !important;
}

/* Handle relative positioning */
.has-position-control[data-position-type="relative"] {
  position: relative !important;
}

/* Ensure anchor tags with position control work properly */
a.has-position-control {
  display: block;
}

/* Special handling for links that need positioning */
a.has-position-control[data-position-type="absolute"],
a.has-position-control[data-position-type="fixed"],
a.has-position-control[data-position-type="relative"] {
  text-decoration: none;
}

/* Force position rules to apply - these are critical */
.has-position-control[style*="position:absolute"],
.has-position-control[style*="position: absolute"] {
  position: absolute !important;
}

.has-position-control[style*="position:fixed"],
.has-position-control[style*="position: fixed"] {
  position: fixed !important;
}

.has-position-control[style*="position:relative"],
.has-position-control[style*="position: relative"] {
  position: relative !important;
}

/*
 * Force all attribute specifications to be respected by adding !important
 * This ensures theme styles don't override position settings
 */
.has-position-control[style*="top:"] {
  top: var(--wpe-position-top) !important;
}

.has-position-control[style*="bottom:"] {
  bottom: var(--wpe-position-bottom) !important;
}

.has-position-control[style*="left:"] {
  left: var(--wpe-position-left) !important;
}

.has-position-control[style*="right:"] {
  right: var(--wpe-position-right) !important;
}

.has-position-control[style*="height:"] {
  height: var(--wpe-position-height) !important;
}

.has-position-control[style*="width:"] {
  width: var(--wpe-position-width) !important;
}

/*
 * Handle stack block specifically since it might have theme-specific styling
 * This ensures the position attributes work correctly in stack blocks
 */
.wp-block-stack.has-position-control {
  display: block !important;
}

.wp-block-stack.has-position-control[data-position-type="absolute"] {
  position: absolute !important;
}

/* Fix issues with margin/padding potentially breaking absolute positioning */
.has-position-control[data-position-type="absolute"] > * {
  max-width: 100%;
}

.wpe-equal-h100{ height:100% !important; }

._hover-greendark:hover{
  background-color: #b4bba3 !important;
}