/**
 * Team Contacts Block Front-end CSS - Modified version with button fixes
 */

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

.team-contacts.bg-dark-brown,
.team-contacts-section.bg-dark-brown {
	background-color: #290B0B;
}

.team-contacts.bg-burgundy,
.team-contacts-section.bg-burgundy {
	background-color: #800020;
}

.team-contacts.bg-gold,
.team-contacts-section.bg-gold {
	background-color: #B8860B;
}

.team-contacts.bg-copper,
.team-contacts-section.bg-copper {
	background-color: #B87333;
}

.team-contacts.bg-periwinkle,
.team-contacts-section.bg-periwinkle {
	background-color: #CCCCFF;
}

.team-contacts.bg-deep-blue,
.team-contacts-section.bg-deep-blue {
	background-color: #00008B;
}

.team-contacts.bg-dark-red,
.team-contacts-section.bg-dark-red {
	background-color: #8B0000;
}

.team-contacts.bg-white,
.team-contacts-section.bg-white {
	background-color: #FFFFFF;
}

.team-contacts.bg-black,
.team-contacts-section.bg-black {
	background-color: #000000;
}

/* Text Colors */
.team-contacts.text-white,
.team-contacts.text-white h1,
.team-contacts.text-white h2,
.team-contacts.text-white h3,
.team-contacts.text-white h4,
.team-contacts.text-white h5,
.team-contacts.text-white h6,
.team-contacts.text-white p,
.team-contacts.text-white .team-contacts-title,
.team-contacts.text-white .team-contacts-description,
.team-contacts-section.text-white,
.team-contacts-section.text-white h1,
.team-contacts-section.text-white h2,
.team-contacts-section.text-white h3,
.team-contacts-section.text-white h4,
.team-contacts-section.text-white h5,
.team-contacts-section.text-white h6,
.team-contacts-section.text-white p,
.team-contacts-section.text-white .team-contacts-title,
.team-contacts-section.text-white .team-contacts-description {
	color: #FFFFFF;
}

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

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

/* Eyebrow Styles */
.team-contacts-section .contacts-eyebrow {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 6.72px;
	text-transform: uppercase;
	margin-bottom: 24px;
	display: block;
}

/* Eyebrow style variations */
.team-contacts-section .contacts-eyebrow-style-uppercase {
	font-weight: 400;
	text-transform: uppercase;
}

.team-contacts-section .contacts-eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.team-contacts-section .contacts-eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.team-contacts-section .contacts-eyebrow-style-elegant {
	font-style: italic;
}

/* Title and Description Styles */
.team-contacts-section .team-contacts-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 32px;
	font-weight: 400;
	text-align: left;
}

.team-contacts-section .team-contacts-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 48px;
	text-align: left;
}

/* Main container for the Team Contacts block */
.team-contacts-section {
	position: relative;
	padding: 80px 0;
	width: 100%;
}

.team-contacts-container {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 196px;
}

@media (max-width: 1500px) {
	.team-contacts-container {
		max-width: 1200px
	}
}

@media (max-width: 1500px) {
	.team-contacts-section .contacts-eyebrow {
		font-size: 16px !important;
	}

	.team-contacts-section .team-contacts-description {
		font-size: 16px !important;
	}

	.contact-location {
		font-size: 16px !important;
	}

	.team-contacts-section .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.team-contacts-section .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.team-contacts-section .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}
}

/* Content column styles */
.team-contacts-content-column {
	width: 100%;
	max-width: 400px;
	align-items: center;
	display: flex;
}

.team-contacts-content-wrapper {
	width: 100%;
}

/* Contact list column styles */
.contacts-list-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Individual contact item styles */
.contact-list-item {
	display: flex;
	gap: 51px;
	margin-bottom: 20px;
}

.contact-image-wrapper {
	flex: 0 0 auto;
	width: 190px;
	height: 196px;
}

.contact-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-info-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-name {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 5px 0;
	max-width: 350px;
}

.contact-position {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0 0 8px 0;
}

.contact-location {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 23px 0;
}

.contact-team-divide{
	background: rgba(0, 0, 0, 0.31);
	width: 1px;
	height: 23px;
	margin: 0 19px 0 19px;
}

.contact-details {
	display: flex;
	gap: 10px;
}

.contact-phone, .contact-email {
	display: flex;
	align-items: center;
	gap: 10px;
}

.phone-icon {
	display: inline-flex;
	color: #000;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 137.5% */
}


.email-icon {
	position: relative;
}

.email-icon:after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.contact-phone a, .contact-email a {
	color: inherit;
	text-decoration: none;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
}

.contact-phone a:hover, .contact-email a:hover {
	text-decoration: underline;
}

/* Button and CTA Styles - Updated */
/* Default CTA link style */
.team-contacts-cta-wrapper {
	width: 100%;
	margin-top: 20px;
	display: flex;
	justify-content: flex-start;
}

/* Button Styles */
.team-contacts-section .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: start;
}

/* Default Button Style (with blue background) */
.team-contacts-section .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;
}

.team-contacts-section .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;
}

/* Solid Button Style (with brown background) */
.team-contacts-section .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;
}

.team-contacts-section .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;
}

/* Arrow Button Style */
.team-contacts-section .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;
}

.team-contacts-section .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;
}

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

/* Reset for CTA link to use its own styling */
.team-contacts-section .team-contacts-cta-link {
	background-color: #AA632C;
	color: #FFFFFF;
}

/* Handle button alignment */
.team-contacts-section .wp-block-buttons {
	display: flex;
}

.team-contacts-section .wp-block-buttons .wp-block-button {
	margin: 0;
}

@media (max-width: 1100px) {
	.team-contacts-container{
		gap: 80px;
	}
}

/* Responsive styles */
@media (max-width: 1024px) {
	.team-contacts-container {
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.team-contacts-section {
		padding: 40px 0;
	}

	.team-contacts-container {
		flex-direction: column;
		padding: 0 20px;
		gap: 24px;
	}

	.team-contacts-content-column {
		max-width: 100%;
	}

	.team-contacts-section .team-contacts-title {
		font-size: 36px;
		margin-bottom: 20px;
	}

	.team-contacts-section .team-contacts-description {
		margin-bottom: 32px;
	}

	.contact-list-item {
		flex-direction: row;
		gap: 16px;
		margin-bottom: 16px;
		align-items: flex-start;
	}

	.contact-image-wrapper {
		align-self: center;
		width: 150px;
		height: 155px;
	}

	.contact-info-wrapper {
		align-items: flex-start;
		flex: 1;
		margin: auto;
	}

	.contact-name {
		font-size: 20px;
		margin-bottom: 2px;
		line-height: 1.1;
	}

	.contact-position {
		font-size: 16px;
		margin-bottom: 25px;
	}

	.contact-location {
		font-size: 16px;
		margin-bottom: 14px;
	}

	.contact-details {
		flex-direction: row;
		align-items: center;
	}

	.contact-team-divide {
		height: 16px;
		margin: 0 10px;
	}

	.contact-phone a, .contact-email a {
		font-size: 14px;
	}

	.team-contacts-cta-wrapper {
		justify-content: center;
		margin-top: 24px;
	}

	/* Make the email icon smaller on mobile */
	.contact-email svg {
		width: 20px;
		height: 20px;
	}
}

/* For very small screens */
@media (max-width: 480px) {
	.contact-list-item {
		gap: 26px;
	}

	.contact-image-wrapper {
		width: 150px;
		height: 155px;
	}

	.contact-details {
		flex-wrap: wrap;
		gap: 8px;
	}

	.contact-phone, .contact-email {
		width: 100%;
	}
}