/* ======================================================
   Fixed footer contact bar
====================================================== */

:root {
	--footer-contact-height: 72px;
}

/*
 * Prevent the fixed bar from covering the final
 * page content.
 */
body {
	padding-bottom: var(--footer-contact-height);
}

.footer-contact-icons {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.footer-contact-bar {
	position: fixed;
	z-index: 998;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--footer-contact-height);
	border-top: 1px solid #e7e7ec;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -8px 28px rgba(25, 31, 66, 0.07);
}

.footer-contact-inner {
	display: grid;
	width: min(1600px, 100%);
	height: 100%;
	margin-inline: auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
}

.footer-contact-item {
	position: relative;
	display: flex;
	min-width: 0;
	height: 100%;
	padding: 10px 26px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #3e3e43;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	transition:
		color 0.18s ease,
		background-color 0.18s ease;
}

/* Vertical separators */

.footer-contact-item:not(:last-child)::after {
	position: absolute;
	top: 22%;
	right: 0;
	width: 1px;
	height: 56%;
	background: #d9d9df;
	content: "";
}

.footer-contact-item svg {
	display: block;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}

.footer-contact-item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.footer-contact-item:hover {
	color: #7657d6;
	background: #fbf9ff;
}

.footer-contact-item:focus-visible {
	outline: 3px solid #7657d6;
	outline-offset: -4px;
}

/* ======================================================
   Tablet
====================================================== */

@media (max-width: 1000px) {
	.footer-contact-item {
		padding-inline: 16px;
		gap: 10px;
		font-size: 14px;
	}

	.footer-contact-item svg {
		width: 25px;
		height: 25px;
		flex-basis: 25px;
	}
}

/* ======================================================
   Mobile — icon-only layout
====================================================== */

@media (max-width: 700px) {
	:root {
		--footer-contact-height: 64px;
	}

	.footer-contact-bar {
		background: #ffffff;
	}

	.footer-contact-item {
		min-width: 44px;
		padding: 10px;
		gap: 0;
	}

	.footer-contact-item span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.footer-contact-item svg {
		width: 29px;
		height: 29px;
		flex-basis: 29px;
	}

	.footer-contact-item:not(:last-child)::after {
		top: 18%;
		height: 64%;
	}
}

/* Disable transitions when reduced motion is preferred */

@media (prefers-reduced-motion: reduce) {
	.footer-contact-item {
		transition: none;
	}
}