/*
 * Social marks and the legal mini menu.
 *
 * Their own components rather than menu internals, because [socialne_siete] and
 * [pravne_odkazy] can put them anywhere. The mobile menu adds placement only.
 *
 * Same language as the rest of the controls: no box, no fill, the mark alone,
 * lighting to --eber-red-hot on hover and focus. Colour carries the state, the
 * lift is only ever a bonus, because reduced motion zeroes the transition but
 * leaves the transform.
 */

.eber-social {
	--eber-menu-tap: 2.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
	margin: 0 0 0 -0.6rem;
	padding: 0;
	list-style: none;
}

.eber-social__item {
	display: flex;
}

.eber-social .eber-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eber-menu-tap);
	height: var(--eber-menu-tap);
	padding: 0;
	color: var(--eber-grey);
	background: none;
	border: 0;
	text-decoration: none;
	transition:
		color var(--eber-fast) var(--eber-ease),
		transform var(--eber-base) var(--eber-ease);
}

.eber-social .eber-social__link:hover,
.eber-social .eber-social__link:focus-visible {
	color: var(--eber-red-hot);
	transform: translate3d(0, -2px, 0);
}

.eber-social .eber-social__link:focus-visible {
	outline: 2px solid var(--eber-red-hot);
	outline-offset: -6px;
}

.eber-social .eber-social__link:active {
	transform: scale(0.92);
}

.eber-social__link svg {
	display: block;
}

/* ------------------------------------------------------------------ legal */

.eber-legal__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eber-legal__item {
	display: flex;
}

/*
 * Sentence case at 0.72rem: these are long Slovak legal labels, and uppercase
 * with tracking wraps them into a mess at panel width.
 */
.eber-legal .eber-legal__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.9rem;
	padding: 0;
	color: var(--eber-grey);
	background: none;
	border: 0;
	font-family: var(--eber-font-text);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	cursor: pointer;
	transition:
		color var(--eber-fast) var(--eber-ease),
		text-decoration-color var(--eber-fast) var(--eber-ease);
}

/*
 * --eber-red-hot, not --eber-red: the darker red is 3.69:1 on the panel and
 * fails the 4.5:1 that text has to make.
 */
.eber-legal .eber-legal__link:hover,
.eber-legal .eber-legal__link:focus-visible {
	color: var(--eber-red-hot);
	text-decoration-color: currentColor;
}

.eber-legal .eber-legal__link:focus-visible {
	outline: 2px solid var(--eber-red-hot);
	outline-offset: 3px;
}

.eber-legal__link svg {
	flex: none;
	width: 16px;
	height: 16px;
}