/*
 * Reset, základní typografie, fokus a pohyb.
 *
 * Pravidla, která tu nejsou kvůli vkusu, ale protože je specifikace označila za
 * nediskutovatelná, nesou odkaz na svůj odstavec.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--rs-ground);
	color: var(--rs-text);
	font-family: var(--rs-font-body);
	font-size: 18px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	/*
	 * Spec §14.2: na 320, 360, 375 a 414 px se stránka nesmí dát posunout do
	 * stran. Nejčastější viník je reklamní iframe, který se nevejde. Tohle je
	 * poslední pojistka -- sloty samy mají max-width a overflow v components.css.
	 */
	overflow-x: hidden;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

/*
 * Odkaz uvnitř textu je --rs-red-light, nikdy --rs-red: ta na --rs-ground nemá
 * kontrast 4,5:1 a v odstavci by byla nečitelná (spec §2).
 *
 * Podtržení není ozdoba. Odkaz v odstavci se nesmí od okolního textu lišit
 * jenom barvou -- kdo barvy nerozlišuje, nepozná, že tam odkaz je (WCAG 1.4.1).
 * Lighthouse to hlásil jako link-in-text-block na adresách v patičce, kde
 * podtržení chybělo: pravidlo platilo jen uvnitř .rs-prose a text patičky
 * próza není.
 */
.rs-prose a,
.rs-footer__col a,
.rs-footer__address a,
.rs-authorbox a,
.rs-comments p a {
	color: var(--rs-red-light);
	border-bottom: 1px solid rgba(232, 80, 107, 0.4);
}

/*
 * Tlačítka a samostatné odkazy podtržení nechtějí -- nejsou to odkazy uvnitř
 * věty a mají vlastní tvar (rámeček, plocha, ikonu).
 */
.rs-footer__links a,
.rs-social__link,
.rs-btn {
	border-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--rs-font-display);
	font-weight: 600;
	/* Spec §3: nadpisy se nedělí. */
	hyphens: none;
	-webkit-hyphens: none;
	text-wrap: balance;
}

p {
	margin: 0;
}

/* Spec §3: číslovky v datumech a počítadlech necukají. */
time,
.rs-num,
.rs-date {
	font-variant-numeric: tabular-nums;
}

/* Verzálky mají vždy letter-spacing, jinak se slijí (spec §3). */
.rs-caps {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

button {
	font: inherit;
	color: inherit;
}

/*
 * Spec §13: viditelný fokus na všem, čím se dá projít tabulátorem.
 * Nikdy outline: none bez náhrady.
 */
:focus-visible {
	outline: 2px solid var(--rs-red);
	outline-offset: 2px;
}

.rs-skip {
	position: absolute;
	left: -9999px;
}

.rs-skip:focus {
	left: var(--rs-gutter);
	top: 8px;
	z-index: 99;
	padding: 10px 14px;
	background: var(--rs-red);
	color: #FFFFFF;
	font-family: var(--rs-font-display);
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/*
 * Spec §13: pohyb je minimum. Přechody 120–160 ms, jen barva a krytí.
 * Nic se nezvětšuje ani neposouvá.
 */
a,
button {
	transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

/* Spec §13: stisk je krátké snížení krytí, bez animace. */
a:active,
button:active {
	opacity: 0.85;
}

/* --------------------------------------------- zarovnání z WordPressu */

/*
 * alignleft / alignright / aligncenter jsou třídy jádra WordPressu. Autoři je
 * mají v obsahu od roku 2018 a každá šablona je musí umět -- tahle je neměla
 * vůbec, takže obtékání nefungovalo.
 *
 * Bylo to vidět na stránce "O nás": vizitky redakce mají fotku s .alignleft
 * a bez obtékání se jména srazila přes obrázky. Kontrola se dívala na články,
 * kde autoři obtékání nepoužívají, takže to prošlo.
 */
.alignleft {
	float: left;
	margin: 0 16px 10px 0;
}

.alignright {
	float: right;
	margin: 0 0 10px 16px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignnone {
	margin-bottom: 10px;
}

/* Obtékání nesmí vytéct z bloku, ve kterém začalo. */
.rs-prose > *::after,
.rs-page__content .textwidget::after,
.rs-page__content .so-widget-sow-editor::after {
	content: "";
	display: table;
	clear: both;
}

/*
 * Jen pro odečítač obrazovky. Používá to <h1> na titulce, kde je hlavní nadpis
 * potřeba pro vyhledávače a přístupnost, ale vizuálně ho zastupuje wordmark.
 */
.rs-sronly {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Spec §13: při reduced-motion se vypne úplně všechno kromě barevných přechodů.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, opacity !important;
		transition-duration: 120ms !important;
		scroll-behavior: auto !important;
	}
}