/*
 * Tajemniczy Ogród — style główne.
 *
 * Kolejność w pliku (nie zmieniaj bez powodu — czytelność zależy od kolejności):
 *   1. Tokeny (zmienne)
 *   2. Reset
 *   3. Typografia
 *   4. Dostępność (skip link, focus, reduced motion)
 *   5. Layout — kontener
 *   6. Nagłówek i nawigacja
 *   7. Treść
 *   8. Stopka
 *
 * NAMESPACE: klasy tego motywu mają prefiks `to-` (Tajemniczy Ogród).
 * Dzięki temu nie kolidują z klasami WordPressa ani wtyczek i od razu widać,
 * co jest nasze.
 */

/* ══════════════════════════════ 1. TOKENY ══════════════════════════════ */

:root {

	/* ─── Paleta K2 ───────────────────────────────────────────────────────
	 * JEDYNE dozwolone kolory marki. Źródło prawdy: zmienne K2 w Figmie.
	 * Nie dopisuj tu kolorów „na chwilę" — jeśli czegoś brakuje, to znaczy,
	 * że projekt wymaga decyzji, nie że CSS wymaga nowej zmiennej.
	 */
	--k2-atrament:        #2E4238; /* tekst główny, kontury */
	--k2-atrament-miekki: #4A5B52; /* tekst drugorzędny; ciało rudzika */
	--k2-papier:          #F3EDE0; /* tła, horyzont nieba, żyłki liści */
	--k2-lisc-gleboki:    #3E5A46; /* PLAN PRZEDNI roślinności */
	--k2-lisc:            #4C6B54; /* PLAN ŚRODKOWY; łodygi; CTA */
	--k2-szalwia:         #7E9B76; /* PLAN TYLNY */
	--k2-miod:            #E3B23C; /* słońce, środki kwiatów, dziób, kluczyk */
	--k2-koral:           #D98E73; /* TYLKO kwiaty — pierś rudzika przeszła na rdzę */

	/* ─── Rodzina rudych (dodana 2026-08-10) ──────────────────────────────
	 * Powód: koral #D98E73 jest łososiowy, nie rudy — rudzik w nim czytał się
	 * jak flaming, a w logo brakowało koloru, który utrzyma się na obu tłach
	 * marki. Rdza jest JEDYNYM kolorem w całej palecie, który daje ≥3:1
	 * i na papierze (3.46:1), i na nocnym niebie (3.61:1) — dlatego to ona
	 * jest kolorem znaku, nie atrament i nie liść (te padają na nocy).
	 *
	 * Chroma rdzy (C*56) jest NIŻSZA niż miodu (C*64), więc rudość nie staje
	 * się najkrzykliwszym kolorem w palecie i nie łamie niskiej stymulacji.
	 */
	--k2-rdza:            #C1662F; /* pierś rudzika, kolor znaku/logo */
	--k2-rdza-gleboka:    #97452A; /* cień piersi, obrys w rodzinie rudych */
	--k2-cynamon:         #E09257; /* rozjaśnienie górnej części piersi */
	--k2-braz-oliwkowy:   #7D6B4F; /* grzbiet i głowa rudzika; łącznik rudy↔zieleń */
	--k2-niebo-dzien:     #A9C7CE; /* niebo górą (dzień), motyl */
	--k2-ksiezyc:         #EDE3B8; /* księżyc, gwiazdy */
	--k2-noc:             #1E2749; /* niebo nocą — NIGDY czysta czerń */

	/* ─── CZTERY KOLORY GŁÓWNE MARKI (2026-08-10) ─────────────────────────
	 * Podstawa brand booka. Reszta palety to kolory SYSTEMOWE — żyją
	 * w ilustracji i w porach dnia, nie w logo i nie w druku.
	 *
	 *   1. krem            #F3EDE0  tło wszystkiego, ~60% powierzchni
	 *   2. zieleń ciemna   #3E5A46  powierzchnie, pasy, tekst na kremie
	 *   3. zieleń średnia  #4C6B54  plamy, przyciski, wypełnienia
	 *   4. rdza            #C1662F  znak i akcent, ~5%
	 *
	 * Piąty, bez którego nic nie działa: ATRAMENT #2E4238 — kolor typografii.
	 * Żaden z czterech go nie zastąpi (rdza na kremie to 3.46:1, poniżej progu
	 * dla tekstu), dlatego w brand booku stoi jako osobna kategoria.
	 *
	 * ⚠️ DWIE ZIELENIE NIGDY NIE STYKAJĄ SIĘ BEZPOŚREDNIO — dają między sobą
	 * 1.28:1 (ΔL* 6,7), więc zlewają się w jedną plamę. W ilustracji to zaleta
	 * (głębia planów bez cieniowania), w interfejsie i druku to pułapka.
	 * Albo osobne konteksty, albo krem między nimi.
	 */
	--to-brand-krem:    var(--k2-papier);
	--to-brand-zielen:  var(--k2-lisc-gleboki);
	--to-brand-zielen2: var(--k2-lisc);
	--to-brand-rdza:    var(--k2-rdza);
	--to-brand-tekst:   var(--k2-atrament);

	/* ─── Role semantyczne ────────────────────────────────────────────────
	 * Warstwa pośrednia: komponenty odwołują się do ROLI (--to-text),
	 * nie do koloru (--k2-atrament). Gdy branding się domknie i odcień
	 * się zmieni, podmieniasz go w JEDNYM miejscu — tutaj — a nie
	 * w pięćdziesięciu regułach niżej.
	 */
	--to-text:        var(--k2-atrament);
	--to-text-soft:   var(--k2-atrament-miekki);
	--to-bg:          var(--k2-papier);
	--to-accent:      var(--k2-lisc);
	--to-accent-deep: var(--k2-lisc-gleboki);
	--to-focus:       var(--k2-miod);
	--to-znak:        var(--k2-rdza); /* logo, sygnet — jedyny kolor działający na obu tłach */

	/* ─── Typografia ──────────────────────────────────────────────────────
	 * Fonty zadeklarowane w fonts.css. Zawsze z fallbackiem systemowym,
	 * żeby strona była czytelna także zanim font się pobierze.
	 */
	--to-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--to-font-body:    'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Skala typograficzna — clamp() skaluje płynnie między telefonem
	 * a desktopem, więc nie potrzebujemy osobnych rozmiarów w media queries.
	 * Zapis clamp(min, płynny, max). */
	--to-fs-h1:   clamp(2.2rem, 5.5vw, 4rem);
	--to-fs-h2:   clamp(1.7rem, 3.6vw, 2.5rem);
	--to-fs-h3:   clamp(1.25rem, 2.2vw, 1.5rem);
	--to-fs-body: clamp(1rem, 1.4vw, 1.125rem);
	--to-fs-small: 0.9rem;

	/* Interlinie. 1.7 dla tekstu czytanego w akapitach — WCAG 1.4.12
	 * zaleca minimum 1.5, a przy tej grupie docelowej dajemy zapas.
	 * Nagłówki mogą być ciaśniejsze, bo to jedna–dwie linie. */
	--to-lh-body: 1.7;
	--to-lh-head: 1.15;

	/* ─── Odstępy ─────────────────────────────────────────────────────────
	 * Skala oparta na 8 px. Nazwy zamiast liczb, żeby odstępy w projekcie
	 * były powtarzalne, a nie dobierane za każdym razem na oko.
	 */
	--to-space-2xs: 0.5rem;   /*  8px */
	--to-space-xs:  0.75rem;  /* 12px */
	--to-space-s:   1rem;     /* 16px */
	--to-space-m:   1.5rem;   /* 24px */
	--to-space-l:   2.5rem;   /* 40px */
	--to-space-xl:  4rem;     /* 64px */
	--to-space-2xl: 6rem;     /* 96px */

	/* ─── Kontener ────────────────────────────────────────────────────────*/
	--to-container: 1120px;
	--to-container-narrow: 720px; /* dla samego tekstu — długość wiersza
	                                 powyżej ~75 znaków męczy oko */

	/* ─── Nagłówek ────────────────────────────────────────────────────────
	 * Wysokość paska jako token, bo potrzebują jej DWA pliki: main.css
	 * (sam pasek) i hero.css (sterowanie porami dnia musi zejść pod pasek,
	 * inaczej pigułki wpadną pod przyklejone menu).
	 */
	--to-header-h: 76px;

	/*
	 * Pasek administratora WordPressa. Zera dla zwykłego gościa, 32 px dla
	 * osoby zalogowanej (klasa `admin-bar` na <body>, dodaje ją WordPress).
	 *
	 * DLACZEGO to musi być token, a nie „poprawimy w razie potrzeby":
	 * WordPress przy zalogowanym użytkowniku dokłada `margin-top: 32px` do
	 * <html>, czyli przesuwa całą stronę w dół, a swój pasek przykleja NAD nią.
	 * Nasz pasek celujący w `top: 0` schowałby się pod tamtym, więc cała góra
	 * strony — razem ze scenerią hero — najpierw przejechałaby te 32 px w górę.
	 * Widać to jako skok na starcie przewijania, i to skok, którego nie zauważy
	 * nikt niezalogowany. Czyli najgorszy rodzaj: niewidoczny dla programisty,
	 * oczywisty dla właścicielki strony.
	 */
	--to-admin-bar: 0px;

	/*
	 * Wysokość stopki w trybie jednoekranowym. To BUDŻET, nie pomiar: stopka
	 * dostaje dokładnie tę wysokość, a sceneria hero jest o nią niższa.
	 *
	 * DLACZEGO budżet, a nie mierzenie stopki skryptem: gdy o wysokości decyduje
	 * treść, każde dopisane w stopce zdanie podgryza kadr ogrodu i nikt tego nie
	 * zauważa. Odwrotnie jest zdrowiej — kompozycja ma pierwszeństwo, a stopka
	 * musi się zmieścić w przydzielonym pasku. Rozbudowujesz stopkę? Podnieś tę
	 * liczbę świadomie, jednym ruchem.
	 */
	--to-footer-h: 240px;

	/* Ile z wysokości ekranu zabiera stopka. Zero wszędzie POZA trybem
	 * jednoekranowym — podmienia to klasa `to-oneview` na <body>. */
	--to-oneview-footer: 0px;

	/* ─── Promienie i przejścia ───────────────────────────────────────────*/
	--to-radius: 18px;
	--to-radius-pill: 999px;

	/* Przejścia są WOLNE i miękkie — zasada niskiej stymulacji.
	 * Żadnych szarpanych 0.1s ani sprężystych easingów. */
	--to-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ══════════════════════════════ 2. RESET ══════════════════════════════ */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

html {
	/* Zapobiega automatycznemu powiększaniu tekstu przy obrocie ekranu w iOS. */
	-webkit-text-size-adjust: 100%;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}


/* ═══════════════════════════ 3. TYPOGRAFIA ═══════════════════════════ */

body {
	background-color: var(--to-bg);
	color: var(--to-text);
	font-family: var(--to-font-body);
	font-size: var(--to-fs-body);
	line-height: var(--to-lh-body);

	/* Wygładzanie fontów na macOS — bez tego Atkinson wygląda za grubo. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--to-font-display);
	line-height: var(--to-lh-head);
	text-wrap: balance; /* nie zostawia jednego słowa w ostatniej linii */

	/* Fraunces jest fontem ZMIENNYM, więc wagę ustawiamy precyzyjnie.
	 * `opsz` (optical size) na `auto` — font sam dostosuje kontrast kresek
	 * do rozmiaru tekstu. */
	font-optical-sizing: auto;
	font-weight: 600;

	/* Osie SOFT i WONK: TRZYMAMY NISKO.
	 * WONK („dziwaczność") na wysokich wartościach sprawia, że krój zaczyna
	 * wizualnie „tańczyć" — co kłóci się z zasadą niskiej stymulacji.
	 * UWAGA: pobrany plik jest subsetowany do osi wght+opsz, więc ta
	 * deklaracja nic dziś nie zmienia. Zostaje jako jawny zapis intencji,
	 * gdybyśmy kiedyś podmienili plik na pełny z repozytorium Google Fonts. */
	font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1 { font-size: var(--to-fs-h1); }
h2 { font-size: var(--to-fs-h2); }
h3 { font-size: var(--to-fs-h3); }

p + p,
p + ul,
p + ol {
	margin-top: var(--to-space-s);
}

/* Długość wiersza dla tekstu czytanego — patrz --to-container-narrow. */
p {
	max-width: 68ch;
}

a {
	color: var(--to-accent-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--to-transition);
}

a:hover {
	color: var(--to-text);
}

strong,
b {
	font-weight: 700;
}


/* ═══════════════════════════ 4. DOSTĘPNOŚĆ ═══════════════════════════ */

/*
 * Skip link — pierwszy element w kodzie, niewidoczny do momentu ustawienia
 * na nim fokusu klawiaturą. Pozwala pominąć nawigację i wejść od razu
 * w treść. Wymóg WCAG 2.4.1, a przy nawigacji klawiaturą po prostu
 * oszczędza kilkanaście tabulacji na każdej podstronie.
 */
.to-skip-link {
	position: absolute;
	left: var(--to-space-s);
	top: var(--to-space-s);
	z-index: 100;
	padding: var(--to-space-2xs) var(--to-space-s);
	background-color: var(--to-bg);
	color: var(--to-text);
	border-radius: var(--to-radius-pill);
	font-weight: 700;
	text-decoration: none;

	/* Ukrycie bez usuwania z drzewa dostępności: element zjeżdża nad ekran. */
	transform: translateY(-200%);
	transition: transform var(--to-transition);
}

.to-skip-link:focus {
	transform: translateY(0);
}

/*
 * Widoczny fokus na WSZYSTKIM, co da się aktywować.
 * `:focus-visible` (a nie `:focus`) pokazuje obwódkę tylko przy nawigacji
 * klawiaturą — kliknięcie myszką jej nie wywoła, więc nie przeszkadza.
 * Kolor miodowy, bo kontrastuje i z papierem, i z zieleniami.
 */
:focus-visible {
	outline: 3px solid var(--to-focus);
	outline-offset: 3px;
	border-radius: 3px;
}

/*
 * Klasa dla treści czytanej wyłącznie przez czytnik ekranu.
 * Nie używaj `display: none` do tego celu — to usuwa treść także
 * dla czytników.
 */
.to-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * BRAMKA SENSORYCZNA — ustawienie systemowe „ogranicz ruch".
 * Dla dziecka z nadwrażliwością i dla rodzica z migreną to warunek
 * korzystania ze strony, nie preferencja estetyczna. Wyłączamy tu
 * WSZYSTKIE przejścia i animacje globalnie.
 *
 * To pierwsza z dwóch furtek wyjścia. Druga — widoczny przełącznik
 * „Tryb spokojny" — dojdzie razem z hero, dla osób, które nie wiedzą,
 * że taką opcję można ustawić w systemie.
 */
@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;
	}
}


