/**
 * Hotelová škola SHS — základní vrstva motivu.
 *
 * Drží jen to, co musí platit globálně: písmo, návrhové tokeny a pár
 * pomocných tříd z designu. Vzhled jednotlivých sekcí se staví
 * v GenerateBlocks (Global Styles), ne tady.
 */

/* ---------------------------------------------------------------------------
 * Písmo — Raleway, hostované lokálně
 *
 * Jde o variabilní font, jeden soubor pokrývá celou osu 400–700, takže
 * všechny řezy z designu stojí dohromady 79 kB. Latin-ext je pro češtinu
 * nutný (ě, š, č, ř, ž, ů, ť, ď, ň).
 * ------------------------------------------------------------------------- */

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/raleway-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------------
 * Písmo nadpisů — Source Serif 4, hostované lokálně
 *
 * Návrh sází nadpisy, wordmark, čísla statistik a názvy karet patkovým
 * písmem a běžný text bezpatkovým; třída `.srf` v prototypu označuje
 * přesně ta místa. Běžný text zůstává v Raleway.
 *
 * Soubor je ořezaný ze 428 kB na 112 kB: osa tloušťky z 200–900 na
 * 400–700, které se na webu opravdu používají, a znaková sada na
 * latin + latin-ext. Česká diakritika i typografické uvozovky ověřené.
 * ------------------------------------------------------------------------- */

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
}


/* ---------------------------------------------------------------------------
 * Návrhové tokeny
 *
 * Barvy tady ZÁMĚRNĚ nejsou — vlastní je GeneratePress (Customizer → Barvy)
 * jako globální barvy: --ink, --tint, --spot, --tint2, --paper. Díky tomu
 * na ně jde klikat v paletě GenerateBlocks a změna se propíše všude sama.
 * Definovat je i tady by znamenalo dvě místa pravdy.
 *
 * Písmo řeší rovněž Customizer (Typografie → Raleway); zbývá jen to,
 * co Customizer neumí.
 * ------------------------------------------------------------------------- */

:root {
	/*
	 * Názvy barev z návrhu jako aliasy na paletu GeneratePressu.
	 *
	 * V Customizeru je jedna sada pod výchozími názvy GP — plugin školního
	 * kalendáře je sdílený s dalšími weby a opírá se právě o ně, takže
	 * vlastní názvy tam být nemůžou. V CSS webu se ale píše `var(--ink)`,
	 * ne `var(--contrast)`: barva má být poznat podle role, ne podle pořadí
	 * v paletě. Tyhle řádky obojí propojují — mění se na jednom místě
	 * (Customizer → Barvy) a promítne se všude.
	 */
	/*
	 * --ink je na --contrast-2, ne na --contrast. V paletě podle nového
	 * návrhu (2026-09) je --contrast čistá černá (#000000) — používá se
	 * pro tmavé překrytí fotek, ne jako značková tmavě modrá. Modrý tón
	 * z návrhu (#19214c), který je na pozadí hlavičky, hero sekce, tmavých
	 * dlaždic i patičky, sedí přesně na --contrast-2.
	 */
	--ink: var(--contrast-2);
	--tint: var(--base);
	/*
	 * Nový návrh druhý (teplý) tón nemá — proto záložní hodnota na --tint.
	 * Kdyby --base-2 v paletě chyběl, --tint2 dřív zůstal NEDEFINOVANÝ
	 * a cokoli na něm stálo (hover tlačítka v patičce, .shs-sekce--tint2)
	 * by ztratilo barvu potichu, bez chyby v konzoli.
	 */
	--tint2: var(--base-2, var(--tint));
	--paper: var(--base-3);
	--spot: var(--accent);
	/* Černá z palety, pod svým vlastním jménem — překrytí fotek apod. */
	--cerna: var(--contrast);

	/*
	 * Písmo nadpisů. Vede přes proměnnou schválně: vrátit celý web na
	 * jedno písmo znamená přepsat jedinou hodnotu na `inherit`.
	 */
	--shs-pismo-nadpis: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Svislý rytmus sekcí — plynulý podle šířky okna */
	--sekce-padding: clamp(3rem, 6vw, 6.5rem);

	/*
	 * Šířka obsahu podle návrhu. Nespoléhá se na --gb-container-width:
	 * tu GenerateBlocks vypisuje jen za určitých okolností a když chybí,
	 * spadl by web tiše na jinou šířku.
	 */
	--shs-sirka: 1240px;

	/* Odsazení obsahu od okrajů okna — stejné, jaké mají sekce na HP. */
	--shs-okraj: 20px;
}

