/*
 * Contact Information — Contact Us page section.
 *
 * @package Greenova
 */

.contact-info-section {
	background-color: rgba(236, 122, 50, 0.07); /* #EC7A32 at 7% opacity. */
	padding-block:     100px;
	display:           flex;
	align-items:       center; /* Vertically centers the content if the section is ever taller than its own content. */
}

.contact-info-section__inner {
	max-width:      1440px;
	margin:         0 auto;
	padding-inline: 80px;
	width:          100%;
	box-sizing:     border-box;
}

.contact-info-section__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    58px;
	letter-spacing: -2px;
	color:          #000000;
	max-width:      1200px;
	margin:         0 0 56px;
}

.contact-info-section__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap:            48px;
	row-gap:               32px;
}

.contact-info-card__title {
	font-family:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:     16px;
	font-weight:   600;
	line-height:   24px;
	color:         #000000;
	margin:        0 0 8px;
}

.contact-info-card__value {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       16px;
	font-weight:     400;
	line-height:     24px;
	color:           #000000;
	text-decoration: none;
	transition:      color 0.15s ease;
}

a.contact-info-card__value:hover {
	color: #219FD6;
}

/*
 * Email/Phone rows split the old single <a> (text + icon) into two
 * adjacent elements — see the template part's docblock for why. This
 * link carries exactly the same font/color/hover styling the old
 * a.contact-info-card__value rule above did; only the icon moved out.
 */
.contact-info-card__link {
	color:           inherit;
	font:            inherit;
	text-decoration: none;
	transition:      color 0.15s ease;
}

.contact-info-card__link:hover {
	color: #219FD6;
}

.contact-info-card__copy-wrap {
	position: relative;
	display:  inline-flex;
}

/*
 * Reset to plain, borderless chrome so the button looks identical to the
 * plain <img> it replaces — sizing/spacing comes entirely from
 * .contact-info-card__icon below, unchanged from before.
 */
.contact-info-card__copy-btn {
	display:    inline-flex;
	align-items: center;
	padding:    0;
	margin:     0;
	border:     none;
	background: none;
	cursor:     pointer;
	line-height: 0;
}

.contact-info-card__icon {
	flex-shrink: 0;
	display:     block;
	width:       18px;
	height:      18px;
	object-fit:  contain;
	transition:  opacity 0.15s ease;
}

.contact-info-card__copy-btn:hover .contact-info-card__icon,
.contact-info-card__copy-btn:focus-visible .contact-info-card__icon {
	opacity: 0.6;
}

/*
 * "Copied!" toast — absolutely positioned above the icon, off by default
 * (opacity/translate), toggled via .is-visible from
 * assets/js/contact/contact-info-copy.js for ~2s per click.
 */
.contact-info-card__copy-toast {
	position:       absolute;
	bottom:         calc(100% + 8px);
	left:           50%;
	transform:      translateX(-50%) translateY(4px);
	background:     #1B250E;
	color:          #FFFFFF;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      12px;
	font-weight:    500;
	line-height:    1;
	white-space:    nowrap;
	padding:        6px 10px;
	border-radius:  6px;
	opacity:        0;
	pointer-events: none;
	transition:     opacity 0.15s ease, transform 0.15s ease;
	z-index:        5;
}

.contact-info-card__copy-toast.is-visible {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.contact-info-section__inner {
		padding-inline: 48px;
	}

	.contact-info-section__heading {
		font-size:      2.25rem;
		line-height:    1.2;
		letter-spacing: -0.02em;
	}
}

@media ( max-width: 991.98px ) {
	.contact-info-section {
		padding-block: 64px;
	}

	.contact-info-section__inner {
		padding-inline: 32px;
	}

	.contact-info-section__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap:            32px;
		row-gap:               32px;
	}
}

@media ( max-width: 575.98px ) {
	.contact-info-section {
		padding-block: 48px;
	}

	.contact-info-section__inner {
		padding-inline: 20px;
	}

	.contact-info-section__heading {
		font-size:     1.75rem;
		margin-bottom: 32px;
	}

	.contact-info-section__grid {
		grid-template-columns: 1fr;
		row-gap:               24px;
	}
}