/**
 * ui_rate_display.css
 * Styles for the Unemployment Rate Display block.
 */

/* ── Wrapper ─────────────────────────────────────────── */
.ui-rate-display {
  width: 100%;
  position: relative;
}

/* ── Map (desktop) ───────────────────────────────────── */
.ui-rate-display__map {
  width: 100%;
  height: 600px;
  display: block;
}

/* ── Table (mobile) ──────────────────────────────────── */
.ui-rate-display__table-wrapper {
  display: none;
  width: 100%;
  overflow-x: auto;
}

.ui-rate-display__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ui-rate-display__table caption {
  font-weight: bold;
  margin-bottom: 0.5em;
  text-align: left;
}

.ui-rate-display__table th,
.ui-rate-display__table td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

.ui-rate-display__table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.ui-rate-display__table tr:last-child td {
  border-bottom: none;
}

.ui-rate-display__rate {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Breakpoint: mobile (<= 600px) ───────────────────── */
@media (max-width: 600px) {
  .ui-rate-display__map,
  .block-ui-rate-display{
    display: none;
  }

  .ui-rate-display__table-wrapper {
    display: block;
  }
}

.block-ui-rate-display{border:thin solid black;}
.block-ui-rate-display h2{margin-top: 0;}