/**
 * OTS Service Page Styles v1.0.0
 * Visual redesign layer for the seven Gutenberg service pages.
 * Scoped to body.ots-service-page (added by the plugin for page IDs
 * 106, 109, 111, 113, 115, 117, 119). No Elementor on these pages.
 *
 * Palette: forest #1B4332, dark #122A20, amber #E9A020 / hover #C77F0A,
 * ink #232B26, paper #FFFFFF, wash #F7F4EC, line #E8E2D4, muted #5C665F.
 */

/* ============ Per-page hero backgrounds ============ */
body.page-id-106 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/tree-removal.webp"); }
body.page-id-109 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/tree-surgeon-pruning.webp"); }
body.page-id-111 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/stump-grinding.webp"); }
body.page-id-113 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/storm-cleanup-crew.webp"); }
body.page-id-115 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/palm-climbing-sunset.webp"); }
body.page-id-117 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/brush-clearing.webp"); }
body.page-id-119 .page-header { background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/tree-bark-lichen.webp"); }

/* ============ Hero ============ */
body.ots-service-page .page-header {
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 104px 24px 84px;
	text-align: center;
}
body.ots-service-page .page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,42,32,.66) 0%, rgba(18,42,32,.42) 60%, rgba(18,42,32,.58) 100%);
}
body.ots-service-page .page-header > * {
	position: relative;
	z-index: 1;
}
body.ots-service-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.ots-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.ots-service-page .page-content > p:first-of-type {
	font-size: 1.18rem;
	line-height: 1.7;
	color: #33403A;
}
/* Section headings with amber accent rule */
body.ots-service-page .page-content h2 {
	clear: both;
	font-size: 1.68rem;
	line-height: 1.3;
	color: #1B4332;
	margin: 2.6em 0 .7em;
	padding-bottom: .35em;
}
body.ots-service-page .page-content h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #E9A020;
	margin-top: .45em;
}
body.ots-service-page .page-content p {
	margin: 0 0 1.15em;
}

/* ============ Bullet lists -> card grids ============ */
body.ots-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.ots-service-page .page-content ul.wp-block-list li {
	position: relative;
	margin: 0;
	background: #fff;
	border: 1px solid #E8E2D4;
	border-radius: 12px;
	padding: 15px 16px 15px 48px;
	font-size: .97rem;
	line-height: 1.6;
	box-shadow: 0 1px 3px rgba(18,42,32,.06);
}
body.ots-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: #E9A020;
}
body.ots-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: #122A20;
}

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

/* ============ Davey-style split section (injected) ============ */
body.ots-service-page .ots-sp-split{
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:44px;
	align-items:center;
	margin:0 0 12px;
}
body.ots-service-page .ots-sp-split--flip .ots-sp-split-text{order:2}
body.ots-service-page .ots-sp-split--flip .ots-sp-split-media{order:1}
body.ots-service-page .ots-sp-split-text h2{margin-top:0!important}
body.ots-service-page .ots-sp-split-text p:last-child{margin-bottom:0}
body.ots-service-page .ots-sp-split-media img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:14px;
	box-shadow:0 8px 26px rgba(18,42,32,.12);
}
body.ots-service-page .ots-sp-split-cap{
	font-size:.85rem;
	font-style:italic;
	color:#5C665F;
	margin:10px 2px 0;
}
/* Card grids always start below the split section, never squeezed beside it */
body.ots-service-page .page-content ul.wp-block-list,
body.ots-service-page .page-content ol.wp-block-list{
	clear:both;
}

