/**
 * Where to Buy - Interactive Map Styles
 * 
 * Styles for interactive SVG maps (US and Canada)
 * Both maps now use identical .state class structure
 * 
 * @package Kadence Child Theme
 */

/* ==========================================
   Map Container
   ========================================== */

.wtb-interactive-map {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.wtb-interactive-map svg {
    display: block;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Let SVG inline styles take precedence - only set defaults */
.wtb-interactive-map text {
    pointer-events: none;
}

/* ==========================================
   Desktop Interactive States/Territories
   ========================================== */

@media (min-width: 1024px) {
    
    /* Make regions clickable on desktop - US map */
    .wtb-interactive-map .state,
    .svg-parent-container .state {
        cursor: pointer;
        transition: fill 0.3s ease, opacity 0.3s ease;
    }
    
    /* Make regions clickable on desktop - Canada map (paths with data-region) */
    .wtb-interactive-map path[data-region],
    .svg-parent-container path[data-region] {
        cursor: pointer;
        transition: fill 0.3s ease;
    }
    
    /* Hover fill color for paths - US map */
    .wtb-interactive-map .state:hover path,
    .svg-parent-container .state:hover path {
        fill: var(--global-palette1, #0057A5) !important;
    }
    
    /* Hover fill color for paths - Canada map */
    .wtb-interactive-map path[data-region]:hover,
    .svg-parent-container path[data-region]:hover,
    .wtb-interactive-map path[data-region].province-hover,
    .svg-parent-container path[data-region].province-hover {
        fill: var(--global-palette1, #0057A5) !important;
    }
    
    /* Hover text color change - labels inside states turn white */
    .wtb-interactive-map .state:hover text:not(.out-of-bounds),
    .svg-parent-container .state:hover text:not(.out-of-bounds) {
        fill: #ffffff !important;
    }
    
    /* Hover text color change - out-of-bounds labels turn blue */
    .wtb-interactive-map .state:hover text.out-of-bounds,
    .svg-parent-container .state:hover text.out-of-bounds {
        fill: var(--global-palette1, #0057A5) !important;
        text-decoration: underline;
    }
    
    /* Hover effect for leader lines */
    .wtb-interactive-map .state:hover .leader-line,
    .svg-parent-container .state:hover .leader-line {
        stroke: var(--global-palette1, #0057A5) !important;
    }
    
    /* Canada map - label hover effect (applied via JS) */
    .wtb-interactive-map text.province-label-hover,
    .svg-parent-container text.province-label-hover {
        fill: var(--global-palette1, #0057A5) !important;
    }
    
    /* Focus state for keyboard accessibility */
    .wtb-interactive-map .state:focus,
    .wtb-interactive-map path[data-region]:focus {
        outline: 3px solid var(--global-palette1, #0057A5);
        outline-offset: 2px;
    }
}