/* ==========================================================================
   PÄTIČKA

   Olivová plocha so značkou v strede, päť stĺpcov odkazov a spodný riadok.
   Dekor (uzol, závoj, žiara) je čisto vizuálny — leží v samostatnej vrstve
   pod obsahom a je označený `aria-hidden`, aby ho čítačky preskočili.
   ========================================================================== */

.shs-footer {
	position: relative;
	overflow: hidden;
	color: var(--shs-white);
	background: var(--shs-brand);
}

/* ---- Dekor -------------------------------------------------------------- */

.shs-footer__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Uzol v pozadí je ten istý znak ako v logu, len obrovský. `multiply`
 * z neho spraví sotva viditeľný tmavší reliéf — presne ako v dizajne.
 */
.shs-footer__watermark {
	position: absolute;
	top: 9.7%;
	left: 47.2%;
	display: block;
	width: 51.7%;
	color: var(--shs-cream);
	mix-blend-mode: multiply;
}

.shs-footer__watermark :is(svg, img) {
	display: block;
	width: 100%;
	height: auto;
}

/* Závoj, ktorý uzol v spodnej polovici rozostrí a stlmí. */
.shs-footer__veil {
	position: absolute;
	top: 26%;
	left: 0;
	width: 100%;
	height: 57.1%;
	background: linear-gradient(
		0deg,
		color-mix(in srgb, var(--shs-brand) 56%, transparent),
		color-mix(in srgb, var(--shs-brand) 0%, transparent)
	);
	backdrop-filter: blur(12.9px);
}

.shs-footer__glow {
	position: absolute;
	top: -83.3%;
	left: -93.6%;
	width: 186.1%;
	max-width: none;
	transform: rotate(-27.04deg);
}

/* ---- Obsah -------------------------------------------------------------- */

.shs-footer__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--shs-space-section) var(--shs-space-48);
}

/* ---- Odkazy a siete ----------------------------------------------------- */

.shs-footer__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--shs-space-48);
	margin-top: var(--shs-space-section);
	padding-inline: var(--shs-inset);
}

.shs-footer__menus {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-80);
}

.shs-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-regular);
	line-height: var(--shs-lh-list);
}

.shs-footer__list a {
	transition: color var(--shs-duration) var(--shs-ease);
}

.shs-footer__list a:hover {
	color: var(--shs-sand);
	text-decoration: none;
}

/* ---- Spodný riadok ------------------------------------------------------ */

.shs-footer__rule {
	margin-top: var(--shs-space-64);
	border-top: var(--shs-hairline) solid color-mix(in srgb, var(--shs-white) 50%, transparent);
}

.shs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--shs-space-16);
	margin-top: var(--shs-space-32);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
}

.shs-footer__bottom a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * Obrí uzol v pozadí je kreslený na širokú plochu — na výšku by
	 * trčal spoza loga ako druhý, pokrivený znak. Na mobile sa
	 * nezobrazuje; jemný svetelný vzor (glow) ostáva.
	 */
	.shs-footer__watermark {
		display: none;
	}

	.shs-footer__body {
		flex-direction: column;
		align-items: center;
		gap: var(--shs-space-48);
		text-align: center;
	}

	.shs-footer__menus {
		justify-content: center;
		gap: var(--shs-space-32);
	}

	.shs-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}