/* Zadna sekcja nie ma prawa rozpychac strony w bok. Na telefonie przewijanie
   poziome sprawia, ze tresc ucieka poza ekran - zdarzylo sie to przez plakietki
   statusu z white-space: nowrap. Guard + lamanie dlugich ciagow. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/*
Theme Name: Trega
Theme URI: https://github.com/EurodomRafal/Trega_www
Author: Trega
Description: Motyw blokowy marki Trega. Zawiera wyłącznie design system, szablony i patterny — dane produktowe należą do wtyczki trega-core, więc zmiana motywu nie usuwa treści.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trega-theme
Tags: full-site-editing, block-patterns, one-column, custom-colors, accessibility-ready
*/

/*
 * Design tokens żyją w theme.json. Ten plik zawiera tylko to, czego theme.json
 * nie umie wyrazić.
 */

/* Widoczny focus jest wymogiem, nie ozdobą — nie usuwać. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--deep-green);
	outline-offset: 2px;
}

.trega-skip-link {
	position: absolute;
	top: 0.75rem;
	left: -9999px;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--warm-white);
}

.trega-skip-link:focus-visible {
	left: 0.75rem;
}

.trega-model-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--deep-green);
}

/* NAGLOWEK
   Pasek rozciagal sie na 76rem, a tekst strony siedzi w kolumnie 46rem.
   Na szerokim monitorze menu odjezdzalo daleko w prawo i wisialo samotnie
   przy krawedzi, oderwane od tresci. Do tego czcionka 0,875rem byla za mala
   jak na nawigacje glowna.

   Wciagamy pasek do 62rem - miedzy kolumna tekstu a pelna szerokoscia.
   Logo i menu trzymaja sie wtedy tej samej osi co tresc, a menu nie ucieka. */

.trega-site-header__inner {
	gap: 2rem;
	max-width: 62rem;
	margin-inline: auto;
}

.trega-main-navigation {
	max-width: 100%;
}

.trega-main-navigation a {
	text-decoration: none;
	white-space: nowrap;
}

/* Czytelniejsza nawigacja: wiekszy stopien, wieksze odstepy miedzy pozycjami
   i wyrazniejszy odstep miedzyliterowy. Wysokosc 2,5rem daje wygodny cel
   kliknięcia takze myszka. */
.trega-main-navigation .wp-block-navigation__container {
	gap: 1.6rem;
}

.trega-main-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--wp--preset--color--deep-green);
	font-size: 0.975rem;
	font-weight: 500;
	letter-spacing: 0.005em;
}

/* Ksiega znaku: tekst w ciemnej zieleni, oliwka tylko jako akcent - wiec
   stan najechania to oliwkowe podkreslenie, nie oliwkowy tekst (4,27:1). */
.trega-main-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--deep-green);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--olive-green);
	text-underline-offset: 0.45em;
}

/* Aktualna strona jest zaznaczona - uzytkownik widzi, gdzie jest. */
.trega-main-navigation .current-menu-item > .wp-block-navigation-item__content,
.trega-main-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--deep-green);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--olive-green);
	text-underline-offset: 0.45em;
}

/* Logo nieco wieksze, zeby rownowazylo mocniejsze menu. */
.trega-brand-logo img {
	width: 168px !important;
	height: auto;
}

@media (max-width: 1100px) {
	.trega-site-header__inner {
		max-width: 100%;
	}

	.trega-main-navigation .wp-block-navigation__container {
		gap: 1.1rem;
	}

	.trega-main-navigation .wp-block-navigation-item__content {
		font-size: 0.925rem;
	}
}

.trega-home-hero__columns {
	gap: clamp(2rem, 5vw, 5rem);
}

/* Sekcja „Porozmawiajmy o tym wariancie".
   Byla ciezka: duzy naglowek, brak rytmu pionowego, przycisk siegajacy
   krawedzi. Teraz mniejsze odstepy na telefonie, wyrazna hierarchia
   i przycisk, ktory jest przyciskiem, a nie pasem. */

.trega-model-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: var(--wp--preset--spacing--50);
	padding: clamp(1.6rem, 5vw, 3rem);
	border-radius: 3px;
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--warm-white);
}

/* Uklad 'constrained' WordPressa nadaje dzieciom margin-inline: auto, zeby
   wysrodkowac je w kolumnie tresci. W kontenerze flex automatyczne marginesy
   WYGRYWAJA z align-items i centruja wszystko - dlatego cala sekcja wygladala
   na wysrodkowana, mimo ze reszta strony jest do lewej. Zerujemy je. */
