/* Dyester Description: native CSS disclosure remains interactive without JS. */
.dyester-description {
	/* Keep the visually hidden checkbox positioned within this widget.
	   This also reduces focus scrolling before delayed JavaScript runs. */
	position: relative;
	--dyester-description-lines: 6;
	--dyester-description-paragraph-spacing: 1em;
	min-width: 0;
}

.dyester-description-body {
	line-height: 1.6;
	max-height: calc(var(--dyester-description-lines) * 1.6em);
	overflow: hidden;
}

/* lh follows the *actual* text line height, including Elementor typography. */
@supports (height: 1lh) {
	.dyester-description-body {
		max-height: calc(var(--dyester-description-lines) * 1lh);
	}
}

.dyester-description-source > :first-child { margin-top: 0; }
.dyester-description-source > :last-child { margin-bottom: 0; }
.dyester-description-source + .dyester-description-source { margin-top: 1em; }
/* Override global Elementor/Astra paragraph margins within this widget only. */
.dyester-description-source p { margin-block-start: 0; margin-block-end: 0; }
.dyester-description-source p:not(:last-child) { margin-block-end: var(--dyester-description-paragraph-spacing); }

/* Visually hidden but keyboard-focusable native checkbox; label toggles it. */
.dyester-description-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dyester-description-toggle:checked ~ .dyester-description-body {
	max-height: none;
	overflow: visible;
}

.dyester-description-action {
	display: inline-block;
	width: fit-content;
	margin-top: 12px;
	color: #1683ac;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dyester-description-action-less { display: none; }
.dyester-description-toggle:checked ~ .dyester-description-action .dyester-description-action-more { display: none; }
.dyester-description-toggle:checked ~ .dyester-description-action .dyester-description-action-less { display: inline; }
.dyester-description-toggle:focus-visible ~ .dyester-description-action {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* JS only detects non-overflowing descriptions. CSS toggle never depends on JS. */
.dyester-description.is-short .dyester-description-action { display: none; }
