/**
 * Tona Read More Widget — Frontend Styles
 *
 * Architecture notes:
 *
 * - Collapse/expand is CSS-driven. The .tona-read-more__body element
 *   sits at max-height: 0 / overflow: hidden by default.
 *   JS adds .is-expanded to the root .tona-read-more element.
 *   All content is in the DOM at all times — SEO-safe.
 *
 * - CSS custom properties (set inline by PHP render()):
 *     --tona-rm-collapsed-height  The visible height in truncate mode (default 120px)
 *     --tona-rm-fade-color        Background color to use for the fade overlay
 *
 * - .is-collapse-trigger (the "Show Less" button) is hidden by default
 *   and shown only when expanded, keeping the layout predictable.
 */

/* ==========================================================================
   Root
   ========================================================================== */

.tona-read-more {
	--tona-rm-collapsed-height: 120px;
	--tona-rm-fade-color: #ffffff;
	--tona-rm-transition: 0.35s ease;
	--tona-rm-accent: #4f46e5;
}

/* ==========================================================================
   Teaser (Block mode — always visible above the trigger)
   ========================================================================== */

.tona-read-more__teaser {
	margin-bottom: 12px; /* overridden by Elementor slider control */
}

/* ==========================================================================
   Trigger wrappers
   ========================================================================== */

.tona-read-more__trigger-wrap {
	display: block;
}

/*
 * The collapse trigger is hidden until the widget is expanded.
 * It appears below the expanded content so the user can re-close.
 */
.tona-read-more__trigger-wrap.is-collapse-trigger {
	display: none;
}

/* When root has .is-expanded: show collapse trigger, hide expand trigger */
.tona-read-more.is-expanded .is-expand-trigger {
	display: none;
}

.tona-read-more.is-expanded .is-collapse-trigger {
	display: block;
}

/*
 * When allow-collapse is disabled (data-allow-collapse="0"), the PHP
 * render never outputs the collapse trigger. Nothing extra needed here.
 */

/* ==========================================================================
   Trigger element — shared
   ========================================================================== */

.tona-read-more__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	line-height: 1.2;
	transition: color var(--tona-rm-transition), background-color var(--tona-rm-transition),
		border-color var(--tona-rm-transition), box-shadow var(--tona-rm-transition);
	color: var(--tona-rm-accent);
	text-decoration: none;
}

/* Link style — minimal, text-only */
.tona-read-more__trigger.is-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
}

.tona-read-more__trigger.is-link:hover {
	text-decoration: underline;
}

/* Button style — defaults, overridden by Elementor style controls */
.tona-read-more__trigger.is-button {
	padding: 12px 28px;
	border-radius: 6px;
	border: 1px solid currentColor;
	background: transparent;
	font: inherit;
	font-weight: 600;
}

/* ==========================================================================
   Trigger icon (SVG arrow)
   ========================================================================== */

.tona-read-more__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: transform var(--tona-rm-transition);
}

/* Expand trigger: arrow points down (default, no transform needed). */

/* Collapse trigger: arrow always points up.
 * The collapse trigger is the "Show Less" button — it always means
 * "close this", so the arrow is permanently flipped regardless of state. */
.tona-read-more__trigger-wrap.is-collapse-trigger .tona-read-more__icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   Body (the collapsible region)
   ========================================================================== */

/*
 * Block mode: height:0 / overflow hidden. JS toggles .is-expanded on root.
 *
 * We use max-height rather than height because we don't know the
 * expanded height in advance. The value 9999px is safe here because
 * CSS transitions on max-height are not perfectly smooth for large values —
 * but for a read-more expand this is acceptable UX.
 *
 * If smooth animation is required on large blocks, JS can measure and
 * set an exact height — see read-more.js for the opt-in approach.
 */
.tona-read-more--block .tona-read-more__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--tona-rm-transition);
}

.tona-read-more--block.is-expanded .tona-read-more__body {
	max-height: 9999px;
}

/*
 * Truncate mode: collapsed height is set via --tona-rm-collapsed-height.
 * Content overflows but is hidden; the fade overlay sits on top.
 */
.tona-read-more--truncate .tona-read-more__body {
	position: relative;
	max-height: var(--tona-rm-collapsed-height);
	overflow: hidden;
	transition: max-height var(--tona-rm-transition);
}

.tona-read-more--truncate.is-expanded .tona-read-more__body {
	max-height: 9999px;
}

/* ==========================================================================
   Content area (Truncate mode only)
   ========================================================================== */

.tona-read-more__content {
	/* Inherits font from theme; typography overrides come from Elementor controls */
}

/* ==========================================================================
   Fade overlay (Truncate mode only)
   ========================================================================== */

/*
 * A gradient layer that softens the truncation edge.
 * Color comes from --tona-rm-fade-color (set by render() from the Elementor
 * color picker — should match the section background).
 */
.tona-read-more__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--tona-rm-fade-color) 100%
	);
	pointer-events: none; /* Don't block clicks on content */
	transition: opacity var(--tona-rm-transition);
}

/* Hide fade once expanded */
.tona-read-more--truncate.is-expanded .tona-read-more__fade {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Block mode — group items
   ========================================================================== */

.tona-read-more__group-heading {
	margin-top: 0;
	margin-bottom: 8px; /* overridden by Elementor slider */
}

.tona-read-more__group-body p {
	margin-top: 0;
	margin-bottom: 0.6em;
}

.tona-read-more__group-body p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Spacing between trigger and body
   ========================================================================== */

.tona-read-more__trigger-wrap.is-expand-trigger {
	margin-bottom: 16px;
}

.tona-read-more.is-expanded .tona-read-more__trigger-wrap.is-collapse-trigger {
	margin-top: 16px;
}

/* ==========================================================================
   Elementor editor — body always visible so you can edit content
   ========================================================================== */

/*
 * In the Elementor editor context, we override the hidden state so
 * the content is always visible. This prevents the frustrating situation
 * where the editor appears empty because the body is collapsed.
 *
 * .elementor-editor-active is added by Elementor to <body> when the
 * page builder is open.
 */
.elementor-editor-active .tona-read-more--block .tona-read-more__body,
.elementor-editor-active .tona-read-more--truncate .tona-read-more__body {
	max-height: none !important;
	overflow: visible !important;
}

.elementor-editor-active .tona-read-more__fade {
	display: none;
}

.elementor-editor-active .tona-read-more__trigger-wrap.is-collapse-trigger {
	display: block; /* Show both triggers in editor for reference */
}