/*
Theme Name: Seznam hřišť
Theme URI: https://seznamhrist.cz
Description: Vlastní vzhled webu seznamhrist.cz — dětská šablona (child) Twenty Twenty-Five s paletou „barvy z hřiště“ (tartanová zelená, pískoviště, obloha, cihlová), písmem Nunito pro nadpisy, vlastní hlavičkou (logo, menu, „+ Přidat hřiště“) a patičkou (atribuce OSM/ODbL). Návrh: docs/navrh-ux-ui.md.
Author: Markéta Trnková
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seznamhrist
*/

/*
 * CO TU JE (a co ne):
 *  - design tokeny (barvy, písma, šířky) definuje theme.json → CSS proměnné
 *    `--wp--preset--color--*`; tady jsou jen věci, které theme.json neumí:
 *    tmavý režim, hlavička/patička (vlastní HTML v parts/), drobné doladění TT5;
 *  - vzhled vyhledávače (karty, mapa, formulář) je v pluginu mapa-hrist-osm
 *    (mapa-hrist.css) a čte stejné proměnné.
 */

/* ---------------------------------------------------------------------- *
 * Tmavý režim: přepíšeme design tokeny podle systémového nastavení.
 * Selektor `:root:root` má vyšší specificitu než `:root` z globálních stylů
 * WP, takže vyhraje bez ohledu na pořadí stylů v hlavičce.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:root {
		--wp--preset--color--base: #151C17;
		--wp--preset--color--contrast: #EEF2EA;
		--wp--preset--color--accent-1: #F0C24E;
		--wp--preset--color--accent-2: #1F2E45;
		--wp--preset--color--accent-3: #4FB86F;
		--wp--preset--color--accent-4: #B7C4BA;
		--wp--preset--color--accent-5: #243028;
		--wp--preset--color--zelena: #4FB86F;
		--wp--preset--color--zelena-tmava: #7BD494;
		--wp--preset--color--zelena-svetla: #1F3A28;
		--wp--preset--color--zluta: #F0C24E;
		--wp--preset--color--zluta-svetla: #3D3416;
		--wp--preset--color--obloha: #7FAEF0;
		--wp--preset--color--obloha-svetla: #1F2E45;
		--wp--preset--color--cihlova: #E5764F;
		--wp--preset--color--cihlova-svetla: #3F231A;
		--wp--preset--color--text-2: #B7C4BA;
		--wp--preset--color--text-3: #8A9A8E;
		--wp--preset--color--plocha: #1D2620;
		--wp--preset--color--zapustene: #243028;
		--wp--preset--color--linka: #33413A;
		color-scheme: dark;
	}
}

/* ---------------------------------------------------------------------- *
 * Základ
 * ---------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/*
 * Lepivá hlavička je vysoká ~4,5 rem — o tolik musí být níž všechno, co se
 * „lepí“ nebo kam se scrolluje (mapa vyhledávače, karty hřišť), jinak by to
 * zmizelo pod ní. Plugin proměnnou zná s fallbackem 1rem (viz mapa-hrist.css).
 */
:root {
	--sh-lepiva-mezera: 5.5rem;
}

