/* ═══ SERVICE-AREA TERRAIN DIORAMA ══════════════════════════════════════════
   San Diego County relief model with the five West Coast service regions as
   interactive overlays. Standalone component: it shares the v2 token set and
   conventions with the home-comfort diorama but carries no dependency on it.

   Structure mirrors the site's established overlay pattern. The render fills
   a fixed-ratio stage; region tags sit on it at 761px and up, and reflow into
   a numbered legend with anchor pins at 760px and down, where six overlapping
   tags will not fit.

   Hover/focus previews a region, activation pins it (aria-expanded), Escape
   clears. All visual state fans out from the figure's data-active attribute,
   set by area-map.js. The markup default ("overview") keeps the panel
   meaningful before the script runs, and html:not(.js) renders every note
   statically so the content is never JavaScript-dependent. */

.wc-area-map{
  position:relative;
  display:grid;
  margin:18px 0 22px;
  font-family:var(--font-display);
}
.wc-area-map__stage{ grid-column:1; grid-row:1; }
.wc-area-map__list{ grid-column:1; grid-row:1; }
.wc-area-map__panel{ grid-column:1; grid-row:2; }

.wc-area-map__stage{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* Matches the delivered render. Update alongside the image if the
     outpainted version changes proportions. */
  aspect-ratio:1920 / 1080;
  border:1px solid rgba(17,19,51,.14);
  border-radius:var(--r-lg);
  background:var(--cream-2);
  box-shadow:0 18px 46px rgba(17,19,51,.14);
}

.wc-area-map__scene,
.areas-split__map .wc-area-map__scene{
  position:absolute; z-index:0; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}

/* ── Brand overlays ──
   Logo top right over the cream margin, bear bottom right, mirroring the
   home-comfort diorama's composition at a slightly smaller scale. Both are
   decorative: empty alt, never interactive, and layered below the tags so
   nothing brand-critical ever blocks a control. */
.wc-area-map__brand,
.areas-split__map .wc-area-map__brand{
  position:absolute; z-index:5;
  top:3.5%; right:2%;
  width:14%; height:auto;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 7px 14px rgba(17,19,51,.12));
}
.wc-area-map__mascot,
.areas-split__map .wc-area-map__mascot{
  position:absolute; z-index:4;
  right:1.2%; bottom:2%;
  width:16%; height:auto;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 14px 18px rgba(17,19,51,.22));
}

/* ── Region highlight overlay ──
   Each region group holds a scrim (the full stage minus the region, drawn
   with fill-rule:evenodd so everything outside dims) and an outline stroke.
   Sits above the wash, below the tags, so no tag is ever dimmed. */

.wc-area-map__regions{
  position:absolute; z-index:2; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.wc-area-map__region{ opacity:0; transition:opacity .15s ease; }
.wc-area-map__region-scrim{ fill:rgba(17,19,51,.34); }
.wc-area-map__region-line{
  fill:none;
  stroke:var(--white); stroke-width:3;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(17,19,51,.55));
}

.wc-area-map[data-active="north-coastal"] .wc-area-map__region--north-coastal,
.wc-area-map[data-active="north-inland"]  .wc-area-map__region--north-inland,
.wc-area-map[data-active="central"]       .wc-area-map__region--central,
.wc-area-map[data-active="south"]         .wc-area-map__region--south,
.wc-area-map[data-active="east"]          .wc-area-map__region--east{ opacity:1; }

/* ── 761px and up: tags on the render ── */

.wc-area-map__list{
  position:absolute; z-index:6; inset:0;
  display:block;
  margin:0; padding:0;
  list-style:none;
}
.wc-area-map__item{
  position:absolute;
  display:block;
  margin:0; padding:0;
  border:0; background:none;
}
.wc-area-map__item::before{ content:none; }

.wc-area-map__num{ display:none; }

.wc-area-map__trigger{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex; align-items:center;
  min-height:2em;
  margin:0;
  padding:.46em .7em .46em .64em;
  border:1px solid rgba(17,19,51,.18);
  border-left:4px solid var(--orange);
  border-radius:7px;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 15px rgba(17,19,51,.12);
  color:var(--navy);
  font-family:inherit;
  font-size:clamp(10px, 1.42vw, 12.6px);
  font-weight:800;
  letter-spacing:.025em;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter:blur(7px);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Hovered or pinned tag: navy fill holds AA contrast against white, and the
   state never reads by color alone -- the region highlight and the panel
   text change with it. */
.wc-area-map__trigger:hover,
.wc-area-map__trigger[aria-expanded="true"]{
  background:var(--navy);
  border-color:var(--navy);
  border-left-color:var(--orange);
  color:var(--white);
}

/* Two-tone ring stays visible over both the render and the white tag. */
.wc-area-map__trigger:focus-visible{
  outline:3px solid var(--white);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--navy);
  border-radius:7px;
}

