/**
 * Service Area landing + city page styles.
 *
 * Only contains primitives not already defined by mcafee-acf-sections.css
 * and the existing service-detail/service-landing CSS classes.
 */

/* ---------- City Intro Section ---------- */
.city-intro-section,
.community-panel-section,
.nearby-cities-section,
.service-area-cities-section {
	padding: 64px 24px;
	background: #fff;
}

.community-panel-section {
	background: #f7f7f9;
}

.city-intro-layout {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.city-intro-layout--with-image {
	grid-template-columns: 1.4fr 1fr;
}

.city-intro-title {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	margin: 8px 0 16px;
	color: #1a1a1a;
	line-height: 1.2;
}

.city-intro-body,
.city-intro-body p {
	font-size: 1rem;
	line-height: 1.7;
	color: #333;
}

.city-intro-body p {
	margin-bottom: 16px;
}

.city-intro-figure img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3);
	display: block;
}

@media (max-width: 900px) {
	.city-intro-layout--with-image {
		grid-template-columns: 1fr;
	}
}

/* ---------- Community Panel ---------- */
.community-panel {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 40px;
	align-items: center;
}

.community-panel__media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3);
	display: block;
}

.community-panel__title {
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	margin: 8px 0 16px;
	color: #1a1a1a;
	line-height: 1.25;
}

.community-panel__prose,
.community-panel__prose p {
	font-size: 1rem;
	line-height: 1.7;
	color: #333;
}

.community-panel__prose p {
	margin-bottom: 16px;
}

@media (max-width: 900px) {
	.community-panel {
		grid-template-columns: 1fr;
	}
	.community-panel__media {
		order: -1;
	}
}

/* ---------- Cities Grid (landing hub) ---------- */
.service-area-cities-container {
	max-width: 1200px;
	margin: 0 auto;
}

.service-area-cities-header {
	text-align: center;
	margin-bottom: 36px;
}

.service-area-cities-header h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
	margin: 8px 0 12px;
	color: #1a1a1a;
}

.service-area-cities-header p {
	max-width: 680px;
	margin: 0 auto;
	color: #555;
	line-height: 1.65;
}

.cities-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}

.city-link-card a {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px 18px;
	color: #1a1a1a;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	min-height: 60px;
}

.city-link-card a:hover,
.city-link-card a:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -16px rgba(235, 28, 41, 0.35);
	border-color: #eb1c29;
	color: #1a1a1a;
}

.city-link-card a > .fa-location-dot {
	color: #eb1c29;
	font-size: 1.05rem;
	flex-shrink: 0;
}

.city-link-card__name {
	flex: 1;
	font-weight: 600;
	font-size: 1rem;
}

.city-link-card__arrow {
	color: #9ca3af;
	font-size: 0.85rem;
	transition: transform 0.15s ease, color 0.15s ease;
}

.city-link-card a:hover .city-link-card__arrow {
	color: #eb1c29;
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.cities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.cities-grid { grid-template-columns: 1fr; }
}

/* ---------- Nearby Cities Grid (city pages) ---------- */
.nearby-cities-section {
	background: #f7f7f9;
}

.nearby-cities-container {
	max-width: 1200px;
	margin: 0 auto;
}

.nearby-cities-header {
	text-align: center;
	margin-bottom: 24px;
}

.nearby-cities-header h2 {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	margin: 0 0 8px;
	color: #1a1a1a;
}

.nearby-cities-header p {
	color: #555;
	margin: 0;
	line-height: 1.6;
}

.nearby-cities-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
}

.nearby-cities-grid a {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px 14px;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nearby-cities-grid a:hover,
.nearby-cities-grid a:focus-visible {
	border-color: #eb1c29;
	box-shadow: 0 6px 18px -10px rgba(235, 28, 41, 0.4);
	color: #1a1a1a;
}

.nearby-cities-grid .fa-location-dot {
	color: #eb1c29;
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.nearby-cities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.nearby-cities-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Typography minimum size (1.3rem floor on body / prose copy)
 * Scoped to Service Area pages so we don't disturb other templates.
 * ============================================================ */
.mcafee-service-area-landing,
.mcafee-service-area-city {
	font-size: 1.3rem;
	line-height: 1.65;
}

.mcafee-service-area-landing p,
.mcafee-service-area-landing li,
.mcafee-service-area-landing a,
.mcafee-service-area-landing .repair-hero-subtitle,
.mcafee-service-area-landing .city-intro-body,
.mcafee-service-area-landing .city-intro-body p,
.mcafee-service-area-landing .community-panel__prose,
.mcafee-service-area-landing .community-panel__prose p,
.mcafee-service-area-landing .service-card-content p,
.mcafee-service-area-landing .service-feature-list li,
.mcafee-service-area-landing .warning-card-modern p,
.mcafee-service-area-landing .decision-question,
.mcafee-service-area-landing .decision-answer,
.mcafee-service-area-landing .decision-answer p,
.mcafee-service-area-landing .nearby-cities-grid a,
.mcafee-service-area-landing .city-link-card__name,
.mcafee-service-area-landing .repair-area-intro,
.mcafee-service-area-city p,
.mcafee-service-area-city li,
.mcafee-service-area-city a,
.mcafee-service-area-city .repair-hero-subtitle,
.mcafee-service-area-city .city-intro-body,
.mcafee-service-area-city .city-intro-body p,
.mcafee-service-area-city .community-panel__prose,
.mcafee-service-area-city .community-panel__prose p,
.mcafee-service-area-city .service-card-content p,
.mcafee-service-area-city .service-feature-list li,
.mcafee-service-area-city .warning-card-modern p,
.mcafee-service-area-city .decision-question,
.mcafee-service-area-city .decision-answer,
.mcafee-service-area-city .decision-answer p,
.mcafee-service-area-city .nearby-cities-grid a {
	font-size: 1.3rem;
	line-height: 1.65;
}

/* Headings stay at their established sizes (don't override). */

/* ============================================================
 * Inline link color — match surrounding text, underlined.
 * The parent theme was painting <a> white inside prose blocks,
 * making them invisible. Force inherit color + underline within
 * the long-form copy areas so links read as links.
 * ============================================================ */
.mcafee-service-area-landing .city-intro-body a,
.mcafee-service-area-landing .community-panel__prose a,
.mcafee-service-area-landing .decision-answer a,
.mcafee-service-area-landing .service-card-content p a,
.mcafee-service-area-city .city-intro-body a,
.mcafee-service-area-city .community-panel__prose a,
.mcafee-service-area-city .decision-answer a,
.mcafee-service-area-city .service-card-content p a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #eb1c29;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.mcafee-service-area-landing .city-intro-body a:hover,
.mcafee-service-area-landing .community-panel__prose a:hover,
.mcafee-service-area-landing .decision-answer a:hover,
.mcafee-service-area-city .city-intro-body a:hover,
.mcafee-service-area-city .community-panel__prose a:hover,
.mcafee-service-area-city .decision-answer a:hover {
	color: #eb1c29;
	text-decoration-color: #eb1c29;
}

/* Hero breadcrumbs — see mcafee-acf-sections.css (globally enqueued). */

/* Center the section eyebrow badge on Service Area pages. */
.mcafee-service-area-landing .section-badge,
.mcafee-service-area-city .section-badge {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}