/**
 * Textové stránky — právní texty a chybové hlášky.
 *
 * Zbytek webu je plakát: velké plochy, pohyb, dvě slova na obrazovku. Tyhle
 * stránky jsou opak — někdo je bude opravdu číst, možná i hledat v nich
 * jeden odstavec. Sdílejí proto písma a barvy, ale ne skladbu: jeden sloupec
 * o čtecí míře, klidný rytmus nadpisů a žádná animace, která by čtenáři
 * pod rukama odkrývala odstavce.
 *
 * 1. Sloupec a hlavička
 * 2. Text
 * 3. Karta s údaji
 * 4. Patka stránky
 * 5. Chybové stránky
 */

/* 1. Sloupec a hlavička ---------------------------------------------------- */

.legal {
	/* Světlejší z dvojice nocí. Patička pod ní je tmavší, takže se stránka
	   uzavře, místo aby splynula. */
	background: var(--night-2);
	color: var(--white);
	/* Horní odsazení uhýbá pevné navigaci, spodní odděluje od patičky. */
	padding-block: 12rem 8rem;
}

.legal__inner {
	/* 68 znaků na řádek. Přes celou šířku obrazovky se právní text nečte —
	   oko na konci řádku ztrácí, kam se má vrátit. */
	max-width: 46rem;
}

.legal__head {
	margin-bottom: 4.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal__title {
	margin: 1.25rem 0 1.75rem;
	/* Menší než nadpisy sekcí na úvodu: tady je to hlavička dokumentu,
	   ne plakát. */
	font-size: clamp(2.25rem, 5.5vw, 4rem);
}

.legal__lead {
	margin: 0 0 1.5rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--mist);
	text-wrap: pretty;
}

.legal__meta {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7f898d;
}

/* 2. Text ------------------------------------------------------------------ */

.legal__block {
	margin-bottom: 3.5rem;
}

.legal__block h2 {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	/* Mátová hlavička dělí text na části viditelně i při rychlém projetí. */
	color: var(--mint);
}

.legal__block h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--white);
}

.legal__block p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.75;
	color: #b6bec1;
	text-wrap: pretty;
}

.legal__block ul,
.legal__block ol {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	color: #b6bec1;
}

.legal__block li {
	margin-bottom: 0.625rem;
	line-height: 1.7;
}

.legal__block li::marker {
	color: var(--mint);
}

.legal__block strong {
	font-weight: 600;
	color: var(--white);
}

/* Odkaz v souvislém textu musí být poznat i bez barvy — podtržení nese
   informaci, barva jen zdůrazňuje. */
.legal__block a {
	color: var(--white);
	border-bottom: 1px solid rgba(72, 224, 184, 0.5);
	transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.legal__block a:hover {
		color: var(--mint);
		border-bottom-color: var(--mint);
	}
}

/* Název cookie v textu. Jednoslovný technický údaj, který si člověk může
   chtít najít v prohlížeči — musí být poznat, že jde o přesný řetězec. */
.legal__block code {
	padding: 0.1em 0.4em;
	border-radius: 3px;
	background: rgba(72, 224, 184, 0.1);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	color: var(--mint);
}

/* 3. Karta s údaji --------------------------------------------------------- */

/* Identifikační údaje vypadají jako vizitka schválně — v souvislém odstavci
   by se ztratily a přesně tohle si člověk opisuje do smlouvy. */
.legal__card {
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.75rem;
	border-left: 2px solid var(--mint);
	background: rgba(72, 224, 184, 0.05);
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: #b6bec1;
}

.legal__card strong {
	font-size: 1.0625rem;
	color: var(--white);
}

/* 4. Patka stránky --------------------------------------------------------- */

.legal__foot {
	margin-top: 5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legal__foot p {
	margin: 0 0 1.75rem;
	color: #b6bec1;
}

.legal__foot a:not(.legal__cta) {
	color: var(--white);
	border-bottom: 1px solid rgba(72, 224, 184, 0.5);
}

.legal__cta,
.oops__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.0625rem 2rem;
	border-radius: 999px;
	background: var(--mint);
	color: #08211d;
	font-family: var(--font-display);
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.14s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.legal__cta:hover,
	.oops__btn:hover {
		background: var(--white);
		color: var(--night);
	}
}

.legal__cta:active,
.oops__btn:active {
	transform: scale(0.97);
}

/* 5. Chybové stránky ------------------------------------------------------- */

/*
 * Chyba není konec cesty. Kdo sem dorazil přes starý odkaz nebo překlep, je
 * pořád návštěvník — stránka mu proto nabídne, kam dál, místo aby se omluvila
 * a nechala ho stát.
 */
.oops {
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding-block: 10rem 6rem;
	background: var(--night-2);
	color: var(--white);
}

.oops__inner {
	max-width: 42rem;
}

/* Číslo je orientace, ne sdělení — kdo hledá, co se stalo, čte nadpis pod ním.
   Proto je velké, ale utlumené a pro čtečku neviditelné. */
.oops__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(4rem, 14vw, 9rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(72, 224, 184, 0.45);
}

.oops__title {
	margin: 1.5rem 0 1.5rem;
	font-size: clamp(2rem, 5.5vw, 3.75rem);
}

.oops__lead {
	max-width: 34rem;
	margin: 0 0 2.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #b6bec1;
	text-wrap: pretty;
}

.oops__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.oops__link {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mist);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.3s ease, color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.oops__link:hover {
		color: var(--white);
		background-size: 100% 1px;
	}
}

/* Rozcestník. Kdo přišel ze starého odkazu, hledal obvykle jednu z těchhle
   tří věcí — ať kvůli tomu nemusí procházet celý web znovu. */
.oops__map {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #7f898d;
}

.oops__map a {
	transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.oops__map a:hover {
		color: var(--white);
	}
}

/* Responzivita ------------------------------------------------------------- */

@media (max-width: 760px) {
	.legal {
		padding-block: 8rem 5rem;
	}

	.legal__head {
		margin-bottom: 3rem;
		padding-bottom: 2rem;
	}

	.legal__block {
		margin-bottom: 2.75rem;
	}

	.legal__card {
		padding: 1.25rem 1.25rem;
	}

	.oops {
		/* Spodní lišta s výzvou na telefonu překrývá poslední řádek. */
		padding-block: 7rem 8rem;
	}
}