/* DJC StateMap -- Skeleton
 *
 * Structural layout for the donor-progress choropleth. Ported from the
 * Celebrate America page into a self-contained DJC component, so every token
 * the rules below reference is localized to the component root (.djc-statemap)
 * instead of inheriting from a page stylesheet. Override visuals via the skin
 * (see skins/statemap.djc.css) or by redeclaring these vars on .djc-statemap.
 *
 * Parts:
 *   .hero-counter    -- "Donors So Far" headline counter + meta
 *   .hero-progress   -- to-goal progress bar
 *   .state-map       -- header (title + legend), overview, detail-view
 *   .state-map__svg  -- the choropleth (paths shaded by data-tier 0-5)
 *   .state-map__side -- small NE states list, too narrow to label inside
 *   .state-detail    -- single zoomed-in state view
 */

@import url('skins/statemap.djc.css');

/* Localized design tokens (resolved from the source page palette) */
.djc-statemap {
  --color-1: #15315e;
  --color-n0: #f7f3e9;
  --color-n2: #ece5d6;
  --color-success: #1d8f63;
  --text-strong: #0e1b30;
  --text-muted: #6b6f78;

  --font-1: 'Georgia', 'Times New Roman', 'Times', serif;
  --font-2: 'proxima-nova', system-ui, sans-serif;

  --margin-md: 35px;
  --max-lg: 1500px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --gradientX3: linear-gradient(to right, #dbb763, #9c7a2e);

  /* state-map choropleth ramp: 5 tiers + empty */
  --color-tier-0: #ece5d6;
  --color-tier-1: #d6e6ef;
  --color-tier-2: #a6cfe2;
  --color-tier-3: #6fb0d2;
  --color-tier-4: #2f7ea8;
  --color-tier-5: #144f7a;
}

.state-map-mount {
  max-width: var(--max-lg);
  margin: 0 auto;
}

.hero-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.hero-counter__label {
  font-family: var(--font-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.hero-counter__value {
  font-family: var(--font-1);
  font-size: clamp(48px, 9vw, 84px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-1);
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

.hero-counter__meta {
  font-family: var(--font-2);
  font-size: 14px;
  color: var(--text-muted);
}

.hero-counter__meta strong {
  color: var(--color-1);
  font-weight: 700;
}

.hero-progress {
  max-width: 620px;
  margin: 0 auto var(--margin-md);
}

.hero-progress__track {
  height: 12px;
  background: var(--color-n0);
  border: 1px solid var(--color-n2);
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradientX3);
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-progress__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-2);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* state map: card */
.state-map {
  background: var(--color-n0);
  border: 1px solid var(--color-n2);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 28px);
}

.state-map__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.state-map__title {
  font-family: var(--font-1);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--color-1);
}

.state-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-2);
  font-size: 11px;
  color: var(--text-muted);
}

.state-map__legend-swatch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.state-map__legend-swatch span:first-child {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--color-n2);
}

.swatch-tier-0 span:first-child {
  background: var(--color-tier-0);
}

.swatch-tier-1 span:first-child {
  background: var(--color-tier-1);
}

.swatch-tier-2 span:first-child {
  background: var(--color-tier-2);
}

.swatch-tier-3 span:first-child {
  background: var(--color-tier-3);
}

.swatch-tier-4 span:first-child {
  background: var(--color-tier-4);
}

.swatch-tier-5 span:first-child {
  background: var(--color-tier-5);
}

.state-map__body {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
}

.state-map__canvas {
  flex: 1 1 460px;
  min-width: 0;
  position: relative;
}

.state-map__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.state-map__loading {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-2);
  font-size: 14px;
}

.state-map__state {
  stroke: var(--color-n0);
  stroke-width: 0.75;
  /* keep the border a crisp hairline with rounded corners in every state
     (including :hover, which bumps the stroke width) -- matches the detail
     shape so hovered states don't read sharp */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: var(--color-tier-0);
  cursor: pointer;
  transition: fill 400ms ease, stroke 120ms ease;
}

.state-map__state[data-tier='1'] {
  fill: var(--color-tier-1);
}

.state-map__state[data-tier='2'] {
  fill: var(--color-tier-2);
}

.state-map__state[data-tier='3'] {
  fill: var(--color-tier-3);
}

.state-map__state[data-tier='4'] {
  fill: var(--color-tier-4);
}

.state-map__state[data-tier='5'] {
  fill: var(--color-tier-5);
}

.state-map__state:hover {
  stroke: var(--color-1);
  stroke-width: 1.6;
}

