/*
 * Single service page — scoped entirely under .bmx-service-detail.
 * Reproduces style.css's .service-detail / .sidebar-page-container /
 * .service-detail_list rules: section padding 110px/80px, hero image
 * border-radius 30px, h3 32px, checkmark-badge list icons (not plain
 * dots), body copy 16px/28px line-height.
 */

.bmx-service-detail__image img {
	width: 100%;
	height: auto;
	border-radius: 30px;
	margin-bottom: var( --wp--preset--spacing--40 );
}

.bmx-service-detail__content {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: var( --wp--preset--color--bmx-body );
}

.bmx-service-detail__content h1,
.bmx-service-detail__content h2,
.bmx-service-detail__content h3,
.bmx-service-detail__content h4 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-service-detail__sidebar-widget {
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--bmx-surface );
	border-radius: 12px;
}

.bmx-service-detail__sidebar-heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-related-services {
	margin: 0;
	padding: 0;
	max-height: 520px;
	overflow-y: auto;
	list-style: none;
}

.bmx-related-services li {
	border-top: 1px solid var( --wp--preset--color--bmx-surface-alt );
}

.bmx-related-services li:first-child {
	border-top: none;
}

.bmx-related-services a {
	display: block;
	padding: 0.75em 0;
	color: var( --wp--preset--color--bmx-body );
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	transition: color 0.2s ease;
}

.bmx-related-services a:hover,
.bmx-related-services a:focus-visible {
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-service-features {
	margin-top: var( --wp--preset--spacing--40 );
}

.bmx-service-features__intro-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var( --wp--preset--color--bmx-heading );
	margin: 0 0 var( --wp--preset--spacing--30 );
}

.bmx-service-features__intro-text {
	font-size: 16px;
	line-height: 28px;
	color: var( --wp--preset--color--bmx-body );
	margin-bottom: var( --wp--preset--spacing--40 );
}

.bmx-service-features__intro-text p {
	margin: 0 0 1em;
}

.bmx-service-features__intro-text p:last-child {
	margin-bottom: 0;
}

.bmx-service-features__row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	align-items: flex-start;
	margin-bottom: var( --wp--preset--spacing--40 );
}

.bmx-service-features__image {
	flex: 1 1 260px;
}

.bmx-service-features__image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.bmx-service-features__content {
	flex: 1 1 300px;
}

.bmx-service-features__heading {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: var( --wp--preset--color--bmx-heading );
	margin: 0 0 var( --wp--preset--spacing--20 );
}

.bmx-service-features__text {
	font-size: 16px;
	line-height: 28px;
	color: var( --wp--preset--color--bmx-body );
	margin: 0 0 var( --wp--preset--spacing--20 );
}

.bmx-service-features__list {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	padding: 0;
	list-style: none;
}

.bmx-service-features__list li {
	position: relative;
	padding: 0 0 0 40px;
	margin-bottom: 20px;
	font-size: 16px;
	color: var( --wp--preset--color--bmx-body );
}

.bmx-service-features__list li:last-child {
	margin-bottom: 0;
}

.bmx-service-features__list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 2px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	border-radius: 50%;
	color: var( --wp--preset--color--bmx-primary );
	background-color: rgba( 0, 146, 255, 0.1 );
}

/* wp:list output inside post-content also uses this checkmark style,
   matching the reference's .service-detail_list on the long-form body
   copy bullet lists too. */
.bmx-service-detail__content ul {
	margin: var( --wp--preset--spacing--30 ) 0;
	padding: 0;
	list-style: none;
}

.bmx-service-detail__content ul li {
	position: relative;
	padding: 0 0 0 40px;
	margin-bottom: 20px;
}

.bmx-service-detail__content ul li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 2px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	border-radius: 50%;
	color: var( --wp--preset--color--bmx-primary );
	background-color: rgba( 0, 146, 255, 0.1 );
}

@media ( max-width: 768px ) {
	.bmx-service-detail__row {
		flex-direction: column;
	}

	.bmx-service-detail__content,
	.bmx-service-detail__sidebar {
		flex-basis: 100% !important;
	}
}