/**
 * Universal Element Link - Frontend Styles
 * 
 * This stylesheet provides all the visual styling and hover effects
 * for elements that have Universal Links applied to them.
 * 
 * Author: Douglas Corso
 * Version: 1.0.0
 */

/* ==========================================================================
   Base Universal Link Element Styles
   ========================================================================== */

/**
 * Base styles for all elements with Universal Links
 * Provides smooth transitions and relative positioning for transform effects
 */
.universal-element-link {
    transition: all 0.3s ease;
    position: relative;
}

/* ==========================================================================
   Hover Effect Variations
   ========================================================================== */

/**
 * Default hover effect - Transform Only
 * Applies a subtle upward movement on hover for visual feedback
 */
.universal-element-link[data-hover-effect="transform"]:hover {
    transform: translateY(-3px) !important;
}

/**
 * Opacity only hover effect
 * Reduces opacity to indicate hover state without movement
 */
.universal-element-link[data-hover-effect="opacity"]:hover {
    opacity: 0.8;
}

/**
 * Combined hover effect - Opacity + Transform
 * Combines both opacity reduction and upward movement for enhanced feedback
 */
.universal-element-link[data-hover-effect="both"]:hover {
    opacity: 0.8;
    transform: translateY(-3px) !important;
}

/**
 * No hover effect
 * Explicitly disables any hover effects while maintaining functionality
 */
.universal-element-link[data-hover-effect="none"]:hover {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Interactive Elements Preservation
   ========================================================================== */

/**
 * Ensure internal interactive elements maintain their functionality
 * These elements should remain clickable and preserve their original behavior
 */
.universal-element-link a,
.universal-element-link button,
.universal-element-link .elementor-button,
.universal-element-link input,
.universal-element-link select,
.universal-element-link textarea {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/**
 * Class for elements that should not trigger the universal link
 * Add 'no-link' class to any element that should maintain its original behavior
 */
.universal-element-link .no-link {
    pointer-events: auto;
    cursor: default !important;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

/**
 * Loading state styling
 * Applied temporarily when a link is being processed
 */
.universal-element-link.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ==========================================================================
   Responsive Design Adjustments
   ========================================================================== */

/**
 * Mobile and tablet optimizations
 * Reduces transition duration and disables transform effects on smaller screens
 * for better touch interaction experience
 */
@media (max-width: 768px) {
    .universal-element-link {
        transition: all 0.2s ease;
    }
    
    /* Disable transform effects on mobile for better touch experience */
    .universal-element-link[data-hover-effect="transform"]:hover,
    .universal-element-link[data-hover-effect="both"]:hover {
        transform: none;
    }
}

/* ==========================================================================
   Accessibility Features
   ========================================================================== */

/**
 * High contrast mode support
 * Provides better visibility for users with visual impairments
 */
@media (prefers-contrast: high) {
    .universal-element-link:hover {
        outline: 2px solid currentColor;
    }
}

/**
 * Reduced motion support
 * Respects user preferences for reduced motion and animations
 */
@media (prefers-reduced-motion: reduce) {
    .universal-element-link {
        transition: none;
    }
    
    .universal-element-link:hover {
        transform: none;
    }
}

/* ==========================================================================
   Focus States for Keyboard Navigation
   ========================================================================== */

/**
 * Focus styles for keyboard navigation
 * Provides clear visual indication when element is focused via keyboard
 */
.universal-element-link:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/**
 * Remove focus outline when focused via mouse
 * Maintains accessibility while providing clean mouse interactions
 */
.universal-element-link:focus:not(:focus-visible) {
    outline: none;
}