/**
 * Paragraph Expandable Block Front-end CSS
 */

/* Layout styles for columns */
.paragraph-expandable .container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

.paragraph-expandable{
	padding-top: 60px;
	padding-bottom: 30px;
}

.paragraph-expandable-left-column {
	flex: 1;
	/*min-width: 300px;*/
	max-width: 431px;
}

.paragraph-expandable-right-column {
	flex: 1;
	/*min-width: 300px;*/
}

/* Background Colors - Named Colors */
.paragraph-expandable-bg-image-cont.bg-dark-blue {
	background-color: #0F293E;
}

.paragraph-expandable-bg-image-cont.bg-dark-brown {
	background-color: #290B0B;
}

.paragraph-expandable-bg-image-cont.bg-burgundy {
	background-color: #800020;
}

.paragraph-expandable-bg-image-cont.bg-gold {
	background-color: #B8860B;
}

.paragraph-expandable-bg-image-cont.bg-copper {
	background-color: #B87333;
}

.paragraph-expandable-bg-image-cont.bg-periwinkle {
	background-color: #CCCCFF;
}

.paragraph-expandable-bg-image-cont.bg-deep-blue {
	background-color: #00008B;
}

.paragraph-expandable-bg-image-cont.bg-dark-red {
	background-color: #8B0000;
}

.paragraph-expandable-bg-image-cont.bg-white {
	background-color: #FFFFFF;
}

.paragraph-expandable-bg-image-cont.bg-black {
	background-color: #000000;
}

/* Text Colors */
.paragraph-expandable.text-white,
.paragraph-expandable.text-white h1,
.paragraph-expandable.text-white h2,
.paragraph-expandable.text-white h3,
.paragraph-expandable.text-white,
.paragraph-expandable.text-white h5,
.paragraph-expandable.text-white h6,
.paragraph-expandable.text-white p,
.paragraph-expandable.text-white .paragraph-expandable-title,
.paragraph-expandable.text-white .paragraph-expandable-description,
.paragraph-expandable.text-white .paragraph-title,
.paragraph-expandable.text-white .paragraph-description,
.paragraph-expandable.text-white .paragraph-expandable-read-more-btn {
	color: #FFFFFF;
}

.paragraph-expandable.text-black h4,
.paragraph-expandable.text-dark-blue h4,
.paragraph-expandable .paragraph-expandable-right-column h4,
.paragraph-expandable .paragraph-expandable-wysiwyg h4,
.paragraph-expandable .expandable-content h4{
	color: #0F293E !important;
	font-family: 'Hedvig Letters Serif', serif !important;
	font-size: 22px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: normal !important;
	margin-bottom: 16px !important;
}

.paragraph-expandable.text-black,
.paragraph-expandable.text-black h1,
.paragraph-expandable.text-black h2,
.paragraph-expandable.text-black h3,
.paragraph-expandable.text-black h5,
.paragraph-expandable.text-black h6,
.paragraph-expandable.text-black p,
.paragraph-expandable.text-black .paragraph-expandable-title,
.paragraph-expandable.text-black .paragraph-expandable-description,
.paragraph-expandable.text-black .paragraph-title,
.paragraph-expandable.text-black .paragraph-description,
.paragraph-expandable.text-black .paragraph-expandable-read-more-btn {
	color: #000000;
}

.paragraph-expandable.text-dark-blue,
.paragraph-expandable.text-dark-blue h1,
.paragraph-expandable.text-dark-blue h2,
.paragraph-expandable.text-dark-blue h3,
.paragraph-expandable.text-dark-blue h5,
.paragraph-expandable.text-dark-blue h6,
.paragraph-expandable.text-dark-blue p,
.paragraph-expandable.text-dark-blue .paragraph-expandable-title,
.paragraph-expandable.text-dark-blue .paragraph-expandable-description,
.paragraph-expandable.text-dark-blue .paragraph-title,
.paragraph-expandable.text-dark-blue .paragraph-description,
.paragraph-expandable.text-dark-blue .paragraph-expandable-read-more-btn {
	color: #0F293E;
}

/* LEFT COLUMN STYLES */
/* Left Column Title Styles */
.paragraph-expandable .paragraph-expandable-left-column .paragraph-expandable-title,
.paragraph-expandable .paragraph-expandable-left-column .left-column-heading,
.paragraph-expandable .paragraph-expandable-left-column h1,
.paragraph-expandable .paragraph-expandable-left-column h2,
.paragraph-expandable .paragraph-expandable-left-column h3 {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: 114%;
	margin-bottom: 53px;
	max-width: 375px;
}

/* Left Column Paragraph Styles */
.paragraph-expandable .paragraph-expandable-left-column .paragraph-expandable-description,
.paragraph-expandable .paragraph-expandable-left-column .left-column-paragraph,
.paragraph-expandable .paragraph-expandable-left-column p {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
	margin-bottom: 53px;
}

