/**
 * Content Sidebar Navigation Block Front-end CSS
 */

/* Show/hide based on viewport */
.content-sidebar-navigation .desktop-only {
	display: flex;
}

.content-sidebar-navigation .mobile-only {
	display: none;
}

/* Layout styles for columns */
.content-sidebar-navigation .container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	position: relative; /* For the vertical divider */
}

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

	.content-sidebar-navigation .content-sidebar-navigation-left-column .content-sidebar-navigation-wysiwyg a:not(.read-more-btn),
	.content-sidebar-navigation .accordion-answer-content a:not(.read-more-btn) {
		font-size: 16px !important;
	}

	.content-sidebar-navigation .content-sidebar-navigation-wysiwyg ul li,
	.content-sidebar-navigation .accordion-answer-content ul li {
		font-size: 16px !important;
	}

	.accordion-answer-content p {
		font-size: 16px !important;
	}

	.content-sidebar-navigation .wp-block-button .wp-block-button__link,
	.content-sidebar-navigation .sidebar-button .wp-block-button__link,
	.content-sidebar-navigation .content-sidebar-navigation-button .wp-block-button__link {
		font-size: 16px !important;
	}
}

/* Add vertical divider between columns */
.content-sidebar-navigation .content-sidebar-navigation-container:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	/*left: 50%;*/
	right: 31%;
	width: 1px;
	background: linear-gradient(180deg, #290B0B 37.44%, #D48D57 100%);
	transform: translateX(-50%);
	z-index: 2;
}

.content-sidebar-navigation-left-column {
	flex: 1;
	min-width: 300px;
	max-width: 65%;
}

.content-sidebar-navigation-right-column {
	flex: 0 0 30%;
	min-width: 250px;
	padding-left: 80px;
}

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

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

.content-sidebar-navigation.bg-burgundy {
	background-color: #800020;
}

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

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

.content-sidebar-navigation.bg-grey {
	background-color: #F6F6F6;
}

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

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

.content-sidebar-navigation.bg-dark-red {
	background-color: #8B0000;
}

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

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

/* Text Colors */
.content-sidebar-navigation.text-white,
.content-sidebar-navigation.text-white h1,
.content-sidebar-navigation.text-white h2,
.content-sidebar-navigation.text-white h3,
.content-sidebar-navigation.text-white h4,
.content-sidebar-navigation.text-white h5,
.content-sidebar-navigation.text-white h6,
.content-sidebar-navigation.text-white p,
.content-sidebar-navigation.text-white li,
.content-sidebar-navigation.text-white ul,
.content-sidebar-navigation.text-white ol,
.content-sidebar-navigation.text-white .content-sidebar-navigation-title,
.content-sidebar-navigation.text-white .content-sidebar-navigation-description,
.content-sidebar-navigation.text-white .sidebar-title,
.content-sidebar-navigation.text-white .sidebar-description,
.content-sidebar-navigation.text-white .read-more-btn,
.content-sidebar-navigation.text-white .accordion-question-text,
.content-sidebar-navigation.text-white .content-sidebar-accordion-toggle {
	color: #FFFFFF;
}

.content-sidebar-navigation.text-black,
.content-sidebar-navigation.text-black h1,
.content-sidebar-navigation.text-black h2,
.content-sidebar-navigation.text-black h3,
.content-sidebar-navigation.text-black h4,
.content-sidebar-navigation.text-black h5,
.content-sidebar-navigation.text-black h6,
.content-sidebar-navigation.text-black p,
.content-sidebar-navigation.text-black li,
.content-sidebar-navigation.text-black ul,
.content-sidebar-navigation.text-black ol,
.content-sidebar-navigation.text-black .content-sidebar-navigation-title,
.content-sidebar-navigation.text-black .content-sidebar-navigation-description,
.content-sidebar-navigation.text-black .sidebar-title,
.content-sidebar-navigation.text-black .sidebar-description,
.content-sidebar-navigation.text-black .read-more-btn,
.content-sidebar-navigation.text-black .accordion-question-text,
.content-sidebar-navigation.text-black .content-sidebar-accordion-toggle {
	color: #000000;
}

.content-sidebar-navigation.text-dark-blue,
.content-sidebar-navigation.text-dark-blue h1,
.content-sidebar-navigation.text-dark-blue h2,
.content-sidebar-navigation.text-dark-blue h3,
.content-sidebar-navigation.text-dark-blue h4,
.content-sidebar-navigation.text-dark-blue h5,
.content-sidebar-navigation.text-dark-blue h6,
.content-sidebar-navigation.text-dark-blue p,
.content-sidebar-navigation.text-dark-blue li,
.content-sidebar-navigation.text-dark-blue ul,
.content-sidebar-navigation.text-dark-blue ol,
.content-sidebar-navigation.text-dark-blue .content-sidebar-navigation-title,
.content-sidebar-navigation.text-dark-blue .content-sidebar-navigation-description,
.content-sidebar-navigation.text-dark-blue .sidebar-title,
.content-sidebar-navigation.text-dark-blue .sidebar-description,
.content-sidebar-navigation.text-dark-blue .read-more-btn,
.content-sidebar-navigation.text-dark-blue .accordion-question-text,
.content-sidebar-navigation.text-dark-blue .content-sidebar-accordion-toggle {
	color: #0F293E;
}

/* LEFT COLUMN STYLES */
/* Left Column Title Styles */
.content-sidebar-navigation .content-sidebar-navigation-left-column .content-sidebar-navigation-title,
.content-sidebar-navigation .content-sidebar-navigation-left-column .left-column-heading,
.content-sidebar-navigation .content-sidebar-navigation-left-column h1,
.content-sidebar-navigation .content-sidebar-navigation-left-column h2,
.content-sidebar-navigation .content-sidebar-navigation-left-column h3 {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 24px;
}

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

