/*
 * LearnKit Elementor Addon — base tokens and shared utilities.
 * Per-widget styles live in their own files and depend on this one.
 */

/*
 * Token cascade: LearnKit's customizer emits --lk-color-* / --lk-font-*
 * variables on :root. We bridge them into our own --lkea-* namespace with
 * sensible fallbacks so the addon honors the site's design system without
 * any PHP glue. Elementor's Site Settings → LearnKit tab (Phase 6) can
 * override these via body { --lkea-color-primary: ... }.
 */
:root {
	--lkea-color-primary:          var(--lk-color-primary,    #4f46e5);
	--lkea-color-primary-contrast: var(--lk-color-btn-text,   #ffffff);
	--lkea-color-secondary:        var(--lk-color-secondary,  #7c3aed);
	--lkea-color-accent:           var(--lk-color-accent,     #f59e0b);
	--lkea-color-text:             var(--lk-color-text,       #111827);
	--lkea-color-surface:          var(--lk-color-bg,         #ffffff);

	--lkea-color-muted: #6b7280;
	--lkea-color-border: #e5e7eb;
	--lkea-color-surface-alt: #f9fafb;
	--lkea-color-success: #10b981;
	--lkea-color-danger: #ef4444;

	--lkea-radius-sm: 4px;
	--lkea-radius-md: 8px;
	--lkea-radius-lg: 12px;
	--lkea-card-radius:   var(--lk-card-radius,   12px);
	--lkea-button-radius: var(--lk-button-radius,  8px);

	--lkea-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--lkea-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

	--lkea-font-heading: var(--lk-font-heading, inherit);
	--lkea-font-body:    var(--lk-font-body,    inherit);
}

/* Screen-reader only utility (used for icon-only buttons) */
.lkea-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* A11y: visible focus ring on every interactive element in this addon.
   Uses :focus-visible so mouse clicks don't render a focus ring, but
   keyboard navigation does. Respects existing border-radius via inheritance. */
.lkea-card__cta:focus-visible,
.lkea-card__wishlist:focus-visible,
.lkea-enroll-btn:focus-visible,
.lkea-cert-btn:focus-visible,
.lkea-mobile-cta__btn:focus-visible,
.lkea-carousel__nav:focus-visible,
.lkea-curriculum__section > summary:focus-visible,
.lkea-share-btn:focus-visible,
.lkea-filter:focus-visible {
	outline: 3px solid var(--lkea-color-primary);
	outline-offset: 2px;
}

/* A11y: loading states on AJAX-affected regions get aria-busy via JS;
   when set, dim the region visually so keyboard users perceive the
   busy state alongside aria-live announcements. */
[aria-busy="true"].lkea-listing,
.lkea-listing--loading {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.lkea-card,
	.lkea-card__img,
	.lkea-card__cta,
	.lkea-card__wishlist,
	.lkea-progress__bar,
	.lkea-card__progress-bar,
	.lkea-enroll-btn,
	.lkea-mobile-cta__btn {
		transition: none !important;
	}
}