.trega-model-contact > * {
	margin-inline: 0 !important;
	margin-block: 0;
	max-width: none;
	text-align: left;
}

.trega-model-contact h2 {
	/* 16ch lamalo naglowek po dwoch slowach. */
	max-width: 24ch;
	margin-top: 0;
	font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.trega-model-contact p:not(.trega-cta) {
	max-width: 46ch;
}

.trega-model-contact p:not(.trega-cta) {
	opacity: 0.92;
}

.trega-model-contact .trega-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.9rem;
	padding: 0.8rem 1.4rem;
	border-radius: 2px;
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--deep-green);
	font-weight: 600;
	text-decoration: none;
}

.trega-model-contact .trega-cta__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--warm-white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.trega-model-contact .trega-cta__button::after {
		transition: none;
	}

	.trega-model-contact .trega-cta__button:hover::after {
		transform: none;
	}
}

.trega-model-archive > .has-large-font-size {
	max-width: 42rem;
}

.trega-model-archive__notice {
	max-width: 48rem;
	margin-top: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--deep-green);
}

.trega-model-archive__query .wp-block-post-template {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.trega-model-archive__query .wp-block-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem 2rem;
	align-items: center;
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--natural-beige);
}

.trega-model-archive__query .wp-block-post-title,
.trega-model-archive__query .wp-block-post-excerpt {
	grid-column: 1;
	margin: 0;
}

.trega-model-archive__query .trega-model-archive__status,
.trega-model-archive__query .trega-model-archive__evidence {
	grid-column: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--deep-green);
}

.trega-model-archive__query .trega-model-archive__status a,
.trega-model-archive__query .trega-model-archive__evidence a {
	color: inherit;
	text-decoration: none;
}

.trega-model-archive__query .trega-model-archive__evidence {
	font-style: italic;
}

/* „Zobacz model" — sam tekst z delikatnym podkresleniem.

   Wczesniej byla tu wypelniona strzalka. Dominowala kadr i wygladala jak
   element z obcego szablonu - mocna, czarna, nieproporcjonalna do spokojnej
   typografii marki. Odnosnik i tak jest rozpoznawalny jako odnosnik, wiec
   nie potrzebuje ikony, zeby to oglosic. */

.trega-model-archive__link {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--deep-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--natural-beige);
	text-underline-offset: 0.35em;
	transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

.trega-model-archive__link:hover,
.trega-model-archive__link:focus-visible {
	color: var(--wp--preset--color--deep-green);
	text-decoration-color: var(--wp--preset--color--olive-green);
}

.trega-model-archive__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--deep-green);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.trega-model-archive__link {
		transition: none;
	}
}

/*
 * Hero na pelen ekran zamiast zdjecia-obok-tekstu.
 *
 * Poprzedni uklad (kolumna tekstu 43% + male zdjecie 57%) czynil pierwsze
 * wrazenie strony "po macoszemu" - zdjecie bylo dodatkiem, nie hakiem
 * (uwaga uzytkownika, 2026-09-19). Blok core/cover daje to za darmo:
 * zdjecie w tle na cala szerokosc i wysokosc ekranu, tekst na wierzchu,
 * przyciemnienie dla czytelnosci. Na telefonie wysokosc jest mniejsza,
 * zeby nie trzeba bylo przewijac przez caly ekran, zanim zobaczy sie tresc.
 */
