/*------------------------------------*\
    
    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/

  
.read-more {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --readMoreLines );
	overflow: hidden;
	word-break: break-word;
}

.read-more--toggle,
.read-more--cta {
    margin-top: 1.2rem; /* Adjust to match site design */
}

/* fix - display: -webkit-box; prevents margins from collapsing */
.read-more__content p {
    margin-top: 0;
}

/* Toggle Button */

.expand {
	text-decoration: none;
	position: relative;
	display: inline-block;
	margin-top: 0;
}

.expand {
	background-color: transparent;
	margin-bottom: 20px;
	margin-top: 14px;
	display: block;
	position: relative;
	border: none;
	font-size: 12px;
	font-weight: 300;
	color: #e97200;
	line-height: 1.2em;
	padding-bottom: 7px;
	padding-right: 20px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid #e97200;
}

.expand:hover {
    font-weight: 500;
    color: #e97200;
    border-bottom: 2px solid #e97200;
}

.expand::before {
    content: "\e914";
    font-family: 'icomoon';
    position: absolute;
    right: 0;
    top: 0px;
    font-size: 10px;
    font-weight: normal;
}

.expand.is-active::before {
    content: "\e914";
	transform: rotate(-45deg);
}

@media (min-width: 768px) {
	.expand {
		margin-bottom: 28px;
		margin-top: 20px;
	}

	.read-more__content--mobile {
		-webkit-line-clamp: inherit !important;
	}
}

@media (min-width: 1200px) {
	.expand {
		margin-bottom: 30px;
		margin-top: 30px;
		padding-bottom: 14px;
		font-size: 14px;
	}
}

/* Hack */

/*
* Since the current format for the lineclamp is div for the parent and p tags for the children, we should set the children or p tags to display: inline;
* The reason why line clamps works on other websites is they use the line clamp directly to the p tag. Which means the what's inside p tags are actually inline text or inline tags like span or strong.
* So, we need to set the tag under the line clamp css to display: inline;
*/
.read-more > p {
	display: inline;
}

.read-more > p ~ p {
	display: none;
}

.read-more.is-expanded > p,
.read-more.is-expanded > p ~ p {
	display: block;
}