/**
 * Services template styles — anchor-nav + scroll-to-section layout.
 *
 * Uses theme.json tokens:
 *   --wp--preset--color--theme-02 = #002026 (dark)
 *   --wp--preset--color--theme-03 = #01666C (teal)
 *   --wp--preset--color--theme-05 = #f7d0c4 (coral)
 *   --wp--preset--color--theme-06 = #ffeeeb (light pink)
 *   --wp--preset--font-family--dm-sans
 *   --wp--preset--font-family--butler
 */

/* ─── Hero gradient overlay ─── */
.service-hero .wp-block-cover__background {
	background: linear-gradient( 267deg, rgba( 5, 23, 9, 0 ) 10%, rgba( 0, 0, 0, 0.56 ) 95% ) !important;
	opacity: 1 !important;
}

/* ─── Anchor navigation bar ─── */
.service-anchor-nav {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky-nav, 500);
	background-color: var(--wp--preset--color--theme-01);
	transition: box-shadow 0.2s ease;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.service-anchor-nav::-webkit-scrollbar {
	display: none;
}

.service-anchor-nav.is-scrolled {
	box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--theme-02) 12%, transparent);
}

/* Nav buttons row — center and allow horizontal scroll */
.service-anchor-nav .wp-block-buttons {
	flex-wrap: nowrap !important;
	justify-content: center;
	padding: var(--wp--preset--spacing--30) 0;
}

/* Active anchor button — coral highlight */
.service-anchor-nav .wp-block-button.is-active .wp-block-button__link {
	background-color: var(--wp--preset--color--theme-05) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-color: var(--wp--preset--color--theme-05) !important;
}

/* ─── Service sections — scroll offset for sticky nav ─── */
.service-section {
	scroll-margin-top: 5rem;
}

/* ─── FAQ accordion styling ─── */
.service-faqs {
	scroll-margin-top: 5rem;
}

.service-faqs .wp-block-details {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-02) 15%, transparent);
	padding: var(--wp--preset--spacing--40) 0;
}

.service-faqs .wp-block-details:first-of-type {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-02) 15%, transparent);
}

.service-faqs .wp-block-details summary {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--theme-02);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.service-faqs .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.service-faqs .wp-block-details summary::after {
	content: '+';
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	color: var(--wp--preset--color--theme-03);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.service-faqs .wp-block-details[open] summary::after {
	content: '\2212';
}

.service-faqs .wp-block-details > :not(summary) {
	padding-top: var(--wp--preset--spacing--30);
}

/* ─── CTA section at bottom ─── */
.service-cta {
	scroll-margin-top: 5rem;
}

/* ─── Filter tabs (surgical / non-surgical) ─── */
.services-filter-tabs {
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: var(--wp--preset--spacing--30) !important;
}

.services-filter-tabs .wp-block-button__link {
	letter-spacing: 2.5px;
	white-space: nowrap;
	cursor: pointer;
}

/* Active filter — coral highlight */
.services-filter-tabs .wp-block-button.is-active .wp-block-button__link {
	background-color: var(--wp--preset--color--theme-05) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-color: var(--wp--preset--color--theme-05) !important;
}

/* Hidden state for filtered categories and nav tabs */
.service-category[hidden],
.services-nav-tabs .wp-block-button[hidden] {
	display: none !important;
}

/* ─── Service section two-column layout (image + text) ─── */
.service-section .wp-block-columns {
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.service-section .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 40% !important;
	flex-grow: 0;
}

.service-section .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 60% !important;
	flex-grow: 0;
}

/* Image styling within the left column */
.service-section .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--border--rounded-medium);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
	.service-anchor-nav .wp-block-buttons {
		justify-content: flex-start;
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 781px) {
	.service-anchor-nav .wp-block-buttons {
		gap: var(--wp--custom--spacing--8) !important;
	}

	.service-section {
		scroll-margin-top: 4rem;
	}

	.service-section .wp-block-columns {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--40);
	}

	.service-section .wp-block-columns > .wp-block-column:first-child,
	.service-section .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	.service-section .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
		aspect-ratio: 16 / 9;
	}

	.service-faqs {
		scroll-margin-top: 4rem;
	}
}