/*
 * Safience interactive-map blocks (.sfr namespace).
 *
 * Scoped under `.sfr` so the parent theme's styles do not collide. Powers:
 *   - acf/content-hero
 *   - acf/instructions-strip
 *   - acf/stakeholder-map
 *
 * Design tokens mirror safience.io (navy/teal/amber/violet/stone/rust) and
 * are also consumed by stakeholder-map/render.php for SVG fill/stroke.
 */

.sfr {
  --sfr-navy:        #0C447C;
  --sfr-blue:        #185FA5;
  --sfr-blue-soft:   #E6F1FB;
  --sfr-teal-ink:    #085041;
  --sfr-teal:        #0F6E56;
  --sfr-teal-soft:   #E1F5EE;
  --sfr-amber-ink:   #633806;
  --sfr-amber:       #854F0B;
  --sfr-amber-soft:  #FAEEDA;
  --sfr-violet-ink:  #3C3489;
  --sfr-violet:      #534AB7;
  --sfr-violet-soft: #EEEDFE;
  --sfr-rust-ink:    #712B13;
  --sfr-rust:        #993C1D;
  --sfr-rust-soft:   #FAECE7;
  --sfr-stone-ink:   #444441;
  --sfr-stone:       #5F5E5A;
  --sfr-stone-soft:  #F1EFE8;
  --sfr-ink:         #14140F;
  --sfr-ink-2:       #3D3D3A;
  --sfr-rule:        rgba(31,30,29,0.15);
  --sfr-card:        #FFFFFF;
  --sfr-focus:       #185FA5;
  --sfr-shadow:      0 1px 2px rgba(12,68,124,0.04), 0 8px 24px rgba(12,68,124,0.06);
  --sfr-shadow-lg:   0 2px 4px rgba(12,68,124,0.06), 0 24px 48px rgba(12,68,124,0.12);
}

/* Scope reset: inherit typography from the parent theme so hero + panel text
   match the rest of safience.io (Mona Sans / Plus Jakarta Sans), and let the
   page background show through. */
.sfr, .sfr * { box-sizing: border-box; }
.sfr { color: var(--sfr-ink); line-height: 1.55; font-size: 16px; }
.sfr h1, .sfr h2, .sfr h3, .sfr h4, .sfr p, .sfr ul, .sfr ol { margin: 0; padding: 0; font-family: inherit; }
.sfr ul, .sfr ol { list-style: none; }
.sfr button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Content hero ---------- */
/* Top padding clears the theme's sticky nav + announcement bar (~150px on
   desktop, ~100px on tablet). The Block Page Template doesn't reserve space
   for the header, so each top-of-page block has to. */
.sfr-content-hero { background: transparent; }
.sfr-content-hero .sfr-hero {
  padding: 180px 32px 48px; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 900px) {
  .sfr-content-hero .sfr-hero { padding-top: 130px; }
}
.sfr-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
.sfr-content-hero.has-accent .sfr-hero-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.sfr-eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 600;
  color: var(--sfr-blue);
}
.sfr-content-hero h1 {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 600; color: var(--sfr-ink); margin-top: 14px; max-width: 820px;
}
.sfr-content-hero .lede {
  font-size: 18px; color: var(--sfr-ink-2); margin-top: 18px; max-width: 720px;
}
.sfr-content-hero .lede strong { color: var(--sfr-ink); font-weight: 600; }
.sfr-content-hero .lede p + p { margin-top: 10px; }
.sfr-hero-cta { margin-top: 24px; }
.sfr-btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.sfr-btn-primary { background: var(--sfr-navy); color: #fff; }
.sfr-btn-primary:hover { background: #0a3a6c; transform: translateY(-1px); }
.sfr-hero-accent img {
  width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sfr-shadow);
  display: block;
}

/* ---------- Instructions strip ---------- */
.sfr-instructions-block { background: transparent; }
.sfr-instructions {
  max-width: 1200px; margin: 0 auto; padding: 24px 32px;
  display: flex; gap: 32px; flex-wrap: wrap; font-size: 13px; color: var(--sfr-ink-2);
  align-items: baseline;
}
.sfr-instructions-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--sfr-ink); margin-right: 8px;
}
.sfr-instructions .step { display: flex; gap: 10px; align-items: baseline; }
.sfr-instructions .step b {
  color: var(--sfr-navy); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sfr-instructions .step .icon img { width: 14px; height: 14px; display: inline-block; }

/* ---------- Stakeholder map ---------- */
.sfr-stakeholder-map { background: transparent; }
.sfr-stage { max-width: 1200px; margin: 32px auto 80px; padding: 0 32px; position: relative; }
.sfr-map-card {
  background: var(--sfr-card); border: 1px solid var(--sfr-rule); border-radius: 12px;
  box-shadow: var(--sfr-shadow); padding: 24px; overflow: hidden;
}
.sfr-map-card svg { width: 100%; height: auto; display: block; }

.sfr-node {
  cursor: pointer; transition: transform 140ms ease, filter 140ms ease;
  transform-box: fill-box; transform-origin: center;
}
.sfr-node rect { transition: filter 140ms ease, stroke-width 140ms ease; }
.sfr-node:hover rect { filter: brightness(0.97); stroke-width: 1.4; }
.sfr-node:hover { transform: translateY(-1px); }
.sfr-node:focus { outline: none; }
.sfr-node:focus rect { stroke: var(--sfr-focus); stroke-width: 2; }
.sfr-node.is-active rect { stroke-width: 2.2; filter: drop-shadow(0 4px 8px rgba(12,68,124,0.18)); }

/* ---------- Side panel ---------- */
/* Z-index chosen to sit above the theme's sticky nav but below the WP admin
   bar. When the admin bar is present we also offset top so its toolbar stays
   visible (matches WP default behavior on every other modal in the site). */
.sfr-scrim {
  position: fixed; inset: 0; background: rgba(10,22,36,0.35);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
  z-index: 99998; backdrop-filter: blur(2px);
}
.sfr-scrim.is-open { opacity: 1; pointer-events: auto; }

.sfr-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 92vw);
  background: #fff; box-shadow: var(--sfr-shadow-lg);
  transform: translateX(100%); transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1);
  z-index: 99999; display: flex; flex-direction: column;
}
.sfr-panel.is-open { transform: translateX(0); }