@media (max-width: 600px) {
	:root {
		--shs-okraj: 14px;
	}

	/* Odstup hlavního obsahu od postranního sloupce. */
	--shs-mezera-sloupcu: 3.5rem;
}


/* ---------------------------------------------------------------------------
 * Šířka obsahu podstránek
 *
 * Kontejner motivu je schválně široký (Customizer → Rozvržení → 2000 px),
 * aby úvodní stránka mohla mít celoplošné barevné pásy. Podstránky žádné
 * nemají, takže se jejich text roztahoval přes celé okno a na užších
 * displejích se lepil k okrajům. Tady se vrací na stejnou míru jako sekce
 * na úvodní stránce: nejvýš --shs-sirka a po stranách stejné odsazení.
 *
 * Stránky složené z pásů .shs-sekce se vynechávají — tam si šířku hlídá
 * .shs-obal uvnitř každé sekce a omezením zvenčí by se pásy zúžily.
 * Podmínka je psaná přes :has, takže se to samo vyřeší i u dalších
 * stránek postavených stejným způsobem.
 * ------------------------------------------------------------------------- */

/*
 * Omezuje se celý obsahový pás, ne jen článek. S postranním sloupcem jsou
 * uvnitř dva sloupce vedle sebe — kdyby se šířka řešila až na článku,
 * sloupec by zůstal mimo a dosahoval by k okraji okna. Takhle mají
 * dohromady stejnou míru jako sekce na úvodní stránce.
 *
 * Odsazení se k šířce přičítá, protože box-sizing je border-box: bez toho
 * by obsah vyšel o 40 px užší než tentýž obsah na úvodní stránce, kde
 * odsazení nese sekce a --shs-sirka platí až pro obsah uvnitř ní.
 */
.site-content:not(:has(.entry-content > .shs-sekce)) {
	max-width: calc(var(--shs-sirka, 1240px) + 2 * var(--shs-okraj, 20px));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--shs-okraj, 20px);
	padding-right: var(--shs-okraj, 20px);
}

/*
 * Odstup obsahu od postranního sloupce. GeneratePress oba sloupce počítá
 * v procentech a klade je k sobě natěsno; mezeru drží až tohle. Oba
 * sloupce se smršťují (flex-shrink), takže se o ni podělí a celková
 * šířka pásu zůstane.
 */
.site-content {
	column-gap: var(--shs-mezera-sloupcu, 3.5rem);
}


/* ---------------------------------------------------------------------------
 * Kde se sází patkovým písmem
 *
 * Seznam odpovídá tomu, co má v prototypu z návrhu třídu `.srf`, plus
 * nadpisům, které tam patku dostávají přes `h1`–`h4`. Zbytek webu —
 * běžný text, perex, tlačítka, menu, nadpisky sekcí („KALENDÁŘ") a jména
 * u ohlasů — zůstává v Raleway, přesně jako v návrhu.
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
blockquote,
.shs-stat__cislo,                /* čísla ve statistikách */
.sk-seznam-datum-cislo,          /* velké datum na kartě události */
.sk-event,                       /* název události v kalendáři */
.shs-ft-label,                   /* nadpisy sloupců v patičce */
.shs-podobne-nazev {             /* názvy článků v „Přečíst podobné" */
	font-family: var(--shs-pismo-nadpis);
}

