/* ==========================================================================
   Footer + floating WhatsApp (every page)
   ========================================================================== */

.site-footer {
	padding-block-start: clamp(48px, 6vw, 80px);
	color: #c4d0da;
	background: var(--color-navy);
	font-size: .9688rem;
}

.site-footer__grid {
	display: grid;
	gap: 36px;
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
		gap: 48px;
	}
}

/* White-on-transparent brand logo: straight on the navy footer, no light pill. */
.footer-logo {
	display: inline-flex;
	text-decoration: none;
}

.site-logo--footer {
	width: auto;
	height: 58px;
}

.footer-logo .site-logo-text {
	color: var(--color-white);
	font-size: 1.125rem;
}

.footer-about {
	margin: 18px 0;
	max-width: 360px;
}

.footer-title {
	margin-block-end: 18px;
	color: var(--color-white);
	font-size: 1.0625rem;
}

.footer-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 4px;
	margin-block-start: 8px;
	border-radius: 2px;
	background: var(--color-red);
}

.footer-links,
.footer-contact,
.footer-social {
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-links {
	display: grid;
	gap: 10px;
}

.footer-links a,
.footer-contact a {
	text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover {
	color: var(--color-white);
}

.footer-contact {
	display: grid;
	gap: 12px;
}

.footer-contact li,
.footer-contact a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.footer-contact .icon {
	margin-block-start: .25em;
	color: var(--color-steel);
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	color: var(--color-white);
	transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.footer-social a:hover {
	border-color: var(--color-red);
	background: var(--color-red);
}

.site-footer__bottom {
	margin-block-start: clamp(36px, 5vw, 56px);
	border-block-start: 1px solid rgba(255, 255, 255, .1);
	font-size: .875rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-block: 20px;
	padding-inline-end: 72px; /* room for the floating button */
}

.site-footer__copy {
	margin: 0;
}

.site-footer__privacy {
	text-decoration: none;
}

.site-footer__privacy:hover {
	color: var(--color-white);
}

/* ---------- Floating WhatsApp: bottom-left in RTL, bottom-right in LTR ---------- */

.wa-float {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	color: var(--color-white);
	background: var(--color-whatsapp);
	box-shadow: 0 10px 26px rgba(37, 211, 102, .4);
	opacity: 1;
	transition: transform .2s var(--ease-out), opacity .4s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}

/* Arrives softly with the page instead of popping in. */
@starting-style {
	.wa-float {
		opacity: 0;
		transform: translateY(10px) scale(.92);
	}
}

/* One gentle ring, twice, a few seconds in: the main contact action, noticed once. */
.wa-float::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
	animation: dcp-wa-ring 1.6s var(--ease-out) 4s 2;
	pointer-events: none;
}

@keyframes dcp-wa-ring {
	to {
		box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
	}
}

@media (hover: hover) and (pointer: fine) {
	.wa-float:hover {
		color: var(--color-white);
		transform: scale(1.06);
	}
}

.wa-float:hover {
	color: var(--color-white);
}

.wa-float:active {
	transform: scale(.94);
}

.wa-float .icon {
	width: 30px;
	height: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.wa-float::after {
		animation: none;
	}
}