/*
 * The coverage map, both of it.
 *
 * This file is in the PLUGIN, not the theme, and it is loaded by the map's own
 * render callback. That is not tidiness — it is the fix for a real failure. The
 * rules used to live in the theme's style.css, so a site running a current
 * plugin against a stale or cached theme stylesheet got an interactive map with
 * no CSS at all: tiles translated outside a static box and clipped away, an SVG
 * overlay collapsed to its 300x150 default, and the controls, legend and credit
 * stacked underneath as plain browser buttons. Nothing about the map's own
 * chrome belongs to the theme, so none of it lives there now.
 *
 * The theme is still what makes it look like AIS: every colour, shadow, radius
 * and the font come through the custom properties below, which resolve against
 * whatever Global Styles and AIS -> Design are set to. The fallbacks after each
 * comma are only for the case where this plugin is running under some other
 * theme entirely.
 *
 * @package AIS_Blocks
 */

/* Heights appear here AND inline in the page from includes/map.php. The inline
   rule is the authority — a stylesheet is a separate request with its own
   cache, and a site running a current plugin can still be served last week's
   copy of this file. These are the fallback, and tools/verify-no-file-edits.php
   fails the build if the two ever disagree. */

/* --- The drawn map ---------------------------------------------------------
   Inline SVG built from the coverage tiers in includes/map.php: no tile server,
   no API key, nothing to load. It sits in the .map-embed frame the original
   page used for its iframe, at the same height. */
