/* RS Service Area Map — flat dark styling matched to Red Stone Contracting */

.rs-map-widget{
    --rs-red:#ff0202; --rs-dark:#212121;
    --rs-line:#2e2e2e; --rs-muted:#b3b3b3;
    font-family:'Raleway',Helvetica,Arial,sans-serif;
    color:#fff;
    width:100%;
    box-sizing:border-box;
}
.rs-map-widget *{box-sizing:border-box}

.rs-map-widget .rs-head{text-align:center;margin-bottom:50px}
.rs-map-widget .rs-head h2{
    margin:0 0 16px;padding:0;border:0;
    font-family:'Raleway',Helvetica,Arial,sans-serif;
    font-size:48px;font-weight:700;color:#fff;line-height:1.15;
}
.rs-map-widget .rs-head p{
    margin:0 auto;max-width:680px;
    color:var(--rs-muted);font-size:16px;line-height:1.75;font-weight:500;
}

.rs-map-widget .rs-grid{
    display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:stretch;
}

/* ── MAP CARD ── */
.rs-map-widget .rs-stage{position:relative;border-radius:10px;overflow:hidden;background:var(--rs-dark)}
.rs-map-widget .rs-stage svg{display:block;width:100%;height:auto}

.rs-map-widget .rs-stage .rp{
    cursor:pointer;
    stroke:#000;stroke-width:1.6;
    transition:fill .25s ease, opacity .3s ease;
}
.rs-map-widget .rs-stage .rp:hover{fill:#3a3a3a}
.rs-map-widget .rs-stage .rp.active{fill:var(--rs-red) !important}
.rs-map-widget .rs-stage .rp.dim{opacity:.25}

.rs-map-widget .rs-stage .rt{
    font-family:'Raleway',sans-serif;font-weight:700;
    fill:#fff;pointer-events:none;text-anchor:middle;dominant-baseline:central;
    paint-order:stroke fill;stroke:#000;stroke-width:4px;stroke-linejoin:round;
    font-size:16px;
}
.rs-map-widget .rs-stage .ml{
    font-family:'Raleway',sans-serif;font-weight:600;
    fill:#cfcfcf;pointer-events:none;text-anchor:middle;dominant-baseline:central;
    paint-order:stroke fill;stroke:#000;stroke-width:3px;stroke-linejoin:round;
    font-size:9px;transition:opacity .3s;
}
.rs-map-widget .rs-stage.zoomed .rt{font-size:13px}
.rs-map-widget .rs-stage.zoomed .ml{font-size:8px;fill:#fff}
.rs-map-widget .rs-stage .rt.hide,
.rs-map-widget .rs-stage .ml.hide{opacity:0}

/* HQ marker */
.rs-map-widget .hq-dot{fill:var(--rs-red)}
.rs-map-widget .hq-pulse{
    fill:none;stroke:var(--rs-red);stroke-width:1.2;opacity:.7;
    transform-origin:115px 425px;animation:rsHqPulse 2.4s ease-out infinite;
}
@keyframes rsHqPulse{0%{transform:scale(.4);opacity:.8}80%{transform:scale(2.4);opacity:0}100%{opacity:0}}
.rs-map-widget .hq-tag{
    font-family:'Raleway',sans-serif;font-weight:700;font-size:8.5px;fill:#fff;
    text-anchor:middle;paint-order:stroke fill;stroke:#000;stroke-width:2.5px;
}
/* Overview shows "Oakville HQ"; zoomed-in Halton shows just "HQ" (the Oakville
   city label is already visible right below the marker). */
.rs-map-widget .hq-tag-short{display:none}
.rs-map-widget .rs-stage.zoomed .hq-tag-full{display:none}
.rs-map-widget .rs-stage.zoomed .hq-tag-short{display:inline;font-size:6.5px}

.rs-map-widget .rs-reset{
    position:absolute;top:14px;left:14px;z-index:5;display:none;
    background:#000;border:1px solid #fff;border-radius:30px;color:#fff;
    font:600 12px/1 'Raleway',sans-serif;text-transform:uppercase;padding:10px 18px;cursor:pointer;
    transition:background .2s,border-color .2s;
}
.rs-map-widget .rs-reset:hover{background:var(--rs-red);border-color:var(--rs-red);color:#fff}
.rs-map-widget .rs-reset.show{display:inline-block}

/* ── SIDE PANEL ── */
.rs-map-widget .rs-panel{
    border-radius:10px;background:var(--rs-dark);
    display:flex;flex-direction:column;overflow:hidden;
}
.rs-map-widget .rs-panel-head{padding:26px 26px 20px;border-bottom:1px solid var(--rs-line)}
.rs-map-widget .rs-panel-title{
    font-size:25px;font-weight:700;color:#fff;line-height:1.2;
    font-family:'Raleway',sans-serif;margin:0;padding:0;border:0;
}
.rs-map-widget .rs-panel-count{display:block;margin-top:6px;font-size:13px;color:var(--rs-red);font-weight:600}
.rs-map-widget .rs-panel-sub{margin-top:10px;color:var(--rs-muted);font-size:14px;line-height:1.65;font-weight:500}

.rs-map-widget .rs-panel-body{padding:16px 18px;flex:1;overflow-y:auto;display:flex;flex-direction:column}
.rs-map-widget .rs-rlist{display:flex;flex-direction:column;gap:8px;flex:1}
.rs-map-widget .rs-ritem{
    display:flex;align-items:center;gap:12px;
    background:#1a1a1a;border-radius:10px;
    padding:14px 16px;cursor:pointer;flex:1 0 auto;min-height:54px;
    transition:background .15s;
}
.rs-map-widget .rs-ritem:hover{background:var(--rs-red)}
.rs-map-widget .rs-ritem:hover em{color:#fff}
.rs-map-widget .rs-ritem b{flex:1;font-size:15px;font-weight:700;color:#fff}
.rs-map-widget .rs-ritem em{font-style:normal;font-size:12px;color:var(--rs-muted);font-weight:500;transition:color .15s}
.rs-map-widget .rs-ritem .arr{color:#fff;font-weight:700;font-size:16px}

.rs-map-widget .rs-cities{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rs-map-widget a.rs-city{
    display:flex;align-items:center;gap:8px;
    background:#1a1a1a;border-radius:10px;
    padding:12px 14px;cursor:pointer;text-decoration:none;
    color:#fff;font:600 13px/1.3 'Raleway',sans-serif;
    transition:background .15s;
}
.rs-map-widget a.rs-city:hover{background:var(--rs-red);color:#fff}
.rs-map-widget a.rs-city.hq::after{
    content:'HQ';margin-left:auto;font-size:9px;font-weight:700;color:#fff;
    background:var(--rs-red);border-radius:4px;padding:2.5px 6px;
}
.rs-map-widget a.rs-city.hq:hover::after{background:#000}
.rs-map-widget a.rs-city.current{background:var(--rs-red)}

.rs-map-widget .rs-panel-cta{padding:18px;border-top:1px solid var(--rs-line)}
.rs-map-widget a.rs-cta{
    display:block;text-align:center;
    background:var(--rs-red);color:#fff;border:0;border-radius:30px;
    padding:12px 30px;cursor:pointer;text-decoration:none;
    font:600 16px/1.5 'Raleway',sans-serif;text-transform:uppercase;
    transition:background .2s;
}
.rs-map-widget a.rs-cta:hover{background:#d40000;color:#fff}

@media (max-width:1000px){
    .rs-map-widget .rs-grid{grid-template-columns:1fr}
    .rs-map-widget .rs-head h2{font-size:34px}
}

/* region page links (added 2026-07) */
.rs-region-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s ease;}
.rs-region-link:hover{color:#ff0202;text-decoration:underline;}
.rs-region-arr{color:#ff0202;font-weight:700;font-size:.9em;}
.rs-ritem{position:relative;}
.rs-ritem-go{margin-left:auto;color:#ff0202;text-decoration:none;font-size:1.4em;line-height:1;padding:0 4px;}
.rs-ritem-go:hover{transform:translateX(2px);}