/**
 * IW — Cụm icon mạng xã hội ở chân trang (R02.S3).
 *
 * Render bởi iw_footer_social_icons() trong mọi H/F footer variant (t1–t5).
 * Icon monochrome kế thừa màu chữ footer (--hf-footer-text), hover sang accent.
 * Chỉ hiện khi admin nhập URL ở ACF Options → tab Social.
 */

.iw-footer-social {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.iw-footer-social__item {
	margin: 0;
	padding: 0;
}

.iw-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--hf-footer-text, #3d3d3d);
	background: color-mix(in srgb, currentColor 10%, transparent);
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.iw-footer-social__link:hover,
.iw-footer-social__link:focus-visible {
	color: var(--iw-accent, #4564ed);
	background: color-mix(in srgb, currentColor 16%, transparent);
	transform: translateY(-2px);
}

.iw-footer-social__icon {
	display: block;
	width: 20px;
	height: 20px;
}

/*
 * Footer t2–t5: brand-group là một hàng flex (align-items:center) chứa logo +
 * tagline + cụm icon. Đẩy icon SÁT LỀ PHẢI (margin-left:auto) và bỏ margin-top
 * để parent canh giữa theo chiều dọc. T1 (cột công ty, không có brand-group)
 * giữ margin mặc định ở trên.
 */
[class*="__brand-group"] .iw-footer-social {
	margin: 0 0 0 auto;
}

/* Mobile — căn giữa theo bố cục footer dồn cột. */
@media (max-width: 767px) {
	.iw-footer-social {
		justify-content: center;
		margin-top: 16px;
	}
	[class*="__brand-group"] .iw-footer-social {
		margin: 16px auto 0;
	}
}