/* ==========================================================================
   ZÁKLAD — reset, typografia, kontajner, tlačidlá

   Všetko ostatné stojí na tomto súbore. Sekcie ho majú ako závislosť,
   takže sa načíta vždy ako prvý.
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */

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

/*
 * Dekor sekcií (claim v hero, vodoznaky, oblúk skupín) smie pretiecť za
 * okraj — stránka sa tým ale nesmie rozšíriť a rolovať do strán.
 */
html {
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-base);
	line-height: var(--shs-lh-base);
	color: var(--shs-black);
	background: var(--shs-white);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
 * Odkaz dedí farbu okolia — na tmavej ploche je svetlý, na svetlej
 * tmavý. `body` v selektore je tu naschvál: WordPress vypisuje
 * z theme.json vlastné pravidlo `a:where(:not(.wp-element-button))`
 * a to má rovnakú váhu ako holé `a`. Rozhodovalo by teda poradie
 * súborov — a v pätičke vychádzali olivové odkazy na olivovej ploche,
 * teda neviditeľné.
 */
body a,
body a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	font: inherit;
}

/*
 * Nadpisy sú v dizajne kreslené písmom Ysabeau v tenkom reze a verzálkami.
 * Riadkovanie 0.95 je zámerné — text má pôsobiť ako kompaktný blok.
 */
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--shs-font-display);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
}

p {
	margin: 0;
}

/* Zameranie musí byť vidieť — myš ho nezobrazí, klávesnica áno. */
:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* ---- Prístupnosť -------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--shs-space-16);
	z-index: 1000;
	padding: var(--shs-space-12) var(--shs-space-16);
	color: var(--shs-brand);
	background: var(--shs-white);
	border: var(--shs-hairline) solid var(--shs-brand);
}

.skip-link:focus {
	top: var(--shs-space-16);
}

/*
 * Kotva pre „Preskočiť na obsah". Ako inline prvok by v hlavičke vyrobila
 * riadok navyše a odtlačila obsah od hornej hrany — preto blok s nulovou
 * výškou.
 */
#shs-content {
	display: block;
	height: 0;
}

/* ---- Kontajner ---------------------------------------------------------- */

/*
 * WordPress vkladá medzi bloky zvislú medzeru (block gap). Stránka je
 * poskladaná zo sekcií s vlastným pozadím — medzera by medzi nimi aj
 * nad prvou sekciou svietila ako biely pás, preto sa nuluje. Obsah
 * článku (odseky vo výpise post-content) to nezasiahne.
 */
/* `body` v selektore prebíja aj neskôr vypísané pravidlá jadra. */
body .wp-site-blocks > *,
body .shs-main--sections > * {
	margin-block: 0;
}

.shs-container {
	width: 100%;
	max-width: calc(var(--shs-container) + 2 * var(--shs-gutter));
	margin-inline: auto;
	padding-inline: var(--shs-gutter);
}

/*
 * Šablóny s vlastnými sekciami si odsadenie riešia samy (sekcie majú
 * často farebné pozadie cez celú šírku). Šablóny s bežným obsahom
 * dostanú odsadenie tu.
 */
.shs-main--flow {
	padding-block: var(--shs-space-48) var(--shs-space-section);
}

/* ---- Tlačidlá ----------------------------------------------------------- */

/*
 * Tlačidlo je v dizajne obdĺžnik s vlasovým rámikom, bez zaoblenia,
 * s popiskom v Ysabeau. Varianty sa líšia len farbou — tvar je jeden.
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--shs-space-8);
	padding: var(--shs-space-19) var(--shs-space-31);
	border: var(--shs-hairline) solid transparent;
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--shs-duration) var(--shs-ease),
		border-color var(--shs-duration) var(--shs-ease),
		color var(--shs-duration) var(--shs-ease);
}

.btn:hover,
.btn:focus-visible {
	text-decoration: none;
}

/* Na tmavom podklade (hero, pätička). */
.btn--ghost {
	background: transparent;
	border-color: var(--shs-white);
	color: var(--shs-white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--shs-white);
	color: var(--shs-brand);
}

.btn--light {
	background: var(--shs-white);
	border-color: var(--shs-white);
	color: var(--shs-brand);
}

.btn--light:hover,
.btn--light:focus-visible {
	background: transparent;
	color: var(--shs-white);
}

/* Na svetlom podklade (ostatné sekcie). */
.btn--solid {
	background: var(--shs-brand);
	border-color: var(--shs-brand);
	color: var(--shs-white);
}

.btn--solid:hover,
.btn--solid:focus-visible {
	background: var(--shs-brand-dark);
	border-color: var(--shs-brand-dark);
}

.btn--outline {
	background: transparent;
	border-color: var(--shs-brand);
	color: var(--shs-brand);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--shs-brand);
	color: var(--shs-white);
}

/* ---- Sekcie ------------------------------------------------------------- */

/*
 * Odstup medzi sekciami rieši sekcia sama (`padding-block`), nie medzery
 * medzi nimi — inak sa farebné pozadia nedotýkajú a vznikajú biele pruhy.
 */
.shs-section {
	padding-block: var(--shs-space-section);
}

.shs-section--mist {
	background: var(--shs-mist);
}

/* ---- Sociálne siete ----------------------------------------------------- */

/*
 * Rad ikon sa opakuje v hero aj v pätičke, preto je v základe a nie
 * v CSS jednej sekcie. Ikony sú inline SVG, takže dedia `currentColor`.
 */
.shs-social {
	display: flex;
	align-items: center;
	gap: var(--shs-space-31);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shs-social a {
	display: block;
	color: var(--shs-white);
	transition: opacity var(--shs-duration) var(--shs-ease);
}

.shs-social a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.shs-social svg {
	display: block;
	width: 21.615px;
	height: 21.615px;
}

/* ==========================================================================
   KOTVY SEKCIÍ

   Sekcia s vyplnenou kotvou je cieľom odkazu `adresa#meno`. Prilepená
   hlavička leží NAD obsahom, preto sa cieľ musí zastaviť pod ňou —
   inak by mu prekryla nadpis. Výšku hlavičky zapisuje do premennej
   `assets/js/header.js`, aby číslo sedelo aj pri inom logu a na mobile.
   ========================================================================== */

[data-shs-anchor] {
	scroll-margin-top: calc(var(--shs-header-h, 90px) + var(--shs-space-24));
}

/*
 * Skok na kotvu je plynulý. Patrí LEN na dokument: kolotoče si posun
 * animujú samy a `scroll-behavior` na ich páse by sa s tým bilo
 * (viď carousel.js).
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}