.state-map__label {
  font-family: var(--font-2);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.state-map__label[data-on='light'] {
  fill: var(--text-strong);
}

.state-map__label[data-on='dark'] {
  fill: #ffffff;
}

.state-map__overview,
.state-map__detail-view {
  transition: opacity 280ms ease;
}

.state-map__detail-view {
  animation: ca-fade-in 280ms ease;
  /* anchor for the back button, pinned to this container's top-left corner.
     padding-top reserves room so the layout clears the absolute button. */
  position: relative;
  padding-top: 44px;
}

/* state map: side list (small NE states) */
.state-map__side {
  flex: 0 0 auto;
  width: 188px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-n2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.state-map__side-title {
  font-family: var(--font-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.state-map__side-list {
  list-style: none;
}

.state-map__side-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin: 0 -6px;
  border-bottom: 1px solid var(--color-n2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}

.state-map__side-row:last-child {
  border-bottom: none;
}

.state-map__side-row:hover {
  background: var(--color-n0);
}

.state-map__side-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-tier-0);
  border: 1px solid var(--color-n2);
}

.state-map__side-row[data-tier='1'] .state-map__side-swatch {
  background: var(--color-tier-1);
}

.state-map__side-row[data-tier='2'] .state-map__side-swatch {
  background: var(--color-tier-2);
}

.state-map__side-row[data-tier='3'] .state-map__side-swatch {
  background: var(--color-tier-3);
}

.state-map__side-row[data-tier='4'] .state-map__side-swatch {
  background: var(--color-tier-4);
}

.state-map__side-row[data-tier='5'] .state-map__side-swatch {
  background: var(--color-tier-5);
}

.state-map__side-abbr {
  flex: 0 0 auto;
  width: 26px;
  font-family: var(--font-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-1);
}

.state-map__side-count {
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--font-2);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.state-map__hint {
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  background: var(--color-n2);
  border-radius: var(--radius-md);
  font-family: var(--font-2);
  font-size: 13px;
  color: var(--text-muted);
}

/* state map: detail view */
.state-detail__back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-2);
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--color-n2);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  transition: border-color 120ms ease, color 120ms ease;
}

.state-detail__back:hover {
  border-color: var(--color-1);
  color: var(--color-1);
}

.state-detail__layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-md);
  align-items: center;
}

.state-detail__svg-wrap {
  flex: 1 1 300px;
  min-width: 0;
}

.state-detail__svg {
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
}

