/* =========================================================
   Motyw „Studio Detailing” – style globalne
   ---------------------------------------------------------
   Kolory, fonty i odstępy pochodzą WYŁĄCZNIE ze zmiennych
   theme.json (--wp--preset--*, --wp--custom--*), więc zmiana
   w Edytorze witryny → Style zmienia cały wygląd.
   Sekcje z efektami mają własne style we wtyczce „Studio Bloki”.
   ========================================================= */

:root {
	/* Krótkie aliasy – czytelniejszy CSS niżej */
	--s-tlo: var(--wp--preset--color--tlo);
	--s-pow: var(--wp--preset--color--powierzchnia);
	--s-pow-2: var(--wp--preset--color--powierzchnia-2);
	--s-tekst: var(--wp--preset--color--tekst);
	--s-tekst-2: var(--wp--preset--color--tekst-2);
	--s-wycisz: var(--wp--preset--color--wyciszony);
	--s-akcent: var(--wp--preset--color--akcent);
	--s-akcent-2: var(--wp--preset--color--akcent-2);
	--s-na-akcencie: var(--wp--preset--color--na-akcencie);
	--s-linia: var(--wp--custom--linia);
	--s-pad: var(--wp--custom--pad);
	--s-ease: var(--wp--custom--ease);
	--s-naglowek-h: var(--wp--custom--naglowek-h);
	--s-f-naglowki: var(--wp--preset--font-family--naglowki);
}

*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
:where(img, video) { max-width: 100%; height: auto; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* Widoczny fokus dla każdego elementu interaktywnego (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 2px solid var(--s-akcent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Tekst tylko dla czytników ekranu */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* „Przejdź do treści” – widoczny po Tabie */
.skip-link:focus {
	clip: auto; clip-path: none; width: auto; height: auto; margin: 0;
	left: 1rem; top: 1rem; z-index: 1000;
	padding: .8em 1.2em; background: var(--s-akcent); color: var(--s-na-akcencie);
	font-weight: 600; text-decoration: none;
}

/* Kotwice sekcji nie chowają się pod przyklejonym nagłówkiem */
[id] { scroll-margin-top: calc(var(--s-naglowek-h) + 1rem); }

/* Linki w treści: podkreślenie zawsze, nie tylko kolor (WCAG 1.4.1) */
.entry-content a:not(.wp-element-button) { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Przycisk – wariant „obrys” */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--s-tekst); color: var(--s-tlo); border-color: var(--s-tekst);
}

/* =========================================================
   Warianty stylów bloków (wybór w panelu „Style” bloku)
   ========================================================= */
p.is-style-kicker {
	font: 600 var(--wp--preset--font-size--xs) / 1.3 var(--s-f-naglowki);
	letter-spacing: .22em; text-transform: uppercase; color: var(--s-akcent);
}
.wp-block-group.is-style-karta {
	background: var(--s-pow); border: 1px solid var(--s-linia);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}
ul.is-style-linki { list-style: none; padding-left: 0; }
ul.is-style-linki a { text-decoration: none; color: inherit; line-height: 2; }
ul.is-style-linki a:hover { color: var(--s-tekst); }

/* =========================================================
   NAGŁÓWEK (część szablonu „Nagłówek”)
   ========================================================= */
.naglowek {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	min-height: var(--s-naglowek-h);
	padding: .75rem var(--s-pad);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--s-tlo) 92%, transparent), transparent);
	transition: background .4s var(--s-ease);
}
/* Po przewinięciu nagłówek dostaje pełne tło – tekst zawsze czytelny */
.naglowek.jest-przewiniety { background: color-mix(in srgb, var(--s-tlo) 94%, transparent); }
.admin-bar .naglowek { top: var(--wp-admin--admin-bar--height, 32px); }

.naglowek .wp-block-site-logo img { max-height: 44px; width: auto; }
/* Jeśli jest logo, nazwa witryny zostaje tylko dla czytników */
.naglowek .wp-block-site-logo + .wp-block-site-title {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.naglowek .wp-block-site-title a::after { content: "."; color: var(--s-akcent); }
.naglowek__tel a { color: var(--s-tekst); text-decoration: none; font-weight: 500; white-space: nowrap; }
.naglowek__tel a:hover { color: var(--s-akcent); }
@media (max-width: 860px) { .naglowek__tel { display: none; } }

/* Przycisk „Menu” */
.naglowek .wp-block-navigation__responsive-container-open,
.naglowek .wp-block-navigation__responsive-container-close {
	border: 1px solid var(--s-linia); padding: .6em 1.2em; color: var(--s-tekst);
	font: 600 .8rem/1 var(--s-f-naglowki); letter-spacing: .12em; text-transform: uppercase;
}
.naglowek .wp-block-navigation__responsive-container-open:hover,
.naglowek .wp-block-navigation__responsive-container-close:hover { border-color: var(--s-tekst); }
.naglowek .wp-block-navigation__responsive-container-close {
	top: calc(var(--s-naglowek-h) / 2 - 1.1rem); right: var(--s-pad);
}

/* Menu pełnoekranowe */
.naglowek .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--s-pow); color: var(--s-tekst);
	padding: calc(var(--s-naglowek-h) + 1rem) var(--s-pad) var(--s-pad);
	animation: menu-wjazd .65s var(--s-ease) both;
}
.naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start; justify-content: center; padding-top: 0;
}
.naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start; gap: .25rem;
}
.naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font: 600 clamp(1.8rem, 6vw, 4.5rem) / 1.15 var(--s-f-naglowki);
	letter-spacing: -.01em; text-transform: uppercase; color: var(--s-tekst);
	transition: color .3s, transform .5s var(--s-ease);
}
.naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--s-akcent); transform: translateX(1rem);
}
@keyframes menu-wjazd {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* =========================================================
   GŁÓWNA TREŚĆ
   ========================================================= */
main#tresc:focus { outline: none; }

/* Nagłówek podstrony: okruszki + H1 */
.pod-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding-top: calc(var(--s-naglowek-h) + clamp(4rem, 10vw, 8rem));
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
	border-bottom: 1px solid var(--s-linia);
}
.pod-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 120% at 20% 0%, color-mix(in srgb, var(--s-akcent) 10%, transparent), transparent 70%);
}
.pod-hero .wp-block-post-title { max-width: 22ch; }

