/**
 * Text Text Stack Block Front-end CSS
 */

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

.bg-dark-brown {
	background-color: #290B0B;
}

.bg-burgundy {
	background-color: #6B313E;
}

.bg-gold {
	background-color: #B8860B;
}

.bg-copper {
	background-color: #B87333;
}

.bg-periwinkle {
	background-color: #CCCCFF;
}

.bg-deep-blue {
	background-color: #00008B;
}

.bg-dark-red {
	background-color: #6B313E;
}

.bg-white {
	background-color: #FFFFFF;
}

.bg-black {
	background-color: #000000;
}

.text-text-stack{
	margin-top: 50px;
}
/* Text Colors */
.text-text-stack.text-white,
.text-text-stack.text-white h1,
.text-text-stack.text-white h2,
.text-text-stack.text-white h3,
.text-text-stack.text-white h4,
.text-text-stack.text-white h5,
.text-text-stack.text-white h6,
.text-text-stack.text-white p,
.text-text-stack.text-white .text-text-stack-title,
.text-text-stack.text-white .text-text-stack-description,
.text-text-stack.text-white .text-title,
.text-text-stack.text-white .text-description {
	color: #FFFFFF;
}

.text-text-stack.text-black,
.text-text-stack.text-black h1,
.text-text-stack.text-black h2,
.text-text-stack.text-black h3,
.text-text-stack.text-black h4,
.text-text-stack.text-black h5,
.text-text-stack.text-black h6,
.text-text-stack.text-black p,
.text-text-stack.text-black .text-text-stack-title,
.text-text-stack.text-black .text-text-stack-description,
.text-text-stack.text-black .text-title,
.text-text-stack.text-black .text-description {
	color: #000000;
}

.text-text-stack.text-dark-blue,
.text-text-stack.text-dark-blue h1,
.text-text-stack.text-dark-blue h2,
.text-text-stack.text-dark-blue h3,
.text-text-stack.text-dark-blue h4,
.text-text-stack.text-dark-blue h5,
.text-text-stack.text-dark-blue h6,
.text-text-stack.text-dark-blue p,
.text-text-stack.text-dark-blue .text-text-stack-title,
.text-text-stack.text-dark-blue .text-text-stack-description,
.text-text-stack.text-dark-blue .text-title,
.text-text-stack.text-dark-blue .text-description {
	color: #0F293E;
}

/* Title and Description Styles */
.text-text-stack .text-text-stack-title,
.text-text-stack .text-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 24px;
	font-weight: 400;
	max-width: 300px
}

@media (max-width: 1500px) {
	.text-text-stack .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

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

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

	.text-text-stack .eyebrow {
		font-size: 16px !important;
	}

	.text-text-content-secondary p {
		font-size: 16px !important;
	}

	.text-text-content-secondary a,
	.text-text-content-secondary button {
		font-size: 16px !important;
	}
}

.text-text-stack .text-text-stack-description,
.text-text-stack .text-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 21px;
	max-width: 580px;
}

/* Button Styles */
.text-text-stack .wp-block-buttons,
.text-text-stack .text-buttons,
.text-text-stack .text-text-stack-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: start;
}

/* Button Styles */
/* Button Style 1: Default (Blue Background) */
.text-text-stack .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;
}

.text-text-stack .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) */
.text-text-stack .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;
}

.text-text-stack .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 */
.text-text-stack .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;
}

.text-text-stack .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;
}

.text-text-stack .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}
/**
 * Text Text Stack Two-Column Layout CSS
 */

/* Main block structure */
.text-text-stack {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Two-column layout */
.tts-two-column-layout {
	display: flex;
	min-height: 500px;
	width: 100%;
}

/* Column styling */
.tts-column {
	position: relative;
}

/* Left column */
.tts-left-column {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70%;
}

/* Right column */
.tts-right-column {
	position: absolute;
	top: 100px;
	padding: 96px 96px 96px 146px;
	left: -90px;
	right: 0;
	overflow: hidden; /* Add this to prevent background image overflow */
}

/* Background container positioning - no background image here */
.tts-background-container {
	/* This div just provides the positioning container */
}

/* NEW: Actual image element that fills the entire container */
.tts-background-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 300px;
	max-height: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.3;
	z-index: 1;
}

.tts-column{
	min-height: 500px;
}

/* Ensure text content stays above background image */
.tts-right-column .text-text-content-secondary {
	position: relative;
	z-index: 2;
}

/* Mobile background overlay - hidden on desktop */
.tts-mobile-background-overlay {
	display: none;
}

/* Eyebrow Styles */
.text-text-stack .eyebrow {
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 6.72px;
	margin-bottom: 10px;
	display: block;
	font-family: 'DM Sans', sans-serif;
	color: inherit; /* Ensure it inherits the text color from parent */
}

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

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

.text-text-stack .eyebrow-style-elegant {
	font-style: italic;
}

/* Text content areas */
.text-text-content,
.text-text-content-secondary {
	width: 100%;
	max-width: 600px;
}