.ais-map{display:block;width:100%;height:820px;background:#f6f4ef}
.ais-map-land{fill:#f6f4ef}
.ais-map-lake{fill:#dbeaf4;stroke:#c2dbeb;stroke-width:1.5}
.ais-map-label{font-family:var(--font,sans-serif);font-size:11px;font-weight:600;
  fill:var(--ink-700,#344054);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.ais-map-hq{fill:var(--ink-900,#141B54)}
.ais-map-hq-halo{fill:var(--ink-900,#141B54);opacity:.18}
.ais-map-hq-label{font-size:12.5px;fill:var(--ink-900,#141B54)}

/* --- The interactive map ---------------------------------------------------
   assets/map.js upgrades the drawn map above into a real one — tiles, drag,
   zoom, clickable towns — and removes the drawn SVG only once it is running.
   Everything is absolutely positioned inside the .map-embed frame, which
   already clips, so the interactive map occupies exactly the same box.

   content-box, not the border-box the site sets globally: the drawn SVG is
   820px tall INSIDE the frame's 1px border, so a border-box height here would
   make the interactive map two pixels shorter than the map it replaces and
   move the whole page up. */
.map-embed.is-interactive{position:relative;box-sizing:content-box;height:820px;
  background:#e9edf0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.map-embed.is-interactive.is-dragging{cursor:grabbing}
.map-embed.is-interactive:focus-visible{outline:3px solid var(--blue-500,#3995D3);outline-offset:-3px}

.ais-imap-tiles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;
  background:#e9edf0}
.ais-imap-tile{position:absolute;top:0;left:0;width:256px;height:256px;max-width:none;
  pointer-events:none;border:0;will-change:transform}
.ais-imap-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}

.ais-imap-band{fill-opacity:.18;stroke-width:2.5;stroke-opacity:.95;stroke-linejoin:round;cursor:pointer}
/* The water's edge, where a band reaches it. Slightly heavier than a band's
   own outline: it is the edge of the whole coverage, not of one tier. */
.ais-imap-coast{stroke-width:3;stroke-opacity:.95;stroke-linejoin:round;stroke-linecap:round;
  pointer-events:none}
/* A wide white ring inside the same overall footprint: the coloured centre is
   smaller, so a dot sitting on one of the basemap's own town names interrupts
   it cleanly rather than smearing it. */
.ais-imap-dot{stroke:#fff;stroke-width:3;cursor:pointer}
.ais-imap-name{font-family:var(--font,sans-serif);font-size:12px;font-weight:600;
  fill:var(--ink-900,#141B54);paint-order:stroke;stroke:#fff;stroke-width:3px;
  stroke-linejoin:round;pointer-events:none}
.ais-imap-office{fill:var(--ink-900,#141B54);stroke:#fff;stroke-width:2.5;cursor:pointer}
.ais-imap-office-halo{fill:var(--ink-900,#141B54);opacity:.2;pointer-events:none}

.ais-imap-controls{position:absolute;top:10px;left:10px;z-index:2;
  display:flex;flex-direction:column;gap:6px}
.ais-imap-controls button{width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--ink-100,#f2f4f7);border-radius:8px;
  background:#fff;color:var(--ink-900,#141B54);font:inherit;font-size:17px;line-height:1;
  cursor:pointer;box-shadow:var(--shadow-sm,0 1px 3px rgba(16,24,40,.1))}
.ais-imap-controls button:hover{background:var(--ink-50,#f9fafb)}

.ais-imap-legend{position:absolute;left:10px;bottom:10px;z-index:2;max-width:min(280px,64%);
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:rgba(255,255,255,.95);
  border:1px solid var(--ink-100,#f2f4f7);border-radius:10px;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(16,24,40,.1))}
.ais-imap-legend-title{font-size:.8rem;font-weight:700;color:var(--ink-900,#141B54);
  margin-bottom:4px;line-height:1.3}
.ais-imap-legend-item{display:flex;align-items:center;gap:8px;padding:3px 2px;border:0;
  background:none;font:inherit;font-size:.8rem;color:var(--ink-900,#141B54);
  text-align:left;cursor:pointer;line-height:1.35}
.ais-imap-legend-item.is-off{opacity:.45;text-decoration:line-through}
.ais-imap-legend-static{display:flex;align-items:center;gap:8px;padding:3px 2px;
  font-size:.8rem;color:var(--ink-900,#141B54);line-height:1.35}
.ais-imap-swatch{width:13px;height:13px;border-radius:999px;flex:0 0 auto;
  border:2px solid currentColor;background:transparent}
.ais-imap-swatch-solid{border-color:transparent}

.ais-imap-credit{position:absolute;right:0;bottom:0;z-index:2;padding:2px 6px;font-size:11px;
  color:var(--ink-700,#344054);background:rgba(255,255,255,.85);border-top-left-radius:6px}
.ais-imap-credit a{color:inherit;text-decoration:underline}

.ais-imap-popup{position:absolute;z-index:3;max-width:220px;padding:8px 10px;background:#fff;
  border:1px solid var(--ink-100,#f2f4f7);border-radius:10px;
  box-shadow:var(--shadow-md,0 6px 16px -4px rgba(16,24,40,.12));
  font-size:.8rem;line-height:1.35;pointer-events:none}
.ais-imap-popup strong{display:block;color:var(--ink-900,#141B54)}
.ais-imap-popup span{color:var(--ink-700,#344054)}

@media (max-width:760px){
  .ais-map{height:560px}
  .ais-map-label{font-size:13px}
  .map-embed.is-interactive{height:560px}
  .ais-imap-legend{padding:7px 9px;max-width:70%}
  .ais-imap-legend-title{font-size:.74rem}
  .ais-imap-legend-item,.ais-imap-legend-static{font-size:.74rem}
}

/* On a phone the boxed legend was covering a third of the map — and the tiers
   directly below the map already carry the same four labels with the same four
   colours, so the legend's job there is toggling, not explaining. It becomes a
   two-column strip along the bottom: the toggles all survive, the title and the
   office row (which explain rather than do) drop, and it sits clear of the
   basemap credit instead of on top of it. */
@media (max-width:560px){
  .ais-imap-legend{left:10px;right:10px;bottom:20px;max-width:none;
    display:grid;grid-template-columns:1fr 1fr;gap:0 8px;padding:6px 8px}
  .ais-imap-legend-title,.ais-imap-legend-static{display:none}
  .ais-imap-legend-item{font-size:.7rem;gap:6px;padding:2px 0}
  .ais-imap-swatch{width:11px;height:11px}
  .ais-imap-controls{top:8px;left:8px;gap:4px}
  .ais-imap-controls button{width:30px;height:30px;font-size:15px}
}

/* === AIS DARK MODE — generated by tools/darkmode.py. Do not edit by hand. === */
/* The coverage map in dark mode. Emitted twice for the same reason as the
   palette in site.css: the media query is the automatic case, the
   attribute is the visitor who used the switch. */
@media (prefers-color-scheme: dark){

	/* The drawn coverage map: land, water and the halo behind each label. */
	html:not([data-ais-theme="light"]) .ais-map{background:#0E1822}
	html:not([data-ais-theme="light"]) .ais-map-land{fill:#0E1822}
	html:not([data-ais-theme="light"]) .ais-map-lake{fill:#10283C;stroke:#1B3A52}
	html:not([data-ais-theme="light"]) .ais-map-label{fill:#C6D3E1;stroke:#0E1822}
	html:not([data-ais-theme="light"]) .ais-map-hq-label{fill:#EDF3FA}

	/* The interactive map's chrome. The basemap itself is swapped for the dark
	   tiles by assets/map.js, which reads the same preference. */
	html:not([data-ais-theme="light"]) .map-embed.is-interactive,html:not([data-ais-theme="light"]) .ais-imap-tiles{background:#0E1822}
	html:not([data-ais-theme="light"]) .ais-imap-legend{background:rgba(11,20,32,.94)}
	html:not([data-ais-theme="light"]) .ais-imap-controls button{background:#131F2E}
	html:not([data-ais-theme="light"]) .ais-imap-controls button:hover{background:#1C2A38}
	html:not([data-ais-theme="light"]) .ais-imap-credit{background:rgba(11,20,32,.85)}
	html:not([data-ais-theme="light"]) .ais-imap-popup{background:#131F2E}
	html:not([data-ais-theme="light"]) .ais-imap-dot,html:not([data-ais-theme="light"]) .ais-imap-office{stroke:#0B1420}
	html:not([data-ais-theme="light"]) .ais-imap-name{stroke:#0B1420}
}


/* The drawn coverage map: land, water and the halo behind each label. */
html[data-ais-theme="dark"] .ais-map{background:#0E1822}
html[data-ais-theme="dark"] .ais-map-land{fill:#0E1822}
html[data-ais-theme="dark"] .ais-map-lake{fill:#10283C;stroke:#1B3A52}
html[data-ais-theme="dark"] .ais-map-label{fill:#C6D3E1;stroke:#0E1822}
html[data-ais-theme="dark"] .ais-map-hq-label{fill:#EDF3FA}

/* The interactive map's chrome. The basemap itself is swapped for the dark
   tiles by assets/map.js, which reads the same preference. */
html[data-ais-theme="dark"] .map-embed.is-interactive,html[data-ais-theme="dark"] .ais-imap-tiles{background:#0E1822}
html[data-ais-theme="dark"] .ais-imap-legend{background:rgba(11,20,32,.94)}
html[data-ais-theme="dark"] .ais-imap-controls button{background:#131F2E}
html[data-ais-theme="dark"] .ais-imap-controls button:hover{background:#1C2A38}
html[data-ais-theme="dark"] .ais-imap-credit{background:rgba(11,20,32,.85)}
html[data-ais-theme="dark"] .ais-imap-popup{background:#131F2E}
html[data-ais-theme="dark"] .ais-imap-dot,html[data-ais-theme="dark"] .ais-imap-office{stroke:#0B1420}
html[data-ais-theme="dark"] .ais-imap-name{stroke:#0B1420}
/* === END AIS DARK MODE === */