/**
 * CTS Service Page Styles v1.0
 * Presentation layer for the Carlsbad Turf service pages, service×area
 * location pages, area overview pages, and the two hub pages
 * (/services/, /service-areas/).
 * Scoped to body.cts-service-page / body.cts-hub-page (added by the
 * plugin). No Elementor on these pages.
 *
 * Palette: turf green #166534, dark #0C3B22, lime #84CC16 / hover #65A30D,
 * ink #232B26, paper #FFFFFF, wash #F5F8F2, line #E3E9DF, muted #5C665F.
 */

/* ============ Hero ============ */
body.cts-service-page .page-header,
body.cts-hub-page .page-header {
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 104px 24px 84px;
	text-align: center;
}
body.cts-service-page .page-header::before,
body.cts-hub-page .page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,59,34,.72) 0%, rgba(12,59,34,.48) 60%, rgba(12,59,34,.62) 100%);
}
body.cts-service-page .page-header > *,
body.cts-hub-page .page-header > * {
	position: relative;
	z-index: 1;
}
body.cts-service-page .page-header .entry-title,
body.cts-hub-page .page-header .entry-title {
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.15;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* ============ Content rhythm ============ */
body.cts-service-page .page-content {
	max-width: 880px;
	margin: 0 auto;
	padding: 54px 24px 8px;
	color: #232B26;
	font-size: 1.04rem;
	line-height: 1.75;
}
/* Lede: the intro paragraph */
body.cts-service-page .page-content > p:first-of-type {
	font-size: 1.18rem;
	line-height: 1.7;
	color: #33403A;
}
/* Section headings with lime accent rule */
body.cts-service-page .page-content h2 {
	clear: both;
	font-size: 1.68rem;
	line-height: 1.3;
	color: #166534;
	margin: 2.6em 0 .7em;
	padding-bottom: .35em;
}
body.cts-service-page .page-content h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #84CC16;
	margin-top: .45em;
}
body.cts-service-page .page-content p {
	margin: 0 0 1.15em;
}

/* ============ Bullet lists -> card grids ============ */
body.cts-service-page .page-content ul.wp-block-list {
	list-style: none;
	margin: 1.3em 0 2em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
body.cts-service-page .page-content ul.wp-block-list li {
	position: relative;
	margin: 0;
	background: #fff;
	border: 1px solid #E3E9DF;
	border-radius: 12px;
	padding: 15px 16px 15px 48px;
	font-size: .97rem;
	line-height: 1.6;
	box-shadow: 0 1px 3px rgba(12,59,34,.06);
}
body.cts-service-page .page-content ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 17px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #84CC16;
}
body.cts-service-page .page-content ul.wp-block-list li::after {
	content: "\2713";
	position: absolute;
	left: 15px;
	top: 17px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #0C3B22;
}

/* ============ Numbered lists -> step cards ============ */
body.cts-service-page .page-content ol.wp-block-list {
	list-style: none;
	counter-reset: cts-step;
	margin: 1.3em 0 2em;
	padding: 0;
	display: grid;
	gap: 12px;
}
body.cts-service-page .page-content ol.wp-block-list li {
	counter-increment: cts-step;
	position: relative;
	margin: 0;
	background: #fff;
	border: 1px solid #E3E9DF;
	border-radius: 12px;
	padding: 16px 18px 16px 72px;
	font-size: .97rem;
	line-height: 1.6;
	box-shadow: 0 1px 3px rgba(12,59,34,.06);
	min-height: 58px;
}
body.cts-service-page .page-content ol.wp-block-list li::before {
	content: counter(cts-step);
	position: absolute;
	left: 16px;
	top: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #166534;
	color: #84CC16;
	font-family: Bitter, Georgia, serif;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 40px;
	text-align: center;
}

/* ============ FAQ anchor offset ============ */
body.cts-service-page .cts-faqs {
	scroll-margin-top: 90px;
}

/* ============ Breadcrumb trail (injected above content) ============ */
.cts-breadcrumb {
	font-size: .82rem;
	color: #5C665F;
	margin: 0 0 1.4em;
}
.cts-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.cts-breadcrumb li {
	display: flex;
	align-items: center;
}
.cts-breadcrumb li:not(:last-child)::after {
	content: "\203A";
	margin: 0 .55em;
	color: #B9B2A0;
	font-size: 1rem;
	line-height: 1;
}
.cts-breadcrumb a {
	color: #166534;
	font-weight: 600;
	text-decoration: none;
}
.cts-breadcrumb a:hover {
	color: #65A30D;
	text-decoration: underline;
}
.cts-breadcrumb [aria-current="page"] {
	color: #5C665F;
}

/* ============ Hub pages: /services/ + /service-areas/ ============ */

/* Wider measure than service pages: the card grids need the room. */
body.cts-hub-page .page-content {
	max-width: 1080px;
	margin: 0 auto;
	padding: 54px 24px 48px;
	color: #232B26;
	font-size: 1.04rem;
	line-height: 1.75;
}
body.cts-hub-page .page-content > p:first-of-type {
	font-size: 1.18rem;
	line-height: 1.7;
	color: #33403A;
}
/* Section H2s centered on hub pages. */
body.cts-hub-page .page-content h2 {
	clear: both;
	font-size: 1.68rem;
	line-height: 1.3;
	color: #166534;
	margin: 2.6em 0 .7em;
	padding-bottom: .35em;
	text-align: center;
}
body.cts-hub-page .page-content h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #84CC16;
	margin: .45em auto 0;
}
body.cts-hub-page .page-content p {
	margin: 0 0 1.15em;
}