/* Tag anchors, traced against the v10 render. Every tag sits beside its
   region with an anchor dot below it marking the terrain it names. */
.wc-area-map__item--north-coastal{ left:8%;  top:9%; }
.wc-area-map__item--north-inland{  left:33%; top:4%; }
/* East sits in the inland valley its towns actually occupy -- El Cajon,
   Santee, Lakeside -- not on the range behind them. 72%/20% fell on the
   mountains once the region stopped at their base (revision 2026-08-29). */
.wc-area-map__item--east{          left:58%; top:50%; }
/* TEMPORARY, 2026-09-01: the 30 city pages still carry the pre-revision East
   polygon, which encloses the range, so their static tag keeps its old anchor
   until those pages are migrated. Delete this rule at that point. */
.wc-area-map--locked .wc-area-map__item--east{ left:72%; top:20%; }
.wc-area-map__item--central{       left:25%; top:44%; }
.wc-area-map__item--south{         left:47%; top:72%; }

/* Anchor dot centred below each tag, tying the label to its terrain. Wide
   layout only -- the stacked legend pairs by number with the pins instead. */
@media (min-width:761px){
  .wc-area-map__item::after{
    content:"";
    position:absolute;
    left:50%; top:calc(100% + 6px);
    width:9px; height:9px;
    margin-left:-4.5px;
    border-radius:50%;
    background:var(--orange);
    border:1.5px solid var(--white);
    box-shadow:0 1px 3px rgba(17,19,51,.4);
  }
}

/* ── Locked variant ──
   City pages fix the diorama to their own region: one static tag, the
   region highlight always on, a single note. Pure markup -- no buttons, no
   controller, and area-map.js ignores the figure entirely (no triggers). */