/* ════════════════════════════ 5. LAYOUT ════════════════════════════ */

.to-container {
	width: 100%;
	max-width: var(--to-container);
	margin-inline: auto;
	padding-inline: var(--to-space-m);
}

.to-container--narrow {
	max-width: var(--to-container-narrow);
}

/* Sekcja — pionowy rytm strony. */
.to-section {
	padding-block: var(--to-space-2xl);
}


/* ═════════════════════ 6. NAGŁÓWEK I NAWIGACJA ═════════════════════ */

/*
 * PASEK — przyklejony do góry okna.
 *
 * DLACZEGO sticky, a nie zwykły pasek u góry strony: hero ma własną
 * przyklejoną scenerię wysoką na cały ekran, więc statyczny nagłówek
 * odjeżdżałby po pierwszym drgnieniu przewijania i strona zostawałaby bez
 * nawigacji na kilka ekranów. Menu musi być dostępne przez cały czas.
 *
 * `z-index: 50` jest wyższy niż cokolwiek w hero (sterowanie ma 6), a niższy
 * niż szuflada (210) i skip link (100). Bez tej wartości sceneria hero
 * malowałaby się NAD paskiem — jest później w kodzie, a przy równym z-index
 * wygrywa element późniejszy.
 *
 * Tło jest PEŁNE, w kolorze papieru, i takie zostaje o każdej porze dnia —
 * dokładnie jak pigułki pór dnia w hero. Pasek zmieniający kolor razem
 * z niebem byłby ładny i jednocześnie nieprzewidywalny: to samo miejsce
 * co chwilę wyglądałoby inaczej.
 */