/* ============ Hub card grid ============ */
.cts-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 2em 0 1em;
}
.cts-hub-card {
	display: block;
	background: #fff;
	border: 1px solid #E3E9DF;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(12,59,34,.06);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cts-hub-card:hover,
.cts-hub-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(12,59,34,.14);
	border-color: #84CC16;
}
.cts-hub-card-body {
	display: block;
	padding: 22px 22px 24px;
}
.cts-hub-card-title {
	display: block;
	font-size: 1.12rem;
	font-weight: 700;
	color: #166534;
	margin-bottom: .35em;
}
.cts-hub-card:hover .cts-hub-card-title {
	color: #65A30D;
}
.cts-hub-card-desc {
	display: block;
	font-size: .95rem;
	line-height: 1.6;
	color: #5C665F;
}
.cts-hub-card-link {
	display: block;
	margin-top: .7em;
	font-size: .9rem;
	font-weight: 700;
	color: #65A30D;
}

/* Hub CTA band. */
body.cts-hub-page .cts-hub-cta {
	text-align: center;
	margin: 3em 0 1em;
	padding: 2.2em 1.5em;
	background: #F5F8F2;
	border: 1px solid #E3E9DF;
	border-radius: 18px;
}
body.cts-hub-page .cts-hub-cta p {
	margin-bottom: 1.2em;
}
body.cts-hub-page .cts-hub-cta a {
	display: inline-block;
	background: #84CC16;
	color: #0C3B22;
	font-weight: 700;
	padding: 13px 30px;
	border-radius: 10px;
	text-decoration: none;
	margin: 4px 6px;
}
body.cts-hub-page .cts-hub-cta a:hover {
	background: #65A30D;
	color: #fff;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
	.cts-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 760px) {
	body.cts-service-page .page-header,
	body.cts-hub-page .page-header {
		padding: 72px 20px 60px;
	}
	body.cts-service-page .page-header .entry-title,
	body.cts-hub-page .page-header .entry-title {
		font-size: 1.85rem;
	}
	body.cts-service-page .page-content {
		padding: 40px 20px 8px;
		font-size: 1rem;
	}
	body.cts-service-page .page-content h2 {
		font-size: 1.42rem;
	}
	body.cts-service-page .page-content ul.wp-block-list {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.cts-hub-grid {
		grid-template-columns: 1fr;
	}
	body.cts-hub-page .page-content {
		padding: 40px 20px 36px;
		font-size: 1rem;
	}
	body.cts-hub-page .page-content h2 {
		font-size: 1.42rem;
	}
	.cts-breadcrumb {
		font-size: .78rem;
	}
}

/* ============ Visual parity pass, 27 Oct 2026: actual Astra markup ============
   Scoped to the installation page only (page-id-55). Targets .entry-content,
   plain ol/ul, h2 and h3, which is the markup this page actually uses. */
body.page-id-55 .entry-content{max-width:880px;margin-left:auto;margin-right:auto;color:#232B26;text-align:left}
body.page-id-55 .entry-content p{line-height:1.7;margin-bottom:18px;text-align:left}
body.page-id-55 .entry-content h1{font-size:40px;line-height:1.15;color:#0C3B22;margin-bottom:16px;text-align:left}
body.page-id-55 .entry-content h2{font-size:30px;line-height:1.25;color:#166534;margin:48px 0 16px;text-align:left}
body.page-id-55 .entry-content h2::after{content:"";display:block;width:54px;height:4px;background:#84CC16;border-radius:2px;margin-top:12px}
body.page-id-55 .entry-content h3{font-size:22px;line-height:1.3;color:#232B26;margin:32px 0 12px;text-align:left}
body.page-id-55 .entry-content ol{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:16px}
body.page-id-55 .entry-content ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:14px}
body.page-id-55 .entry-content ol li,body.page-id-55 .entry-content ul li{background:#FFFFFF;border:1px solid #E3E9DF;border-left:4px solid #84CC16;border-radius:14px;padding:20px 22px;box-shadow:0 1px 3px rgba(12,59,34,.06);line-height:1.6;transition:transform .2s ease,box-shadow .2s ease}
body.page-id-55 .entry-content ol li:hover,body.page-id-55 .entry-content ul li:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(12,59,34,.14);border-color:#84CC16}
body.page-id-55 .entry-content p a[href="/contact/"]{display:inline-block;background:#84CC16;color:#0C3B22;padding:13px 30px;border-radius:10px;font-weight:700;text-decoration:none}
body.page-id-55 .entry-content p a[href="/contact/"]:hover{background:#65A30D;color:#FFFFFF}
body.page-id-55 .entry-content p a[href^="tel:"]{display:inline-block;background:#FFFFFF;color:#166534;border:2px solid #166534;padding:11px 28px;border-radius:10px;font-weight:700;text-decoration:none}
body.page-id-55 .entry-content h2:nth-of-type(2)::after{content:"";display:block;width:100%;height:260px;border-radius:14px;margin-top:20px;background-image:url("https://carlsbadturf.com/wp-content/uploads/2026/10/pexels-photo-347138.jpeg");background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(12,59,34,.14)}
body.page-id-55 .entry-content h2:nth-of-type(4)::after{content:"";display:block;width:100%;height:260px;border-radius:14px;margin-top:20px;background-image:url("https://carlsbadturf.com/wp-content/uploads/2026/10/pexels-photo-13083599.jpeg");background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(12,59,34,.14)}
@media(max-width:600px){body.page-id-55 .entry-content h1{font-size:32px}body.page-id-55 .entry-content h2{font-size:26px}body.page-id-55 .entry-content h2:nth-of-type(2)::after,body.page-id-55 .entry-content h2:nth-of-type(4)::after{height:180px}}