/* RIGHT COLUMN STYLES */
/* Right Column Title Styles - Updated with user specifications */
.paragraph-expandable .paragraph-expandable-right-column .paragraph-expandable-title,
.paragraph-expandable .paragraph-expandable-right-column .right-column-heading,
.paragraph-expandable .paragraph-expandable-right-column h1,
.paragraph-expandable .paragraph-expandable-right-column h2,
.paragraph-expandable .paragraph-expandable-right-column h3,
.paragraph-expandable .paragraph-expandable-right-column h5,
.paragraph-expandable .paragraph-expandable-right-column h6,
.paragraph-expandable .paragraph-expandable-wysiwyg h1,
.paragraph-expandable .paragraph-expandable-wysiwyg h2,
.paragraph-expandable .paragraph-expandable-wysiwyg h3,
.paragraph-expandable .paragraph-expandable-wysiwyg h5,
.paragraph-expandable .paragraph-expandable-wysiwyg h6,
.paragraph-expandable .expandable-content h1,
.paragraph-expandable .expandable-content h2,
.paragraph-expandable .expandable-content h3,
.paragraph-expandable .expandable-content h5,
.paragraph-expandable .expandable-content h6 {
	color: #000 !important;
	font-family: 'Hedvig Letters Serif', serif !important;
	font-size: 22px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: normal !important;
	margin-bottom: 16px !important;
}

/* Right Column Paragraph Styles - Updated with user specifications */
.paragraph-expandable .paragraph-expandable-right-column .paragraph-expandable-description,
.paragraph-expandable .paragraph-expandable-right-column .right-column-paragraph,
.paragraph-expandable .paragraph-expandable-right-column p,
.paragraph-expandable .paragraph-expandable-wysiwyg p,
.paragraph-expandable .expandable-content p {
	color: #000 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 300 !important;
	line-height: 22px !important;
	margin-bottom: 16px !important;
}

/* WYSIWYG Link Styles - Updated with orange color and no underline */
.paragraph-expandable .paragraph-expandable-right-column .paragraph-expandable-wysiwyg a:not(.paragraph-expandable-read-more-btn),
.paragraph-expandable .expandable-content a:not(.paragraph-expandable-read-more-btn):not(.paragraph-expandable-read-less-btn) {
	color: #AA632C !important;
	text-decoration: none !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 300 !important;
	line-height: 22px !important;
	transition: opacity 0.3s ease !important;
}

.paragraph-expandable .paragraph-expandable-right-column .paragraph-expandable-wysiwyg a:not(.paragraph-expandable-read-more-btn):hover,
.paragraph-expandable .expandable-content a:not(.paragraph-expandable-read-more-btn):not(.paragraph-expandable-read-less-btn):hover {
	opacity: 0.8 !important;
	text-decoration: none !important;
}

/* List Styles - Updated with user specifications */
.paragraph-expandable .paragraph-expandable-wysiwyg ul,
.paragraph-expandable .expandable-content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 16px;
}

.paragraph-expandable .paragraph-expandable-wysiwyg ul li,
.paragraph-expandable .expandable-content ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 12px;
	color: #000 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 300 !important;
	line-height: 22px !important;
}

.paragraph-expandable .paragraph-expandable-wysiwyg ul li:before,
.paragraph-expandable .expandable-content ul li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #000000, #000000);
}

/* Ordered List Styles - Added for completeness */
.paragraph-expandable .paragraph-expandable-wysiwyg ol,
.paragraph-expandable .expandable-content ol {
	padding-left: 20px;
	margin-bottom: 16px;
}

.paragraph-expandable .paragraph-expandable-wysiwyg ol li,
.paragraph-expandable .expandable-content ol li {
	margin-bottom: 12px;
	color: #000 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 300 !important;
	line-height: 22px !important;
}

/* Strong/Bold text styling */
.paragraph-expandable .paragraph-expandable-wysiwyg strong,
.paragraph-expandable .paragraph-expandable-wysiwyg b,
.paragraph-expandable .expandable-content strong,
.paragraph-expandable .expandable-content b {
	font-weight: 600 !important;
	color: #000 !important;
}

/* Italic text styling */
.paragraph-expandable .paragraph-expandable-wysiwyg em,
.paragraph-expandable .paragraph-expandable-wysiwyg i,
.paragraph-expandable .expandable-content em,
.paragraph-expandable .expandable-content i {
	font-style: italic !important;
	color: #000 !important;
}

/* Eyebrow Styles */
.paragraph-expandable .eyebrow {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 6.72px;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: block;
}

/* Eyebrow style variations */
.paragraph-expandable .eyebrow-style-uppercase {
	font-weight: 400;
	text-transform: uppercase;
}

