/*
Theme Name: Agroturystyka Mostki
Theme URI:
Author: Gogler
Description: Motyw strony agroturystyki w Mostkach.
Version: 0.2.0
Requires at least: 6.3
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: agroturystykamostki-theme
*/

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENY — NEUTRALNE WARTOŚCI STARTERA. Podmieniasz je w KROKU 3 (uzasadnienie: docs/design.md).

   Nazwy tokenów są stałe — używa ich cały motyw (style.css + assets/css/sekcje.css). Zmieniasz
   WARTOŚCI, nie nazwy. Każdą parę tekst/tło sprawdź na kontrast ≥ 4,5:1 (drobny tekst, przyciski):
   w koha jasnoszare etykiety i biały tekst na jasnym akcencie oblały audyt dostępności PageSpeed.
   Przy przebudowie istniejącej strony wartości MIERZYMY na starej stronie, nie dobieramy na oko.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 0. FONTY (lokalnie) ════════════════════════════════════════════════
   Starter działa na krojach systemowych. Font projektu: jeden plik woff2 na krój, PRZYCIĘTY do znaków
   strony (instrukcja: assets/fonts/README.md). Wzór deklaracji — odkomentuj i podmień nazwy:
@font-face { font-family: Display; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/display-pl.woff2) format("woff2"); }
@font-face { font-family: Tekst; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/tekst-pl.woff2) format("woff2"); }
   Plik fontu nagłówków dostaje preload w agroturystykamostki_preload_fontu() (inc/enqueue.php). */

/* Fonty projektu (SIL OFL 1.1, teksty licencji obok plików): Barlow Condensed 600/700 do logo i nagłówków,
   Source Sans 3 (zmienny) do tekstu. Podział latin / latin-ext pokrywa polskie znaki. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-600-normal.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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-600-normal.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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-700-normal.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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-ext-700-normal.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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(assets/fonts/source-sans-3-latin-wght-normal.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; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(assets/fonts/source-sans-3-latin-ext-wght-normal.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; }

:root {
	/* Kolory */
	--c-tekst: #1B2630;
	--c-tekst-tresc: #2B3742;
	--c-tekst-slaby: #4A5866;
	--c-tekst-bardzo-slaby: #56636F;
	--c-tlo: #F0F5F9; /* Poranek: jasne niebo */
	--c-tlo-alt: #E3ECF3;
	--c-biel: #ffffff;               /* karty, pola formularzy, pasy jasne */
	--c-linia: #D3DEE7;
	--c-linia-ciemna: #3A536A;

	/* Akcent. Trzy warianty, bo jeden kolor rzadko spełnia wszystkie role:
	   --c-akcent (plamy, obramowania), --c-akcent-tekst-kontrast (tekst/linki na jasnym tle, ≥ 4,5:1),
	   --c-akcent-przycisk (tło przycisku pod białym tekstem, ≥ 4,5:1). */
	--c-akcent: #E8963A; /* Trzcina: złoto-pomarańczowy, przyciski i akcenty */
	--c-akcent-tekst: #24170A;
	--c-akcent-tekst-kontrast: #A45E12;
	--c-akcent-przycisk: #E8963A;

	/* Ciemny pas (stopka) */
	--c-ciemne-tlo: #233A4D; /* Zmierzch: ciemne sekcje i stopka */
	--c-ciemne-tekst: #F3F7FA;
	--c-ciemne-tekst-slaby: #C7D6E2;
	--c-niebo: #1C7FB8;             /* niebo i woda (echo błękitu starej strony): ikony */
	--c-niebo-jasne: #E2F2FB;
	--c-lampa: #F3B75A;             /* jasne złoto tylko na ciemnym tle */

	/* Typografia — role, nie kroje. Po dodaniu fontów wstaw ich nazwy na początek listy. */
	--font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
	--font-tekst: "Source Sans 3", system-ui, "Segoe UI", Roboto, sans-serif;
	--font-utility: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

	/* Skala typograficzna (fluid) */
	--t-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
	--t-s: clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
	--t-m: clamp(1rem, 0.95rem + 0.22vw, 1.1875rem);   /* tekst ciągły */
	--t-l: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
	--t-xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
	--t-xxl: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
	--t-hero: clamp(2.4rem, 1.7rem + 3.2vw, 4rem);

	/* Miara i rytm tekstu */
	--miara: 66ch;
	--interlinia: 1.7;
	--tracking-display: -0.01em;
	--tracking-utility: 0.08em;
	--waga-naglowkow: 600;

	/* Ikony */
	--ikona-grubosc: 1.5;
	--ikona-rozmiar: 1.15em;           /* kroje z jedną odmianą (np. tylko 400) → ustaw ich wagę, nie udawaj pogrubienia */

	/* Odstępy */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--s-24: 6rem;

	/* Rytm pionowy sekcji */
	--rytm-sekcji: clamp(2.75rem, 5vw, 4.75rem);

	/* Layout */
	--szerokosc-kontenera: 1320px;
	--szerokosc-waska: 842px;
	--margines-boczny: clamp(1rem, 4vw, 2.5rem);
	--promien: 0;
	--promien-pole: 2px;             /* pola formularzy */
	--wys-naglowka: 76px;
}

