/* ================================================================
   Porch Community Map  –  porch-map.css  v1.0.0
   All colours are driven by CSS custom properties set by PHP
   (includes/settings.php → pcm_output_css_vars → wp_head).
   Fallback values match the plugin defaults so the map works
   even if the <style> block hasn't loaded yet.
   ================================================================ */

/* ── Container & defaults ──────────────────────────────────────── */
.porch-map-wrap {
    /* ── CSS custom properties (overridden by PHP/settings) ── */
    --pcm-active-fill:    #52a96a;
    --pcm-active-hover:   #3d8a52;
    --pcm-inactive-fill:  #d6dce0;
    --pcm-inactive-hover: #b8c4cb;
    --pcm-state-stroke:   #ffffff;
    --pcm-bag-bg:         #ffffff;
    --pcm-bag-stroke:     #2d6e3e;
    --pcm-badge-bg:       #e74c3c;
    --pcm-badge-text:     #ffffff;
    --pcm-tooltip-link:   #2d6e3e;
    --pcm-tooltip-hover:  #1a4a28;

    position: relative;
    max-width: 960px;   /* overridden by PHP inline style */
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    user-select: none;
}

.porch-map-wrap svg#porch-us-map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ── State paths ─────────────────────────────────────────────── */
.porch-state {
    fill:         var(--pcm-inactive-fill);
    stroke:       var(--pcm-state-stroke);
    stroke-width: 1.2;
    cursor:       default;
    transition:   fill 0.18s ease;
    outline:      none;
}

.porch-state:hover {
    fill: var(--pcm-inactive-hover);
}

/* Active state — has ≥1 published program */
.porch-state.pcm-active {
    fill:   var(--pcm-active-fill);
    cursor: pointer;
}

.porch-state.pcm-active:hover {
    fill: var(--pcm-active-hover);
}

/* Keyboard/click focus highlight */
.porch-state.pcm-focused {
    fill:         var(--pcm-active-hover);
    stroke:       var(--pcm-state-stroke);
    stroke-width: 2;
}

/* Wikipedia SVG internal layers — re-style after stripping its <defs> */
.porch-map-wrap svg .borders {
    stroke:       var(--pcm-state-stroke);
    stroke-width: 1;
    fill:         none;
}

/* AK/HI separator boxes (dashed line surrounding insets) */
.porch-map-wrap svg .separator1 {
    stroke:       #b0bec5;
    stroke-width: 1.2;
    fill:         none;
    stroke-dasharray: 3 2;
}

/* DC marker circle stroke (so the small green dot has a visible edge) */
.porch-map-wrap svg .dccircle {
    stroke:       var(--pcm-state-stroke);
    stroke-width: 1.2;
}

/* ── Inset box borders & labels (AK / HI) ───────────────────── */
.porch-inset-box {
    fill:            none;
    stroke:          #b0bec5;
    stroke-width:    0.8;
    stroke-dasharray: 3 2;
}

.porch-inset-label {
    font-size:        9px;
    fill:             #78909c;
    font-family:      sans-serif;
    pointer-events:   none;
}

/* ── Grocery-bag icon group ──────────────────────────────────── */
.pcm-bag-group {
    cursor: pointer;
}

/* White circle background */
.pcm-bag-bg {
    fill:   var(--pcm-bag-bg);
    stroke: var(--pcm-bag-stroke);
    stroke-width: 1.5;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
    transition: r 0.15s ease;
}

.pcm-bag-group:hover .pcm-bag-bg,
.pcm-bag-group:focus .pcm-bag-bg {
    stroke-width: 2;
}

/* Bag drawing */
.pcm-bag-icon {
    fill:             none;
    stroke:           var(--pcm-bag-stroke);
    stroke-width:     1.4;
    stroke-linecap:   round;
    stroke-linejoin:  round;
    pointer-events:   none;
}

/* Badge bubble */
.pcm-badge-bg {
    fill: var(--pcm-badge-bg);
}

.pcm-badge-text {
    fill:               var(--pcm-badge-text);
    font-size:          10px;
    font-weight:        700;
    font-family:        sans-serif;
    dominant-baseline:  central;
    text-anchor:        middle;
    pointer-events:     none;
}

/* ── Tooltip popup ───────────────────────────────────────────── */
.pcm-tooltip {
    position:      absolute;
    z-index:       9999;
    background:    #ffffff;
    border:        1px solid #c8d4da;
    border-radius: 8px;
    box-shadow:    0 6px 20px rgba(0,0,0,0.14);
    padding:       12px 16px 10px;
    min-width:     170px;
    max-width:     280px;
    pointer-events: none;
    opacity:        0;
    transform:      translateY(4px);
    transition:     opacity 0.15s ease, transform 0.15s ease;
}

.pcm-tooltip.pcm-tooltip--visible {
    pointer-events: auto;
    opacity:        1;
    transform:      translateY(0);
}

/* Downward caret arrow */
.pcm-tooltip::after {
    content:    '';
    position:   absolute;
    bottom:     -7px;
    left:       50%;
    transform:  translateX(-50%) rotate(45deg);
    width:      12px;
    height:     12px;
    background: #ffffff;
    border-right:  1px solid #c8d4da;
    border-bottom: 1px solid #c8d4da;
}

.pcm-tooltip__state {
    font-size:   12px;
    font-weight: 700;
    color:       #1a3024;
    margin:      0 0 8px;
    padding-bottom: 7px;
    border-bottom:  1px solid #eef1f3;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.pcm-tooltip__links {
    list-style: none;
    margin:     0;
    padding:    0;
}

.pcm-tooltip__links li {
    margin:  0;
    padding: 2px 0;
}

.pcm-tooltip__links a {
    display:     block;
    font-size:   13px;
    color:       var(--pcm-tooltip-link);
    text-decoration: none;
    line-height: 1.4;
    padding:     2px 0;
    transition:  color 0.1s;
}

.pcm-tooltip__links a:hover {
    color:           var(--pcm-tooltip-hover);
    text-decoration: underline;
}

.pcm-tooltip__links a::before {
    content: '→ ';
    opacity: 0.55;
}

/* ── Legend ──────────────────────────────────────────────────── */
.pcm-legend {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             20px;
    margin-top:      10px;
    padding:         10px 14px;
    font-size:       13px;
    color:           var(--pcm-legend-text, #546e7a);
    background:      var(--pcm-legend-bg, transparent);
    border:          1px solid var(--pcm-legend-border, transparent);
    border-radius:   6px;
}

.pcm-legend__item {
    display:     flex;
    align-items: center;
    gap:         7px;
}

.pcm-legend__swatch {
    width:        18px;
    height:       18px;
    border-radius: 4px;
    border:       1px solid rgba(0,0,0,0.1);
    flex-shrink:  0;
}

.pcm-legend__swatch--active   { background: var(--pcm-active-fill); }
.pcm-legend__swatch--inactive { background: var(--pcm-inactive-fill); }

.pcm-legend__bag {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    border-radius:   50%;
    border:          1.5px solid var(--pcm-bag-stroke);
    background:      var(--pcm-bag-bg);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pcm-tooltip {
        max-width:  220px;
        font-size:  12px;
    }
    .pcm-legend {
        gap:       12px;
        font-size: 11px;
    }
}