/* ==========================================================================
   community_fund_map — interactive grant-funding map of Ireland
   Fonts are same-origin (no CDN) so a strict CSP holds.

   Colour AND typeface live entirely in the palette blocks below. :root is the
   Tesco set (the default); [data-theme="thrive"] restores the original Thrive
   one. index.php stamps data-theme from ?client=<key>, so everything past the
   palette blocks is shared and never needs a per-client edit.
   ========================================================================== */

/* TESCO Modern — the customer's own face, shared with the other Tesco forms at
   FORMS/tesco/custom_font/ rather than duplicated here, so a font update lands
   in one place. That makes this the one asset path that reaches outside the
   app folder: if community_fund_map is ever moved away from FORMS/tesco/,
   update these three URLs or the page silently falls back to system sans.
   Only the weights the design uses are declared; italics are never used. */
@font-face {
  font-family: 'TESCO Modern';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../custom_font/TESCOModern-Regular-final.ttf') format('truetype');
}
@font-face {
  font-family: 'TESCO Modern';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../../custom_font/TESCOModern-Medium-final.ttf') format('truetype');
}
@font-face {
  font-family: 'TESCO Modern';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../../custom_font/TESCOModern-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 900;               /* variable */
  font-display: swap;
  src: url('fonts/DMSans-400_900.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/DMMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/DMMono-500.woff2') format('woff2');
}

/* ---- Palette: Tesco (default) ------------------------------------------- */
:root {
  /* Brand. Tesco Red is deliberately absent from the chrome: it carries a
     cause in the bars, so spending it on furniture would blunt that. */
  --brand:        #00539F;  /* Tesco Blue */
  --brand-strong: #003A70;  /* pressed / emphasis step */

  /* Text */
  --ink:   #10243A;
  --muted: #5B6770;
  --mid:   #67737C;   /* small print; darkened to clear 4.5:1 on white */

  /* Surfaces */
  --page:     #F1F5FA;   /* app background */
  --board:    #F6FAFD;   /* the map "board" the island sits on */
  --board-hi: #FFFFFF;   /* highlight at the top of the board */
  --card:     #FFFFFF;   /* panel + controls */
  --hairline: #DDE7F0;

  /* Map tiles. Weighted to read as a solid landmass against the pale board,
     while leaving a clear jump up to --selected. */
  --tile:          #A3C4E1;  /* single calm county fill (no value ramp) */
  --tile-hover:    #7FAAD3;
  --tile-ni:       #D7DEE4;  /* Northern Ireland, recessed */
  --selected:      #00539F;
  --selected-glow: rgba(0, 58, 112, .42);

  /* Components */
  --btn-hover:  #E7F0F8;
  --tip-bg:     #10243A;
  --tip-accent: #A8D3F0;

  --shade: 16, 36, 58;   /* rgb triplet all shadows are mixed from */

  /* TESCO Modern has no monospace cut, so the "mono" role (eyebrows, the big
     stat, percentages) takes TESCO Modern too. Figures stay column-aligned via
     tabular-nums below rather than via a fixed-pitch face. */
  --font-sans: 'TESCO Modern', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'TESCO Modern', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius: 16px;
  --shadow-card: 0 1px 2px rgba(var(--shade), .05), 0 10px 30px rgba(var(--shade), .07);
}

/* ---- Palette: Thrive (?client=thrive) ----------------------------------- */
[data-theme="thrive"] {
  --brand:        #7B2D85;  /* brand purple */
  --brand-strong: #5F2168;

  --ink:   #213344;
  --muted: #6E7D82;
  --mid:   #5F6E73;

  --page:     #EEEFF6;
  --board:    #F7F6FB;
  --board-hi: #FCFBFF;
  --card:     #FFFFFF;
  --hairline: #E3E4EE;

  --tile:          #CDB9E2;
  --tile-hover:    #B7A0D4;
  --tile-ni:       #D6DBDF;
  --selected:      #7B2D85;
  --selected-glow: rgba(76, 26, 84, .42);

  --btn-hover:  #F1EEF7;
  --tip-bg:     #213344;
  --tip-accent: #C7E6FA;

  --shade: 33, 51, 68;

  /* Thrive keeps the self-hosted DM pair, including the real monospace. */
  --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* embed guard: never scroll sideways */
}

.fm {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(14px, 2.6vw, 30px);
}