/* ═══ 2. RESET / BAZA ═════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--c-tlo);
	color: var(--c-tekst-tresc);
	font-family: var(--font-tekst);
	font-size: var(--t-m);
	line-height: var(--interlinia);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--waga-naglowkow);
	line-height: 1.25;
	color: var(--c-tekst);
	margin: 0 0 var(--s-4);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: 0; }
h4 { font-size: var(--t-m); letter-spacing: 0; }
p, ul, ol { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }

/* Linki: kolor atramentu i podkreślenie. */
a { color: var(--c-tekst); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 600; color: var(--c-tekst); }

/* Widoczny fokus klawiatury — nie usuwaj bez zamiennika (a11y). */
:focus-visible { outline: 2px solid var(--c-akcent); outline-offset: 2px; }

/* ═══ 3. POMOCNICZE ═══════════════════════════════════════════════════════ */
.kontener {
	width: 100%;
	max-width: var(--szerokosc-kontenera);
	margin-inline: auto;
	padding-inline: var(--margines-boczny);
}
.kontener.waski { max-width: var(--szerokosc-waska); }

.tylko-dla-czytnikow {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pomin-do-tresci {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--c-tekst); color: var(--c-tlo); padding: var(--s-3) var(--s-4);
}
.pomin-do-tresci:focus { left: var(--s-4); top: var(--s-4); }

/* Ikony: Tabler Icons (MIT), sprite w assets/ikony/sprite.svg (skrypt wzorce/ikony-sprite.mjs) — symbole nie
   mają własnych atrybutów prezentacyjnych, więc cały wygląd pochodzi stąd. Kolor dziedziczy currentColor. */
.ikona {
	width: var(--ikona-rozmiar); height: var(--ikona-rozmiar);
	fill: none; stroke: currentColor;
	stroke-width: var(--ikona-grubosc); stroke-linecap: round; stroke-linejoin: round;
	flex: 0 0 auto;
}

/* ── Przyciski ────────────────────────────────────────────────────────────
   Stara strona ma przyciski tekstowe, wersalikami, bez wypełnienia i bez promienia.
   Zostawiamy jej litery (wersaliki + rozstrzelenie, promień 0), ale głównemu wezwaniu
   dajemy wypełnienie: to jedyna „nowoczesność”, która się tu broni, bo cała strona
   prowadzi do jednego działania i ono musi być widoczne z odległości.
   Touch target ≥ 44×44 px (WCAG 2.5.5). */