/* Wartość tokena ustawia sam WordPress swoją klasą na <body>. */
body.admin-bar {
	--to-admin-bar: 32px;
}

/*
 * Ile miejsca w układzie zabiera pasek nawigacji.
 *
 * Normalnie tyle, ile ma wysokości — leży w przepływie strony i spycha treść
 * w dół. W trybie jednoekranowym **zero**, bo tam pasek NAKŁADA SIĘ na scenerię
 * (jak pasek administratora WordPressa nakłada się na stronę).
 *
 * DLACZEGO tak: w jednym kadrze każdy piksel wysokości jest do podziału między
 * ogród a stopkę. Pasek jest nieprzezroczysty i leży nad niebem — czyli nad
 * najtańszą częścią ilustracji — więc oddanie mu osobnego pasa byłoby
 * marnowaniem miejsca dwa razy.
 */
body {
	--to-header-space: var(--to-header-h);
	--to-hero-top-inset: 0px; /* o ile treść hero musi zejść spod paska */
}

/* Tryb jednoekranowy — klasę dodaje PHP (inc/customizer.php). */
body.to-oneview {
	--to-oneview-footer: var(--to-footer-h);
	--to-header-space: 0px;
	--to-hero-top-inset: var(--to-header-h);
}

/*
 * Pasek wychodzi z przepływu, żeby sceneria zaczynała się pod nim, a nie za nim.
 * `sticky` nie wystarczy: element przyklejony wciąż zajmuje swoje miejsce
 * w układzie strony.
 */
