/**
 * City rent-control page styles.
 *
 * Currently, city pages (SF, Oakland, LA, San Jose, Berkeley) reuse the
 * shared calculator/FAQ/resource-card styles from calculators.css plus
 * page-specific inline styles. As city-specific patterns emerge or are
 * extracted from the inline blocks, they should be placed here.
 *
 * This file is loaded on all pages via wp_enqueue_style so that when
 * inline styles are removed in a future pass, the external file is
 * already cached.
 */

/* ─── City hero stat cards ─── */

.lb-city-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: var(--lb-space-xl);
  text-align: center;
}

.lb-city-stat-card__value {
  font-size: var(--lb-text-3xl);
  font-weight: 800;
  color: var(--lb-primary);
  margin: 0;
}

.lb-city-stat-card__label {
  font-size: var(--lb-text-sm);
  color: var(--lb-gray-400);
  margin: var(--lb-space-xs) 0 0;
}

/* ─── City quick-nav pills ─── */

.lb-city-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: var(--lb-space-xl);
}

.lb-city-nav__link {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--lb-text-sm);
  font-weight: 500;
  color: var(--lb-gray-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.lb-city-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--lb-primary);
  color: var(--lb-primary);
}

.lb-city-nav__link--active {
  background: var(--lb-primary);
  border-color: var(--lb-primary);
  color: #fff;
}