/* ---- Header ------------------------------------------------------------- */
.fm-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.fm-head__text { flex: 1 1 240px; min-width: 0; }
.fm-title {
  margin: 2px 0 0;
  overflow-wrap: break-word;
  font-size: clamp(19px, 2.5vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.12;
}
.fm-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ---- Main layout -------------------------------------------------------- */
.fm-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 26px;
  align-items: start;
}

/* ---- Map ---------------------------------------------------------------- */
.fm-mapwrap { margin: 0; }
.fm-map {
  position: relative;
  height: clamp(430px, 64vh, 640px);
  background:
     radial-gradient(120% 90% at 50% 0%, var(--board-hi) 0%, var(--board) 70%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
}
.fm-svg { width: 100%; height: 100%; display: block; }
.fm-layer { filter: drop-shadow(0 10px 22px rgba(var(--shade), .16)); }

.fm-county {
  fill: var(--tile);
  stroke: var(--board);
  stroke-width: 1.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .16s ease, transform .24s cubic-bezier(.2,.7,.2,1);
}
.fm-county:hover { fill: var(--tile-hover); }
/* Clicking focuses the path — tabindex="0" keeps counties keyboard-reachable —
   and a mouse focus does not match :focus-visible. So the UA focus ring must be
   cleared on plain :focus, or Chrome paints a blue rectangle around the county's
   bounding box. The keyboard affordance stays on :focus-visible as a stroke,
   which follows the county outline instead of boxing it. */
.fm-county:focus { outline: none; }
.fm-county:focus-visible {
  stroke: var(--ink);
  stroke-width: 2.4;
}
.fm-county.is-selected {
  fill: var(--selected);
  stroke: #ffffff;
  stroke-width: 1.2;
  transform: scale(1.045);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 10px 15px var(--selected-glow));
}

.fm-ni {
  fill: var(--tile-ni);
  stroke: var(--board);
  stroke-width: 1.6;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Zoom controls */
.fm-zoom {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.fm-zoom__btn {
  width: 38px; height: 38px;
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 21px; font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--shade), .06);
  transition: background .14s ease, transform .1s ease;
}
.fm-zoom__btn:hover { background: var(--btn-hover); }
.fm-zoom__btn:active { transform: translateY(1px); }
.fm-zoom__btn--reset { font-size: 17px; }
.fm-zoom__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Tooltip */
.fm-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--tip-bg);
  color: #fff;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(var(--shade), .28);
  opacity: 0;
  transform: translate(-50%, -128%);
  transition: opacity .12s ease;
  white-space: nowrap;
}
.fm-tooltip.is-on { opacity: 1; }
.fm-tooltip b { display: block; font-weight: 700; }
.fm-tooltip span { font-family: var(--font-mono); color: var(--tip-accent); }

.fm-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Panel -------------------------------------------------------------- */
.fm-panel {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 24px;
  position: sticky;
  top: 20px;
}
.fm-panel__view { min-height: 300px; }
.fm-hidden { display: none; }
.fm-mt { margin-top: 22px; }

.fm-stat {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 44px);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.fm-stat__meta { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }

.fm-c-name {
  margin: 4px 0 0;
  font-size: 25px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
}

/* Overall (default) list */
.fm-overall { list-style: none; margin: 12px 0 0; padding: 0; }
.fm-overall__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}
.fm-overall__row:last-child { border-bottom: 0; }
.fm-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.fm-overall__name { flex: 1; font-size: 14px; color: var(--ink); }
.fm-overall__pct  { font-family: var(--font-mono); font-size: 13px; color: var(--muted);
                    font-variant-numeric: tabular-nums; }

.fm-cue {
  margin: 18px 0 0;
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
}

.fm-back {
  border: 0; background: transparent; padding: 0;
  margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--brand); cursor: pointer;
}
.fm-back:hover { color: var(--brand-strong); text-decoration: underline; }
.fm-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---- Footer ------------------------------------------------------------- */
.fm-foot {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
/* Sized against the attribution line beside it, not the map: a credit mark,
   not a second headline. Width is left to the intrinsic 370:155 ratio. */
.fm-foot__logo {
  flex: none;
  display: block;
  height: clamp(22px, 2.4vw, 28px);
  width: auto;
}
.fm-foot__attr { font-size: 11.5px; color: var(--mid); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .fm-main { grid-template-columns: 1fr; }
  .fm-panel { position: static; }
  .fm-map { height: clamp(400px, 74vh, 560px); }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fm-county, .fm-tooltip, .fm-zoom__btn { transition: none; }
  .fm-county.is-selected { transform: none; }
}