body.to-oneview .to-header {
	position: fixed;
	left: 0;
	right: 0;
}

/*
 * WYSOKOŚĆ SCENERII — jedno miejsce, w którym odejmuje się wszystko, co zabiera
 * ekran: pasek administratora WordPressa, pasek nawigacji i (w trybie
 * jednoekranowym) stopkę. Czyta to hero.css — i dla scenerii, i dla długości
 * tracka w trybie spokojnym.
 *
 * DLACZEGO deklarowane na <body>, a nie na :root: wartość podstawia się tam,
 * gdzie jest zapisana, a `--to-admin-bar` ustawia właśnie <body> (klasą
 * `admin-bar`). Na :root ten wzór policzyłby się z zerem i pasek administratora
 * znów zacząłby przesuwać scenę.
 */
body {
	--to-scene-h: calc(
		100vh
		- var(--to-admin-bar)
		- var(--to-header-space)
		- var(--to-oneview-footer)
	);
}

/*
 * Na wąskim ekranie pasek administratora WordPressa NIE jest przyklejony —
 * odjeżdża razem ze stroną. Wtedy nasz pasek ma celować w samą górę okna,
 * inaczej zostałaby pod nim puste 46 px.
 */
@media screen and (max-width: 782px) {

	body.admin-bar {
		--to-admin-bar: 0px;
	}
}