.przycisk {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: var(--s-3) var(--s-8);
	background: var(--c-akcent-przycisk); color: var(--c-akcent-tekst);
	border: 1px solid var(--c-akcent-przycisk); border-radius: var(--promien);
	font-family: var(--font-utility);
	font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.przycisk:hover { background: var(--c-akcent-tekst-kontrast); border-color: var(--c-akcent-tekst-kontrast); color: #fff; }

.przycisk--obrys {
	background: transparent;
	color: var(--c-tekst);
	border-color: var(--c-linia);
}
.przycisk--obrys:hover { background: var(--c-tekst); border-color: var(--c-tekst); color: var(--c-tlo); }

.przycisk--maly { min-height: 44px;  /* pole dotyku ≥ 44 px */ padding: var(--s-2) var(--s-4); }

/* Link „dalej”: wersaliki, podkreślenie, bez tła. */
.link-dalej {
	display: inline-block;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst);
}

/* Nadtytuł i lead — wspólne dla sekcji i szablonów. */
.nadtytul {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst-bardzo-slaby);
	margin-bottom: var(--s-3);
}
/* Teksty pod nagłówkami BEZ max-width (reguła przestrzeni od koha, 2026-09-30) — szerokość daje kontener. */
.lead-strony,
.lead-sekcji {
	font-size: var(--t-l); line-height: 1.55; color: var(--c-tekst-slaby);
}

/* Kotwice nie wjeżdżają pod przyklejony nagłówek */
[id] { scroll-margin-top: calc(var(--wys-naglowka) + var(--s-4)); }

/* ═══ 4. TREŚĆ REDAKCYJNA (.tresc) ════════════════════════════════════════ */
/* Tekst wypełnia szerokość swojej sekcji (reguła przestrzeni od koha, 2026-09-29) —
   bez limitu długości wiersza, który zwężał treść do środka. */
.tresc { max-width: none; }
.tresc > :last-child { margin-bottom: 0; }
.tresc h2, .tresc h3 { margin-top: var(--s-12); }
.tresc ul, .tresc ol { padding-left: 1.3em; }
.tresc li + li { margin-top: var(--s-2); }
.tresc blockquote {
	margin: var(--s-8) 0; padding-left: var(--s-6);
	border-left: 2px solid var(--c-akcent); color: var(--c-tekst-slaby);
	font-size: var(--t-l);
}
.tresc table { width: 100%; border-collapse: collapse; margin: var(--s-8) 0; font-size: var(--t-s); }
.tresc th, .tresc td { padding: var(--s-3); border-bottom: 1px solid var(--c-linia); text-align: left; }
.tresc th { background: var(--c-tlo-alt); font-family: var(--font-utility); font-size: var(--t-xs); letter-spacing: var(--tracking-utility); text-transform: uppercase; }
.tresc figure { margin: var(--s-8) 0; }
.tresc figcaption { font-size: var(--t-xs); color: var(--c-tekst-slaby); margin-top: var(--s-2); }
.tresc .alignright { float: right; margin: 0 0 var(--s-4) var(--s-6); }
.tresc .alignleft { float: left; margin: 0 var(--s-6) var(--s-4) 0; }
.tresc .aligncenter { margin-inline: auto; }

/* ═══ 5. NAGŁÓWEK ═════════════════════════════════════════════════════════
   Stara strona: wysokość ~102px, tło = tło strony, BEZ kreski pod spodem.
   Kreska pojawia się dopiero po przewinięciu, żeby nagłówek nie odcinał hero. */
.naglowek {
	position: sticky; top: 0; z-index: 50;
	background: var(--c-tlo);
	transition: box-shadow .2s ease;
}
.naglowek.jest-przewiniety { box-shadow: 0 1px 0 var(--c-linia); }

.naglowek__wnetrze {
	display: flex; align-items: center; gap: var(--s-8);
	min-height: var(--wys-naglowka);
}
.marka { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-right: auto; }
.marka__logo { max-height: 46px; width: auto; }
.marka__wordmark { display: grid; font-family: var(--font-display); line-height: 1.1; letter-spacing: var(--tracking-utility); }
.marka__dol { font-size: var(--t-xs); color: var(--c-tekst-slaby); }

