/**
 * Styles frontend pour Group Link Extension
 * Le lien est positionné en absolu par-dessus le contenu du group
 */

/* Lien en position absolue par-dessus le group */
.group-link-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    text-decoration: none !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* S'assurer que le group parent a une position relative */
.wp-block-group:has(.group-link-overlay) {
    position: relative !important;
}

/* Améliorer l'accessibilité au focus */
.group-link-overlay:focus {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
}

/* S'assurer que les éléments interactifs à l'intérieur du group restent cliquables */
.wp-block-group:has(.group-link-overlay) a:not(.group-link-overlay),
.wp-block-group:has(.group-link-overlay) button:not(.group-link-overlay),
.wp-block-group:has(.group-link-overlay) input:not(.group-link-overlay),
.wp-block-group:has(.group-link-overlay) select:not(.group-link-overlay),
.wp-block-group:has(.group-link-overlay) textarea:not(.group-link-overlay) {
    position: relative !important;
    z-index: 2 !important;
}

/* Support pour les navigateurs qui ne supportent pas :has() */
.wp-block-group.has-group-link {
    position: relative !important;
}

.wp-block-group.has-group-link .group-link-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    text-decoration: none !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-group.has-group-link .group-link-overlay:focus {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
}

.wp-block-group.has-group-link a:not(.group-link-overlay),
.wp-block-group.has-group-link button:not(.group-link-overlay),
.wp-block-group.has-group-link input:not(.group-link-overlay),
.wp-block-group.has-group-link select:not(.group-link-overlay),
.wp-block-group.has-group-link textarea:not(.group-link-overlay) {
    position: relative !important;
    z-index: 2 !important;
}

/* ========================================
   ANIMATIONS HOVER POUR GROUP LINK
   Utilisation de :has() pour animer le block group parent
   ======================================== */

/* Animation 1: Zoom léger */
.wp-block-group.group-link-hover-zoom:has(.group-link-overlay:hover) {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Animation 2: Translate vers le haut */
.wp-block-group.group-link-hover-lift:has(.group-link-overlay:hover) {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Animation 3: Rotation légère */
.wp-block-group.group-link-hover-rotate:has(.group-link-overlay:hover) {
    transform: rotate(1deg);
    transition: transform 0.3s ease;
}

/* Animation 4: Scale et translate combinés */
.wp-block-group.group-link-hover-scale-lift:has(.group-link-overlay:hover) {
    transform: scale(1.05) translateY(-3px);
    transition: transform 0.3s ease;
}

/* Animation 5: Pulsation douce */
.wp-block-group.group-link-hover-pulse:has(.group-link-overlay:hover) {
    animation: group-link-pulse 1.5s ease-in-out infinite;
}

@keyframes group-link-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation 6: Glissement latéral */
.wp-block-group.group-link-hover-slide:has(.group-link-overlay:hover) {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

/* Animation 7: Effet de profondeur (box-shadow) */
.wp-block-group.group-link-hover-shadow:has(.group-link-overlay:hover) {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

/* Animation 8: Scale asymétrique */
.wp-block-group.group-link-hover-skew:has(.group-link-overlay:hover) {
    transform: scale(1.05) skewX(-2deg);
    transition: transform 0.3s ease;
}

/* Animation 9: Bounce léger */
.wp-block-group.group-link-hover-bounce:has(.group-link-overlay:hover) {
    animation: group-link-bounce 0.6s ease;
}

@keyframes group-link-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* Animation 10: Fade avec scale */
.wp-block-group.group-link-hover-fade-scale:has(.group-link-overlay:hover) {
    transform: scale(1.08);
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Amélioration générale : transition par défaut pour tous les groups avec lien */
.wp-block-group.has-group-link {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   FALLBACK POUR NAVIGATEURS SANS SUPPORT :has()
   Utilisation de JavaScript pour ajouter une classe au survol
   ======================================== */

/* Fallback : Animation sur le group quand il a la classe .group-link-hovering */
.wp-block-group.group-link-hover-zoom.group-link-hovering {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-lift.group-link-hovering {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-rotate.group-link-hovering {
    transform: rotate(1deg);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-scale-lift.group-link-hovering {
    transform: scale(1.05) translateY(-3px);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-pulse.group-link-hovering {
    animation: group-link-pulse 1.5s ease-in-out infinite;
}

.wp-block-group.group-link-hover-slide.group-link-hovering {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-shadow.group-link-hovering {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.wp-block-group.group-link-hover-skew.group-link-hovering {
    transform: scale(1.05) skewX(-2deg);
    transition: transform 0.3s ease;
}

.wp-block-group.group-link-hover-bounce.group-link-hovering {
    animation: group-link-bounce 0.6s ease;
}

.wp-block-group.group-link-hover-fade-scale.group-link-hovering {
    transform: scale(1.08);
    opacity: 0.9;
    transition: all 0.3s ease;
}