.to-header {
	position: sticky;
	top: var(--to-admin-bar);
	z-index: 50;
	background-color: var(--to-bg);

	/*
	 * Kreska pod paskiem jako CIEŃ, nie `border-bottom`.
	 *
	 * DLACZEGO: obramowanie dolicza się do wysokości elementu, więc pasek
	 * miałby 77 px przy tokenie mówiącym 76 px. Ten jeden piksel różnicy
	 * to widoczny mikroskok scenerii hero w chwili przyklejenia — sceneria
	 * celuje w punkt z tokena. Cień rysuje się poza pudełkiem i nie zmienia
	 * wysokości, więc token pozostaje prawdą.
	 */
	box-shadow: 0 1px 0 rgb(46 66 56 / 0.1); /* atrament 10% */
}

.to-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--to-space-m);
	min-height: var(--to-header-h);
}

/*
 * `0 1 auto` — logo NIE rośnie, ale wolno mu się zwęzić.
 *
 * DLACZEGO to ważne: przy `flex: 0 0 auto` długa nazwa („Przedszkole Tajemniczy
 * Ogród") trzyma pełną szerokość i wypycha hamburger za krawędź ekranu. Efekt
 * to poziomy pasek przewijania na telefonie, a w trybie jednoekranowym również
 * stopka, która nie dochodzi do dołu okna — bo pasek przewijania zjada te
 * kilkanaście pikseli. `min-width: 0` jest konieczne, żeby zwężanie w ogóle
 * zadziałało: domyślnie element flex nie schodzi poniżej swojej treści.
 */
.to-header__brand {
	flex: 0 1 auto;
	min-width: 0;
}

/* Logo tekstowe — używane, dopóki nie wgrasz logo graficznego
 * w Wygląd → Dostosuj → Tożsamość witryny. */
.to-logo {
	font-family: var(--to-font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--to-text);
	text-decoration: none;
}

.to-logo:hover {
	color: var(--to-accent);
}

