/**
 * Builder Collapsible Text - frontend styles.
 *
 * Colors are not hardcoded and the stylesheet deliberately does NOT declare its
 * own :root defaults, because this file is enqueued late (in the footer) and a
 * :root block here would override your theme/custom CSS. Instead every default
 * lives as the innermost var() fallback, so an override you set anywhere always
 * wins.
 *
 * Override points (set these in your theme or custom CSS; leave unset for the
 * neutral defaults shown):
 *
 *   variable                        default             affects
 *   ------------------------------  ------------------  --------------------------
 *   --conz-ct-text-color            inherit             body text
 *   --conz-ct-toggle-color          currentColor        link text / button border+fill
 *   --conz-ct-toggle-color-hover    currentColor        toggle color on hover
 *   --conz-ct-toggle-bg             transparent / fill  toggle background (link + button)
 *   --conz-ct-toggle-bg-hover       = --conz-ct-toggle-bg  toggle background on hover
 *   --conz-ct-button-text-color     inherit             button label
 *   --conz-ct-button-outline        currentColor 24%    button border (no fill)
 *   --conz-ct-button-outline-hover  currentColor 48%    button border on hover
 *   --conz-ct-button-tint-hover     currentColor 6%     button hover wash (no fill)
 *   --conz-ct-link-underline        currentColor 45%    link underline
 *
 * Example (brand every toggle site-wide):
 *   :root { --conz-ct-toggle-color:#7cb342; --conz-ct-toggle-color-hover:#689f38; }
 *
 * Per-instance colors picked in the builder are set inline on the wrapper as
 * --conz-ct-text / --conz-ct-accent / --conz-ct-accent-hover / --conz-ct-btn-text
 * and take precedence over the override variables above.
 *
 * Positioning: --conz-ct-fade-height, --conz-ct-toggle-offset (set inline).
 *
 * The fade-out is an alpha MASK on the content itself (text turns transparent
 * towards the bottom edge), so the real page background - solid, gradient or
 * image - always shows through. No fade color exists or is needed.
 */

.conz-ct {
	position: relative;
}

/* == Clipped content == */
.conz-ct__content {
	position: relative;
	color: var(--conz-ct-text, var(--conz-ct-text-color, inherit));
}

/* Transition only once JS has taken over, so the initial (server-clipped)
   state never animates on page load. */
.conz-ct--js .conz-ct__content {
	transition: max-height 0.45s ease;
}

.conz-ct__inner > :first-child {
	margin-top: 0;
}

.conz-ct__inner > :last-child {
	margin-bottom: 0;
}

/* == Text columns ==
   CSS multi-columns on the content. With conz-ct--h-span headings are excluded
   from the column flow and span the full width instead. On small screens the
   column count steps down automatically. */
.conz-ct--cols-2 .conz-ct__inner,
.conz-ct--cols-3 .conz-ct__inner,
.conz-ct--cols-4 .conz-ct__inner {
	column-gap: 2.2em;
}

.conz-ct--cols-2 .conz-ct__inner {
	column-count: 2;
}

.conz-ct--cols-3 .conz-ct__inner {
	column-count: 3;
}

.conz-ct--cols-4 .conz-ct__inner {
	column-count: 4;
}

.conz-ct--h-span .conz-ct__inner :is(h1, h2, h3, h4, h5, h6) {
	column-span: all;
}

@media (max-width: 960px) {
	.conz-ct--cols-3 .conz-ct__inner,
	.conz-ct--cols-4 .conz-ct__inner {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.conz-ct--cols-2 .conz-ct__inner,
	.conz-ct--cols-3 .conz-ct__inner,
	.conz-ct--cols-4 .conz-ct__inner {
		column-count: 1;
	}
}

/* == Fade-out edge ==
   Alpha mask on the clipped content: the last --conz-ct-fade-height pixels of
   the text fade to transparent, revealing whatever background is behind the
   module (solid, gradient or image). Applied only while collapsed and only when
   a toggle is actually needed. Browsers without mask support show a hard edge. */
.conz-ct--fade:not(.is-expanded):not(.conz-ct--fits) .conz-ct__content {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--conz-ct-fade-height, 7em)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--conz-ct-fade-height, 7em)), transparent 100%);
}