.admin-bar {
	--sh-lepiva-mezera: 7.5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Na úzkých displejích chceme pro karty a mapu co nejvíc místa.
 * ⚠️ Spolu s odsazením se musí přenastavit i proměnné `--wp--style--root--padding-*`:
 * bloky `alignfull` se roztahují negativním okrajem počítaným z nich, takže
 * jinak vyčuhují ven ze stránky (o 14 px doprava i doleva) a vzniká vodorovné
 * posouvání.
 */
@media (max-width: 480px) {
	.sh-hlavni,
	.sh-paticka,
	.sh-hlavicka {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Řádek textu max. ~65 znaků kvůli čitelnosti (návrh § 7). */
.sh-stranka p,
.sh-stranka li {
	max-width: 65ch;
}

.sh-stranka h1 {
	margin-bottom: .5em;
}

/* Tabulární číslice v celém webu, souřadnice monospace. */
body {
	font-variant-numeric: tabular-nums;
}

code,
.sh-souradnice {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9em;
}

/* ---------------------------------------------------------------------- *
 * Hlavička: logo · menu · „+ Přidat hřiště“
 * ---------------------------------------------------------------------- */
.sh-hlavicka {
	background: var(--wp--preset--color--plocha);
	border-bottom: 1px solid var(--wp--preset--color--linka);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Admin lišta WP je nahoře 32 px (na mobilu 46 px) — hlavička pod ni. */
.admin-bar .sh-hlavicka {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sh-hlavicka {
		top: 46px;
	}
}

.sh-hlavicka__radek {
	padding-top: .6rem;
	padding-bottom: .6rem;
	gap: 1rem;
}

.sh-logo {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.sh-logo:hover {
	color: var(--wp--preset--color--zelena-tmava);
	text-decoration: none;
}

.sh-logo__znak {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	flex: none;
}

.sh-menu {
	display: flex;
	align-items: center;
	gap: .2rem 1.1rem;
	flex-wrap: nowrap;
}

.sh-menu__odkaz {
	color: var(--wp--preset--color--text-2);
	text-decoration: none;
	font-weight: 600;
	font-size: .98rem;
	padding: .35rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.sh-menu__odkaz:hover,
.sh-menu__odkaz:focus-visible {
	color: var(--wp--preset--color--zelena-tmava);
	border-bottom-color: var(--wp--preset--color--zelena);
	text-decoration: none;
}

/* Žluté „+ Přidat hřiště“ = trvale viditelná pozvánka; primární (zelená) je hledání. */
.sh-menu__pridat {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	background: var(--wp--preset--color--zluta);
	color: #1B2A1F;
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: .95rem;
	padding: .5rem 1rem;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, transform .05s;
}

.sh-menu__pridat:hover,
.sh-menu__pridat:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--zluta) 85%, #000);
	color: #1B2A1F;
	text-decoration: none;
}

.sh-menu__pridat:active {
	transform: translateY(1px);
}

/*
 * MOBILNÍ HLAVIČKA: jen logo (vede domů) a žluté „＋ Přidat hřiště“.
 * Textové odkazy se skryjí — na malém displeji by tlačítko mačkaly a obojí
 * je dostupné v patičce. Menu se tak obejde bez hamburgeru.
 */
@media (max-width: 640px) {
	.sh-logo__text {
		font-size: 1.1rem;
	}

	.sh-menu__odkaz {
		display: none;
	}

	.sh-menu__pridat {
		padding: .5rem .9rem;
	}
}

/* Na nejužších displejích se vedle loga nevejde celý popisek tlačítka. */
@media (max-width: 340px) {
	.sh-logo__text {
		font-size: 1rem;
	}

	.sh-menu__pridat-text {
		display: none;
	}

	.sh-menu__pridat::after {
		content: "Přidat";
	}
}

/* ---------------------------------------------------------------------- *
 * Hlavní obsah
 * ---------------------------------------------------------------------- */
.sh-hlavni {
	min-height: 60vh;
}

.sh-hlavni--uvod {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Pás „Jak pomoct“ na úvodní stránce (tři dlaždice ze stránky, bloky columns). */
.sh-jak-pomoct {
	margin-top: var(--wp--preset--spacing--60);
}

.sh-jak-pomoct .wp-block-column {
	background: var(--wp--preset--color--plocha);
	border: 1px solid var(--wp--preset--color--linka);
	border-radius: 16px;
	padding: 1.25rem 1.25rem 1rem;
}

.sh-jak-pomoct h2,
.sh-jak-pomoct h3 {
	font-size: 1.15rem;
	margin: 0 0 .4rem;
}

.sh-jak-pomoct p {
	color: var(--wp--preset--color--text-2);
	font-size: .95rem;
	margin: 0;
}

/*
 * Ikona dlaždice: vlastní SVG (lupa / tužka / plus, viz server/stranka-obsah.php)
 * v kulatém světle modrém terčíku — záměrně stejný rukopis jako tlačítko
 * „Moje poloha" ve vyhledávacím poli (modrá `obloha` na `obloha-svetla`),
 * aby web působil jako jedna sada ikon. Tmavý režim řeší přepsání týchž
 * design tokenů nahoře, tady se nic dalšího nastavovat nemusí.
 *
 * `margin: 0 0 .9rem` = terčík vlevo (na jedné svislé lince s nadpisem
 * a textem dlaždice) a malý odstup, aby neseděl těsně na nadpisu.
 */
.sh-jak-pomoct .sh-ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 .9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--obloha-svetla);
	color: var(--wp--preset--color--obloha);
}

.sh-jak-pomoct .sh-ikona__obrazek {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
}

.sh-jak-pomoct .wp-block-column .wp-block-buttons {
	margin-top: .8rem;
}

.sh-jak-pomoct .wp-block-button__link {
	font-size: .9rem;
	padding: .5rem 1rem;
}

.sh-jak-pomoct .wp-block-button__link.sh-tlacitko--zlute {
	background: var(--wp--preset--color--zluta);
	color: #1B2A1F;
}

/* Drobný text (atribuce) pod vyhledávačem. */
.sh-drobne {
	color: var(--wp--preset--color--text-3);
	font-size: .85rem;
	text-align: center;
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------- *
 * Patička
 * ---------------------------------------------------------------------- */
.sh-paticka {
	background: var(--wp--preset--color--zapustene);
	border-top: 1px solid var(--wp--preset--color--linka);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	font-size: .92rem;
	color: var(--wp--preset--color--text-2);
}

.sh-paticka__radek {
	gap: 2rem;
}

.sh-paticka__o {
	max-width: 32rem;
}

.sh-paticka__o p {
	margin: 0 0 .5rem;
}

.sh-paticka__nazev {
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast);
}

.sh-paticka__menu {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

/* ---------------------------------------------------------------------- *
 * Podpis autorky v patičce
 * ---------------------------------------------------------------------- */
.sh-podpis {
	margin-top: var(--wp--preset--spacing--40);
}

/* Selektor s `.sh-paticka__o` schválně: obecné `.sh-paticka__o p` má
   spodní okraj 8 px a s nižší specificitou by odstavce podpisu posunulo. */
.sh-paticka__o .sh-podpis__popis {
	margin: 0 0 .2rem;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--text-3);
}

/* Text vedle podpisu sedí na jeho spodní hraně, ne uprostřed — podpis má
   nahoře vysoké tahy, takže vystředěný text vypadal „nalepený“ moc vysoko. */
.sh-podpis__radek {
	display: flex;
	align-items: flex-end;
	gap: .6rem;
	flex-wrap: wrap;
}

/* Podpis je černý na průhledném pozadí; v tmavém režimu ho převrátíme
   do bílé, jinak by na tmavém podkladu zmizel. */
.sh-podpis__znacka {
	width: 120px;
	height: auto;
	display: block;
}

@media (prefers-color-scheme: dark) {
	.sh-podpis__znacka {
		filter: invert(1);
	}
}

.sh-paticka__o .sh-podpis__web {
	margin: 0;
	font-size: .92rem;
	color: var(--wp--preset--color--text-2);
}

.sh-paticka__menu a,
.sh-paticka a {
	color: var(--wp--preset--color--text-2);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--wp--preset--color--linka);
}

.sh-paticka a:hover {
	color: var(--wp--preset--color--zelena-tmava);
	text-decoration-color: currentColor;
}

.sh-paticka__licence {
	margin: var(--wp--preset--spacing--40) auto 0;
	font-size: .82rem;
	color: var(--wp--preset--color--text-3);
	max-width: var(--wp--style--global--wide-size);
}