/*
 * Logo graficzne z Customizera.
 *
 * Istniejące logo placówki ma proporcje 1024 × 178, czyli przy wysokości 44 px
 * jest szerokie na ~253 px. Na telefonie zostałoby wtedy ~90 px na hamburger
 * i marginesy — dlatego oprócz wysokości ograniczamy SZEROKOŚĆ, a `height: auto`
 * pilnuje, żeby obrazek się nie zdeformował.
 */
.custom-logo {
	display: block; /* zdejmuje dolny odstęp, który obrazek inline zostawia pod sobą */
	max-height: 56px;
	max-width: min(100%, 280px);
	width: auto;
	height: auto;
}


/* ── MENU: komponent z podkreśleniem ───────────────────────────────────────
 *
 * Port `.mbw-nav` z biblioteki MyBeeWeb. Mechanika ta sama — krecha wjeżdża
 * od lewej — ale w kolorach i tempie tego projektu. Uzasadnienie każdej
 * zmiany: inc/nav.php.
 */
.to-nav {
	--to-nav-accent: var(--to-accent);   /* liść — NIE miód, ten jest od focusu */
	--to-nav-size: 1rem;
	--to-nav-gap: var(--to-space-m);
	--to-nav-line: 3px;                  /* grubość krechy */
}

.to-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--to-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.to-nav__list > .menu-item > a {
	position: relative;
	display: inline-block;
	padding-block: var(--to-space-2xs);
	color: var(--to-text);
	font-size: var(--to-nav-size);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
}

/*
 * KRECHA — `::after` schowana przez scaleX(0) i rozwijana od lewej krawędzi.
 *
 * DLACZEGO nie `text-decoration: underline`: podkreślenie tekstu nie da się
 * animować wzdłuż, a linia wjeżdżająca od lewej czyta się jako reakcja na
 * konkretny ruch użytkownika. Ruch jest tu na żądanie — pojawia się dopiero
 * na najechanie albo na fokus klawiatury, nigdy sam z siebie.
 */
.to-nav__list > .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--to-nav-line);
	border-radius: var(--to-radius-pill);
	background-color: var(--to-nav-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--to-transition);
}

/* Krecha zostaje pod stroną, na której właśnie jesteś — nawigacja ma
 * odpowiadać na pytanie „gdzie jestem", nie tylko „gdzie mogę pójść".
 * `current-menu-ancestor` łapie sytuację, gdy jesteś na podstronie pozycji. */
.to-nav__list > .menu-item > a:hover::after,
.to-nav__list > .menu-item > a:focus-visible::after,
.to-nav__list > .menu-item.current-menu-item > a::after,
.to-nav__list > .menu-item.current-menu-ancestor > a::after,
.to-nav__list > .menu-item.current-menu-parent > a::after {
	transform: scaleX(1);
}

/* ── Podmenu ───────────────────────────────────────────────────────────────
 * Jeden poziom. Otwiera się na najechanie ORAZ gdy fokus jest w środku —
 * to drugie jest warunkiem obsługi klawiaturą, nie ozdobą.
 * Zanim dodasz podmenu, przeczytaj uwagę w inc/nav.php: rozwijane listy są
 * dla tej grupy docelowej trudniejsze niż płaska nawigacja.
 */
.to-nav .menu-item-has-children {
	position: relative;
}

.to-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 15rem;
	margin: 0;
	padding: var(--to-space-2xs) 0;
	list-style: none;
	background-color: var(--to-bg);
	border-radius: var(--to-radius);
	box-shadow: 0 12px 30px rgb(46 66 56 / 0.14);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--to-transition), visibility var(--to-transition);
}

.to-nav .menu-item-has-children:hover > .sub-menu,
.to-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.to-nav .sub-menu > .menu-item > a {
	display: block;
	padding: var(--to-space-2xs) var(--to-space-s);
	color: var(--to-text);
	text-decoration: none;
	transition: background-color var(--to-transition);
}

.to-nav .sub-menu > .menu-item > a:hover,
.to-nav .sub-menu > .menu-item.current-menu-item > a {
	background-color: rgb(76 107 84 / 0.1); /* liść 10% */
}


/* ── HAMBURGER ─────────────────────────────────────────────────────────────
 * Ukryty domyślnie. Pokazywany tylko wtedy, gdy (a) ekran jest wąski
 * i (b) działa JavaScript — bo bez JS nie ma jak otworzyć szuflady, a przycisk,
 * który nic nie robi, jest gorszy niż jego brak. Bez JS menu zostaje w pasku
 * jako zawijana lista.
 */
