/**
 * Lienzo — enhancements.
 *
 * Dark mode variables, back-to-top button, reading progress bar,
 * scroll reveal and breadcrumbs. Written with logical properties so no
 * separate -rtl.css file is needed.
 */

:root {
	--lienzo-bg: #ffffff;
	--lienzo-surface: #f5f5f5;
	--lienzo-text: #1e1e1e;
	--lienzo-muted: #6b6b6b;
	--lienzo-border: #e0e0e0;
	--lienzo-accent: #2563eb;
	--lienzo-accent-contrast: #ffffff;
}

html[data-lienzo-theme='dark'] {
	--lienzo-bg: #121212;
	--lienzo-surface: #1e1e1e;
	--lienzo-text: #f2f2f2;
	--lienzo-muted: #a3a3a3;
	--lienzo-border: #333333;
	--lienzo-accent: #60a5fa;
	--lienzo-accent-contrast: #0b1220;
}

html[data-lienzo-theme='dark'] body {
	background-color: var( --lienzo-bg );
	color: var( --lienzo-text );
}

html[data-lienzo-theme='dark'] a {
	color: var( --lienzo-accent );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto !important;
	}

	.lienzo-reveal,
	[data-lienzo-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Dark mode toggle button ------------------------------------------------ */

.lienzo-dark-toggle {
	align-items: center;
	background: var( --lienzo-surface );
	border: 1px solid var( --lienzo-border );
	border-radius: 999px;
	color: var( --lienzo-text );
	cursor: pointer;
	display: inline-flex;
	inset-inline-end: 1rem;
	inset-block-start: 1rem;
	justify-content: center;
	line-height: 0;
	padding: 0.5rem;
	position: fixed;
	transition: background-color 0.2s ease, transform 0.2s ease;
	z-index: 9999;
}

.lienzo-dark-toggle:hover {
	transform: translateY( -1px );
}

.lienzo-dark-toggle .icon-moon,
html[data-lienzo-theme='dark'] .lienzo-dark-toggle .icon-sun {
	display: none;
}

html[data-lienzo-theme='dark'] .lienzo-dark-toggle .icon-moon {
	display: inline-block;
}

/* When placed inside the Elementor widget, drop the fixed positioning. */
.elementor-widget-lienzo_dark_mode .lienzo-dark-toggle {
	position: static;
	inset-inline-end: auto;
	inset-block-start: auto;
}

/* Back to top ------------------------------------------------------------ */

.lienzo-back-to-top {
	align-items: center;
	background: var( --lienzo-accent );
	border: none;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
	color: var( --lienzo-accent-contrast );
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transform: translateY( 0.5rem );
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: 2.75rem;
	z-index: 9999;
}

.lienzo-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY( 0 );
}

/* Reading progress bar ---------------------------------------------------*/

.lienzo-reading-progress {
	background: transparent;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 3px;
	position: fixed;
	width: 100%;
	z-index: 9998;
}

.lienzo-reading-progress-bar {
	background: var( --lienzo-accent );
	height: 100%;
	inline-size: 0%;
	transition: inline-size 0.1s linear;
}

/* Breadcrumbs ------------------------------------------------------------ */

.lienzo-breadcrumbs {
	color: var( --lienzo-muted );
	font-size: 0.875rem;
	margin-block-end: 1rem;
}

.lienzo-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lienzo-breadcrumbs li {
	align-items: center;
	display: flex;
	gap: 0.35rem;
}

.lienzo-breadcrumbs li:not( :last-child )::after {
	content: '/';
	opacity: 0.5;
	padding-inline-start: 0.35rem;
}

.lienzo-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
}

.lienzo-breadcrumbs [aria-current='page'] {
	color: var( --lienzo-text );
}

/* Scroll reveal ------------------------------------------------------------
   Opt-in entrance animation: add .lienzo-reveal (or [data-lienzo-reveal])
   to any element. Variants: --fade --left --right --zoom, delays 1-4. */

.lienzo-reveal,
[data-lienzo-reveal] {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ), transform 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: opacity, transform;
}

.lienzo-reveal--fade { transform: none; }
.lienzo-reveal--left { transform: translateX( -32px ); }
.lienzo-reveal--right { transform: translateX( 32px ); }
.lienzo-reveal--zoom { transform: scale( 0.94 ); }

.lienzo-delay-1 { transition-delay: 0.12s; }
.lienzo-delay-2 { transition-delay: 0.24s; }
.lienzo-delay-3 { transition-delay: 0.36s; }
.lienzo-delay-4 { transition-delay: 0.48s; }

.lienzo-reveal.is-visible,
[data-lienzo-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Reading time badge ------------------------------------------------------*/

.lienzo-reading-time {
	align-items: center;
	color: var( --lienzo-muted );
	display: inline-flex;
	font-size: 0.875rem;
	gap: 0.35rem;
}