/* Menu wersalikami z lekkim rozstrzeleniem. */
.nawigacja__lista { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nawigacja__lista a {
	display: inline-flex; align-items: center; min-height: 44px;
	font-family: var(--font-display); font-size: 0.9375rem;
	letter-spacing: 0.067em; text-transform: uppercase;
	color: var(--c-tekst); text-decoration: none;
}
.nawigacja__lista > li > a:hover { text-decoration: underline; text-underline-offset: 0.5em; }

/* Rozwijane podmenu. Bez JS: `:hover` dla myszy, `:focus-within` dla klawiatury —
   pozycja rozwija się też przy przejściu tabulatorem, więc nie trzeba osobnego skryptu.
   `menu-item-has-children` i `sub-menu` to klasy WordPressa, nie nasze. */
.nawigacja__lista li { position: relative; }
.nawigacja__lista .sub-menu {
	position: absolute; top: 100%; left: calc(-1 * var(--s-4)); z-index: 60;
	display: none; min-width: 16rem;
	margin: 0; padding: var(--s-3) 0; list-style: none;
	background: var(--c-biel); border: 1px solid var(--c-linia);
	box-shadow: 0 12px 28px rgb(27 33 26 / 0.08);
}
.nawigacja__lista li:hover > .sub-menu,
.nawigacja__lista li:focus-within > .sub-menu { display: block; }
.nawigacja__lista .sub-menu a {
	display: flex; padding-inline: var(--s-6);
	font-size: var(--t-s); letter-spacing: 0.02em; text-transform: none;
	font-family: var(--font-tekst); color: var(--c-tekst-tresc);
}
.nawigacja__lista .sub-menu a:hover { background: var(--c-tlo-alt); color: var(--c-tekst); }

/* Strzałka przy pozycji z podmenu: informacja, że jest co rozwinąć. */
.nawigacja__lista .menu-item-has-children > a::after {
	content: ""; flex: 0 0 auto; margin-left: var(--s-2);
	width: 0.35em; height: 0.35em;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.naglowek__telefon {
	display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	text-decoration: none; color: var(--c-tekst);
}

.menu-przycisk { display: none; min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; color: var(--c-tekst); }

/* ═══ 6. OKRUSZKI ═════════════════════════════════════════════════════════ */
.okruszki { font-size: var(--t-xs); background: var(--c-tlo); }
.okruszki__lista {
	display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none;
	margin: 0; padding: var(--s-4) 0 0;
	font-family: var(--font-utility); letter-spacing: 0.04em;
	color: var(--c-tekst-bardzo-slaby);
}
.okruszki__lista a { color: var(--c-tekst-slaby); text-decoration: none; }
.okruszki__lista a:hover { text-decoration: underline; }
.okruszki__pozycja + .okruszki__pozycja::before { content: "/"; margin-right: var(--s-2); color: var(--c-tekst-bardzo-slaby); }

/* ═══ 7. STOPKA ═══════════════════════════════════════════════════════════
   Stara strona ma stopkę CZARNĄ — to najmocniejszy sygnał „ta sama strona”,
   więc zostaje ciemna, tylko z uporządkowaną siatką i czytelnym kontrastem. */
.stopka {
	background: var(--c-ciemne-tlo); color: var(--c-ciemne-tekst);
	margin-top: var(--rytm-sekcji);
}
.stopka a { color: var(--c-ciemne-tekst); }
.stopka a:hover { color: #fff; }
.stopka__siatka {
	display: grid; gap: var(--s-8) var(--s-12); padding-block: var(--rytm-sekcji) var(--s-12);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stopka__logo { max-height: 52px; width: auto; filter: invert(1) brightness(1.6); }
.stopka__nazwa { font-family: var(--font-display); color: var(--c-ciemne-tekst); margin: var(--s-4) 0 var(--s-2); }
.stopka__tagline { color: var(--c-ciemne-tekst-slaby); font-size: var(--t-s); max-width: 34ch; }
.stopka__tytul-kolumny {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-ciemne-tekst-slaby); margin-bottom: var(--s-4);
}
.stopka__kolumna ul { list-style: none; padding: 0; margin: 0; }
/* Kolumna z menu stopki bywa długa (9 pozycji „pozostałej oferty"), więc na szerokim
   ekranie łamiemy ją na dwie — inaczej rozciąga stopkę na wysokość reszty razem wziętej. */
@media (min-width: 900px) {
	.stopka__kolumna--menu ul { columns: 2; column-gap: var(--s-8); }
	.stopka__kolumna--menu li { break-inside: avoid; }
	.stopka__kolumna--menu li + li { margin-top: 0; }
	.stopka__kolumna--menu li { padding-block: calc(var(--s-3) / 2); }
}
.stopka__kolumna li + li { margin-top: var(--s-3); }
.stopka__kolumna a { text-decoration: none; }
.stopka__kolumna a:hover { text-decoration: underline; }
.stopka__dol {
	padding-block: var(--s-6); border-top: 1px solid var(--c-linia-ciemna);
	font-size: var(--t-xs); color: var(--c-ciemne-tekst-slaby);
}
.social { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.social a {
	display: inline-flex; min-width: 44px; min-height: 44px;
	align-items: center; justify-content: center;
	border: 1px solid var(--c-linia-ciemna);
}
.social a:hover { border-color: var(--c-ciemne-tekst); }

/* ═══ 8. MOBILE ═══════════════════════════════════════════════════════════ */
/* Przycisk rozwijania podmenu istnieje tylko w menu mobilnym. */
.podmenu-przelacznik { display: none; }
@media (max-width: 960px) {
	:root { --wys-naglowka: 72px; }
	.menu-przycisk { display: inline-flex; align-items: center; justify-content: center; order: 3; }
	.naglowek__wnetrze { gap: var(--s-4); }
	.nawigacja { display: none; }
	.nawigacja.jest-otwarte {
		display: block; position: absolute; inset: var(--wys-naglowka) 0 auto;
		max-height: calc(100vh - var(--wys-naglowka)); overflow-y: auto;
		background: var(--c-tlo); border-top: 1px solid var(--c-linia);
		box-shadow: 0 16px 32px rgb(27 33 26 / 0.1);
		padding: var(--s-4) var(--margines-boczny) var(--s-8);
	}
	.nawigacja.jest-otwarte .nawigacja__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.nawigacja.jest-otwarte .nawigacja__lista > li > a { border-bottom: 1px solid var(--c-linia); }
	/* Podmenu na telefonie: zwinięte, rozwija je przycisk ze strzałką obok pozycji (app.js).
	   Tekst pozycji głównej zostaje linkiem do jej strony (koha, 2026-09-30). */
	.nawigacja.jest-otwarte .nawigacja__lista > .menu-item-has-children {
		display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: stretch;
	}
	.nawigacja.jest-otwarte .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
	.nawigacja.jest-otwarte .nawigacja__lista .menu-item-has-children > .sub-menu { display: none; }
	.nawigacja.jest-otwarte .nawigacja__lista .menu-item-has-children.is-otwarte > .sub-menu { display: block; }
	.podmenu-przelacznik {
		display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
		background: none; border: 0; border-bottom: 1px solid var(--c-linia); cursor: pointer; color: var(--c-tekst);
	}
	.podmenu-przelacznik span {
		width: 0.55em; height: 0.55em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
		transform: translateY(-0.15em) rotate(45deg); transition: transform .2s ease;
	}
	.is-otwarte > .podmenu-przelacznik span { transform: translateY(0.15em) rotate(225deg); }
	.nawigacja.jest-otwarte .sub-menu {
		position: static; min-width: 0;
		/* Na mobile podmenu jest częścią rozwiniętej listy, nie dymkiem — bez własnego
		   tła i cienia, inaczej wygląda jak karta wklejona w środek menu. */
		background: transparent; border: 0; box-shadow: none;
		padding: var(--s-2) 0 var(--s-4) var(--s-4);
	}
	.nawigacja.jest-otwarte .menu-item-has-children > a::after { display: none; }
	/* Numer chowamy, ale zostaje etykieta „Zadzwoń” — sama ikona nie spełniała minimum dotyku 44 px. */
	.naglowek__numer { display: none; }
	.naglowek__telefon .naglowek__zadzwon { display: inline; }  /* wyższa specyficzność: reguła bazowa stoi niżej */
	.naglowek__telefon { padding-inline: var(--s-3); border: 1px solid var(--c-tekst); }
}
.naglowek__zadzwon { display: none; }
.naglowek__cta { white-space: nowrap; }
/* Na wąskim telefonie zostaje „Zadzwoń” i hamburger; pomiar jest w hero i w menu. */
@media (max-width: 640px) { .naglowek__cta { display: none; } }

/* Stopka wyśrodkowana na mobile */
@media (max-width: 760px) {
	.stopka__siatka { text-align: center; }
	.stopka__marka { display: flex; flex-direction: column; align-items: center; }
	.stopka__tagline { margin-inline: auto; }
	.social { justify-content: center; }
}

/* ═══ 9. DROBIAZGI, KTÓRE ZOSTAŁY BEZ STYLU ═══════════════════════════════
   Wyłapane audytem `cms/narzedzia/audyt-ukladu.mjs`: klasa użyta w znacznikach,
   dla której nie było ŻADNEJ reguły. Najgorszy przypadek to hamburger — pusty
   <span> bez stylu jest po prostu niewidoczny, więc menu na telefonie nie istniało. */

/* Hamburger rysujemy trzema kreskami na jednym elemencie (środkowa to tło,
   skrajne to cienie) — bez dodatkowych węzłów w znacznikach. */
.menu-przycisk__kreski,
.menu-przycisk__kreski::before,
.menu-przycisk__kreski::after {
	display: block; width: 22px; height: 1.5px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.menu-przycisk__kreski { position: relative; }
.menu-przycisk__kreski::before,
.menu-przycisk__kreski::after { content: ""; position: absolute; left: 0; }
.menu-przycisk__kreski::before { top: -7px; }
.menu-przycisk__kreski::after { top: 7px; }

/* Otwarte menu: hamburger zamienia się w krzyżyk — ten sam przycisk zamyka. */
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski { background: transparent; }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::before { transform: translateY(7px) rotate(45deg); }
.menu-przycisk[aria-expanded="true"] .menu-przycisk__kreski::after { transform: translateY(-7px) rotate(-45deg); }

/* Kolumna kontaktowa w stopce — <address> bywa kursywą, a telefon i e-mail
   mają być czytelne jak lista, nie jak akapity. */
.stopka__kontakt p { margin-bottom: var(--s-3); }
.stopka__kontakt address { font-style: normal; color: var(--c-ciemne-tekst-slaby); margin-top: var(--s-4); }
.stopka__kontakt a { text-decoration: none; }
.stopka__kontakt a:hover { text-decoration: underline; }

/* Krótka strona nie może zostawić stopki w połowie ekranu. */
.tresc-glowna { display: block; min-height: 50vh; }

/* Stopka: godziny w kontakcie i linki informacyjne w pasku na dole (2026-09-30). */
.stopka__godziny { margin-top: var(--s-4); color: var(--c-ciemne-tekst-slaby); font-size: var(--t-s); line-height: 1.7; }
.stopka__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-8); }
.stopka__linki-dol ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
.stopka__linki-dol a { color: var(--c-ciemne-tekst-slaby); text-decoration: none; }
.stopka__linki-dol a:hover { color: #fff; text-decoration: underline; }
/* Etykieta grupy w menu (bez adresu) wygląda jak pozostałe pozycje. */
.nawigacja__lista a:not([href]) { cursor: default; }
@media (max-width: 760px) { .stopka__dol { justify-content: center; text-align: center; } }