@media (max-width: 1500px) {
	.paragraph-expandable .paragraph-expandable-left-column .paragraph-expandable-description,
	.paragraph-expandable .paragraph-expandable-left-column .left-column-paragraph,
	.paragraph-expandable .paragraph-expandable-left-column p {
		font-size: 16px !important;
	}

	.paragraph-expandable{
		padding-top: 60px;
		padding-bottom: 30px;
	}

	.paragraph-expandable .eyebrow {
		font-size: 16px !important;
	}

	.paragraph-expandable .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.paragraph-expandable .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.paragraph-expandable .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}

	.paragraph-expandable .paragraph-expandable-read-more-btn {
		font-size: 16px !important;
	}

	.paragraph-expandable .paragraph-expandable-read-less-btn {
		font-size: 16px !important;
	}

	.paragraph-expandable .paragraph-expandable-btn-text {
		font-size: 16px !important;
	}
}

.paragraph-expandable .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.paragraph-expandable .eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.paragraph-expandable .eyebrow-style-elegant {
	font-style: italic;
}

/* Button Styles */
.paragraph-expandable .wp-block-buttons,
.paragraph-expandable .paragraph-buttons,
.paragraph-expandable .paragraph-expandable-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Button Styles */
/* Button Style 1: Default (Blue Background) */
.paragraph-expandable .wp-block-button.is-style-default .wp-block-button__link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.paragraph-expandable .wp-block-button.is-style-default .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
	background-color: #788FC6;
}

/* Button Style 2: Solid (Brown Background) */
.paragraph-expandable .wp-block-button.is-style-solid .wp-block-button__link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
	border: none;
	cursor: pointer;
	text-align: center;
}

.paragraph-expandable .wp-block-button.is-style-solid .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* Button Style 3: Arrow */
.paragraph-expandable .wp-block-button.is-style-arrow .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	position: relative;
	border-radius: 0;
}

.paragraph-expandable .wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.paragraph-expandable .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/* PARAGRAPH EXPANDABLE READ MORE/LESS BUTTON STYLES */

/* Read More Button Styles */
.paragraph-expandable .paragraph-expandable-read-more-btn {
	display: flex;
	align-items: center;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	font-weight: 400;
	color: #AA632C;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-top: 20px;
	transition: all 0.3s ease;
	text-decoration: none !important;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Read Less Button Styles */
.paragraph-expandable .paragraph-expandable-read-less-btn {
	display: flex;
	align-items: center;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	font-weight: 400;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-top: 20px; /* Space above the read less button */
	transition: all 0.3s ease;
	text-decoration: none !important;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Button Text Styles */
.paragraph-expandable .paragraph-expandable-btn-text {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	font-weight: 400;
}

/* Toggle Icon Container for both buttons */
.paragraph-expandable .paragraph-expandable-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	position: relative;
	border-radius: 50%;
	padding: 6px;
	transition: background-color 0.3s ease;
}

/* Hover effect on both buttons */
.paragraph-expandable .paragraph-expandable-read-more-btn:hover .paragraph-expandable-toggle-icon,
.paragraph-expandable .paragraph-expandable-read-less-btn:hover .paragraph-expandable-toggle-icon {
	background-color: rgba(170, 98, 44, 0.08); /* #AA622C with 8% opacity */
}

/* Focus styles */
.paragraph-expandable .paragraph-expandable-read-more-btn:focus,
.paragraph-expandable .paragraph-expandable-read-less-btn:focus {
	outline: none;
}

/* SVG Icon for both buttons */
.paragraph-expandable .paragraph-expandable-plus-minus-icon {
	width: 20px;
	height: 20px;
}

/* Set the color for SVG elements */
.paragraph-expandable .paragraph-expandable-toggle-icon svg rect {
	fill: #AA632C;
}

/* When expanded, completely remove the vertical line (not just opacity) */
.paragraph-expandable .paragraph-expandable-toggle-icon.paragraph-expandable-expanded .paragraph-expandable-vertical-line {
	display: none;
}

/* Expandable content */
.paragraph-expandable .expandable-content {
	margin-top: 20px;
	/* Hidden by default, but the JS will handle showing/hiding with animation */
	display: none;
}

/* Ensure proper spacing for the read less button */
.paragraph-expandable .expandable-content > *:last-child:not(.paragraph-expandable-read-less-btn) {
	margin-bottom: 0;
}

/* Responsive styles */
@media (max-width: 768px) {
	.paragraph-expandable .container {
		flex-direction: column;
	}

	.paragraph-expandable-right-column {
		min-width: unset !important;
	}

	.paragraph-expandable-left-column{
		min-width: unset !important;
	}


	.paragraph-expandable-cont{
		padding-top: 66px !important;
		padding-bottom: 66px !important;
	}

	.paragraph-expandable-left-column,
	.paragraph-expandable-right-column {
		width: 100%;
		max-width: unset;
	}

	.paragraph-expandable .paragraph-expandable-left-column .paragraph-expandable-title,
	.paragraph-expandable .paragraph-expandable-left-column .left-column-heading,
	.paragraph-expandable .paragraph-expandable-left-column h1,
	.paragraph-expandable .paragraph-expandable-left-column h2,
	.paragraph-expandable .paragraph-expandable-left-column h3 {
		margin-bottom: 0;
	}

}