/*
 * Route detail collapsible sections (v2 route detail panel, frontend/rfcc-v2.php)
 * and the shared Climb Details table (includes/climb-detection.php, v1 + v2).
 *
 * These rules used to be inline style="" / runtime <style> output inside the
 * route detail markup; they live here so that markup can be passed through
 * wp_kses() at output without losing them. The accordion click handlers in
 * frontend/routes-map-full-view.php still set element.style.transform on
 * toggle, which overrides .rfcc-v2-chevron-open as before.
 */
.rfcc-v2-section-toggle,
.rfcc-v2-climb-details-toggle,
.rfcc-v2-climb-sort-th {
	-webkit-user-select: none;
	user-select: none;
}

.rfcc-v2-section-chevron,
.rfcc-v2-climb-chevron {
	transition: transform .2s;
}

/* Collapse/expand chevrons: 15px (up from the markup's 12px) so they read
   more clearly as controls. flex-shrink keeps the size when a long heading
   wraps. The whole section header row is the click/tap target; an invisible
   ::after extends it 10px above and 6px below (the header's own bottom
   margin) so the full-width row is a comfortable ~33px+ touch target without
   changing the layout or reaching into the section's content. */
.rfcc-v2-section-chevron,
.rfcc-v2-climb-chevron {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.rfcc-v2-section-toggle,
.rfcc-v2-climb-details-toggle {
	position: relative;
}
.rfcc-v2-section-toggle::after,
.rfcc-v2-climb-details-toggle::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	bottom: -6px;
}

.rfcc-v2-section-chevron.rfcc-v2-chevron-open,
.rfcc-v2-climb-chevron.rfcc-v2-chevron-open {
	transform: rotate(180deg);
}

.rfcc-climb-row:hover {
	background: #f0f4f8;
}

[data-rf-theme="dark"] .rfcc-climb-row:hover,
.rf-dark-mode .rfcc-climb-row:hover {
	background: var(--rf-bg-hover, #333333);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-rf-theme="light"]) .rfcc-climb-row:hover {
		background: var(--rf-bg-hover, #333333);
	}
}