.to-header__toggle {
	display: none;
	flex: 0 0 auto;
	width: 44px;   /* minimalny cel dotykowy 44 × 44 px */
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--to-radius-pill);
	background-color: transparent;
	color: var(--to-text);
	cursor: pointer;
}

.to-header__toggle:hover {
	background-color: rgb(76 107 84 / 0.1);
}

/* Trzy kreski z jednego elementu: sam pasek plus dwa cienie w tej samej
 * barwie. Mniej znaczników w HTML, a wygląd identyczny. */
.to-header__toggle-bars,
.to-header__toggle-bars::before,
.to-header__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: var(--to-radius-pill);
	background-color: currentColor;
}

.to-header__toggle-bars {
	position: relative;
	margin: 0 auto;
}

.to-header__toggle-bars::before,
.to-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.to-header__toggle-bars::before { top: -7px; }
.to-header__toggle-bars::after  { top: 7px; }


/* ── SZUFLADA ──────────────────────────────────────────────────────────────
 * Panel z prawej + przyciemnione tło. Oba elementy mają w HTML atrybut
 * `hidden`, który zdejmuje JavaScript — dzięki temu czytnik ekranu nie widzi
 * zamkniętej szuflady jako drugiego, zdublowanego menu.
 */
.to-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: rgb(46 66 56 / 0.45);
	opacity: 0;
	transition: opacity var(--to-transition);
}

.to-header__overlay.is-open {
	opacity: 1;
}

.to-mobile-nav {
	position: fixed;
	top: var(--to-admin-bar);
	right: 0;
	z-index: 210;
	width: min(320px, 85vw);

	/* dvh, nie vh — pasek adresu telefonu zmienia wysokość okna.
	 * Minus pasek administratora, żeby szuflada nie wychodziła pod ekran. */
	height: calc(100dvh - var(--to-admin-bar));
	padding: var(--to-space-xl) var(--to-space-m) var(--to-space-m);
	overflow-y: auto;
	background-color: var(--to-bg);
	box-shadow: -12px 0 30px rgb(46 66 56 / 0.18);
	transform: translateX(100%);
	transition: transform var(--to-transition);
}

.to-mobile-nav.is-open {
	transform: translateX(0);
}

.to-mobile-nav__close {
	position: absolute;
	top: var(--to-space-s);
	right: var(--to-space-s);
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--to-radius-pill);
	background-color: transparent;
	color: var(--to-text);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.to-mobile-nav__close:hover {
	background-color: rgb(76 107 84 / 0.1);
}

/* W szufladzie lista jest pionowa, a podmenu rozwinięte na stałe — na dotyku
 * nie ma „najechania", więc ukryte podmenu byłoby nieosiągalne. */
.to-mobile-nav .to-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: var(--to-space-2xs);
}

.to-mobile-nav .to-nav__list > .menu-item > a {
	padding-block: var(--to-space-xs);
	font-size: 1.1rem;
}

.to-mobile-nav .sub-menu {
	position: static;
	min-width: 0;
	padding: 0 0 var(--to-space-2xs) var(--to-space-s);
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
}

/* Blokada przewijania tła przy otwartej szufladzie — inaczej ruch palcem
 * przewija stronę pod panelem, co dezorientuje. */
body.to-menu-open {
	overflow: hidden;
}


/*
 * PRÓG ZWIJANIA MENU: 1024 px, nie 640 px jak w hero.
 *
 * Dwa różne progi w jednym motywie są celowe, bo ograniczenia są różne: hero
 * zwija się wtedy, gdy kompozycja ilustracji przestaje się mieścić, a menu —
 * gdy pozycje przestają się mieścić w jednej linii obok logo. Wiązanie ich
 * jedną liczbą znaczyłoby, że jedno psuje się po to, żeby drugie wyglądało.
 */
@media (max-width: 1024px) {

	:root {
		--to-header-h: 64px;

		/* Na wąskim ekranie stopka też schudza — każdy piksel zabrany
		 * ogrodowi boli tam bardziej, bo kadr jest już mocno docięty bokami. */
		--to-footer-h: 190px;
	}

	/* Menu w pasku znika TYLKO gdy jest czym je zastąpić. */
	.to-js .to-header__nav {
		display: none;
	}

	.to-js .to-header__toggle {
		display: block;
	}

	.custom-logo {
		max-height: 44px;
		max-width: min(100%, 200px);
	}

	/* Nazwa tekstem: mniejszy stopień, żeby zmieściła się obok hamburgera.
	 * Może zawinąć się na dwie linie — 1,15 rem × 1,2 to 2 × 32 px, czyli
	 * wciąż mniej niż 64 px paska. */
	.to-logo {
		font-size: 1.15rem;
		line-height: 1.2;
	}
}

