/* =========================================
   Bontoy: expandable text above footer
   ========================================= */

.bon-footer-text {
	--bon-footer-text-collapsed-height: 180px;

	width: 100%;
	margin: 64px 0 20px;
	padding: 0;
	background: #ffffff;
}

.bon-footer-text__inner {
	width: 100%;
	max-width: 870px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.bon-footer-text__title {
	margin: 0 0 34px;
	padding: 0;

	color:  var(--bon-color-muted);

	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

.bon-footer-text__collapse {
	position: relative;
	width: 100%;
}

.bon-footer-text__content {
	width: 100%;

	color:  var(--bon-color-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;

	overflow-wrap: anywhere;
	box-sizing: border-box;
}

.bon-footer-text__content > :first-child {
	margin-top: 0;
}

.bon-footer-text__content > :last-child {
	margin-bottom: 0;
}

.bon-footer-text__content p {
	margin: 0 0 16px;
}

.bon-footer-text__content h1,
.bon-footer-text__content h2,
.bon-footer-text__content h3,
.bon-footer-text__content h4,
.bon-footer-text__content h5,
.bon-footer-text__content h6 {
	margin: 24px 0 12px;

	color: #303030;

	font-weight: 500;
	line-height: 1.3;
}

.bon-footer-text__content ul,
.bon-footer-text__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.bon-footer-text__content img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bon-footer-text__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Collapsed state.
 */

.bon-footer-text.is-collapsible:not(.is-expanded)
	.bon-footer-text__content {
	max-height: var(--bon-footer-text-collapsed-height);
	overflow: hidden;
}

.bon-footer-text__fade {
	display: none;
}

.bon-footer-text.is-collapsible:not(.is-expanded)
	.bon-footer-text__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;
	height: 72px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.76) 46%,
			#ffffff 100%
		);

	pointer-events: none;
}

.bon-footer-text__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	margin: 15px 0 0;
	padding: 0;

	border: 0;
	background: transparent;
	color:  var(--bon-color-primary);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 5px;

	cursor: pointer;

	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.bon-footer-text__toggle:hover,
.bon-footer-text__toggle:focus {
	color:  var(--bon-color-primary-hover);
	outline: none;
}

.bon-footer-text__toggle[hidden] {
	display: none !important;
}

.bon-footer-text.is-expanded .bon-footer-text__content {
	max-height: none;
	overflow: visible;
}

.bon-footer-text.is-expanded .bon-footer-text__fade {
	display: none;
}

@media (max-width: 767px) {
	.bon-footer-text {
		--bon-footer-text-collapsed-height: 170px;

		margin: 42px 0 48px;
	}

	.bon-footer-text__inner {
		padding-right: 16px;
		padding-left: 16px;
	}

	.bon-footer-text__title {
		margin-bottom: 24px;

		font-size: 24px;
		line-height: 1.2;
	}

	.bon-footer-text__content {
		font-size: 13px;
		line-height: 1.5;
	}

	.bon-footer-text__content p {
		margin-bottom: 13px;
	}

	.bon-footer-text__toggle {
		margin-top: 13px;

		font-size: 13px;
	}
}