/* ============ Overlay feature (injected): text card over photo ============ */
body.ots-service-page .ots-sp-overlay{position:relative;margin:3.5em 0 1em;clear:both}
body.ots-service-page .ots-sp-overlay-bg{
	background-size:cover;
	background-position:center;
	border-radius:18px;
	min-height:400px;
}
body.ots-service-page .ots-sp-overlay-card{
	position:relative;
	background:#fff;
	border-radius:14px;
	border-left:6px solid #E9A020;
	box-shadow:0 18px 50px rgba(18,42,32,.18);
	padding:38px 36px;
	max-width:560px;
	width:calc(100% - 48px);
	margin:-300px 24px 0 auto;
}
body.ots-service-page .ots-sp-overlay-card h2{margin-top:0!important;font-size:1.5rem}
body.ots-service-page .ots-sp-overlay-card p:last-of-type{margin-bottom:0}
body.ots-service-page .ots-sp-overlay-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
body.ots-service-page .ots-sp-overlay-call{
	display:inline-block;background:#E9A020;color:#122A20;font-weight:700;
	padding:13px 26px;border-radius:10px;text-decoration:none;
}
body.ots-service-page .ots-sp-overlay-call:hover{background:#C77F0A;color:#122A20}
body.ots-service-page .ots-sp-overlay-quote{
	display:inline-block;border:2px solid #1B4332;color:#1B4332;font-weight:700;
	padding:11px 24px;border-radius:10px;text-decoration:none;
}
body.ots-service-page .ots-sp-overlay-quote:hover{background:#1B4332;color:#fff}

/* ============ FAQ: keep global accordion, add anchor offset ============ */
body.ots-service-page .ots-faqs {
	scroll-margin-top: 90px;
}

/* ============ Service-area link row ============ */
body.ots-service-page .page-content > p:last-of-type {
	text-align: center;
	font-size: .92rem;
	color: #5C665F;
	border-top: 1px solid #E8E2D4;
	padding-top: 1.8em;
	margin-top: 3em;
}
body.ots-service-page .page-content > p:last-of-type a {
	display: inline-block;
	background: #F1EDE1;
	color: #1B4332;
	font-weight: 600;
	border-radius: 999px;
	padding: 5px 16px;
	margin: 3px 4px;
	text-decoration: none;
	font-size: .88rem;
}
body.ots-service-page .page-content > p:last-of-type a:hover {
	background: #E9A020;
	color: #122A20;
}

/* ============ Responsive ============ */
@media (max-width: 760px) {
	body.ots-service-page .ots-sp-split{grid-template-columns:1fr;gap:22px}
	body.ots-service-page .ots-sp-split--flip .ots-sp-split-text{order:1}
	body.ots-service-page .ots-sp-split--flip .ots-sp-split-media{order:2}
	body.ots-service-page .page-header {
		padding: 72px 20px 60px;
	}
	body.ots-service-page .page-header .entry-title {
		font-size: 1.85rem;
	}
	body.ots-service-page .page-content {
		padding: 40px 20px 8px;
		font-size: 1rem;
	}
	body.ots-service-page .page-content h2 {
		font-size: 1.42rem;
	}
	body.ots-service-page .page-content ul.wp-block-list {
		grid-template-columns: 1fr;
	}
	body.ots-service-page .ots-sp-overlay-bg{min-height:220px}
	body.ots-service-page .ots-sp-overlay-card{margin:-90px 12px 0;padding:28px 24px;width:auto}
	body.ots-service-page .ots-sp-overlay-actions{flex-direction:column}
	body.ots-service-page .ots-sp-overlay-call,
	body.ots-service-page .ots-sp-overlay-quote{width:100%;text-align:center}
}

/* ============================================================
 * v1.1.2 additions: breadcrumb trails + hub pages
 * ============================================================ */

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

/* ============ Hub pages: /services/ + /service-areas/ ============ */
body.ots-hub-page .page-header {
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 104px 24px 84px;
	text-align: center;
}
body.ots-hub-page .page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,42,32,.66) 0%, rgba(18,42,32,.42) 60%, rgba(18,42,32,.58) 100%);
}
body.ots-hub-page .page-header > * {
	position: relative;
	z-index: 1;
}
body.ots-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);
}
/* Distinct hero imagery per hub (body classes added by the plugin). */
body.ots-hub-services .page-header {
	background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/arborist-chainsaw-hero.webp");
}
body.ots-hub-areas .page-header {
	background-image: url("https://oceansidetreeservices.com/wp-content/uploads/2026/10/palm-climbing-sunset.webp");
}

/* Wider measure than service pages: the card grids need the room. */
body.ots-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.ots-hub-page .page-content > p:first-of-type {
	font-size: 1.18rem;
	line-height: 1.7;
	color: #33403A;
}
/* Davey pattern: section H2s centered on hub pages. */
body.ots-hub-page .page-content h2 {
	clear: both;
	font-size: 1.68rem;
	line-height: 1.3;
	color: #1B4332;
	margin: 2.6em 0 .7em;
	padding-bottom: .35em;
	text-align: center;
}
body.ots-hub-page .page-content h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #E9A020;
	margin: .45em auto 0;
}
body.ots-hub-page .page-content p {
	margin: 0 0 1.15em;
}

/* ============ Davey-style hub card grid ============ */
.ots-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 2em 0 1em;
}
.ots-hub-card {
	display: block;
	background: #fff;
	border: 1px solid #E8E2D4;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(18,42,32,.06);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ots-hub-card:hover,
.ots-hub-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(18,42,32,.14);
	border-color: #E9A020;
}
.ots-hub-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
}
.ots-hub-card-body {
	display: block;
	padding: 20px 22px 24px;
}
.ots-hub-card-title {
	display: block;
	font-size: 1.12rem;
	font-weight: 700;
	color: #1B4332;
	margin-bottom: .35em;
}
.ots-hub-card:hover .ots-hub-card-title {
	color: #C77F0A;
}
.ots-hub-card-desc {
	display: block;
	font-size: .95rem;
	line-height: 1.6;
	color: #5C665F;
}
.ots-hub-card-link {
	display: block;
	margin-top: .7em;
	font-size: .9rem;
	font-weight: 700;
	color: #C77F0A;
}

/* Hub CTA band: reuse the amber call button language from service pages. */
body.ots-hub-page .ots-hub-cta {
	text-align: center;
	margin: 3em 0 1em;
	padding: 2.2em 1.5em;
	background: #F7F4EC;
	border: 1px solid #E8E2D4;
	border-radius: 18px;
}
body.ots-hub-page .ots-hub-cta p {
	margin-bottom: 1.2em;
}
body.ots-hub-page .ots-hub-cta a {
	display: inline-block;
	background: #E9A020;
	color: #122A20;
	font-weight: 700;
	padding: 13px 30px;
	border-radius: 10px;
	text-decoration: none;
	margin: 4px 6px;
}
body.ots-hub-page .ots-hub-cta a:hover {
	background: #C77F0A;
	color: #122A20;
}
body.ots-hub-page .ots-hub-cta a.ots-hub-cta-alt {
	background: transparent;
	border: 2px solid #1B4332;
	color: #1B4332;
	padding: 11px 28px;
}
body.ots-hub-page .ots-hub-cta a.ots-hub-cta-alt:hover {
	background: #1B4332;
	color: #fff;
}

/* ============ Hub responsive ============ */
@media (max-width: 900px) {
	.ots-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ots-hub-grid {
		grid-template-columns: 1fr;
	}
	body.ots-hub-page .page-header {
		padding: 72px 20px 60px;
	}
	body.ots-hub-page .page-header .entry-title {
		font-size: 1.85rem;
	}
	body.ots-hub-page .page-content {
		padding: 40px 20px 36px;
		font-size: 1rem;
	}
	body.ots-hub-page .page-content h2 {
		font-size: 1.42rem;
	}
	.ots-breadcrumb {
		font-size: .78rem;
	}
}