/* NEW STYLES FOR WYSIWYG RIGHT COLUMN */

/* Heading styles in WYSIWYG */
.text-text-content-secondary h1,
.text-text-content-secondary h2,
.text-text-content-secondary h3,
.text-text-content-secondary h4,
.text-text-content-secondary h5,
.text-text-content-secondary h6 {
	color: #FFFFFF;
	font-family: "Hedvig Letters Serif", serif;
	font-size: 42px;
	font-style: normal;
	font-weight: 400;
	line-height: 114%;
	margin-bottom: 24px;
}

/* Paragraph styles in WYSIWYG */
.text-text-content-secondary p {
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
	margin-bottom: 20px;
}

/* UPDATED LIST STYLES - Split into two equal columns using CSS columns */
.text-text-content-secondary ul {
	column-count: 2;
	column-gap: 30px;
	column-fill: balance;
	list-style: none !important;
	padding-left: 0 !important;
	margin: 20px 0;
}

.text-text-content-secondary ul li {
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
	position: relative;
	padding-left: 15px;
	margin-bottom: 10px;
	break-inside: avoid; /* Prevent list items from breaking across columns */
	display: block; /* Ensure proper flow in columns */
}

/* Custom bullet styling */
.text-text-content-secondary ul li::before {
	content: "•";
	color: #FFFFFF;
	font-weight: bold;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 22px;
	font-size: 16px;
}

/* Link and button styles */
.text-text-content-secondary a,
.text-text-content-secondary button {
	background-color: transparent;
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
	text-decoration: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	position: relative;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.text-text-content-secondary a:hover,
.text-text-content-secondary button:hover {
	opacity: 0.8;
}

/* Arrow after links and buttons */
.wp-block-acf-text-text-stack .text-text-content-secondary a::after,
.wp-block-acf-text-text-stack .text-text-content-secondary button::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;
}

.wp-block-acf-text-text-stack .text-text-content-secondary a:hover::after,
.wp-block-acf-text-text-stack .text-text-content-secondary button:hover::after {
	transform: translateX(5px);
}

.text-text-content-secondary a::after,
.text-text-content-secondary button::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;
}

.text-text-content-secondary a:hover::after,
.text-text-content-secondary button:hover::after {
	transform: translateX(5px);
}

.tts-rhs-mobile{
	display: none;
}

/* Mobile styles */
@media (max-width: 768px) {

	.tts-rhs-mobile{
		display: block;
	}

	.text-text-container{
		min-height: unset !important;
		padding-top: 0 !important;
	}

	.tts-rhs-desktop{
		display: none;
	}

	.text-text-stack {
		position: relative;
	}

	.text-text-content{
		display: flex;
		flex-direction: column;
	}

	.tts-left-content-mobile{
		max-width: unset !important;
	}

	/* Show mobile background overlay on mobile */
	.tts-mobile-background-overlay {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 34%;
		z-index: 1;
	}

	.text-text-container{
		margin-bottom: unset !important;
	}

	/* UPDATED: Mobile image element positioning */
	.tts-rhs-mobile-image{
		position: absolute;
		right: 0;
		bottom: 0;
		height: 100%; /* Adjust height as needed */
		object-fit: contain; /* Similar to background-size: contain */
		object-position: bottom right; /* Similar to background-position: bottom right */
		opacity: 0.4; /* Add subtle opacity for mobile too */
		z-index: 1;
	}

	.tts-two-column-layout {
		flex-direction: column;
		min-height: auto;
	}

	.tts-column {
		width: 100%;
	}

	/* Update left column for mobile */
	.tts-left-column {
		width: 100%;
		padding: 60px 30px !important;
		margin-bottom: 0 !important;
		position: relative;
		z-index: 2; /* Put above the background overlay */
	}

	/* Update right column for mobile */
	.tts-right-column {
		position: relative;
		top: 0;
		left: 0;
		padding: 60px 30px;
		margin-top: -20px;
	}

	.text-text-content,
	.text-text-content-secondary {
		padding: 0;
		max-width: 100%;
	}

	/* Text styling adjustments */
	.text-text-stack .text-title {
		font-size: 32px;
		line-height: 1.2;
		margin-bottom: 15px;
	}

	.text-text-stack .text-description {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 25px;
	}

	/* Mobile adjustments for right column WYSIWYG */
	.text-text-content-secondary h1,
	.text-text-content-secondary h2,
	.text-text-content-secondary h3,
	.text-text-content-secondary h4,
	.text-text-content-secondary h5,
	.text-text-content-secondary h6 {
		font-size: 32px;
	}

	/* Switch to single column list on mobile */
	.text-text-content-secondary ul {
		column-count: 1 !important;
	}

	/* Ensure buttons are properly displayed on mobile */
	.text-text-stack .wp-block-buttons,
	.text-text-stack .text-buttons,
	.text-text-stack .text-text-stack-buttons {
		justify-content: flex-start;
		margin-top: 20px;
	}
}