.trega-home-hero {
	display: flex;
	/*
	 * Bylo flex-end (tekst na samym dole - obcinany przez UI przegladarki),
	 * potem center (zgloszenie 2026-09-21, poprawka 1). Ale center wciaz
	 * obcina tekst SYMETRYCZNIE gdy okno sie kurczy - polowa naglowka od
	 * gory i przyciski od dolu naraz. Uzytkownik chce, zeby zmniejszanie
	 * okna przesuwalo tekst KU GORZE, tak dlugo jak sie da, zamiast
	 * obcinac go z obu stron. flex-start daje wlasnie to: tekst startuje
	 * tuz pod naglowkiem i przy kurczeniu okna traci sie NAJPIERW dol
	 * zdjecia (niewidoczny w oczach), a naglowek+CTA zostaja widoczne
	 * najdluzej z mozliwych.
	 */
	align-items: flex-start;
	/*
	 * core/cover jest zagniezdzony w dwoch warstwach "is-layout-constrained"
	 * (main > post-content). Wbudowany mechanizm alignfull WordPressa znosi
	 * tylko padding NAJBLIZSZEGO rodzica, wiec zdjecie zatrzymywalo sie na
	 * szerokosci kolumny tresci zamiast siegac krawedzi ekranu. Klasyczna
	 * technika 100vw + ujemny margines dziala niezaleznie od zagniezdzenia.
	 */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/*
	 * BLAD 1 (impeccable critique 2026-09-21): kontener mial tylko
	 * min-height, nigdy height - procent wysokosci na obrazie position:
	 * absolute (height:100% z core WP) wymaga OKRESLONEJ wysokosci
	 * kontenera, inaczej przeglądarka skalowala obraz wg jego proporcji
	 * naturalnej przy pelnej szerokosci 100vw, co dawalo ~5000px.
	 *
	 * BLAD 2 (zgloszenie uzytkownika, tura pozniejsza): naprawa blad 1
	 * przez sztywny `height` na CALYM kontenerze miala efekt uboczny -
	 * gdy tekst (naglowek+opis+CTA) nie miescil sie w tej sztywnej
	 * wysokosci na waskim/niskim oknie, byl CIENIOWANY przez
	 * overflow:hidden z core WP, mimo align-items:flex-start.
	 *
	 * Rozwiazanie: min-height (nie height) na KONTENERZE, wiec rosnie,
	 * jesli tekst potrzebuje wiecej miejsca - tekst NIGDY nie jest
	 * przycinany. Zdjecie w tle dostaje wlasna, ODSEPAROWANA sztywna
	 * wysokosc (nie 100% rodzica) w regule ponizej - to ono, nie tekst,
	 * jest tym, co sie "kurczy" przy zmniejszaniu okna.
	 */
	min-height: min(85vh, 780px) !important;
}

/* Zdjecie w tle ma WLASNA, stala wysokosc, odseparowana od (rosnacego wraz
   z trescia) kontenera - to jest to, co odpowiada na zgloszenie uzytkownika
   "tekst ma byc widoczny w calosci, jak najdluzej": obraz sie przycina,
   tekst nigdy. */
.trega-home-hero > .wp-block-cover__image-background {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 100% !important;
	height: min(85vh, 780px) !important;
	object-fit: cover !important;
}

/* Przyciemnienie ma siegac tylko tak daleko, jak zdjecie pod nim - inaczej
   przy dluzszym (wiekszym niz zdjecie) kontenerze zostawaloby jak plaski
   ciemny pas pod fotografia. */
.trega-home-hero > .wp-block-cover__background {
	bottom: auto !important;
	height: min(85vh, 780px) !important;
}

.trega-home-hero__inner {
	max-width: 40rem;
	margin-inline: 0 !important;
	padding-inline: clamp(1.5rem, 6vw, 5rem);
}

.trega-home-hero h1 {
	max-width: none;
	color: var(--wp--preset--color--warm-white);
	font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
	line-height: 1.05;
}

.trega-home-hero .has-large-font-size {
	max-width: 31rem;
	color: var(--wp--preset--color--warm-white);
	font-size: clamp(1.1rem, 1.65vw, 1.4rem) !important;
	line-height: 1.5;
	opacity: 0.94;
}

.trega-home-hero .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

.trega-home-hero .wp-block-button .wp-block-button__link {
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--deep-green);
}

.trega-home-hero .wp-block-button .wp-block-button__link:hover,
.trega-home-hero .wp-block-button .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--warm-sand);
}

.trega-home-hero .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--warm-white);
}

.trega-home-hero .is-style-outline .wp-block-button__link:hover,
.trega-home-hero .is-style-outline .wp-block-button__link:focus-visible {
	background: rgba(252, 248, 245, 0.14);
}

.trega-home-hero__eyebrow {
	margin-bottom: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-sand);
}

/* Ramka "materiał roboczy" siada dyskretnie w rogu zdjecia, zamiast
   rozbijac kompozycje - widoczna tylko dla zalogowanego redaktora
   (patrz trega-core/demo-disclosure render.php). */
.trega-home-hero .trega-demo-disclosure {
	position: absolute;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	max-width: 22rem;
	z-index: 2;
}

@media (max-width: 782px) {
	.trega-home-hero {
		min-height: 70vh !important;
	}

	.trega-home-hero > .wp-block-cover__image-background,
	.trega-home-hero > .wp-block-cover__background {
		height: 70vh !important;
	}

	.trega-home-hero__inner {
		max-width: none;
	}

	.trega-home-hero .trega-demo-disclosure {
		position: static;
		margin-top: 1.25rem;
	}
}

