/**
 * Ward Accent Color Utility Classes
 *
 * Reusable utility classes for applying ward accent colors to Elementor elements.
 * Uses the --ward-accent-color CSS variable that's automatically injected on all pages.
 *
 * @package SaintsCore
 * @version 1.0.0
 * @since 1.9.2
 */

/* ==========================================================================
   Text Color Utilities
   ========================================================================== */

/**
 * Apply ward accent color to text
 * Usage: Add "ward-accent-color" to CSS Classes field
 */
.ward-accent-color {
    color: var(--ward-accent-color, #0C6CB6) !important;
}

/* ==========================================================================
   Background Color Utilities
   ========================================================================== */

/**
 * Apply ward accent color as background
 * Usage: Add "ward-accent-bg" to CSS Classes field
 */
.ward-accent-bg {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
}

/**
 * Light background with 10% opacity
 * Usage: Add "ward-accent-bg-light" to CSS Classes field
 */
.ward-accent-bg-light {
    background-color: color-mix(in srgb, var(--ward-accent-color, #0C6CB6) 10%, white) !important;
}

/**
 * Medium background with 20% opacity
 * Usage: Add "ward-accent-bg-medium" to CSS Classes field
 */
.ward-accent-bg-medium {
    background-color: color-mix(in srgb, var(--ward-accent-color, #0C6CB6) 20%, white) !important;
}

/* ==========================================================================
   Border Utilities
   ========================================================================== */

/**
 * Apply ward accent color to borders
 * Usage: Add "ward-accent-border" to CSS Classes field
 * Note: Element must already have a border width set
 */
#ward-id-accent-border {
    border-color: var(--ward-accent-color, #0C6CB6) !important;
}

.ward-accent-border {
    border-color: var(--ward-accent-color, #0C6CB6) !important;
}

.ward-accent-border .elementor-button {
    border-color: var(--ward-accent-color, #0C6CB6) !important;
}
/**
 * Border top only
 * Usage: Add "ward-accent-border-top" to CSS Classes field
 */
.ward-accent-border-top {
    border-top: 3px solid var(--ward-accent-color, #0C6CB6) !important;
}

/**
 * Border bottom only
 * Usage: Add "ward-accent-border-bottom" to CSS Classes field
 */
.ward-accent-border-bottom {
    border-bottom: 3px solid var(--ward-accent-color, #0C6CB6) !important;
}

/**
 * Border left only
 * Usage: Add "ward-accent-border-left" to CSS Classes field
 */
.ward-accent-border-left {
    border-left: 3px solid var(--ward-accent-color, #0C6CB6) !important;
}

/* ==========================================================================
   Button Utilities
   ========================================================================== */

/**
 * Complete button styling with ward accent color
 * Usage: Add "ward-accent-button" to button CSS Classes field
 */
.ward-accent-button {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    border-color: var(--ward-accent-color, #0C6CB6) !important;
    color: white !important;
}

.ward-accent-button:hover {
    background-color: color-mix(in srgb, var(--ward-accent-color, #0C6CB6) 85%, black) !important;
    border-color: color-mix(in srgb, var(--ward-accent-color, #0C6CB6) 85%, black) !important;
}

/**
 * Outline button with ward accent color
 * Usage: Add "ward-accent-button-outline" to button CSS Classes field
 */
.ward-accent-button-outline {
    background-color: transparent !important;
    border: 2px solid var(--ward-accent-color, #0C6CB6) !important;
    color: var(--ward-accent-color, #0C6CB6) !important;
}

.ward-accent-button-outline:hover {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    color: white !important;
}

/* ==========================================================================
   Icon Utilities
   ========================================================================== */

/**
 * Icon with ward accent color
 * Usage: Add "ward-accent-icon" to icon widget CSS Classes field
 * Note: .ward-accent-color also works, this is just more semantic
 */
.ward-accent-icon .elementor-icon {
    color: var(--ward-accent-color, #0C6CB6) !important;
    fill: var(--ward-accent-color, #0C6CB6) !important;
}

.ward-accent-icon .elementor-icon svg {
    color: var(--ward-accent-color, #0C6CB6) !important;
    fill: var(--ward-accent-color, #0C6CB6) !important;
}

.ward-accent-icon .elementor-icon-list-icon svg {
    color: var(--ward-accent-color, #0C6CB6) !important;
    fill: var(--ward-accent-color, #0C6CB6) !important;
}
/**
 * Icon with background circle in ward accent color
 * Usage: Add "ward-accent-icon-bg" to icon widget CSS Classes field
 */
.ward-accent-icon-bg i {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    color: white !important;
    border-radius: 50%;
    padding: 15px;
}

/* ==========================================================================
   Overlay Utilities
   ========================================================================== */

/**
 * Background overlay with ward accent color
 * Usage: Add "ward-accent-overlay" to section/column CSS Classes field
 * Note: Section must have Background Overlay enabled in Elementor
 */
.ward-accent-overlay > .elementor-background-overlay {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    opacity: 0.9;
}

/**
 * Light overlay (50% opacity)
 * Usage: Add "ward-accent-overlay-light" to section/column CSS Classes field
 */
.ward-accent-overlay-light > .elementor-background-overlay {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    opacity: 0.5;
}

/**
 * Dark overlay (95% opacity)
 * Usage: Add "ward-accent-overlay-dark" to section/column CSS Classes field
 */
.ward-accent-overlay-dark > .elementor-background-overlay {
    background-color: var(--ward-accent-color, #0C6CB6) !important;
    opacity: 0.95;
}

/* ==========================================================================
   Heading Utilities
   ========================================================================== */

/**
 * Heading with bottom border in ward accent color
 * Usage: Add "ward-accent-heading" to heading widget CSS Classes field
 */
.ward-accent-heading {
    border-bottom: 3px solid var(--ward-accent-color, #0C6CB6);
    padding-bottom: 10px;
}

/**
 * Heading with left border accent
 * Usage: Add "ward-accent-heading-left" to heading widget CSS Classes field
 */
.ward-accent-heading-left {
    border-left: 4px solid var(--ward-accent-color, #0C6CB6);
    padding-left: 15px;
}

/* ==========================================================================
   Divider Utilities
   ========================================================================== */

/**
 * Divider with ward accent color
 * Usage: Add "ward-accent-divider" to divider widget CSS Classes field
 */
.ward-accent-divider .elementor-divider-separator {
    border-top-color: var(--ward-accent-color, #0C6CB6) !important;
}

/* ==========================================================================
   Card/Box Utilities
   ========================================================================== */

/**
 * Card with ward accent top border
 * Usage: Add "ward-accent-card" to container/column CSS Classes field
 */
.ward-accent-card {
    border-top: 4px solid var(--ward-accent-color, #0C6CB6) !important;
}

/**
 * Card with ward accent shadow
 * Usage: Add "ward-accent-shadow" to container/column CSS Classes field
 */
.ward-accent-shadow {
    box-shadow: 0 4px 6px color-mix(in srgb, var(--ward-accent-color, #0C6CB6) 30%, transparent) !important;
}