/* WP admin bar offset (logged-in authors). 32px desktop, 46px tablet. */
.admin-bar .sfr-panel { top: 32px; height: calc(100vh - 32px); }
.admin-bar .sfr-scrim { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .sfr-panel { top: 46px; height: calc(100vh - 46px); }
  .admin-bar .sfr-scrim { top: 46px; }
}
.sfr-panel-head {
  padding: 22px 28px 18px; border-bottom: 1px solid var(--sfr-rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.sfr-panel-head .tag {
  display: inline-block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 600; padding: 3px 8px; border-radius: 3px;
  background: var(--sfr-blue-soft); color: var(--sfr-navy); margin-bottom: 10px;
}
.sfr-panel-head h2 {
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; color: var(--sfr-ink);
}
.sfr-panel-head .close {
  font-size: 22px; width: 32px; height: 32px; border-radius: 6px; color: var(--sfr-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.sfr-panel-head .close:hover { background: var(--sfr-stone-soft); color: var(--sfr-ink); }

.sfr-panel-body { padding: 22px 28px 28px; overflow-y: auto; flex: 1; }
.sfr-panel-body h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sfr-ink-2); font-weight: 700; margin: 22px 0 10px;
}
.sfr-panel-body h3:first-child { margin-top: 0; }
.sfr-panel-body p { margin: 0 0 12px; color: var(--sfr-ink-2); font-size: 14.5px; line-height: 1.6; }
.sfr-panel-body p strong { color: var(--sfr-ink); }
.sfr-panel-body ul { margin: 0 0 12px; padding-left: 0; }
.sfr-panel-body ul li {
  font-size: 14.5px; color: var(--sfr-ink-2); padding-left: 18px; position: relative; margin-bottom: 8px;
}
.sfr-panel-body ul li::before {
  content: ""; width: 4px; height: 4px; background: var(--sfr-blue); border-radius: 50%;
  position: absolute; left: 4px; top: 9px;
}

/* ---------- Ask Safience chat block ---------- */
.sfr-chat { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--sfr-rule); }
.sfr-chat h3 { margin-top: 0; }
.sfr-chat .chat-log {
  max-height: 220px; overflow-y: auto; margin-bottom: 12px; font-size: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sfr-chat .msg { padding: 10px 12px; border-radius: 8px; line-height: 1.5; }
.sfr-chat .msg.user { background: var(--sfr-blue-soft); color: var(--sfr-navy); align-self: flex-end; max-width: 85%; }
.sfr-chat .msg.assistant { background: var(--sfr-stone-soft); color: var(--sfr-ink); max-width: 92%; }
.sfr-chat .msg.error { background: #FBECE8; color: var(--sfr-rust-ink); font-size: 13px; }
.sfr-chat .msg.thinking { color: var(--sfr-ink-2); font-style: italic; font-size: 13.5px; }

.sfr-chat form { display: flex; gap: 8px; }
.sfr-chat textarea {
  flex: 1; resize: none; font-family: inherit; font-size: 14px; line-height: 1.45;
  padding: 10px 12px; border: 1px solid var(--sfr-rule); border-radius: 8px;
  background: #fff; color: var(--sfr-ink); min-height: 42px; max-height: 120px;
}
.sfr-chat textarea:focus { outline: 2px solid var(--sfr-focus); outline-offset: 1px; border-color: transparent; }
.sfr-chat textarea:disabled { background: var(--sfr-stone-soft); color: var(--sfr-ink-2); cursor: not-allowed; }
.sfr-chat button.send {
  background: var(--sfr-navy); color: #fff; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; min-width: 72px;
}
.sfr-chat button.send:hover { background: #0a3a6c; }
.sfr-chat button.send:disabled { background: var(--sfr-stone); cursor: not-allowed; }
.sfr-chat .suggested { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sfr-chat .suggested button {
  font-size: 12.5px; padding: 6px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sfr-rule); color: var(--sfr-ink-2);
}
.sfr-chat .suggested button:hover { border-color: var(--sfr-blue); color: var(--sfr-navy); }
.sfr-chat .disabled-note {
  font-size: 13px; color: var(--sfr-ink-2); background: var(--sfr-stone-soft);
  padding: 10px 12px; border-radius: 8px; border-left: 3px solid var(--sfr-amber);
}
.sfr-chat .disabled-note strong { color: var(--sfr-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sfr-content-hero.has-accent .sfr-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sfr-content-hero .sfr-hero { padding: 40px 20px 24px; }
  .sfr-stage { padding: 0 20px; margin: 24px auto 60px; }
  .sfr-instructions { padding: 20px; gap: 14px; }
  .sfr-panel-head { padding: 18px 20px 14px; }
  .sfr-panel-body { padding: 18px 20px 24px; }
}