/* == Toggle: overlay when collapsed, in-flow when expanded == */
.conz-ct__actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 0.5em var(--conz-ct-toggle-offset, 8px);
	pointer-events: none;
}

.conz-ct--align-left .conz-ct__actions {
	justify-content: flex-start;
}

.conz-ct--align-right .conz-ct__actions {
	justify-content: flex-end;
}

.conz-ct__actions .conz-ct__toggle {
	pointer-events: auto;
}

/* Expanded (and the editor preview) put the toggle back into normal flow. */
.conz-ct.is-expanded .conz-ct__actions,
.conz-ct--preview .conz-ct__actions {
	position: static;
	padding: 0;
	margin-top: 0.7em;
}

/* Nothing to collapse - no overlay (the mask is already excluded above). */
.conz-ct--fits .conz-ct__actions {
	display: none;
}

/* == Toggle base == */
.conz-ct__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

.conz-ct__toggle:focus-visible {
	outline: 2px solid var(--conz-ct-accent, var(--conz-ct-toggle-color, currentColor));
	outline-offset: 3px;
	border-radius: 4px;
}

/* Link style - refined text link. A fine underline lets it lift off the
   background; a chosen color overrides it. */
.conz-ct--link .conz-ct__toggle {
	padding: 0;
	color: var(--conz-ct-accent, var(--conz-ct-toggle-color, currentColor));
	background-color: var(--conz-ct-toggle-bg, transparent);
	font-weight: 500;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--conz-ct-accent, var(--conz-ct-link-underline, color-mix(in srgb, currentColor 45%, transparent)));
}

.conz-ct--link .conz-ct__toggle:hover,
.conz-ct--link .conz-ct__toggle:focus-visible {
	color: var(--conz-ct-accent-hover, var(--conz-ct-accent, var(--conz-ct-toggle-color-hover, currentColor)));
	background-color: var(--conz-ct-toggle-bg-hover, var(--conz-ct-toggle-bg, transparent));
	text-decoration-color: currentColor;
}

/* Button style - delicate outline, gently rounded. When no toggle color is set
   the border/hover come from the neutral defaults (a fine hairline in the text
   color); a chosen color fills it in. */
.conz-ct--button .conz-ct__toggle {
	padding: 0.4em 1em;
	border-radius: 4px;
	border: 1px solid;
	border-color: var(--conz-ct-accent, var(--conz-ct-toggle-color, var(--conz-ct-button-outline, color-mix(in srgb, currentColor 24%, transparent))));
	background-color: var(--conz-ct-toggle-bg, var(--conz-ct-accent, var(--conz-ct-toggle-color, transparent)));
	color: var(--conz-ct-btn-text, var(--conz-ct-button-text-color, inherit));
	font-weight: 500;
	font-size: 0.84em;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.conz-ct--button .conz-ct__toggle:hover,
.conz-ct--button .conz-ct__toggle:focus-visible {
	border-color: var(--conz-ct-accent-hover, var(--conz-ct-accent, var(--conz-ct-toggle-color-hover, var(--conz-ct-toggle-color, var(--conz-ct-button-outline-hover, color-mix(in srgb, currentColor 48%, transparent))))));
	background-color: var(--conz-ct-toggle-bg-hover, var(--conz-ct-toggle-bg, var(--conz-ct-accent-hover, var(--conz-ct-accent, var(--conz-ct-toggle-color-hover, var(--conz-ct-toggle-color, var(--conz-ct-button-tint-hover, color-mix(in srgb, currentColor 6%, transparent))))))));
}

/* == Labels (more / less) == */
.conz-ct__label--less {
	display: none;
}

.conz-ct.is-expanded .conz-ct__label--more {
	display: none;
}

.conz-ct.is-expanded .conz-ct__label--less {
	display: inline;
}

/* == Chevron == */
.conz-ct__chevron {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	transition: transform 0.3s ease;
}

.conz-ct.is-expanded .conz-ct__chevron {
	transform: rotate(180deg);
}

/* == Reduced motion == */
@media (prefers-reduced-motion: reduce) {
	.conz-ct--js .conz-ct__content,
	.conz-ct__chevron,
	.conz-ct--button .conz-ct__toggle {
		transition: none;
	}
}