/* Content Item Transitions */
.content-sidebar-navigation-item {
	transition: opacity 0.3s ease;
}

.content-sidebar-navigation-item.hidden {
	display: none;
}

/* RIGHT COLUMN STYLES - NAVIGATION */
.sidebar-navigation-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-navigation-item {
	margin-bottom: 16px;
	transition: all 0.3s ease;
}

.sidebar-navigation-link {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	position: relative;
	transition: all 0.3s ease;
	color: inherit;
	margin-bottom: 0;
	padding: 8px 0;
}

/* Bullet point styling - transparent by default */
.sidebar-navigation-link .nav-bullet {
	display: block; /* Always display the bullet, just make it transparent for non-active items */
	width: 10px;
	height: 10px;
	min-width: 10px;
	border-radius: 50%;
	background-color: transparent; /* Transparent by default */
	margin-right: 14px;
	margin-top: 5px; /* Add top margin to align with first line of text */
}

/* Active navigation item styling */
.sidebar-navigation-item.active .sidebar-navigation-link {
	font-weight: 600;
}

.sidebar-navigation-item.active .nav-bullet {
	background-color: #AA622C; /* Orange bullet for active item */
}

.sidebar-navigation-link:hover {
	opacity: 0.8;
}

/* WYSIWYG Link Styles */
.content-sidebar-navigation .content-sidebar-navigation-left-column .content-sidebar-navigation-wysiwyg a:not(.read-more-btn),
.content-sidebar-navigation .accordion-answer-content a:not(.read-more-btn) {
	color: #0066cc; /* Standard link blue */
	text-decoration: underline;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
}

/* List Styles */
.content-sidebar-navigation .content-sidebar-navigation-wysiwyg ul,
.content-sidebar-navigation .accordion-answer-content ul {
	list-style: none;
	padding-left: 0;
}

.content-sidebar-navigation .content-sidebar-navigation-wysiwyg ul li,
.content-sidebar-navigation .accordion-answer-content ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
}

.content-sidebar-navigation .content-sidebar-navigation-wysiwyg ul li:before,
.content-sidebar-navigation .accordion-answer-content ul li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor; /* Use currentColor to inherit text color */
}

.content-sidebar-navigation .content-sidebar-navigation-left-column .content-sidebar-navigation-wysiwyg a:not(.read-more-btn):hover,
.content-sidebar-navigation .accordion-answer-content a:not(.read-more-btn):hover {
	text-decoration: none;
}

.content-sidebar-navigation .eyebrow-style-elegant {
	font-style: italic;
}

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

/* Default Button Style (single button with background) */
.content-sidebar-navigation .wp-block-button .wp-block-button__link,
.content-sidebar-navigation .sidebar-button .wp-block-button__link,
.content-sidebar-navigation .content-sidebar-navigation-button .wp-block-button__link {
	background-color: #AA622C;
	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;
}

.content-sidebar-navigation .wp-block-button .wp-block-button__link:hover,
.content-sidebar-navigation .sidebar-button .wp-block-button__link:hover,
.content-sidebar-navigation .content-sidebar-navigation-button .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;
}

/* MOBILE ACCORDION STYLES (inspired by accordion.css) */
.content-sidebar-accordion-container {
	width: 100%;
}

/* Accordion Item Styles */
.content-sidebar-accordion-item {
	margin-bottom: 24px;
	border-bottom: 1px solid #CCC;
}

/* Question/Toggle Styles */
.content-sidebar-accordion-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding-bottom: 24px;
}

.accordion-question-text {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px;
	flex-grow: 1;
	padding-right: 15px;
}

/* Toggle Icon Styles (+/-) with hover effect */
.csn-toggle-icon {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.content-sidebar-accordion-toggle:hover .csn-toggle-icon {
	background-color: rgba(170, 98, 44, 0.08); /* #AA622C with 8% opacity */
}

.csn-toggle-icon::before,
.csn-toggle-icon::after {
	content: '';
	position: absolute;
	background-color: #AA622C;
}

/* Horizontal line (always visible) */
.csn-toggle-icon::before {
	width: 12px;
	height: 2px;
}

/* Vertical line (hidden when expanded) */
.csn-toggle-icon::after {
	width: 2px;
	height: 12px;
}

/* When expanded, hide the vertical line to create minus sign */
.csn-toggle-icon.csn-expanded::after {
	display: none;
}

/* Answer Content Styles */
.content-sidebar-accordion-content {
	padding: 0 0 20px 0;
	/* No display:none here - let JS handle this */
}

.accordion-answer-content {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
}

/* Answer content formatting */
.accordion-answer-content h1,
.accordion-answer-content h2,
.accordion-answer-content h3,
.accordion-answer-content h4,
.accordion-answer-content h5,
.accordion-answer-content h6 {
	font-family: 'Hedvig Letters Serif', serif;
	margin-bottom: 15px;
}

.accordion-answer-content p {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -0.48px;
	margin-bottom: 15px;
}

/* Responsive styles */
@media (max-width: 1024px) {
	.content-sidebar-navigation-left-column {
		max-width: 58%;
	}
}

@media (max-width: 768px) {
	/* Toggle visibility of desktop/mobile versions */
	.content-sidebar-navigation .desktop-only {
		display: none;
	}

	.accordion-question-text {
		font-size: 18px;
	}

	.content-sidebar-navigation .mobile-only {
		display: block;
	}

	/* Mobile container styles */
	.content-sidebar-navigation-container-mobile {
		width: 100%;
		padding: 0 32px;
	}

	/* Fix spacing on mobile */
	.content-sidebar-navigation-cont {
		padding-top: 80px;
		padding-bottom: 80px;
		min-height: auto;
	}
}