.trega-home-pillars {
	border-top: 1px solid var(--wp--preset--color--natural-beige);
}

.trega-home-pillars__grid {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

.trega-home-pillars__grid > .wp-block-column {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 3px solid var(--wp--preset--color--olive-green);
}

.trega-home-pillars__grid h3 {
	margin-bottom: 0.75rem;
}

.trega-home-pillars__grid p {
	margin-top: 0;
}

.trega-home-models .wp-block-post-template {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.trega-home-models .wp-block-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem 2rem;
	align-items: center;
	padding: 1.5rem 0;
	border-top: 1px solid var(--wp--preset--color--natural-beige);
}

.trega-home-models .wp-block-post-title,
.trega-home-models .wp-block-post-excerpt {
	grid-column: 1;
	margin: 0;
}

.trega-home-models__link {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--deep-green);
	font-weight: 600;
	text-decoration: none;
}

.trega-home-models__link:hover,
.trega-home-models__link:focus-visible {
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--warm-white);
}

.trega-home-process {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--natural-beige);
}

.trega-home-process__intro {
	margin-left: 0;
	max-width: 46rem;
}

.trega-home-process__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
	counter-reset: trega-process;
}

.trega-home-process__steps li {
	position: relative;
	min-width: 0;
	min-height: 8.5rem;
	padding: 1.25rem 1.25rem 1.5rem 3.25rem;
	border-top: 1px solid var(--wp--preset--color--natural-beige);
	counter-increment: trega-process;
}

.trega-home-process__steps li::before {
	position: absolute;
	top: 1.05rem;
	left: 0;
	width: 2.25rem;
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--deep-green);
	content: counter(trega-process, decimal-leading-zero);
}

.trega-home-process__steps strong {
	display: block;
	font-size: clamp(1.05rem, 1.55vw, 1.35rem);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.trega-home-reasons {
	margin-top: var(--wp--preset--spacing--50);
}

.trega-home-reasons h2 {
	font-size: clamp(1.65rem, 2.5vw, 2.35rem) !important;
	line-height: 1.1;
}

.trega-home-reasons__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 3rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.trega-home-reasons__list li {
	padding: 0.95rem 0;
	border-top: 1px solid var(--wp--preset--color--natural-beige);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	font-weight: 600;
}

.trega-home-final-cta {
	max-width: 58rem;
	margin-left: 0;
}

.trega-home-final-cta h2 {
	max-width: 26ch;
	font-size: clamp(1.75rem, 2.8vw, 2.6rem) !important;
	line-height: 1.15;
}

@media (max-width: 900px) {
	.trega-site-header__inner {
		align-items: flex-start;
	}

	.trega-home-hero__columns {
		gap: 1.5rem;
	}

}

@media (max-width: 1100px) {
	.trega-home-hero__columns {
		flex-wrap: wrap !important;
	}

	.trega-home-hero__columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.trega-home-hero__columns > .wp-block-column:first-child {
		max-width: 42rem;
		flex-basis: 100% !important;
	}

	.trega-home-hero__columns > .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	.trega-home-hero h1 {
		max-width: 13ch;
	}

	.trega-home-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.trega-model-archive__query .wp-block-post {
		display: block;
	}

	.trega-model-archive__link {
		margin-top: 0.75rem;
	}

	.trega-home-models .wp-block-post {
		display: block;
	}

	.trega-home-models__link {
		margin-top: 0.75rem;
	}

	.trega-home-process__steps {
		grid-template-columns: 1fr;
	}

	.trega-home-process__steps li {
		min-height: 0;
	}

	.trega-home-reasons__list {
		grid-template-columns: 1fr;
	}
}

/* Oznaczenie rodzaju dowodu przy zdjęciu modelu. */
.trega-evidence {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.15em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep-green);
}

@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;
	}
}

/* ===============================================================
   MENU MOBILNE
   Domyslne menu nakladkowe WordPressa nie mialo zadnych wlasnych
   stylow: ikona 24 px, brak marginesow, biale tlo systemowe.
   Ponizej pelna oprawa w jezyku marki.
   =============================================================== */

/* --- Przycisk otwierajacy (hamburger) --- */

/* UWAGA: nie deklarujemy tu `display`. WordPress sam ukrywa ten przycisk
   powyzej 600 px przy ustawieniu overlayMenu:mobile, a wlasna deklaracja
   `display: flex` ma wyzsza specyficznosc i nadpisywala tamta regule -
   na desktopie pokazywala sie i pelna nawigacja, i hamburger.
   Uklad flex wlaczamy wylacznie w zakresie, w ktorym przycisk ma byc widoczny. */
