/**
 * Read More Show Less — front-end base styles.
 * Colors, presets, fade color, fonts and alignment are injected inline
 * from the plugin settings; structural rules live here.
 */

.rmsl-content {
	overflow: hidden;
	will-change: max-height;
}

/* Animation is enabled by JS only after the initial collapsed paint,
   so the page does not "jump" on load. */
.rmsl-content.rmsl-anim {
	transition: max-height .35s ease;
}

.rmsl-fade-mask {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	pointer-events: none;
}

.rmsl-actions {
	margin-top: 12px;
}

.rmsl-align-center { text-align: center; }
.rmsl-align-right  { text-align: right; }
.rmsl-align-left   { text-align: left; }

/* Structural + strong reset. The `.rmsl-actions` ancestor raises specificity
   above typical theme button rules (e.g. `.entry-content button`), so the
   text-link style never inherits a theme background/border. */
.rmsl-actions .rmsl-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background .3s ease, color .3s ease;
}

.rmsl-actions .rmsl-toggle:hover,
.rmsl-actions .rmsl-toggle:focus {
	text-decoration: none;
}

/* Default chevron (hidden when a custom icon is set via inline CSS). */
.rmsl-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease;
	flex-shrink: 0;
}

.rmsl-toggle.rmsl-open .rmsl-arrow {
	transform: rotate(-135deg);
}

.rmsl-actions .rmsl-toggle:focus {
	outline: none;
}

.rmsl-actions .rmsl-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.rmsl-content.rmsl-anim {
		transition: none;
	}
}