/**
 * AWP - Group Hover Widget Styles
 * 
 * Base styles for the group hover functionality.
 * Hover rule transformations are handled by JavaScript.
 */

/* Container with Group Hover enabled */
[data-awp-group-hover-parent="yes"] {
    /* Ensure the container properly captures mouse events */
    position: relative;
}

/* Child widgets that respond to group hover - base transitions */
[data-awp-group-hover-child="yes"],
[data-awp-group-hover-child="yes"] *,
[data-awp-group-hover-child="yes"] img,
[data-awp-group-hover-child="yes"] .elementor-widget-container,
[data-awp-group-hover-child="yes"] .elementor-image,
[data-awp-group-hover-child="yes"] .elementor-heading-title,
[data-awp-group-hover-child="yes"] .elementor-button,
[data-awp-group-hover-child="yes"] .elementor-button-wrapper,
[data-awp-group-hover-child="yes"] .elementor-icon,
[data-awp-group-hover-child="yes"] .elementor-icon i,
[data-awp-group-hover-child="yes"] .elementor-icon svg {
    transition: all 0.3s ease;
}

/* 
 * The .awp-group-hover-active class is added by JavaScript
 * when the parent container is hovered.
 * 
 * The JavaScript also dynamically generates CSS rules that:
 * 1. Convert :hover selectors to .awp-group-hover-active selectors
 * 2. Disable direct :hover on group hover children
 */

/* Fallback for simple hover effects using CSS :has() (modern browsers only) */
@supports selector(:has(*)) {
    /* This provides immediate hover effect while JS processes rules */
    [data-awp-group-hover-parent="yes"]:hover [data-awp-group-hover-child="yes"].awp-group-hover-active {
        /* Active state indicator - actual styles come from JS-generated rules */
    }
}