/*
Homepage SEO content box (template-parts/home/seo-box.php): admin-authored
page content shown in a small font and capped at a fixed height, with a
fade + toggle button when it's taller than that (assets/js/seo-box.js
decides whether the toggle is actually needed).
*/

.seo-box__content {
	position: relative;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--color-muted);
	max-height: 300px;
	overflow: hidden;
	transition: max-height var(--transition-base);
}

.seo-box__inner.has-overflow:not(.is-expanded) .seo-box__content::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 64px;
	background: linear-gradient(to top, var(--color-bg), transparent);
	pointer-events: none;
}

.seo-box__toggle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-4);
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
	cursor: pointer;
}

.seo-box__toggle .icon {
	width: 1em;
	height: 1em;
	transition: transform var(--transition-fast);
}

.seo-box__inner.is-expanded .seo-box__toggle .icon {
	transform: rotate(180deg);
}