/*
 * RahkarTheme — shared "fade + بیشتر/کمتر" component.
 *
 * Used wherever long text needs a soft fade with an inline toggle:
 *   - product short description  (modal-trigger variant)
 *   - product long description   (in-place expand, pure CSS)
 *   - category / shop description (in-place expand, pure CSS)
 *   - footer "about the store"   (modal-trigger variant)
 *
 * Two variants:
 *   .rh-fade--expand  pure-CSS show/hide via checkbox hack
 *   .rh-fade--modal   the toggle is a <button>; external JS opens dialog
 *
 * Both share the same body + toggle styling. Loaded GLOBALLY because the
 * footer-about variant renders on every page (footer template part).
 * Size budget: < 1KB minified.
 */

.rh-fade {
	position: relative;
}

/* Body: clipped to ~N lines via max-height (--rh-fade-lines × line-height).
 * Why max-height and not -webkit-line-clamp: line-clamp only works on
 * inline content inside `display: -webkit-box`. Our usage includes rich
 * HTML (paragraphs, lists, headings) where line-clamp silently breaks.
 * max-height clips reliably on any markup, and the mask-image gradient
 * gives the same "fade into nothing" affordance. */
.rh-fade__body {
	overflow: hidden;
	max-height: calc(var(--rh-fade-lines, 5) * 1.7em);
	-webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

/* When the user expands (checkbox checked), drop the clamp + fade. */
.rh-fade--expand .rh-fade__check:checked ~ .rh-fade__body {
	max-height: none;
	overflow: visible;
	-webkit-mask-image: none;
	        mask-image: none;
}

/* Toggle — "بیشتر / کمتر" link. Shared across both variants. Looks like
 * a text link, behaves like a button (or label, in expand mode). */
.rh-fade__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	margin-top: 10px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary, #0a66c2);
	background: transparent;
	border: 0;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	line-height: 1.6;
}
.rh-fade__toggle:hover,
.rh-fade__toggle:focus-visible {
	color: var(--wp--preset--color--primary-dark, #074a8d);
	outline: none;
}

/* Default state: show "بیشتر", hide "کمتر". Expand variant swaps these
 * when the checkbox flips. Modal variant has no .rh-fade__less span. */
.rh-fade__less {
	display: none;
}
.rh-fade--expand .rh-fade__check:checked ~ .rh-fade__toggle .rh-fade__more {
	display: none;
}
.rh-fade--expand .rh-fade__check:checked ~ .rh-fade__toggle .rh-fade__less {
	display: inline;
}

/* The "hidden" attribute on the toggle (used by modal-mode JS to hide
 * it until overflow is measured) needs to beat the `display: inline-flex`
 * default. Without this it would always render. */
.rh-fade__toggle[hidden] {
	display: none;
}