.wc-area-map__tag-static{
  display:inline-flex; align-items:center;
  min-height:2em;
  padding:.46em .7em .46em .64em;
  border:1px solid var(--navy);
  border-left:4px solid var(--orange);
  border-radius:7px;
  background:var(--navy);
  box-shadow:0 6px 15px rgba(17,19,51,.12);
  color:var(--white);
  font-size:clamp(10px, 1.42vw, 12.6px);
  font-weight:800;
  letter-spacing:.025em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Locked pages keep the render's full color: no scrim ever, just the page's
   own region outlined with a faint lift inside the boundary. Which single
   region shows is driven by data-active, exactly as in the interactive
   variant -- never force every group visible here (five stacked scrims
   black the whole map out). */
.wc-area-map--locked .wc-area-map__region-scrim{ display:none; }
.wc-area-map--locked .wc-area-map__region-line{ fill:rgba(255,255,255,.16); }

/* Anchor pins belong to the stacked layout only. */
.wc-area-map__pins{ display:none; }

/* Caption is available to assistive technology but not painted. */
.wc-area-map__caption{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Explanation panel ──
   Stable surface below the stage at every width. With the script active the
   notes stack in a single grid cell, so the panel always holds the height of
   the tallest note and swapping regions never shifts the layout. */

.wc-area-map__panel{
  margin-top:12px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-left:4px solid var(--orange);
  border-radius:8px;
  background:var(--white);
  font-family:var(--font-sans);
}
html.js .wc-area-map__panel{ display:grid; }

.wc-area-map__note{
  margin:0;
  color:var(--ink);
  font-size:var(--small);
  line-height:1.55;
}
.wc-area-map__note-name{ font-weight:600; color:var(--navy); }
.wc-area-map__note-cities{
  display:block;
  margin-top:4px;
  color:var(--ink-soft);
  font-size:14px;
}
html:not(.js) .wc-area-map__note + .wc-area-map__note{ margin-top:10px; }

/* Script available: show only the active note. Inactive notes stay in the
   DOM, invisible but sharing the panel's single grid cell so the tallest one
   sets the height. */
html.js .wc-area-map__note{ grid-area:1 / 1; visibility:hidden; }
html.js .wc-area-map[data-active="overview"]      .wc-area-map__note[data-note="overview"],
html.js .wc-area-map[data-active="north-coastal"] .wc-area-map__note[data-note="north-coastal"],
html.js .wc-area-map[data-active="north-inland"]  .wc-area-map__note[data-note="north-inland"],
html.js .wc-area-map[data-active="central"]       .wc-area-map__note[data-note="central"],
html.js .wc-area-map[data-active="south"]         .wc-area-map__note[data-note="south"],
html.js .wc-area-map[data-active="east"]          .wc-area-map__note[data-note="east"]{ visibility:visible; }

/* ── 760px and down: numbered pins + stacked legend ── */

@media (max-width:760px){
  .wc-area-map__stage{ border-radius:12px; }

  /* The supplied mobile diorama already contains its region ribbons and
     West Coast artwork. DOM pins and decorative overlays collide with those
     baked visual anchors at phone scale, while the numbered legend below
     retains the full interactive control path. */
  .wc-area-map__brand,
  .areas-split__map .wc-area-map__brand,
  .wc-area-map__mascot,
  .areas-split__map .wc-area-map__mascot{ display:none; }

  .wc-area-map__pins{
    display:block;
    position:absolute; z-index:6; inset:0;
    pointer-events:none;
  }
  .wc-area-map__pin{
    position:absolute;
    display:grid; place-items:center;
    width:22px; height:22px;
    /* Centred on the anchor the tag used at wider widths. */
    margin:-11px 0 0 -11px;
    border:2px solid var(--white);
    border-radius:50%;
    background:var(--navy);
    box-shadow:0 3px 8px rgba(17,19,51,.3);
    color:var(--white);
    font-size:12px; font-weight:800; line-height:1;
  }

  /* Pins double as redundant tap targets for the legend buttons; they stay
     aria-hidden and unfocusable, so assistive tech uses the buttons. */
  html.js .wc-area-map__pin[data-region]{ pointer-events:auto; cursor:pointer; }
  .wc-area-map__pin[data-region]::after{
    content:""; position:absolute; inset:-11px; border-radius:50%;
  }

  /* Pin anchors. SECOND PASS -- traced against the v10 south-reframed
     render. Fine-tune during review. */
  .wc-area-map__pin--north-coastal{ left:16%; top:20%; }
  .wc-area-map__pin--north-inland{  left:42%; top:16%; }
  .wc-area-map__pin--central{       left:36%; top:52%; }
  .wc-area-map__pin--south{         left:55%; top:82%; }
  .wc-area-map__pin--east{          left:62%; top:55%; }
  /* TEMPORARY, 2026-09-01: matches the locked-variant note on the East tag
     above. Remove together with it once the city pages are migrated. */
  .wc-area-map--locked .wc-area-map__pin--east{ left:70%; top:42%; }

  .wc-area-map__list{
    position:static;
    grid-column:1;
    grid-row:2;
    display:grid;
    gap:8px;
    margin:14px 0 0;
  }
  .wc-area-map__panel{ grid-column:1; grid-row:3; }
  .wc-area-map__item{
    position:relative;
    left:auto; top:auto;
    display:flex; align-items:center; gap:10px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-left:4px solid var(--orange);
    border-radius:8px;
    background:var(--white);
  }
  .wc-area-map__num{
    display:grid; place-items:center;
    flex:0 0 auto;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--navy);
    color:var(--white);
    font-size:12px; font-weight:800; line-height:1;
  }

  /* The whole legend row activates its button. */
  html.js .wc-area-map__trigger::before{ content:""; position:absolute; inset:0; }

  .wc-area-map__trigger{
    min-height:0;
    padding:0;
    border:0; border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    font-size:15.5px;
    letter-spacing:.02em;
    line-height:1.25;
    white-space:normal;
  }
  .wc-area-map__trigger:hover,
  .wc-area-map__trigger[aria-expanded="true"]{ background:none; color:var(--navy); }

  /* Pinned region: row and pin invert together. */
  .wc-area-map__item:has(.wc-area-map__trigger[aria-expanded="true"]){
    background:var(--navy);
    border-color:var(--navy);
    border-left-color:var(--orange);
  }
  .wc-area-map__item:has(.wc-area-map__trigger[aria-expanded="true"]) .wc-area-map__trigger{ color:var(--white); }
  .wc-area-map__item:has(.wc-area-map__trigger[aria-expanded="true"]) .wc-area-map__num{
    background:var(--white); color:var(--navy);
  }

  .wc-area-map[data-active="north-coastal"] .wc-area-map__pin--north-coastal,
  .wc-area-map[data-active="north-inland"]  .wc-area-map__pin--north-inland,
  .wc-area-map[data-active="central"]       .wc-area-map__pin--central,
  .wc-area-map[data-active="south"]         .wc-area-map__pin--south,
  .wc-area-map[data-active="east"]          .wc-area-map__pin--east{ background:var(--orange); }

  /* Locked variant in the stacked layout: single legend row, single pin. */
  .wc-area-map__tag-static{
    min-height:0;
    padding:0;
    border:0; border-radius:0;
    background:none;
    box-shadow:none;
    color:var(--navy);
    font-size:15.5px;
    letter-spacing:.02em;
    line-height:1.25;
    white-space:normal;
  }
  .wc-area-map--locked .wc-area-map__item{
    border-color:var(--navy);
  }
  .wc-area-map--locked .wc-area-map__pin{ background:var(--orange); }
}

/* The component adds no motion beyond short fades; remove those for
   reduced-motion users while preserving every state change. */
@media (prefers-reduced-motion:reduce){
  .wc-area-map__trigger,
  .wc-area-map__region{ transition:none !important; }
}