/**
 * Blocksy Theme Integration
 * Maps Blocksy's CSS variables to our custom theme variables
 * and ensures proper color inheritance
 */

:root {
    /* Map Blocksy palette colors to our theme variables */
    --theme-accent-color: var(--paletteColor1, var(--wp--preset--color--palette-color-1, #3366FF));
    --theme-accent-color-light: color-mix(in srgb, var(--theme-accent-color) 10%, transparent);
    --theme-accent-color-lighter: color-mix(in srgb, var(--theme-accent-color) 5%, transparent);
    --theme-accent-color-dark: color-mix(in srgb, var(--theme-accent-color) 120%, black);
    --theme-accent-color-darker: color-mix(in srgb, var(--theme-accent-color) 140%, black);
    --theme-accent-color-shadow: color-mix(in srgb, var(--theme-accent-color) 25%, transparent);
    
    /* Fallback for browsers that don't support color-mix */
    --theme-accent-color-light-fallback: rgba(51, 102, 255, 0.1);
    --theme-accent-color-lighter-fallback: rgba(51, 102, 255, 0.05);
    --theme-accent-color-dark-fallback: #2952CC;
    --theme-accent-color-darker-fallback: #1f3d99;
    --theme-accent-color-shadow-fallback: rgba(51, 102, 255, 0.25);
    
    /* Map other Blocksy colors */
    --theme-heading-color: var(--headings-color, var(--color, #1f2937));
    --theme-text-color: var(--color, #4b5563);
    --theme-background-color: var(--backgroundColor, #ffffff);
}

/* Force SVG icons to be visible */
svg.lucide, 
svg.lucide-check, 
svg.lucide-phone, 
svg.lucide-plus,
.call-reason-check svg,
.core-service-content svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure icon strokes use the accent color */
svg[stroke="var(--theme-accent-color)"] {
    stroke: var(--paletteColor1, var(--wp--preset--color--palette-color-1, #3366FF)) !important;
}

/* Alternative selector for icons in patterns */
.call-reason-check svg path,
.core-service-content svg path {
    stroke: var(--paletteColor1, var(--wp--preset--color--palette-color-1, #3366FF)) !important;
}

/* Ensure backgrounds use the light accent color */
.call-reason-check {
    background: color-mix(in srgb, var(--paletteColor1, #3366FF) 10%, transparent) !important;
    background: var(--theme-accent-color-light-fallback) !important;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .call-reason-check {
        background: color-mix(in srgb, var(--paletteColor1, #3366FF) 10%, transparent) !important;
    }
}

/* Service icon backgrounds */
.core-service-content > .wp-block-group:first-child,
.core-service-content .wp-block-group .wp-block-group[style*="border-radius:50%"] {
    background: color-mix(in srgb, var(--paletteColor1, #3366FF) 10%, transparent) !important;
    background: var(--theme-accent-color-light-fallback) !important;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .core-service-content > .wp-block-group:first-child,
    .core-service-content .wp-block-group .wp-block-group[style*="border-radius:50%"] {
        background: color-mix(in srgb, var(--paletteColor1, #3366FF) 10%, transparent) !important;
    }
}

/* Debug: Make all SVGs temporarily red to confirm they're loading */
.debug-icons svg {
    stroke: red !important;
    fill: none !important;
    display: block !important;
}