/* ---------------------------------------------------------------
   Every rule is scoped to .ffa-rmap so nothing leaks into the theme.
   No :root, no body, no bare element selectors.
   --------------------------------------------------------------- */
.ffa-rmap{
  --surface:#fcfcfb; --ink:#1a1a19; --ink-2:#52514e; --muted:#7c7a74;
  --hair:#e4e2da; --ring:rgba(11,11,11,.10);
  --land:#eeece4; --land-line:#ffffff;
  --pin:#25306D;            /* FFA Corduroy */
  --accent:#1A839A;         /* FFA Steel    */
  font:15px/1.55 "Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); width:100%; max-width:none; margin:0;
  /* ⚠️ THE MAP MUST SPAN EVERY COLUMN OF WHATEVER HOLDS IT. On ffa.org the shortcode sits in an
     Avada Text block set to five columns, which poured the map into 240px newspaper columns:
     the counts, the map, the legend and the note side by side in strips. column-span:all lifts
     it out of a multi-column parent and is ignored everywhere else, so the layout no longer
     depends on a setting in the page editor. */
  column-span:all; -webkit-column-span:all; break-inside:avoid;
}
.ffa-rmap *,.ffa-rmap *::before,.ffa-rmap *::after{box-sizing:border-box}
/* Two columns (Larry, 2026-10-09): the map and its controls take two thirds, the reporter list
   the remaining third. minmax(0,…) lets the map column shrink below the SVG's intrinsic width
   instead of pushing the list off the side. Below 900px the list drops under the map. */
.ffa-rmap .rm-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;
  align-items:start}
.ffa-rmap .rm-main,.ffa-rmap .rm-side{min-width:0}
.ffa-rmap .rm-stats{display:flex;flex-wrap:nowrap;gap:10px;margin:0 0 18px;padding:0;list-style:none}
/* The three counts share the list column's width equally, so they fit beside a 312px list at
   1024px as well as a 446px one at 1440px. */
.ffa-rmap .rm-stats li{flex:1 1 0;min-width:0;margin:0;background:var(--surface);border:1px solid var(--ring);
  border-radius:10px;padding:10px 14px}
.ffa-rmap .rm-stats b{display:block;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:var(--pin)}
.ffa-rmap .rm-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.ffa-rmap .rm-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:16px 32px;margin:0 0 16px;padding:16px 18px;background:var(--surface);border:1px solid var(--ring);
  border-radius:12px}
