/**
 * ChaCha Home — DEV-09 Social Media Ecosystem v1.0.1
 *
 * Footer follow block. The existing mobile/tablet hamburger social
 * presentation remains owned by mobile-menu.css. This file only styles the
 * footer reuse and fixes Kadence's first-column flex relationship so the
 * brand block and social block stack vertically instead of squeezing each
 * other horizontally.
 */

/*
 * Kadence renders the column hook output as a sibling of the configured
 * footer widget area. The first footer column therefore needs an explicit
 * vertical flow once DEV-09 adds the social block.
 */
#colophon
.site-middle-footer-inner-wrap
> .site-footer-section:first-child {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	min-width: 0 !important;
}

#colophon
.site-middle-footer-inner-wrap
> .site-footer-section:first-child
> .footer-widget-area,
#colophon
.site-middle-footer-inner-wrap
> .site-footer-section:first-child
> .chacha-footer-social {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
}

/* Keep the existing brand copy at its intended readable width. */
#colophon
.site-middle-footer-inner-wrap
> .site-footer-section:first-child
.chacha-footer-brand-copy {
	width: auto !important;
	max-width: 290px !important;
}

#colophon .chacha-footer-social {
	--chacha-social-size: 38px;
	margin-top: 30px;
}

#colophon .chacha-footer-social__title {
	margin: 0 0 18px;
	font-family: var(--chacha-font-body, "Inter", sans-serif);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFFDFC;
}

#colophon .chacha-footer-social__title::after {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	margin-top: 11px;
	background: var(--chacha-brass, #B08D57);
}

#colophon .chacha-footer-social__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

#colophon .chacha-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--chacha-social-size);
	height: var(--chacha-social-size);
	padding: 0;
	border: 1px solid rgba(255, 253, 252, 0.22);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 253, 252, 0.76);
	text-decoration: none;
	box-shadow: none;
	transition:
		color 180ms ease,
		border-color 180ms ease,
		background-color 180ms ease,
		transform 180ms ease;
}

#colophon .chacha-footer-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
}

#colophon .chacha-footer-social__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#colophon .chacha-footer-social__icon svg .is-fill {
	fill: currentColor;
	stroke: none;
}

@media (hover: hover) and (pointer: fine) {
	#colophon .chacha-footer-social__link:hover {
		color: var(--chacha-brass, #B08D57);
		border-color: rgba(176, 141, 87, 0.62);
		background: rgba(255, 253, 252, 0.035);
		transform: translateY(-1px);
	}
}

#colophon .chacha-footer-social__link:focus-visible {
	outline: 2px solid var(--chacha-brass, #B08D57);
	outline-offset: 3px;
}

@media (max-width: 1199px) {
	#colophon
	.site-middle-footer-inner-wrap
	> .site-footer-section:first-child
	.chacha-footer-brand-copy {
		max-width: 360px !important;
	}

	#colophon .chacha-footer-social {
		margin-top: 28px;
	}
}

@media (max-width: 767px) {
	#colophon .chacha-footer-social {
		--chacha-social-size: 40px;
		margin-top: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#colophon .chacha-footer-social__link {
		transition: none;
	}
}