/**
 * FenceWisePro - Single service page
 * Hero banner, description + sidebar, features list and project gallery.
 * Related services, testimonials and the request band reuse the shared
 * styles in home.css, since those template parts are shared.
 */

/* ==========================================================================
   1. Hero banner
   ========================================================================== */

.fwp-service-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	overflow: hidden;
	background: var(--fwp-ink);
}

.fwp-service-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fwp-service-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--fwp-overlay-hero);
}

.fwp-service-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--fwp-space-16);
	text-align: center;
}

.fwp-service-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fwp-space-2);
	margin-bottom: var(--fwp-space-4);
	color: var(--fwp-on-dark-70);
	font-size: var(--fwp-fs-sm);
}

.fwp-service-hero__breadcrumb a {
	color: var(--fwp-on-dark-80);
}

.fwp-service-hero__breadcrumb a:hover {
	color: var(--fwp-white);
}

.fwp-service-hero__breadcrumb [aria-current="page"] {
	color: var(--fwp-white);
	font-weight: var(--fwp-fw-medium);
}

.fwp-service-hero__title {
	margin-bottom: var(--fwp-space-4);
	color: var(--fwp-white);
	font-size: var(--fwp-fs-h1);
}

.fwp-service-hero__text {
	max-width: 640px;
	margin: 0 auto;
	color: var(--fwp-on-dark-80);
	font-size: var(--fwp-fs-lead);
}

/* ==========================================================================
   2. Description + sidebar
   ========================================================================== */

.fwp-service-detail__inner {
	display: grid;
	align-items: start;
	gap: var(--fwp-space-16);
	grid-template-columns: 1.6fr 1fr;
}

@media (max-width: 900px) {
	.fwp-service-detail__inner {
		grid-template-columns: 1fr;
		gap: var(--fwp-space-10);
	}
}

.fwp-service-detail__features {
	display: flex;
	flex-direction: column;
	gap: var(--fwp-space-3);
	margin: 0 0 var(--fwp-space-8);
	padding: 0;
	list-style: none;
}

.fwp-service-detail__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--fwp-space-3);
	color: var(--fwp-ink);
}

.fwp-service-detail__features .fwp-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--fwp-orange);
}

.fwp-service-detail__gallery {
	display: grid;
	gap: var(--fwp-space-4);
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: var(--fwp-space-8);
}

.fwp-service-detail__gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--fwp-radius-lg);
}

@media (max-width: 480px) {
	.fwp-service-detail__gallery {
		grid-template-columns: 1fr;
	}
}

.fwp-service-detail__sidebar {
	position: sticky;
	top: calc(var(--fwp-header-height) + var(--fwp-space-6));
}

.fwp-service-detail__card {
	padding: var(--fwp-space-8);
	border-radius: var(--fwp-radius-lg);
	background: var(--fwp-grey-50);
}

.fwp-service-detail__card h3 {
	margin-bottom: var(--fwp-space-2);
	font-size: var(--fwp-fs-h4);
}

.fwp-service-detail__card > p {
	margin-bottom: var(--fwp-space-6);
	color: var(--fwp-grey-500);
	font-size: var(--fwp-fs-sm);
}

.fwp-service-detail__facts {
	display: flex;
	flex-direction: column;
	gap: var(--fwp-space-4);
	margin: 0 0 var(--fwp-space-6);
	padding-bottom: var(--fwp-space-6);
	border-bottom: var(--fwp-border);
}

.fwp-service-detail__facts dt {
	margin-bottom: 2px;
	color: var(--fwp-grey-500);
	font-size: var(--fwp-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--fwp-ls-eyebrow);
}

.fwp-service-detail__facts dd {
	margin: 0;
	color: var(--fwp-ink);
	font-weight: var(--fwp-fw-semibold);
}

.fwp-service-detail__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fwp-space-2);
	margin-top: var(--fwp-space-4);
	color: var(--fwp-ink);
	font-weight: var(--fwp-fw-semibold);
}

.fwp-service-detail__phone:hover {
	color: var(--fwp-orange);
}

/* ==========================================================================
   3. Flexible service template (template-service-flexible.php)
   ========================================================================== */

.fwp-flex-hero .fwp-service-hero__text {
	max-width: 720px;
	margin: 0 auto var(--fwp-space-4);
}

.fwp-flex-hero__bullets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fwp-space-3) var(--fwp-space-6);
	margin: var(--fwp-space-6) 0 var(--fwp-space-8);
	padding: 0;
	list-style: none;
}

.fwp-flex-hero__bullets li {
	display: flex;
	align-items: center;
	gap: var(--fwp-space-2);
	color: var(--fwp-white);
	font-size: var(--fwp-fs-sm);
	font-weight: var(--fwp-fw-medium);
}

.fwp-flex-hero__bullets .fwp-icon {
	flex: 0 0 auto;
	color: var(--fwp-orange);
}

.fwp-flex-text--grey {
	background: var(--fwp-grey-50);
}

.fwp-flex-text__action {
	text-align: center;
}

.fwp-flex-cards .fwp-section-head--center {
	max-width: 760px;
}

.fwp-flex-card .fwp-btn-arrow {
	margin-top: var(--fwp-space-4);
}

.fwp-flex-card .fwp-repair-card__title {
	font-size: var(--fwp-fs-h4);
}

