/* ---------------------------------------------------------------------------
 * world-map.css — /world-map/ only. Loaded after site.css via $pageCss.
 *
 * jsvectormap ships its own stylesheet (jsvectormap.css) which must load
 * BEFORE this file. Everything below overrides its defaults to match the site:
 * its stock look is a white tooltip and grey buttons, which is what makes the
 * reference sites look like stock jsvectormap.
 * ------------------------------------------------------------------------ */

:root{
  /* Ramp brightened 2026-08-10: the first version used --card for b0 and
     --border for b1, both of which sit within a few percent of the page
     background, so unlit countries vanished and the bottom bucket was
     invisible. Every step now clears the background by a wide margin. */
  /* Choropleth scale, liveporncamx palette.
     The old ramp was navy -> pink, carried over from the sister site, and it
     fought the green theme badly on the one page that is almost entirely
     colour. This runs slate-green -> emerald -> bright mint, which is the same
     idea in this site's hues.
     Two things kept from the original: b0 stays desaturated and dark enough to
     read as LAND rather than as a low value (a country with nobody online is
     not "a little bit green"), and the steps stay perceptually even so the
     legend buckets are still distinguishable at a glance on a phone. */
  --map-b0:#22392E;   /* no models online — must still read as land */
  --map-b1:#2F6B4C;
  --map-b2:#279B5E;
  --map-b3:#25C765;
  --map-b4:#4FE38C;
  --map-b5:#9BF5C0;
  --map-hover:#FFFFFF;
  --map-stroke:#0E1B14;
}

h1.page .wm-sub{color:var(--muted);font-weight:400}
.map-intro{color:var(--muted);font-size:12.5px;margin:0 0 14px;max-width:820px;line-height:1.55}
.map-error{color:var(--pink2);font-size:13px}

/* ---------- gender variant switcher ----------
   Reuses .chipwrap / .chip from site.css so it matches the sidebar chips. */
.wm-variants{padding:0 0 14px;gap:7px}

/* ---------- map container ----------
 * Height is explicit: jsvectormap measures its container on init, and a
 * container with no height renders a map 0px tall with no error.
 */
#world-wrap{position:relative;max-width:1050px;margin:0 auto}
#world-map{width:100%;height:520px}

@media(max-width:900px){ #world-map{height:340px} }
@media(max-width:600px){ #world-map{height:260px} }

/* ---------- jsvectormap overrides ---------- */
.jvm-container{background:transparent}

/* Colour cascade — the base fill lives HERE, not in the library's
   regionStyle.initial, because the library re-applies that after render and
   was flattening every country back to one colour. Per-country fills are set
   as inline styles by world-map.js (inline beats a stylesheet), and hover
   uses !important so it can beat the inline style in turn. Change one of
   these three and check the other two. */
#world-map path{fill:var(--map-b0)}
#world-map path:hover{fill:var(--map-hover) !important}

.jvm-zoom-btn{
  background:var(--panel);color:var(--pink);border:1px solid var(--border);
  border-radius:7px;width:28px;height:28px;line-height:26px;font-size:15px;
  box-sizing:border-box;left:10px;padding:0
}
.jvm-zoom-btn:hover{border-color:var(--pink);background:var(--card)}
.jvm-zoom-btn.jvm-zoomin{top:10px}
.jvm-zoom-btn.jvm-zoomout{top:44px}

.jvm-tooltip{
  background:rgba(0,0,0,.82);color:var(--text);border:1px solid var(--border);
  border-radius:7px;padding:5px 10px;font-size:12px;font-family:inherit;
  box-shadow:none
}

/* ---------- legend ---------- */
#map-legend{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;font-size:11.5px;
  color:var(--muted);margin:12px 0 20px}
#map-legend i{width:20px;height:9px;display:inline-block;border-radius:2px;
  vertical-align:middle;margin-right:5px}

/* ---------- country search ---------- */
#map-search{text-align:center;margin:0 0 24px}
#country-filter{width:100%;max-width:330px;background:var(--panel);border:1px solid var(--border);
  color:var(--text);padding:9px 16px;border-radius:20px;outline:none;font-size:13px}
#country-filter:focus{border-color:var(--pink)}

/* ---------- region-grouped country list ---------- */
.region-block{margin-bottom:22px}
.region-block h2{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text);padding:8px 12px;background:var(--panel);border-left:3px solid var(--pink);
  border-radius:6px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.region-block h2 .region-total{color:var(--muted);font-weight:600;font-size:11px}

.country-grid{list-style:none;margin:0;padding:0 4px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:4px 14px}
.country-grid a{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;
  font-size:12.5px;color:var(--muted)}
.country-grid a:hover{background:var(--card);color:var(--text)}
.country-grid .c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-grid .c-count{font-style:normal;font-size:11px;opacity:.6;margin-left:auto}
.country-grid li.hide{display:none}

#map-no-results{color:var(--muted);font-size:12.5px;text-align:center;padding:10px 0}

@media(max-width:900px){
  .country-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* Foldables / large portrait tablets (iPad ~834px, Galaxy Fold ~884px). Match
   the tablet type-scale bump in site.css so this page isn't left at phone sizes:
   larger region headers, country names + counts, legend, search and intro. The
   country list drops to 3 roomy columns (from the auto-fill 4-5) so longer names
   like "Dominican Republic" show in full instead of truncating, and the map gets
   more height since there's vertical room on a tablet. Phones (<700px) and
   desktop (>900px) are untouched. Placed after the block above so it wins here. */
@media(min-width:700px) and (max-width:900px){
  #world-map{height:420px}
  .map-intro{font-size:14px}
  #map-legend{font-size:13px}
  #map-legend i{width:24px;height:10px}
  #country-filter{font-size:14.5px;max-width:380px}
  .region-block h2{font-size:14px}
  .region-block h2 .region-total{font-size:12px}
  .country-grid{grid-template-columns:repeat(3,1fr)}
  .country-grid a{font-size:14px;padding:6px 8px}
  .country-grid .c-count{font-size:12px}
  #map-no-results{font-size:14px}
}