/* CFCC Book Tabs — brand skin for Elementor's native Tabs widget.
 *
 * Usage: add the Tabs widget (Elementor 3.10+, "Flexbox Container" and
 * "Nested Elements" experiments enabled under Elementor > Settings >
 * Features), set Tabs Position to Left (vertical), add the CSS class
 * "cfcc-book-tabs" to the widget in its Advanced tab, then drop any
 * CFCC Activities widget (or plain text/image widgets) inside each tab
 * panel. This gives real nested activities per "chapter" — a quiz,
 * drag-and-drop, or scenario can live inside any tab — using Elementor's
 * own supported nested-elements system rather than custom code.
 *
 * Selectors intentionally target ARIA roles (role="tab", role="tabpanel")
 * rather than Elementor's internal class names, since those roles are
 * part of the WAI-ARIA tabs pattern Elementor implements and are far less
 * likely to change between Elementor versions than internal CSS classes.
 * If a future Elementor version changes markup enough that this stops
 * matching, nothing breaks — the Tabs widget still works, it just reverts
 * to Elementor's default styling until this file is updated.
 */

.cfcc-book-tabs [role="tablist"] {
	flex-direction: column;
	gap: 4px;
	min-width: 220px;
}

.cfcc-book-tabs [role="tab"] {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	text-align: left;
	color: #444444 !important;
	background: transparent !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.cfcc-book-tabs [role="tab"]:hover {
	background: #f5f6f8 !important;
	color: #385E9D !important;
}

.cfcc-book-tabs [role="tab"][aria-selected="true"] {
	background: #385E9D !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.cfcc-book-tabs [role="tabpanel"] {
	padding: 8px 12px 8px 28px !important;
}

.cfcc-book-tabs [role="tabpanel"] h1,
.cfcc-book-tabs [role="tabpanel"] h2,
.cfcc-book-tabs [role="tabpanel"] h3 {
	font-family: 'Playfair Display', serif !important;
	color: #385E9D !important;
}

/* Optional progress accent: add the class "is-read" to a tab via a tiny
 * bit of custom JS (see the guide) if you want a visited-chapter marker.
 * Left as an opt-in hook rather than automatic, since Elementor's native
 * Tabs widget has no concept of "visited" on its own. */
.cfcc-book-tabs [role="tab"].is-read::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #43B02A;
	margin-left: 8px;
}

@media (max-width: 767px) {
	.cfcc-book-tabs [role="tablist"] {
		flex-direction: row;
		flex-wrap: wrap;
	}
}