.fwp-flex-faq .fwp-faq__list {
	margin-top: 0;
}

.fwp-flex-cards__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fwp-space-4);
	margin-top: var(--fwp-space-10);
	text-align: center;
}

.fwp-flex-cards__note p {
	width: 100%;
	margin: 0 0 var(--fwp-space-2);
	color: var(--fwp-grey-500);
}

.fwp-flex-list__note {
	max-width: 640px;
	margin: var(--fwp-space-6) auto 0;
	text-align: center;
	color: var(--fwp-grey-500);
}

.fwp-flex-features__action {
	margin-top: var(--fwp-space-10);
	text-align: center;
}

/* Inline links inside hero/CTA copy need contrast against dark or orange
   backgrounds, where the default orange link color would disappear. */
.fwp-service-hero__text a,
.fwp-flex-hero__bullets a {
	color: var(--fwp-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fwp-service-hero__text a:hover {
	color: var(--fwp-orange);
}

/* ==========================================================================
   4. Per-section spacing overrides (flexible service template)
   Only active at the desktop breakpoint — mobile keeps the theme's fluid
   default so sections never collide on small screens.
   ========================================================================== */

@media (min-width: 900px) {
	.fwp-pt-0 {
		padding-top: 0 !important;
	}

	.fwp-pt-sm {
		padding-top: 2rem !important;
	}

	.fwp-pt-lg {
		padding-top: 7rem !important;
	}

	.fwp-pb-0 {
		padding-bottom: 0 !important;
	}

	.fwp-pb-sm {
		padding-bottom: 2rem !important;
	}

	.fwp-pb-lg {
		padding-bottom: 7rem !important;
	}
}

/* ==========================================================================
   5. Comparison table (flexible service template)
   ========================================================================== */

.fwp-flex-table__wrap {
	overflow-x: auto;
	border: var(--fwp-border);
	border-radius: var(--fwp-radius-lg);
}

.fwp-flex-table__table {
	width: 100%;
	min-width: 480px;
	margin: 0;
	border-collapse: collapse;
}

.fwp-flex-table__table th,
.fwp-flex-table__table td {
	padding: var(--fwp-space-4) var(--fwp-space-5);
	border-bottom: var(--fwp-border);
	text-align: left;
	vertical-align: top;
}

.fwp-flex-table__table thead th {
	background: var(--fwp-grey-50);
	color: var(--fwp-ink);
	font-size: var(--fwp-fs-sm);
	font-weight: var(--fwp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--fwp-ls-eyebrow);
}

.fwp-flex-table__table tbody tr:last-child th,
.fwp-flex-table__table tbody tr:last-child td {
	border-bottom: 0;
}

.fwp-flex-table__table tbody td:first-child {
	color: var(--fwp-ink);
	font-weight: var(--fwp-fw-semibold);
	white-space: nowrap;
}

.fwp-flex-table__table tbody td {
	color: var(--fwp-grey-500);
}

.fwp-flex-table__action {
	margin-top: var(--fwp-space-8);
	text-align: center;
}

.fwp-flex-table__action .fwp-btn {
	margin-top: var(--fwp-space-4);
}

/* ==========================================================================
   6. WYSIWYG bullet / numbered lists (flexible service template)
   Editor content can include <ul>/<ol>. Each item renders as its own card
   in a two-column grid (one column on mobile) rather than a plain indented
   list, matching the card grids used elsewhere on these pages. Scoped to
   .fwp-service-flex only, so this never touches lists anywhere else in the
   theme. The hero bullet row and the pill-style city list bring their own
   layout, so they're excluded here.
   ========================================================================== */

.fwp-service-flex ul:not(.fwp-flex-hero__bullets):not(.fwp-service-area__cities),
.fwp-service-flex ol {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fwp-space-4);
	margin: 0 0 var(--fwp-space-5);
	padding: 0;
	list-style: none;
	text-align: left;
}

@media (min-width: 640px) {
	.fwp-service-flex ul:not(.fwp-flex-hero__bullets):not(.fwp-service-area__cities),
	.fwp-service-flex ol {
		grid-template-columns: repeat(2, 1fr);
	}
}

.fwp-service-flex ul:not(.fwp-flex-hero__bullets):not(.fwp-service-area__cities) li,
.fwp-service-flex ol li {
	display: flex;
	align-items: flex-start;
	gap: var(--fwp-space-3);
	padding: var(--fwp-space-4) var(--fwp-space-5);
	border: var(--fwp-border);
	border-radius: var(--fwp-radius-md);
	background: var(--fwp-grey-50);
	color: inherit;
	text-align: left;
}

.fwp-service-flex ul:not(.fwp-flex-hero__bullets):not(.fwp-service-area__cities) li::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 0.5em;
	border-radius: 50%;
	background: var(--fwp-orange);
}

.fwp-service-flex ol {
	counter-reset: fwp-ol;
}

.fwp-service-flex ol li::before {
	counter-increment: fwp-ol;
	content: counter(fwp-ol);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--fwp-orange-10);
	color: var(--fwp-orange);
	font-size: var(--fwp-fs-xs);
	font-weight: var(--fwp-fw-bold);
}

/* Cards grid: 2 or 4 cards sit in two columns instead of leaving an orphan. */
@media (min-width: 901px) {
	.fwp-flex-cards .fwp-repair__options-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}