/**
 * City Architecture Engine (Phase 2.8, docs/DECISIONS.md ADR-026).
 * Mirrors assets/css/service.css exactly. Every class here backs a
 * component under template-parts/components/ whose name starts with
 * "city-" (plus Related Cities), and the single-city/city-archive page
 * layouts. Enqueued on the front page (Featured Cities reuses these
 * classes there too) and on any city route — see inc/class-assets.php.
 */

/* ---------- City Card (compact + detailed layout variants) ---------- */

.home-cities__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.home-cities__item:hover {
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

.home-cities__item svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
	color: var(--color-brand-primary);
}

.home-cities__item-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.home-cities__item-subtitle {
	color: var(--color-text-muted);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-sm);
}

.city-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.city-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-md);
	background-color: var(--color-primary-50);
	color: var(--color-brand-primary);
}

.city-card__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.city-card__title {
	margin: var(--space-2) 0 0;
}

.city-card__title a {
	color: inherit;
	text-decoration: none;
}

.city-card__title a:hover {
	color: var(--color-brand-primary);
}

.city-card__description {
	margin: 0;
	color: var(--color-text-muted);
}

.city-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	color: var(--color-brand-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.city-card__link svg {
	width: 1rem;
	height: 1rem;
	transition: transform var(--transition-fast) var(--ease-standard);
}

.city-card__link:hover svg {
	transform: translateX(3px);
}

.city-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- City Badge ---------- */

.city-badge {
	margin-block-end: var(--space-1);
}

/* ---------- City Meta ---------- */

.city-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
}

.city-meta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-50);
	color: var(--color-brand-primary);
}

.city-meta__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.city-meta__state,
.city-meta__services {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.city-meta__services svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--color-brand-primary);
}

/* ---------- City content (single-city.php's raw wpautop output) ---------- */

.city-content {
	max-width: 45rem;
	color: var(--color-text);
}

.city-content p {
	margin: 0 0 var(--space-4);
}

.city-content p:last-child {
	margin-block-end: 0;
}

/* ---------- City sections (Available Services / Nearby Areas / FAQ / Emergency) ---------- */

.city-section {
	margin-block-start: var(--space-10);
}

.city-areas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.city-areas__item {
	font-weight: var(--font-weight-regular);
}

.city-section--emergency {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background-color: var(--color-primary-50);
}

/* ---------- Related Cities ---------- */

.related-cities {
	margin-block-start: var(--space-12);
}

/* ---------- City Sidebar ---------- */

.city-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	position: sticky;
	inset-block-start: calc(var(--space-16));
}

.city-sidebar__title {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-lg);
}

.city-sidebar__row {
	margin-block-end: var(--space-4);
}

.city-sidebar__row:last-child {
	margin-block-end: 0;
}

.city-sidebar__label {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.city-sidebar__state {
	margin: 0;
	color: var(--color-text);
}

.city-sidebar__searches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- City layout (single-city.php: content + sidebar) ---------- */

.city-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (max-width: 64rem) {
	.city-layout {
		grid-template-columns: 1fr;
	}

	.city-sidebar {
		position: static;
	}
}

/* ---------- City Navigation (archive-city.php) ---------- */

.city-navigation {
	margin-block-end: var(--space-8);
}

.city-navigation__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.city-navigation__count {
	color: var(--color-text-muted);
	font-weight: var(--font-weight-regular);
}

/* ---------- City archive regions ---------- */

.city-archive__region {
	margin-block-end: var(--space-12);
}

.city-archive__region:last-child {
	margin-block-end: 0;
}

/* ---------- site-main variant for city routes (mirrors .site-main--service) ---------- */

.site-main--city {
	padding: 0;
}