/**
 * Shared presentation primitives (Phase 3).
 *
 * `.ld-btn` and `.ld-breadcrumb` are used by more than one page template
 * (Category Page, the Class/Event single page, and the shared route
 * overlay's own no-CSS-of-its-own-here destination content) — per
 * CLAUDE.md's "shared properties should normally have a single owner" and
 * "do not create page- or variant-specific styling for properties that
 * belong to a shared component", they live here once rather than being
 * duplicated per template. Originally introduced in assets/css/category-
 * page.css (Phase 3 Block 2) and moved here when the Class/Event single
 * page (assets/css/class-page.css) needed the same primitives, rather than
 * being redefined a second time there.
 *
 * Enqueued sitewide (functions.php), matching header.css's own scope —
 * these are usable by any current or future page, not one destination.
 */

.ld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 50px;
	font-family: var( --ld-font-inter );
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var( --ld-color-black );
	background: transparent;
	color: var( --ld-color-black );
}

.ld-btn--outline:hover,
.ld-btn--outline:focus-visible {
	background: var( --ld-color-black );
	color: var( --ld-color-white );
}

.ld-btn--filled {
	border-color: var( --ld-color-black );
	background: var( --ld-color-black );
	color: var( --ld-color-white );
}

.ld-btn--filled:hover,
.ld-btn--filled:focus-visible {
	background: var( --ld-color-white );
	color: var( --ld-color-black );
}

.ld-btn--small {
	padding: 5px 12px;
}

.ld-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-family: var( --ld-font-inter );
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
}

.ld-breadcrumb__list li:not( :last-child )::after {
	content: "\203A";
	margin-left: 4px;
	opacity: 0.6;
}

.ld-breadcrumb__list a {
	color: var( --ld-color-black );
	text-decoration: none;
}

.ld-breadcrumb__list a:hover,
.ld-breadcrumb__list a:focus-visible {
	text-decoration: underline;
}

/* Toggle control (Figma Style Guide & Components, node 68:589): a reusable
 * on/off switch, distinct from a checkbox's own square/checkmark appearance
 * (Category Page's Location filter, assets/css/category-page.css) — the
 * Category Page selector's "Include weekly drop in classes" control (task:
 * Category Page selector corrections §6) is this file's first consumer, but
 * it lives here rather than in category-page.css since it is a Style Guide
 * primitive, not selector-specific presentation. The underlying control
 * remains a real `<input type="checkbox">` (still keyboard-operable, still
 * exposes its own checked state to assistive technology) visually hidden
 * with the standard clip-based technique rather than `display: none`, so it
 * remains focusable; `~` sibling selectors below paint the track/thumb and
 * the :focus-visible ring against its checked/focus state. Wrapping
 * `<label>` markup (one `<input>`, then the `.ld-toggle__track`/`__label`
 * siblings) makes the whole control clickable natively, with no JS
 * required for the toggle's own visual state. */
.ld-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var( --ld-font-inter );
	font-weight: 600;
	font-size: 14px;
	color: var( --ld-color-black );
}

.ld-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ld-toggle__track {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	border: 2px solid var( --ld-color-black );
	background: var( --ld-color-white );
}

.ld-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --ld-color-black );
	transition: transform 0.15s ease;
}

.ld-toggle__input:checked ~ .ld-toggle__track {
	background: var( --ld-color-black );
}

.ld-toggle__input:checked ~ .ld-toggle__track .ld-toggle__thumb {
	background: var( --ld-color-white );
	transform: translateX( 16px );
}

.ld-toggle__input:focus-visible ~ .ld-toggle__track {
	outline: 2px solid var( --ld-color-black );
	outline-offset: 2px;
}