.ffa-rmap .rm-key{display:flex;flex-direction:column;gap:8px;min-width:0}
.ffa-rmap .rm-label{display:block;font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.ffa-rmap .rm-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;flex:1 1 360px}
.ffa-rmap .rm-field{display:flex;flex-direction:column;gap:6px;margin:0}
.ffa-rmap .rm-field{flex:0 1 200px}
.ffa-rmap .rm-field-search{flex:1 1 220px}
.ffa-rmap .rm-search,.ffa-rmap .rm-select{width:100%;min-width:180px;height:40px;padding:8px 12px;
  border:1px solid var(--ring);border-radius:8px;font:inherit;font-size:14px;color:var(--ink);
  background:#fff;margin:0}
.ffa-rmap .rm-search:focus,.ffa-rmap .rm-select:focus{outline:2px solid var(--accent);outline-offset:1px}
.ffa-rmap .rm-btn{background:#fff;border:1px solid var(--ring);color:var(--ink-2);height:40px;
  border-radius:8px;padding:8px 15px;font:inherit;font-size:14px;cursor:pointer;margin:0}
.ffa-rmap .rm-btn:hover{border-color:var(--accent);color:var(--ink)}
.ffa-rmap .rm-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ffa-rmap .rm-card{background:var(--surface);border:1px solid var(--ring);border-radius:12px;overflow:hidden}
.ffa-rmap .rm-svg{display:block;width:100%;height:auto}
/* ---------------------------------------------------------------
   REGION COLOUR LIVES ON THE LAND, NOT ON THE MARKERS.

   The region is a property of the PLACE, not of the person standing
   in it. With 182 pins spread over 45 states, colouring markers asks
   the reader to infer a boundary the map can simply draw — and it
   spends the marker's only visual channel on something the position
   already implies.

   So each state path takes --rl, a pale fill that reads under a pin
   and keeps state borders legible, and every pin returns to the one
   brand colour. --r stays as the saturated version, used for the
   legend and list swatches so they key back to the land.
   --------------------------------------------------------------- */
.ffa-rmap .rm-r-eastern { --r:#25306D; --rl:#ccd3e8; }  /* FFA Corduroy  */
.ffa-rmap .rm-r-central { --r:#1A839A; --rl:#c6e0e6; }  /* FFA Steel     */
.ffa-rmap .rm-r-southern{ --r:#B4553A; --rl:#eed7ce; }  /* warm clay     */
.ffa-rmap .rm-r-western { --r:#6B8F3A; --rl:#dbe7c9; }  /* field green   */
.ffa-rmap .rm-r-none    { --r:#9a978d; --rl:#eeece4; }  /* no region     */

.ffa-rmap .rm-state{fill:var(--rl,var(--land));stroke:var(--land-line);stroke-width:.75}

.ffa-rmap .rm-pin{fill:var(--pin);stroke:var(--surface);stroke-width:1.4;cursor:pointer}
.ffa-rmap .rm-pin.is-approx{fill:none;stroke:var(--pin);stroke-width:1.9}

.ffa-rmap .rm-legend,.ffa-rmap .rm-symbols{display:flex;flex-wrap:wrap;gap:8px;list-style:none;
  margin:0;padding:0;font-size:13px;color:var(--ink-2)}
.ffa-rmap .rm-legend li,.ffa-rmap .rm-symbols li{display:flex;align-items:center;gap:7px;margin:0}
.ffa-rmap .rm-symbols{gap:6px 18px;font-size:12px;color:var(--muted)}
/* A region chip is the legend AND the region filter; aria-pressed carries the state. */
.ffa-rmap .rm-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;margin:0;
  background:#fff;border:1px solid var(--ring);border-radius:999px;font:inherit;font-size:13px;
  color:var(--ink-2);cursor:pointer;line-height:1.2}
.ffa-rmap .rm-chip b{font-weight:600;color:var(--ink)}
.ffa-rmap .rm-chip:hover{border-color:var(--accent);color:var(--ink)}
.ffa-rmap .rm-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ffa-rmap .rm-chip.is-on{background:var(--pin);border-color:var(--pin);color:#fff}
.ffa-rmap .rm-chip.is-on b{color:#fff}
.ffa-rmap .rm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pin);
  border:1.5px solid var(--pin);flex:0 0 auto}
.ffa-rmap .rm-dot.is-approx{background:transparent}
.ffa-rmap .rm-sw{display:inline-block;width:12px;height:12px;border-radius:3px;
  background:var(--rl,var(--land));border:1px solid var(--r,var(--ring));flex:0 0 auto}

.ffa-rmap .rm-author{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ffa-rmap .rm-author:hover,
.ffa-rmap .rm-author:focus-visible{color:var(--ink)}
.ffa-rmap .rm-pin.is-dim{opacity:.13}
.ffa-rmap .rm-pin:focus-visible{outline:none;stroke:var(--accent);stroke-width:2.5}
.ffa-rmap .rm-offbox{fill:var(--land);stroke:#b8b5a6;stroke-width:1;stroke-dasharray:4 3}
.ffa-rmap .rm-offlabel{fill:var(--muted);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase}
.ffa-rmap .rm-count{font:inherit;font-size:13px;font-weight:600;line-height:1.3;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;margin:4px 2px 12px;padding:0}
/* The list pages rather than scrolls (Larry, 2026-10-09: no scroll bars). Ten to a page keeps it
   about the height of the map column beside it. */
.ffa-rmap .rm-list{list-style:none;margin:0;padding:0;border:1px solid var(--ring);border-radius:12px;
  background:#fff;overflow:hidden}
.ffa-rmap .rm-item{display:flex;flex-direction:column;gap:2px;margin:0;padding:11px 16px;
  border-bottom:1px solid var(--hair)}
.ffa-rmap .rm-item:last-child{border-bottom:0}
.ffa-rmap .rm-author,.ffa-rmap .rm-name{font-size:15px;font-weight:600;line-height:1.35}
.ffa-rmap .rm-name{color:var(--ink)}
.ffa-rmap .rm-chapter{font-size:14px;color:var(--ink-2);line-height:1.35}
.ffa-rmap .rm-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;
  color:var(--muted);line-height:1.35}
.ffa-rmap .rm-region{display:inline-flex;align-items:center;gap:6px}
.ffa-rmap .rm-empty{color:var(--muted);text-align:center;padding:24px 12px;margin:0}
.ffa-rmap .rm-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;margin:12px 0 0}
.ffa-rmap .rm-pager:empty{display:none}
.ffa-rmap .rm-pageof{font-size:13px;color:var(--muted)}
.ffa-rmap .rm-pgs{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ffa-rmap .rm-pg{min-width:34px;height:34px;padding:0 8px;margin:0;border:1px solid var(--ring);
  border-radius:8px;background:#fff;color:var(--ink-2);font:inherit;font-size:14px;line-height:1;
  cursor:pointer}
.ffa-rmap .rm-pg:hover:not([disabled]){border-color:var(--accent);color:var(--ink)}
.ffa-rmap .rm-pg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ffa-rmap .rm-pg.is-current{background:var(--pin);border-color:var(--pin);color:#fff;font-weight:600}
.ffa-rmap .rm-pg[disabled]{opacity:.4;cursor:default}
.ffa-rmap .rm-gap{padding:0 4px;color:var(--muted)}
.ffa-rmap [hidden]{display:none!important}
/* WordPress themes define .screen-reader-text; repeated here so the file also works standalone */
.ffa-rmap .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.ffa-rmap-tip{position:fixed;z-index:9999;pointer-events:none;max-width:280px;background:#fcfcfb;
  color:#1a1a19;border:1px solid rgba(11,11,11,.12);border-radius:9px;padding:9px 12px;
  box-shadow:0 8px 26px rgba(0,0,0,.18);font:14px/1.45 "Montserrat",system-ui,sans-serif;
  opacity:0;transition:opacity .1s}
.ffa-rmap-tip b{display:block;font-size:15px;margin-bottom:2px}
.ffa-rmap-tip span{color:#7c7a74;font-size:13px}
@media (max-width:900px){
  .ffa-rmap .rm-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ffa-rmap .rm-toolbar{padding:14px}
  .ffa-rmap .rm-fields{flex-basis:100%;justify-content:stretch}
  .ffa-rmap .rm-field,.ffa-rmap .rm-field-search{flex:1 1 100%;max-width:none}
  .ffa-rmap .rm-stats li{padding:8px 10px}
  .ffa-rmap .rm-stats span{font-size:10px;letter-spacing:.05em}
  .ffa-rmap .rm-stats b{font-size:20px}
}