/*
Theme Name: Salon KOHA
Theme URI:
Author: Gogler
Description: Motyw strony Salonu KOHA (koha.com.pl) — natywny WordPress, SCF (sekcje Flexible Content), GSAP.
Version: 0.2.0
Requires at least: 6.3
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: koha-theme
*/

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENY — wynik KROKU 3 (pełne uzasadnienie: docs/design.md)

   Kierunek: „trzymamy się starej strony, poprawiamy układ, lekko odświeżamy”.
   KOLORYSTYKI NIE ZMIENIAMY.

   Wartości poniżej są ZMIERZONE na starej stronie (2026-09-29), nie dobrane na oko:
   tło #f6f5f4, tekst treści #464646, nagłówki i linki #1b211a, H2 38px Questrial
   wyśrodkowany, menu wersalikami 15px/1px, promienie 0, stopka czarna,
   kontener 1290px, hero pełnej szerokości. Dzięki temu strona jest tą samą stroną,
   tylko uporządkowaną — a nie nową identyfikacją.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 0. FONTY (lokalnie, OFL) ═══════════════════════════════════════════
   Te same kroje co na starej stronie, PRZYCIĘTE do znaków strony: łacinka, Latin-1, polskie litery
   i typografia („”–—…€™²). Jeden plik na krój zamiast dwóch podzbiorów latin + latin-ext:
   158 kB → 59 kB na pierwsze wejście (PageSpeed, 2026-09-30). Montserrat to font zmienny (oś wght).
   Znak spoza zestawu przeglądarka pokaże krojem zapasowym z --font-*. Odtworzenie plików: Google Fonts
   css2?family=…&text=<znaki> (lista znaków w PROJECT.md, sekcja PageSpeed). */
@font-face { font-family: Questrial; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/questrial-pl.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/montserrat-pl.woff2) format("woff2"); }

:root {
	/* Kolory — CAŁA paleta ze starej strony, bez zmian */
	--c-tekst: #1b211a;              /* atrament: nagłówki i linki */
	--c-tekst-tresc: #464646;        /* TEKST CIĄGŁY — tak jest na starej stronie */
	--c-tekst-slaby: #646464;        /* podpisy, meta */
	/* Było #9c9c9c (2,5:1 — za mało dla drobnych etykiet, audyt dostępności 2026-09-30).
	   #6f6f6f to najjaśniejszy szary z kontrastem ≥ 4,6:1 na tle strony i na bieli. */
	--c-tekst-bardzo-slaby: #6f6f6f; /* etykiety pomocnicze */
	--c-tlo: #f6f5f4;                /* tło strony (ciepłe) */
	--c-tlo-alt: #f5f6f8;            /* tło sekcji przemiennych (chłodne) */
	--c-biel: #ffffff;               /* karty, pola formularzy, pasy jasne */
	--c-linia: #dfe1e4;              /* włoskowate linie, ramki */
	--c-linia-ciemna: #2b2b2b;       /* linie na czarnym tle stopki */

	/* Akcent — ich błękit, bez zmian */
	--c-akcent: #4e8ba2;
	--c-akcent-tekst: #ffffff;
	/* Ten sam błękit przyciemniony WYŁĄCZNIE tam, gdzie kontrast tekstu tego wymaga:
	   #4e8ba2 na bieli daje 3,2:1, a norma dla tekstu to 4,5:1. */
	--c-akcent-tekst-kontrast: #2f6b82;
	/* Tło przycisków: ten sam błękit, minimalnie przyciemniony. Biały na #4e8ba2 dawał 3,79:1,
	   a drobny tekst przycisku wymaga 4,5:1 — #457c90 daje 4,64:1 (audyt dostępności 2026-09-30). */
	--c-akcent-przycisk: #457c90;

	/* Ciemny pas (stopka). Na starej stronie stopka jest CZARNA (`rgb(0,0,0)`),
	   a nie w kolorze atramentu — to widać od razu i o to prosił klient. */
	--c-ciemne-tlo: #000000;
	--c-ciemne-tekst: #ededed;
	--c-ciemne-tekst-slaby: #9a9a9a;

	/* Typografia — te same kroje co na starej stronie, uporządkowane role */
	--font-display: Questrial, "Trebuchet MS", sans-serif;                  /* nagłówki */
	--font-tekst: Montserrat, "Segoe UI", system-ui, sans-serif;            /* treść */
	--font-utility: Montserrat, "Segoe UI", system-ui, sans-serif;          /* wersaliki */

	/* Skala typograficzna (fluid). Górne granice są z pomiaru starej strony:
	   H2 38px, wyróżniony nagłówek 50px, tekst 20px. */
	--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: do 19px */
	--t-l: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
	--t-xl: clamp(1.55rem, 1.15rem + 1.7vw, 2.375rem); /* H2: do 38px */
	--t-xxl: clamp(1.9rem, 1.35rem + 2.3vw, 3.125rem); /* H1: do 50px */
	--t-hero: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);

	/* Miara i rytm tekstu */
	--miara: 66ch;
	--interlinia: 1.7;
	--tracking-display: -0.01em;
	--tracking-utility: 0.08em;      /* wynika z rozstrzelonego wordmarku K O H A */

	/* 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 — stara strona ma 100px na desktopie, 60px na mobile */
	--rytm-sekcji: clamp(3.5rem, 6vw, 6.25rem);

	/* Layout — szerokości ze starej strony */
	--szerokosc-kontenera: 1290px;
	--szerokosc-waska: 842px;
	--margines-boczny: clamp(1rem, 4vw, 2.5rem);
	--promien: 0;                    /* stara strona: promienie 0 wszędzie */
	--promien-pole: 2px;             /* tylko pola formularzy, żeby nie były ostre jak brzytwa */
	--wys-naglowka: 96px;
}

/* ═══ 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: 400;                /* Questrial ma tylko 400 — nie udajemy pogrubienia */
	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 — dokładnie jak na starej stronie. */
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); }

.ikona {
	width: 1.15em; height: 1.15em; fill: none; stroke: currentColor;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 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;  /* W H1: pole dotyku ≥ 44 px */ padding: var(--s-2) var(--s-4); }

/* Link „dalej” w stylu starej strony: 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 (decyzja klienta 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 (decyzja klienta 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 15px z rozstrzeleniem 1px — zmierzone na starej stronie. */
.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);
}

/* Pozycje menu, telefon i przycisk zawsze w jednej linii. Między 961 a 1199 px (pełne menu,
   ale wąski ekran) ciaśniejsze odstępy i mniejsze litery — przy 1024 px „O nas” i numer
   telefonu łamały się na dwie-trzy linie (audyt 2026-10-19). */
.nawigacja__lista a, .naglowek__telefon, .naglowek__cta { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1199px) {
	.naglowek__wnetrze, .nawigacja__lista { gap: var(--s-4); }
	.nawigacja__lista a { font-size: 0.875rem; letter-spacing: 0.03em; }
	.naglowek__cta { padding-inline: var(--s-4); }
}

.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 (prośba klienta 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 13 px nie spełniała W H1. */
	.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; } }