/*
 * Výchozí řez a barva nadpisů na obyčejných podstránkách (mimo GB bloky
 * s vlastní `.shs-h1`/`.shs-h2` třídou, které mají svůj vlastní řez).
 * GeneratePress sám nastavuje tučné černé nadpisy — tohle je sjednocuje
 * se stejným elegantním, netučným řezem a tmavě modrou barvou jako
 * na úvodní stránce. Cokoli specifičtější (např. bílý nadpis na tmavé
 * kartě) má vždy vyšší specificitu a klidně dál vyhraje.
 */
h1, h2, h3, h4 {
	color: var(--ink);
	font-weight: 400;
}

/*
 * Poznámka: dřív tu byla výjimka nutící řádky kalendáře od 4. dolů zpět na
 * dědění patkového písma (aby seděly se stylem prvních tří). Od chvíle, kdy
 * .sk-event/.sk-event-zdroj mají v assets/calendar.css vlastní bezpatkové
 * písmo napevno (Raleway), je zbytečná - platí to teď stejně pro všechny.
 */


/* ---------------------------------------------------------------------------
 * Nadpisový label nad sekcí („ŠKOLA S TRADICÍ")
 * ------------------------------------------------------------------------- */

.shs-label {
	color: var(--spot);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
 * Karta s kontaktními údaji (stránka Kontakty)
 *
 * Hodnoty se tahají z Nastavení webu, takže stejné údaje nikde nežijí
 * dvakrát — mění se na jednom místě a propíšou se sem i do patičky.
 * ------------------------------------------------------------------------- */

.shs-kont-karta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 2.5rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background-color: var(--contrast-3);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.shs-kont-nazev {
	margin: 0 0 0.5rem;
	font-weight: 700;
	line-height: 1.35;
}

.shs-kont-radek {
	margin: 0 0 0.35rem;
	line-height: 1.6;
}

.shs-kont-odkaz {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--ink);
	text-decoration: none;
}

.shs-kont-odkaz:hover,
.shs-kont-odkaz:focus-visible {
	color: var(--spot);
	text-decoration: underline;
}


.pi-tlacitko-reagovat {
    position: relative;
    z-index: 2;
	max-width: 260px;
    background-color: var(--accent, #2271b1);
    border-color: var(--accent, #2271b1);
    color: var(--base-2, #fff);
	margin-bottom:20px;
}

@media (max-width: 820px) {
	.shs-kont-karta {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}


/* ---------------------------------------------------------------------------
 * Úřední hodiny — dvojice dny + čas
 *
 * Sloupce se zarovnávají pod sebe, aby šly časy porovnat očima. Šířka
 * sloupce se dny je v `ch`, tedy odvozená od písma, ne odhadnutá v pixelech.
 * ------------------------------------------------------------------------- */

.shs-hodiny__radek {
	display: flex;
	gap: 0.75rem;
}

/*
 * V patičce jsou texty na střed (viz .shs-ft-sloupec) — samotný řádek
 * (dny + čas) ale zůstává uvnitř zarovnaný doleva, jinak by "8 - 15 h"
 * u kratšího "pá" a delšího "po - čt" neseděly pod sebou ve sloupci.
 */
.shs-ft-sloupec .shs-hodiny {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Na desktopu (dost místa na sloupce vedle sebe) zarovnané doleva,
   na mobilu (sloupce pod sebou, .shs-ft-sloupec text-align:center)
   zůstává na střed. */
@media (min-width: 901px) {
	.shs-ft-sloupec .shs-hodiny {
		align-items: flex-start;
	}
}

.shs-hodiny__dny {
	flex: 0 0 auto;
	min-width: 6ch;
}

.shs-hodiny__cas {
	font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
 * Přístupnost
 * ------------------------------------------------------------------------- */

/* Viditelné zaostření pro klávesnici — GP ho na některých prvcích potlačuje. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--spot);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}