/* =============================================================================
   ht-social-contact.css — Footer social + contact icon containers
   FontAwesome replacement (WP-629 / WP-630).

   Uniform treatment site-wide:
     • Outer container : grey  #959da7  — circle (34px) everywhere
     • Inner glyph     : dark green #013c1a  (set on the SVG fill in PHP;
                         better contrast on grey than CTA green)

   Surfaces (all grey 34px circles):
     .ht-social-boxes / .ht-social-box        → footer "We Are Social" ([ht_footer_social])
     .at-social-icons__icon                   → contact page [social_icons]
     .widget-contact-info__item__icon ...     → footer "Contact Us" widget
     .contact-info__item__icon ...            → contact page [contact_info] address block
   ============================================================================= */

:root {
	--ht-icon-grey:  #959da7;
	--ht-icon-glyph: #013c1a;
}

/* ── Shared grey circle (contact rows + footer social) ────────────────────── */
.ht-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ht-icon-grey);
	flex: 0 0 auto;
	margin-right: 10px;
	transition: background-color .15s ease;
}
.ht-icon-circle .ht-svg-icon {
	width: 18px;
	height: 18px;
	display: block;
}

/* ── Footer "We Are Social" — grey circles (same size as Contact Us) ───────── */
.ht-social-boxes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.ht-social-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}
.ht-social-box .ht-icon-circle {
	margin-right: 0; /* standalone, not a contact row */
}
.ht-social-box:hover,
.ht-social-box:focus {
	transform: translateY(-2px);
}
.ht-social-box:hover .ht-icon-circle,
.ht-social-box:focus .ht-icon-circle {
	background: #aab2bb;
}

/* ── Contact page [social_icons] — grey circles, dark-green glyph ──────────── */
.at-social-icons__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.at-social-icons__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ht-icon-grey) !important;
	transition: transform .15s ease, background-color .15s ease;
}
.at-social-icons__icon:hover,
.at-social-icons__icon:focus {
	background: #aab2bb !important;
	transform: translateY(-2px);
}
.at-social-icons__icon .ht-svg-icon {
	width: 18px;
	height: 18px;
	display: block;
}

/* ── CF7 submit button: SVG paper-plane alignment (WP-632) ────────────────── */
.atbtn__icon .ht-svg-icon--paper-plane {
	vertical-align: middle;
	margin-top: -2px;
}

/* ── Contact rows: flex layout, drop the old FA <i> table-cell circle ──────── */
/* main-custom.css sets these items to display:table — force flex (!important)
   so layout is deterministic regardless of stylesheet load order. */
.widget-contact-info__item,
.contact-info__item {
	display: flex !important;
	align-items: center;
	width: 100%;
}
.widget-contact-info__item__icon,
.contact-info__item__icon {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	flex: 0 0 auto;
}
.widget-contact-info__item__text,
.contact-info__item__text {
	display: inline-block !important;
}