.state-detail__shape {
  stroke: var(--color-n0);
  /* the detail svg zooms into a small viewBox, so a user-unit stroke scales up
     thick and exaggerates every polygon corner. a non-scaling 1px hairline with
     rounded joins keeps the border thin and softens the edges at any zoom. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 400ms ease;
}

.state-detail__info {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.state-detail__eyebrow {
  font-family: var(--font-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.state-detail__name {
  font-family: var(--font-1);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--color-1);
  line-height: 1.05;
}

.state-detail__count {
  font-family: var(--font-1);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-1);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.state-detail__count-goal {
  font-family: var(--font-2);
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 400;
}

.state-detail__status {
  font-family: var(--font-2);
  font-size: 14px;
}

.state-detail__status--done {
  color: var(--color-success);
  font-weight: 700;
}

.state-detail__track {
  height: 9px;
  background: var(--color-n2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.state-detail__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradientX3);
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.state-detail__cta {
  align-self: flex-start;
  margin-top: 8px;
}

@media only screen and (max-width: 720px) {
  .state-map__side {
    width: 100%;
  }

  .state-map__side-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .state-map__side-row {
    flex: 1 1 calc(50% - 6px);
    margin: 0;
    border-bottom: none;
    background: var(--color-n0);
  }
}

/* glassmorphic theme: the base mobile rule above paints the side rows with the
   light --color-n0, but this theme's abbreviation/count text is white -- which
   leaves white-on-white. keep the mobile rows glassy (dark) so they stay legible
   and match the desktop side panel. */
@media only screen and (max-width: 720px) {
  .djc-statemap--theme-glassmorphic .state-map__side-row {
    background: rgba(255, 255, 255, 0.06);
  }
}


/* Self-contained detail CTA
 * The source page used global .btn-md .btn-bkg3 button classes. As a global
 * component we can't rely on those existing, so the CTA is styled standalone. */
.djc-statemap .state-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 8px;
  height: 50px;
  min-width: 240px;
  padding: 0 30px;
  border-radius: 100px;
  /* match the global .btn-bkg3 gold gradient */
  background: linear-gradient(180deg, #ecca74, #c49a44);
  color: var(--color-1b);
  font-family: var(--font-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(14, 36, 71, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.djc-statemap a.state-detail__cta {
  color: var(--color-1b);
}

.djc-statemap .state-detail__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(14, 36, 71, 0.33);
}


/* =====================================================================
   THEME: glassmorphic
   Navy glass field with a gold "% of goal" ramp (tier-0 = blank, so empty
   states recede instead of reading as zeros) and a soft gold glow on filled
   states. Adds the decorative state-square pips and the "States on the map"
   list below the map. Opt in via theme:'glassmorphic'; all copy is identical
   to the default 'modern-blue' theme.
   ===================================================================== */
.djc-statemap--theme-glassmorphic {
  /* frosted (semi-transparent white) ramp on the navy field -- tier-0 is barely
     there so un-donated states recede; opacity rises with % of goal */
  --color-tier-0: rgba(255, 255, 255, 0.05);
  --color-tier-1: rgba(255, 255, 255, 0.18);
  --color-tier-2: rgba(255, 255, 255, 0.3);
  --color-tier-3: rgba(255, 255, 255, 0.44);
  --color-tier-4: rgba(255, 255, 255, 0.58);
  --color-tier-5: rgba(255, 255, 255, 0.74);

  position: relative;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius-lg, 18px);
  background:
    radial-gradient(125% 130% at 72% 20%, rgba(40, 74, 132, 0.55), transparent 60%),
    linear-gradient(150deg, #1c3d70 0%, #112c54 45%, #0a1a38 100%);
  color: #ffffff;
  overflow: hidden;
}

/* counter + progress -> light on navy */
.djc-statemap--theme-glassmorphic .hero-counter__label,
.djc-statemap--theme-glassmorphic .hero-progress__labels {
  color: rgba(255, 255, 255, 0.7);
}

.djc-statemap--theme-glassmorphic .hero-counter__value {
  color: #ffffff;
}

.djc-statemap--theme-glassmorphic .hero-counter__meta {
  color: rgba(255, 255, 255, 0.78);
}

.djc-statemap--theme-glassmorphic .hero-counter__meta strong {
  color: #dbb763;
}

.djc-statemap--theme-glassmorphic .hero-progress__track {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* inner card goes transparent -- the root is the glass panel now */
.djc-statemap--theme-glassmorphic .state-map {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 22px;
}

.djc-statemap--theme-glassmorphic .state-map__title {
  color: #ffffff;
}

.djc-statemap--theme-glassmorphic .state-map__legend {
  color: rgba(255, 255, 255, 0.7);
}

.djc-statemap--theme-glassmorphic .state-map__legend-swatch span:first-child {
  border-color: rgba(255, 255, 255, 0.25);
}

/* states: subtle light stroke, gold glow on filled tiers, gold hover */
.djc-statemap--theme-glassmorphic .state-map__state {
  stroke: rgba(255, 255, 255, 0.12);
}

.djc-statemap--theme-glassmorphic .state-map__state[data-tier='3'],
.djc-statemap--theme-glassmorphic .state-map__state[data-tier='4'],
.djc-statemap--theme-glassmorphic .state-map__state[data-tier='5'] {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}

.djc-statemap--theme-glassmorphic .state-map__state:hover {
  stroke: rgba(255, 255, 255, 0.8);
}

/* frosted fills read dark at low tiers (navy showing through) and light at
   high tiers, so flip the label colour vs the blue choropleth */
.djc-statemap--theme-glassmorphic .state-map__label[data-on='light'] {
  fill: #ffffff;
}

.djc-statemap--theme-glassmorphic .state-map__label[data-on='dark'] {
  fill: #0e1b30;
}

/* NE side panel + hint -> glass */
.djc-statemap--theme-glassmorphic .state-map__side {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.djc-statemap--theme-glassmorphic .state-map__side-title,
.djc-statemap--theme-glassmorphic .state-map__side-count {
  color: rgba(255, 255, 255, 0.7);
}

.djc-statemap--theme-glassmorphic .state-map__side-abbr {
  color: #ffffff;
}

.djc-statemap--theme-glassmorphic .state-map__side-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.djc-statemap--theme-glassmorphic .state-map__side-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.djc-statemap--theme-glassmorphic .state-map__hint {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

/* state-square pips (decorative progress strip) -- fixed 25-per-row so the two
   rows of 50 are always even; capped width keeps the squares a sensible size
   and centred, with top margin separating it from the map UI above */
.djc-statemap--theme-glassmorphic .state-map__squares {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 6px;
  max-width: 760px;
  margin: 40px auto 0;
}

.djc-statemap--theme-glassmorphic .state-map__square {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.djc-statemap--theme-glassmorphic .state-map__square.is-lit {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* "States on the map" list */
.djc-statemap--theme-glassmorphic .state-map__on-map {
  margin-top: 22px;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-title {
  font-family: var(--font-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s ease;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-row:hover {
  background: rgba(255, 255, 255, 0.09);
}

.djc-statemap--theme-glassmorphic .state-map__on-map-name {
  font-family: var(--font-2);
  font-weight: 700;
  color: #ffffff;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-count {
  font-family: var(--font-2);
  font-weight: 700;
  color: #dbb763;
  font-variant-numeric: tabular-nums;
}

.djc-statemap--theme-glassmorphic .state-map__on-map-empty {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  padding: 6px 2px;
}

/* detail view (single state) -> legible on the glass panel */
.djc-statemap--theme-glassmorphic .state-detail__eyebrow,
.djc-statemap--theme-glassmorphic .state-detail__count-goal,
.djc-statemap--theme-glassmorphic .state-detail__status {
  color: rgba(255, 255, 255, 0.75);
}

.djc-statemap--theme-glassmorphic .state-detail__name,
.djc-statemap--theme-glassmorphic .state-detail__count {
  color: #ffffff;
}

.djc-statemap--theme-glassmorphic .state-detail__back {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.djc-statemap--theme-glassmorphic .state-detail__back:hover {
  color: #ffffff;
  border-color: #dbb763;
}

.djc-statemap--theme-glassmorphic .state-detail__track {
  background: rgba(255, 255, 255, 0.12);
}