.trega-main-navigation .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: 0.5rem;
	min-width: 48px;
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--natural-beige);
	border-radius: 2px;
	background: transparent;
	background-color: var(--wp--preset--color--pale-neutral);
	color: var(--wp--preset--color--deep-green);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.trega-main-navigation .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	font-family: var(--wp--preset--font-family--hk-grotesk);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.trega-main-navigation .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--pale-neutral);
	border-color: var(--wp--preset--color--olive-green);
}

.trega-main-navigation .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Przycisk byl w HTML i mial poprawna reguleCSS, ale na pelnej stronie WordPressa
   nie renderowal sie widocznie mimo poprawnej specyficznosci - potwierdzone
   izolowanym testem tego samego przycisku z tymi samymi arkuszami stylow
   (dziala) kontra pelna strona (nie dziala). Zamiast dalej scigac dokladna
   przyczyne w warstwach core CSS/Interactivity API, wymuszamy deterministyczne
   zachowanie ponizej i powyzej 600 px przez !important. */
@media (max-width: 599.98px) {
	.trega-main-navigation.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

@media (min-width: 600px) {
	.trega-main-navigation.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* --- Nakladka --- */

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	/* !important: styl WordPressa dla nakladki (bialy background-color na
	   .is-menu-open) wygrywal specyficznoscia mimo naszej reguly ponizej -
	   ten sam wzorzec obronny co przy przycisku hamburgera (dbc97f7). */
	background: var(--wp--preset--color--warm-white) !important;
	color: var(--wp--preset--color--deep-green) !important;
}

/* Sygnet utrzymuje markę widoczną także wtedy, gdy overlay renderuje tylko
   dzieci bloku nawigacji, bez logo z sąsiedniego bloku headera. */
.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1;
	width: 2.25rem;
	height: 2.25rem;
	background: url("assets/brand/trega-sygnet.svg") center / contain no-repeat;
	pointer-events: none;
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.25rem 1.25rem 3rem;
}

/* Przycisk zamykajacy */
.trega-main-navigation .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--natural-beige);
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--deep-green);
	cursor: pointer;
}

.trega-main-navigation .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--pale-neutral);
}

.trega-main-navigation .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* --- Lista pozycji w nakladce --- */

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0;
	width: 100%;
	margin-top: 2rem;
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--natural-beige);
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child {
	border-bottom: none;
}

/* Zaznaczenie aktualnej strony w nakladce mobilnej - bez tej reguly
   selektor nizej (4 klasy) wygrywal specyficznoscia z ogolna regula
   aria-current, zerujac podkreslenie: aria-current="page" bylo poprawnie
   ustawione w HTML, ale wizualnie NIEROZPOZNAWALNE - wszystkie pozycje
   wygladaly identycznie (audyt menu mobilnego, 2026-09-21). */
.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--olive-green);
	text-underline-offset: 0.3em;
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	/* 56 px wysokosci — wygodny cel dotykowy, z zapasem ponad wymagane 44 px */
	padding: 1.05rem 0.25rem;
	color: var(--wp--preset--color--deep-green);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-decoration: none;
	/* transform, nie padding-left: animowanie padding wymusza layout
	   (impeccable detector, 2026-09-21) - transform liczy tylko compositing. */
	transition: color 0.18s ease, transform 0.18s ease;
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	transform: translateX(0.6rem);
	color: var(--wp--preset--color--olive-green);
}

/* Ostatnia pozycja to Kontakt — wyrozniamy ja jako krok nastepny. */
.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	margin-top: 1.5rem;
	padding: 1.05rem 1.25rem;
	border-radius: 2px;
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--warm-white);
	text-align: center;
	font-size: 1.1rem;
}

.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child .wp-block-navigation-item__content:hover {
	padding-left: 1.25rem;
	background: var(--wp--preset--color--pale-neutral);
	color: var(--wp--preset--color--deep-green);
}

/* --- Fokus klawiatury w nakladce --- */

.trega-main-navigation .wp-block-navigation__responsive-container-open:focus-visible,
.trega-main-navigation .wp-block-navigation__responsive-container-close:focus-visible,
.trega-main-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--deep-green);
	outline-offset: 3px;
}

/* --- Bardzo male ekrany --- */