/* Najwęższe telefony: jeszcze o stopień mniej, inaczej nazwa zjada cały pasek. */
@media (max-width: 420px) {

	.to-logo {
		font-size: 1rem;
	}
}


/* ════════════════════════════ 7. TREŚĆ ════════════════════════════ */

.to-main {
	/* Cel dla skip linku — bez tego przeskok fokusu bywa ignorowany. */
	scroll-margin-top: var(--to-space-m);
}

.to-entry__title {
	margin-bottom: var(--to-space-m);
}

.to-entry__content > * + * {
	margin-top: var(--to-space-s);
}

.to-entry__content h2,
.to-entry__content h3 {
	margin-top: var(--to-space-l);
}

/* Lista wpisów (na razie tylko fallback — strona nie ma jeszcze bloga). */
.to-post-list {
	display: grid;
	gap: var(--to-space-l);
}

.to-post-card__title {
	font-size: var(--to-fs-h3);
}

.to-post-card__title a {
	text-decoration: none;
}

/* Przycisk / CTA.
 *
 * UWAGA — ŚWIADOME ODSTĘPSTWO: zasada brandingowa mówi „nigdy tekst
 * na akcencie", ale przycisk bez wypełnienia nie czyta się jako przycisk.
 * Dlatego CTA ma papier na głębokim liściu — para #F3EDE0 na #3E5A46 daje
 * kontrast 7,4:1, czyli powyżej WCAG AAA (7:1). To ta sama para, którą
 * ma prototyp hero. Rozbieżność jest zanotowana i czeka na Twoją decyzję.
 */
.to-button {
	display: inline-block;
	padding: var(--to-space-xs) var(--to-space-l);
	border: 2px solid transparent;
	border-radius: var(--to-radius-pill);
	background-color: var(--to-accent-deep);
	color: var(--to-bg);
	font-weight: 700;
	font-size: var(--to-fs-small);
	text-decoration: none;
	transition: background-color var(--to-transition);
}

.to-button:hover {
	background-color: var(--to-accent);
	color: var(--to-bg);
}


/* ════════════════════════════ 8. STOPKA ════════════════════════════ */

.to-footer {
	margin-top: var(--to-space-2xl);
	padding-block: var(--to-space-l);
	border-top: 1px solid rgb(46 66 56 / 0.1);
	color: var(--to-text-soft);
	font-size: var(--to-fs-small);
}

.to-footer p {
	max-width: none;
}

/*
 * TRYB JEDNOEKRANOWY — stopka przyklejona do dołu okna.
 *
 * Widać ją od pierwszej sekundy, razem z paskiem i ogrodem, a przewijanie
 * zmienia wyłącznie porę dnia, bo pod hero nic nie ma (patrz front-page.php).
 *
 * `position: fixed`, nie `sticky`: strona jest wysoka na kilka ekranów (track
 * hero), więc stopka „na końcu dokumentu" leżałaby kilka ekranów niżej. Fixed
 * wyjmuje ją z przepływu i przypina do okna.
 *
 * `height`, nie `min-height`: wysokość jest budżetem z tokena --to-footer-h,
 * a sceneria hero jest o dokładnie tyle niższa. Gdyby stopka mogła rosnąć,
 * zaczęłaby zasłaniać dół ogrodu.
 *
 * Kreska u góry cieniem, nie obramowaniem — ten sam powód co przy pasku
 * nawigacji: `border` doliczyłby się do wysokości i budżet przestałby się zgadzać.
 */
body.to-oneview .to-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;

	/* Nad scenerią hero (jej sterowanie ma 6), pod paskiem (50) i szufladą (210). */
	z-index: 40;

	display: flex;
	align-items: center;
	height: var(--to-footer-h);
	margin-top: 0;
	padding-block: 0;
	border-top: none;
	box-shadow: 0 -1px 0 rgb(46 66 56 / 0.1); /* atrament 10% */
	background-color: var(--to-bg);
}