/* TSI Service Map — Frontend Styles */

/* When dropped into a Divi column alongside other modules (e.g. Residential/Commercial
   blurb buttons), keep the column's original height (don't push the hero photo down),
   but stop blurb buttons from being squished, force them to full column width, and
   make them compact so the whole stack fits in the hero. */
.et_pb_column.tsi-map-column {
    justify-content: flex-start !important;
    gap: 12px !important;
}
.et_pb_column.tsi-map-column > .et_pb_module { flex-shrink: 0 !important; }
/* Let the code module (which contains our widget) grow to fill the remaining
   vertical space in the hero column so the accordion isn't sitting in a
   small box with empty gray space below. */
.et_pb_column.tsi-map-column > .et_pb_code {
    align-self: stretch !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.et_pb_column.tsi-map-column > .et_pb_code .et_pb_code_inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.et_pb_column.tsi-map-column > .et_pb_blurb {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    padding: 13px 16px !important;
    column-gap: 12px !important;
}
.et_pb_column.tsi-map-column > .et_pb_blurb .et_pb_main_blurb_image img,
.et_pb_column.tsi-map-column > .et_pb_blurb .et_pb_main_blurb_image .et-pb-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    font-size: 22px !important;
}
.et_pb_column.tsi-map-column > .et_pb_blurb .et_pb_module_header {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Mobile: kill the column's horizontal padding AND the parent row/section's
   gutter so the buttons, map and accordion all stretch edge-to-edge to the
   viewport. */
@media (max-width: 980px) {
    .et_pb_column.tsi-map-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
    }
    .et_pb_row.tsi-map-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .et_pb_section.tsi-map-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.tsi-map {
    --tsi-orange: #FC672B;
    --tsi-orange-deep: #E45418;
    --tsi-ink: #1B2433;
    --tsi-muted: #6b7383;
    --tsi-radius: 12px;

    background: transparent;
    border-radius: 0;
    padding: 4px 0 0;
    box-shadow: none;
    border: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--tsi-ink);
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tsi-map * { box-sizing: border-box; }

.tsi-map .tm-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
}
.tsi-map .tm-title {
    font-size: 15px; font-weight: 800; letter-spacing: .4px;
    color: var(--tsi-orange); text-transform: uppercase;
    margin: 0;
}
.tsi-map .tm-sub { font-size: 13px; color: var(--tsi-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* Match the GTA content's actual aspect ratio so the map fills the column
   width edge-to-edge (no left/right letterbox whitespace). */
.tsi-map .tm-svg {
    width: 100%;
    aspect-ratio: 660 / 505;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 0;
    position: relative;
}
.tsi-map .tm-svg .tm-svg-inner { width: 100%; height: 100%; display: block; }
.tsi-map .tm-svg .rp,
.tm-modal .rp {
    stroke: #fff;
    stroke-width: 1.5;
    transition: filter .15s ease, fill .15s ease;
    cursor: pointer;
}
.tsi-map .tm-svg .rp:hover,
.tm-modal .rp:hover { filter: brightness(1.08) saturate(1.2); }
/* Orange-highlight the active region only when other regions are visible:
   - small map: only when NOT in focus mode (multiple regions on screen)
   - modal: always (the modal always shows the full GTA) */
.tsi-map:not([data-focus]) .tm-svg .rp.active,
.tm-modal .rp.active { fill: #FC672B !important; }

.tsi-map .tm-svg .rt,
.tm-modal .rt {
    font-family: Inter, sans-serif; font-weight: 900;
    fill: #1B2433;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: #fff; stroke-width: 5px;
    paint-order: stroke fill; stroke-linejoin: round;
}
.tsi-map .tm-svg .ml, .tsi-map .tm-svg .ms,
.tm-modal .ml, .tm-modal .ms {
    font-family: Inter, sans-serif; font-weight: 700;
    fill: #1B2433;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: #fff; stroke-width: 3px;
    paint-order: stroke fill; stroke-linejoin: round;
}
/* Small map: hide city/muni labels by default, enlarge region labels */
.tsi-map .tm-svg .rt { font-size: 26px; }
.tsi-map .tm-svg .ml,
.tsi-map .tm-svg .ms { display: none; }

/* Focus mode: when a region accordion (or map region) is selected, show only
   that region's polygon + its labels; hide everything else on the small map. */
.tsi-map[data-focus] .tm-svg [data-region] { display: none; }
.tsi-map[data-focus="toronto"] .tm-svg [data-region="toronto"],
.tsi-map[data-focus="peel"]    .tm-svg [data-region="peel"],
.tsi-map[data-focus="york"]    .tm-svg [data-region="york"],
.tsi-map[data-focus="halton"]  .tm-svg [data-region="halton"],
.tsi-map[data-focus="durham"]  .tm-svg [data-region="durham"] {
    display: initial !important;
}
/* In focus mode, allow city/muni labels for the focused region only */
.tsi-map[data-focus="toronto"] .tm-svg .ml[data-region="toronto"],
.tsi-map[data-focus="toronto"] .tm-svg .ms[data-region="toronto"],
.tsi-map[data-focus="peel"]    .tm-svg .ml[data-region="peel"],
.tsi-map[data-focus="peel"]    .tm-svg .ms[data-region="peel"],
.tsi-map[data-focus="york"]    .tm-svg .ml[data-region="york"],
.tsi-map[data-focus="york"]    .tm-svg .ms[data-region="york"],
.tsi-map[data-focus="halton"]  .tm-svg .ml[data-region="halton"],
.tsi-map[data-focus="halton"]  .tm-svg .ms[data-region="halton"],
.tsi-map[data-focus="durham"]  .tm-svg .ml[data-region="durham"],
.tsi-map[data-focus="durham"]  .tm-svg .ms[data-region="durham"] {
    display: initial !important;
}
/* In focus mode, label sizes are computed by JS based on the actual zoom level
   so labels appear at a consistent screen size regardless of which region we
   zoomed into. Region label is uppercase + letter-spaced to clearly distinguish
   it from the smaller, lighter city labels. */
.tsi-map[data-focus] .tm-svg .rt {
    font-size: var(--tsi-rt-units, 12px);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    fill-opacity: 0.92;
}
.tsi-map[data-focus] .tm-svg .ml {
    font-size: var(--tsi-ml-units, 8px);
    font-weight: 600;
}
.tsi-map[data-focus] .tm-svg .ms {
    font-size: var(--tsi-ms-units, 7px);
    font-weight: 600;
}
.tsi-map[data-focus] .tm-svg .rp { stroke-width: 0.6; }

/* Modal SVG sizes (unchanged base, but keep here for the modal context) */
.tm-modal .tm-modal-svg .rt { font-size: 16px; }
.tm-modal .tm-modal-svg .ml { font-size: 10px; }
.tm-modal .tm-modal-svg .ms { font-size: 8px; }

/* Expand button */
.tsi-map .tm-expand {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e6e7ec;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 4;
    color: var(--tsi-ink);
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.tsi-map .tm-expand:hover {
    background: var(--tsi-orange); color: #fff; border-color: var(--tsi-orange);
}
.tsi-map .tm-expand svg { width: 14px; height: 14px; }

/* Accordion */
.tsi-map .tm-regions { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.tsi-map .tm-region {
    border: 1px solid #ecedf0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s;
    order: 1;
}
/* When a region is open, lift it to the top of the flex order so its area
   list always sits at the same vertical position — closed siblings cascade
   below it (no need to scroll). */
.tsi-map .tm-region.open { border-color: var(--tsi-orange); order: 0; }
.tsi-map .tm-r-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px;
    cursor: pointer;
    background: #fff;
    transition: background .15s;
    user-select: none;
}
.tsi-map .tm-r-head:hover { background: #FFF7F2; }
.tsi-map .tm-region.open .tm-r-head { background: linear-gradient(90deg, #FFF1E8, #fff); }
.tsi-map .tm-r-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #c9cdd6; flex-shrink: 0;
    transition: background .15s;
}
.tsi-map .tm-region.open .tm-r-dot { background: var(--tsi-orange); }
/* Region name is a link to the region landing page; visually styled as plain
   text so the row still reads as an accordion header. */
.tsi-map a.tm-r-name {
    flex: 0 1 auto; font-size: 14px; font-weight: 700; color: var(--tsi-ink);
    text-decoration: none;
}
.tsi-map a.tm-r-name:hover { color: var(--tsi-orange); text-decoration: none; }
.tsi-map .tm-r-count { margin-left: auto; font-size: 12px; color: var(--tsi-orange); font-weight: 700; }
.tsi-map .tm-r-arrow {
    font-size: 11px; color: #b6bac3;
    margin-left: 6px; transition: transform .25s, color .15s;
}
.tsi-map .tm-region.open .tm-r-arrow { transform: rotate(180deg); color: var(--tsi-orange); }
.tsi-map .tm-r-body {
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
    background: #FAFBFC;
}
.tsi-map .tm-region.open .tm-r-body { max-height: 600px; }
.tsi-map .tm-munis {
    padding: 4px 10px 8px 22px;
    display: flex; flex-direction: column; gap: 2px;
}
.tsi-map a.tm-muni {
    font-size: 12px;
    color: #4a5160;
    padding: 5px 8px;
    border-radius: 5px;
    display: flex; align-items: center; gap: 6px;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.tsi-map a.tm-muni:hover { background: #fff; color: var(--tsi-orange); text-decoration: none; }
.tsi-map a.tm-muni::before { content: '›'; color: var(--tsi-orange); font-weight: 900; }

/* Current-page city — when the widget renders on a city page, the matching
   accordion item is highlighted so the visitor knows where they are. */
.tsi-map a.tm-muni.tm-muni-current {
    background: var(--tsi-orange);
    color: #fff;
    font-weight: 700;
}
.tsi-map a.tm-muni.tm-muni-current::before { color: #fff; }
.tsi-map a.tm-muni.tm-muni-current:hover { background: var(--tsi-orange-deep); color: #fff; }

.tsi-map .tm-cta {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px;
    background: var(--tsi-ink); color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .2px;
    transition: background .15s;
}
.tsi-map .tm-cta:hover { background: var(--tsi-orange); color: #fff; text-decoration: none; }

/* Fullscreen modal */
.tm-modal {
    --tsi-orange: #FC672B;
    --tsi-orange-deep: #E45418;
    --tsi-ink: #1B2433;
    --tsi-muted: #6b7383;
    position: fixed; inset: 0;
    background: rgba(20, 25, 40, 0.86);
    z-index: 2147483647; /* max signed 32-bit int — always on top */
    isolation: isolate;
    display: none;
    align-items: center; justify-content: center;
    padding: 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}
.tm-modal * { box-sizing: border-box; }
.tm-modal.open { display: flex; animation: tmFade .2s ease; }
@keyframes tmFade { from { opacity: 0 } to { opacity: 1 } }

.tm-modal .tm-modal-inner {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    max-width: 1280px;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}
.tm-modal .tm-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f3f4f6; border: none;
    cursor: pointer;
    font-size: 22px; font-weight: 700;
    color: var(--tsi-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    padding: 0; line-height: 1;
}
.tm-modal .tm-modal-close:hover { background: var(--tsi-orange); color: #fff; }
.tm-modal .tm-modal-title {
    font-size: 22px; font-weight: 900;
    color: var(--tsi-ink);
    letter-spacing: -.4px;
    margin: 0 40px 4px 0;
}
.tm-modal .tm-modal-sub {
    font-size: 13px; color: var(--tsi-muted); font-weight: 500;
    margin-bottom: 18px;
}
.tm-modal .tm-modal-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    flex: 1;
    min-height: 0;
}
.tm-modal .tm-modal-svg { position: relative; }
.tm-modal .tm-modal-svg .tm-svg-inner { width: 100%; height: auto; max-height: calc(100vh - 220px); }
.tm-modal .rt { font-size: 16px; }
.tm-modal .ml { font-size: 10px; }
.tm-modal .ms { font-size: 8px; }
.tm-modal .tm-modal-side {
    background: #FAFBFC;
    border: 1px solid #ecedf0;
    border-radius: 12px;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.tm-modal .tm-side-empty {
    color: var(--tsi-muted);
    font-size: 13px; line-height: 1.5;
    text-align: center;
    margin: auto 0;
}
.tm-modal .tm-side-empty strong { color: var(--tsi-ink); display: block; margin-bottom: 8px; font-size: 16px; }
.tm-modal .tm-side-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ecedf0;
    margin-bottom: 12px;
}
.tm-modal .tm-side-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--tsi-orange); flex-shrink: 0;
}
.tm-modal .tm-side-title {
    font-size: 18px; font-weight: 900; color: var(--tsi-ink);
    letter-spacing: -.3px; flex: 1; margin: 0;
}
.tm-modal .tm-side-badge {
    font-size: 10px; font-weight: 700;
    background: #FFF1E8; color: var(--tsi-orange);
    padding: 3px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .5px;
}
.tm-modal .tm-side-section {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .8px; color: var(--tsi-muted);
    font-weight: 700;
    margin: 4px 0 8px;
}
.tm-modal .tm-side-list { display: flex; flex-direction: column; gap: 4px; }
.tm-modal .tm-side-item {
    padding: 7px 10px;
    font-size: 13px; color: #3a414d;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #ecedf0;
    transition: all .15s;
    cursor: pointer;
    display: flex; align-items: center;
}
.tm-modal .tm-side-item::before {
    content: '›'; color: var(--tsi-orange);
    font-weight: 900; margin-right: 8px;
}
.tm-modal .tm-side-item:hover {
    background: var(--tsi-orange);
    border-color: var(--tsi-orange);
    color: #fff;
}
.tm-modal .tm-side-item:hover::before { color: #fff; }
.tm-modal .tm-side-cta { margin-top: auto; padding-top: 12px; }
.tm-modal .tm-side-cta a {
    display: block;
    text-align: center;
    background: var(--tsi-orange); color: #fff;
    padding: 12px; border-radius: 8px;
    font-size: 13px; font-weight: 800;
    text-decoration: none;
    letter-spacing: .2px;
    transition: background .15s;
}
.tm-modal .tm-side-cta a:hover { background: var(--tsi-orange-deep); }

@media (max-width: 860px) {
    .tm-modal { padding: 16px; }
    .tm-modal .tm-modal-inner { padding: 18px; }
    .tm-modal .tm-modal-body { grid-template-columns: 1fr; }
    .tm-modal .tm-modal-side { max-height: 260px; }
}