@media (max-width: 380px) {
	.trega-main-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		font-size: 1.2rem;
	}

	.trega-main-navigation .wp-block-navigation__responsive-container-open::after {
		display: none;
	}
}

/* ===============================================================
   ZNAK WODNY W STOPCE
   Sygnet Trega wychodzacy poza krawedz, widoczny mniej wiecej w polowie.
   Przeniesione z pierwotnej wersji strony (style.css:178, .transport-panel).
   Nie jest obrazkiem - to maska na kolorze marki, wiec nie generuje
   dodatkowego pobrania i skaluje sie bez utraty ostrosci.
   Czysta dekoracja: pointer-events:none i brak tresci dla czytnika ekranu.
   =============================================================== */

.trega-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.trega-footer::before {
	content: "";
	position: absolute;
	/* Wystaje poza prawa krawedz mniej wiecej jedna trzecia — dwie trzecie
	   znaku zostaja widoczne. Wczesniej bylo 0.06 i znak gubil sie w tle. */
	right: -9rem;
	bottom: -3rem;
	z-index: -1;
	width: clamp(17rem, 32vw, 28rem);
	height: clamp(17rem, 32vw, 28rem);
	background: var(--wp--preset--color--deep-green);
	-webkit-mask: url("assets/brand/trega-sygnet.svg") center / contain no-repeat;
	mask: url("assets/brand/trega-sygnet.svg") center / contain no-repeat;
	opacity: 0.11;
	pointer-events: none;
}

/* Na waskich ekranach znak schodzi nizej i maleje, zeby nie wchodzil pod tekst. */
/* Na telefonie tekst stopki zajmuje cala szerokosc, wiec znak schodzi
   nizej i slabnie, zeby nie czytac przez niego akapitow. */
@media (max-width: 600px) {
	.trega-footer::before {
		right: -6rem;
		bottom: -5rem;
		width: 15rem;
		height: 15rem;
		opacity: 0.08;
	}
}

.trega-footer__legal a {
	color: var(--wp--preset--color--deep-green);
	text-decoration-color: var(--wp--preset--color--natural-beige);
	text-underline-offset: 0.2em;
}

.trega-footer__legal a:hover,
.trega-footer__legal a:focus-visible {
	text-decoration-color: var(--wp--preset--color--olive-green);
}

/* Oznaczenia wpisu — rodzaj materiału i status danych.
   Stoja w SZABLONIE, nie w tresci: kazdy wpis jest oznaczony niezaleznie
   od tego, czy redaktor zostawil blok danych. Dokument 08 wymaga
   oznaczania kazdego niezatwierdzonego materialu. */
.trega-oznaczenia {
	gap: 0.5rem;
	margin-block: 0.85rem 1.25rem;
}

.trega-oznaczenia .wp-block-post-terms {
	margin: 0;
}

.trega-oznaczenia a {
	text-decoration: none;
	color: inherit;
	pointer-events: none;
}

/* Etapy maja dlugie, opisowe tytuly — hierarchia ma byc czytelna, nie krzykliwa. */
.single-trega_stage .wp-block-post-title {
	max-width: 46rem;
	margin-inline: auto;
	margin-block: 0.75rem;
	font-size: clamp(2rem, 3.3vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.trega-stage-title__krok,
.trega-stage-title__nazwa {
	display: block;
}

.trega-stage-title__krok {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.trega-stage-title__metraz {
	margin-bottom: 0.15em;
	color: var(--wp--preset--color--olive-green);
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.trega-stage-title__nazwa {
	margin-top: 0.1em;
}

@media (max-width: 600px) {
	.single-trega_stage .wp-block-post-title {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}
}

/* Stan najechania linkow w tresci: tekst zostaje w ciemnej zieleni (ksiega
   znaku - oliwka tylko jako akcent), zmienia sie grubosc i kolor podkreslenia. */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--olive-green);
	text-decoration-thickness: 2px;
}

/* W ciemnozielonym panelu kontaktu globalny kolor najechania (ciemna zielen)
   zniknalby na tle - tu linki jasnieja do piaskowego. */
.trega-model-contact a:not(.trega-cta__button):hover {
	color: var(--wp--preset--color--warm-sand);
}

/* Stopka miala tylko haslo i jeden link. Teraz prowadzi dalej: skroty do
   sekcji i wprost do kontaktu (krytyka impeccable 2026-09-19). */
.trega-footer__nav {
	margin-bottom: 0.4rem;
}

.trega-footer__nav a {
	text-decoration-color: var(--wp--preset--color--natural-beige);
	text-underline-offset: 0.2em;
}