/* Okruszki (Rank Math) */
.rank-math-breadcrumb { font-size: var(--wp--preset--font-size--s); color: var(--s-wycisz); }
.rank-math-breadcrumb p { margin: 0; color: inherit; }
.rank-math-breadcrumb a { color: var(--s-tekst-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--s-linia); }
.rank-math-breadcrumb a:hover { color: var(--s-akcent); text-decoration-color: currentColor; }
.rank-math-breadcrumb .separator { margin: 0 .4em; }

/* Treść wpisów i stron */
.entry-content > * + h2 { margin-top: 2.5rem; }
.entry-content > * + h3 { margin-top: 2rem; }
:where(.entry-content img) { height: auto; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content :where(td, th) { border: 1px solid var(--s-linia); padding: .75em; text-align: left; }
.entry-content figcaption { color: var(--s-wycisz); }

/* Lista wpisów (archiwum, „Zobacz też”) */
.lista-wpisow { border: 1px solid var(--s-linia); }
.lista-wpisow .wp-block-post { border-bottom: 1px solid var(--s-linia); margin: 0; }
.lista-wpisow .wp-block-post:last-child { border-bottom: 0; }
.lista-wpisow .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--m); font-family: var(--wp--preset--font-family--tekst); font-weight: 500; letter-spacing: 0; }
.lista-wpisow .wp-block-post-title a {
	display: block; padding: 1rem; text-decoration: none; color: var(--s-tekst);
	transition: background .3s var(--s-ease), color .3s var(--s-ease);
}
.lista-wpisow .wp-block-post-title a:hover { background: var(--s-pow); color: var(--s-akcent); }
.lista-wpisow__tytul {
	font: 600 var(--wp--preset--font-size--xs) / 1 var(--s-f-naglowki);
	letter-spacing: .18em; text-transform: uppercase; color: var(--s-akcent-2);
}

/* Paginacja */
.wp-block-query-pagination a { color: var(--s-tekst); }
.wp-block-query-pagination .current { color: var(--s-akcent); }

/* Sekcja kontaktu na stronie głównej: etykiety danych (TELEFON, ADRES, E-mail) */
.studio-kontakt__etykieta {
	font-family: var(--s-f-naglowki); font-weight: 600;
	font-size: .8rem !important; letter-spacing: .18em; text-transform: uppercase;
	color: var(--s-akcent); margin: 0 0 .4rem;
}
.studio-kontakt .wp-block-column > p:not(.studio-kontakt__etykieta) { margin: 0 0 1.75rem; }
.studio-kontakt .studio-dane-firmy { font-size: 1.15rem; color: var(--s-tekst); margin: 0 0 1.75rem; }
.studio-kontakt .studio-dane-firmy a { color: var(--s-tekst); text-decoration: none; }
.studio-kontakt .studio-dane-firmy a:hover { color: var(--s-akcent); text-decoration: underline; }

/* Nagłówki list wpisów w kategorii („Ostatnie treści”, „Więcej treści”) */
.lista-wpisow__naglowek { font-size: var(--wp--preset--font-size--l); }
.lista-wpisow--wyroznione .wp-block-post-title { font-family: var(--s-f-naglowki); font-size: var(--wp--preset--font-size--l); font-weight: 600; }

/* Pasek CTA na dole podstron */
.cta-pas { border-top: 1px solid var(--s-linia); }
.cta-pas__tytul { font-family: var(--s-f-naglowki); font-weight: 600; line-height: 1.1; color: var(--s-tekst); }

/* =========================================================
   STOPKA
   ========================================================= */
.stopka { border-top: 1px solid var(--s-linia); color: var(--s-wycisz); font-size: var(--wp--preset--font-size--s); }
.stopka p { color: var(--s-wycisz); }
.stopka a { color: var(--s-tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--s-tekst); text-decoration: underline; }
.stopka__naglowek {
	font: 600 .75rem / 1 var(--s-f-naglowki) !important;
	letter-spacing: .16em; text-transform: uppercase; color: var(--s-akcent-2) !important;
}
.stopka .wp-block-site-title { font-size: 1.3rem; color: var(--s-tekst); }
.stopka .wp-block-site-title a { color: var(--s-tekst); }
.stopka__prawa { border-top: 1px solid var(--s-linia); }
.stopka .wp-block-social-links .wp-social-link { color: var(--s-tekst); }

/* =========================================================
   STRONA 404 / WYSZUKIWARKA
   ========================================================= */
.wp-block-search__input {
	background: var(--s-pow); color: var(--s-tekst); border: 1px solid var(--s-linia); padding: .8em 1em;
}

/* =========================================================
   OGRANICZONY RUCH – bez animacji motywu
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.naglowek .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}