/**
 * Location Page Styles
 * Styles for city/location pages (Northbrook, Glenview, etc.)
 */

/* ==========================================================================
   Page Container
   ========================================================================== */


/* Section headers - centered with red underline accent */
.location-page h2 {
	position: relative;
	display: block;
	text-align: center;
}

.location-page h2::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.location-hero {
	padding-bottom: 4rem;
}

.location-hero .page-hero-subtitle {
	margin-bottom: 2rem;
}

.location-hero .wp-block-buttons {
	margin-bottom: 1.5rem;
}

/* Trust Items - uses .trust-items from base.css */

/* ==========================================================================
   Intro Section
   ========================================================================== */

.location-intro {
	padding: 1rem 0 3rem;
	max-width: 720px;
	margin: 0 auto;
}

.location-intro .callout {
	margin-bottom: 2rem;
	background: linear-gradient(135deg, #faf9f9 0%, #fff 100%);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.location-intro p {
	line-height: 1.75;
	margin-bottom: 1rem;
}

.location-intro p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Image Section
   ========================================================================== */

.location-image {
	padding: 1rem 0 2rem;
	max-width: 800px;
	margin: 0 auto;
}

/* ==========================================================================
   Full-width background sections - use .full-width-bg from base.css
   ========================================================================== */

.location-services,
.location-nearby {
	background: var(--wp--preset--color--neutral);
}

/* ==========================================================================
   Services Section
   ========================================================================== */

.location-services {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.location-services h2 {
	margin-bottom: 2.5rem;
}

.location-services h3 {
	font-size: 1.125rem;
	margin-bottom: 1.25rem;
	color: var(--wp--preset--color--contrast);
}

.location-services .wp-block-columns {
	max-width: 800px;
	margin: 0 auto 2rem;
	gap: 4rem;
}

/* Service Link List with Icons */
.service-link-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.service-link-list li {
	margin-bottom: 0.5rem;
}

.service-link-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.service-link-list a:hover {
	color: var(--wp--preset--color--primary);
}

.service-link-list svg {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.service-link-list a:hover svg {
	transform: scale(1.1);
}

.service-link-footer {
	margin: 0;
	padding-top: 0.5rem;
}

.service-link-footer a {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Services callout at bottom */
.location-services > .callout {
	max-width: 600px;
	margin: 2rem auto 0;
}

/* ==========================================================================
   Why Section (Check List) - white background
   ========================================================================== */

.location-why {
	padding: 3rem 0;
	max-width: 720px;
	margin: 0 auto;
}

.location-why h2 {
	margin-bottom: 2rem;
}

/* Card wrapper for check list */
.location-why .check-list {
	background: var(--wp--preset--color--neutral);
	padding: 1.5rem;
	border-radius: var(--card-radius);
}

/* ==========================================================================
   Nearby Section (Link List)
   ========================================================================== */

.location-nearby {
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}

.location-nearby > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.location-nearby h2 {
	margin-bottom: 1rem;
}

.location-nearby > p {
	margin-bottom: 0;
}

.location-nearby h3 {
	font-size: 1rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

/* Link list animation on load */
.location-nearby .link-list-item {
	opacity: 0;
	animation: locationFadeSlideIn 0.4s ease forwards;
}

.location-nearby .link-list-item:nth-child(1) { animation-delay: 0.05s; }
.location-nearby .link-list-item:nth-child(2) { animation-delay: 0.1s; }
.location-nearby .link-list-item:nth-child(3) { animation-delay: 0.15s; }
.location-nearby .link-list-item:nth-child(4) { animation-delay: 0.2s; }
.location-nearby .link-list-item:nth-child(5) { animation-delay: 0.25s; }

.location-nearby .link-list-footer {
	opacity: 0;
	animation: locationFadeSlideIn 0.4s ease forwards;
	animation-delay: 0.3s;
}

@keyframes locationFadeSlideIn {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ==========================================================================
   Tablet Styles
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	.location-services .wp-block-columns {
		gap: 2rem;
	}
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 767px) {
	/* Hero adjustments */
	.location-hero {
		padding-bottom: 2.5rem;
	}

	.location-hero .page-hero-subtitle {
		margin-bottom: 1.5rem;
	}

	/* Trust items - mobile handled by base.css .trust-items */
	/* Full-width sections - mobile handled by base.css .full-width-bg */

	.location-services .wp-block-columns {
		flex-direction: column;
		gap: 2rem;
	}

	.location-why .check-list {
		padding: 1rem;
	}

	/* Intro section - already has padding from container */
	.location-intro {
		padding-left: 0;
		padding-right: 0;
	}

	/* Why section - already has padding from container */
	.location-why {
		padding-left: 0;
		padding-right: 0;
	}

	/* Image section needs extra margin for accent overflow */
	.location-image {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/* Reduce section padding on mobile */
	.location-services,
	.location-why {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.location-nearby {
		padding-top: 2rem;
		padding-bottom: 1.5rem;
	}

	/* Tighter h2 spacing on mobile */
	.location-page h2 {
		font-size: 1.5rem;
	}

	.location-services h2 {
		margin-bottom: 1.5rem;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.location-nearby .link-list-item,
	.location-nearby .link-list-footer {
		opacity: 1;
		animation: none;
	}
}