/* Wrapper */
.htx-expander {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
}

/* Inline mode keeps the control beside surrounding text. */
.htx-expander--inline {
	display: inline !important;
}

/* Block mode starts the expander on a new line. */
.htx-expander--block {
	display: block !important;
}

/* Shared content state */
.htx-expander__content,
.htx-expander__content-inner {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

/* Inline mode uses a smooth fade so it can remain part of the same text line. */
.htx-expander--inline .htx-expander__content {
	display: none !important;
	opacity: 0;
}

.htx-expander--inline.is-expanded .htx-expander__content {
	display: inline !important;
	animation: htx-expander-inline-reveal var(--htx-expander-duration, 650ms) ease both;
}

.htx-expander--inline .htx-expander__content-inner {
	display: inline !important;
}

/* Block mode uses a smooth sliding height animation. */
.htx-expander--block .htx-expander__content {
	display: block !important;
	max-height: 0;
	opacity: 0;
	overflow: hidden !important;
	transition:
		max-height var(--htx-expander-duration, 650ms) ease,
		opacity calc(var(--htx-expander-duration, 650ms) * 0.75) ease;
	will-change: max-height, opacity;
}

.htx-expander--block .htx-expander__content-inner {
	display: block !important;
}

.htx-expander--block.is-expanded .htx-expander__content {
	opacity: 1;
}

/*
 * Strong reset prevents Elementor, Divi, Bootstrap and theme button styles
 * from changing this control.
 */
.htx-expander .htx-expander__toggle,
.htx-expander .htx-expander__toggle:hover,
.htx-expander .htx-expander__toggle:focus,
.htx-expander .htx-expander__toggle:active {
	all: unset !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--htx-expander-color, #295ea7) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: var(--htx-expander-font-weight, 600) !important;
	letter-spacing: normal !important;
	line-height: inherit !important;
	margin: 0 0 0 0.25em !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	opacity: 1 !important;
	padding: 0 !important;
	text-align: inherit !important;
	text-decoration: underline !important;
	text-decoration-thickness: auto !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
	transform: none !important;
	width: auto !important;
}

.htx-expander--inline .htx-expander__toggle {
	display: inline !important;
	vertical-align: baseline !important;
}

.htx-expander--block .htx-expander__toggle {
	display: inline-block !important;
	margin-left: 0 !important;
	margin-top: 0.25em !important;
}

.htx-expander .htx-expander__toggle:hover {
	opacity: 0.82 !important;
	text-decoration: underline !important;
}

.htx-expander .htx-expander__toggle:focus-visible {
	outline: 2px solid var(--htx-expander-color, #295ea7) !important;
	outline-offset: 3px !important;
}

.htx-expander .htx-expander__label {
	all: unset !important;
	color: inherit !important;
	font: inherit !important;
	text-decoration: inherit !important;
}

@keyframes htx-expander-inline-reveal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.htx-expander--inline.is-expanded .htx-expander__content {
		animation: none;
	}

	.htx-expander--block .htx-expander__content {
		transition: none;
	}
}