/* Podstawa: kolory, typografia, przyciski, nagłówek, stopka.
   Kolory i fonty według specyfikacji klientki (kolorystyka strona ww, 2026-10-08),
   wartości 1:1 z zaakceptowanego projektu projekt/strona-glowna/index.html. */
:root {
	--akcent: #FFA51F;
	--akcent-ciemny: #E8900A;
	--tlo: #FAF8F4;
	--krem: #F4EFE8;
	--grafit: #1E1D1B;
	--brzoskwinia: #FCE5C9;
	--bialy: #FFFFFF;
	--tekst-jasny: #5E5A54;
	--linia: #E6DED2;
	--szer: 1280px;
	--serif: "Cormorant Garamond", Georgia, serif;
	--sans: "Manrope", system-ui, sans-serif;
	/* Strzałka jako maska, żeby przycisk z edytora miał ją bez wklejania SVG do treści */
	--strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12h15M14 6l6 6-6 6'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-weight: 400; color: var(--grafit); background: var(--tlo); line-height: 1.65; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0 0 .5em; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--grafit); outline-offset: 3px; }
.kontener { max-width: var(--szer); margin: 0 auto; padding: 0 24px; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--grafit); color: var(--bialy); padding: 10px 16px; }
.pomin:focus { top: 12px; }

.nadtytul { font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; }
.z-kreska::after { content: ""; display: block; width: 44px; height: 2px; background: var(--akcent); margin: 28px 0; }
.wstep { max-width: 620px; color: var(--tekst-jasny); }

/* Przyciski: blok „Przycisk” z klasą przycisk-glowny albo przycisk-obrys */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 24px; font: 600 .8rem/1.35 var(--sans); letter-spacing: .1em; text-align: center; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--akcent); border-radius: 0; transition: background .2s, color .2s; cursor: pointer; }
.przycisk-glowny .wp-block-button__link { background: var(--akcent); color: var(--grafit); }
.przycisk-glowny .wp-block-button__link::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--strzalka) center/contain no-repeat; mask: var(--strzalka) center/contain no-repeat; transition: transform .2s; }
.przycisk-glowny .wp-block-button__link:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
.przycisk-glowny .wp-block-button__link:hover::after { transform: translateX(4px); }
.przycisk-obrys .wp-block-button__link { background: transparent; color: var(--bialy); }
.przycisk-obrys .wp-block-button__link:hover { background: var(--akcent); color: var(--grafit); }

.link-strzalka { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.link-strzalka a, .link-strzalka { color: var(--akcent-ciemny); text-decoration: none; }
.link-strzalka a { display: inline-flex; align-items: center; gap: 10px; }
.link-strzalka a::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--strzalka) center/contain no-repeat; mask: var(--strzalka) center/contain no-repeat; transition: transform .2s; }
.link-strzalka a:hover::after { transform: translateX(4px); }

/* Górny pasek */
.naglowek { position: sticky; top: 0; z-index: 50; background: rgba(250,248,244,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linia); }
.admin-bar .naglowek { top: 32px; }
.naglowek .kontener { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }
.naglowek .logo img { height: 58px; width: auto; }
.menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu > li > a { display: block; padding: 10px 14px; font: 500 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--grafit); border-bottom: 1.5px solid transparent; }
.menu > li > a:hover, .menu > .current-menu-item > a, .menu > .current-menu-ancestor > a { border-bottom-color: var(--akcent); }
.menu .rozwin { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; color: var(--grafit); cursor: pointer; }
.menu .rozwin svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .2s; }
.menu .otwarte > .rozwin svg { transform: rotate(180deg); }
.menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--bialy); border: 1px solid var(--linia); padding: 12px; list-style: none; margin: 8px 0 0; box-shadow: 0 18px 40px rgba(30,29,27,.1); display: none; }
.menu .sub-menu a { display: block; padding: 8px 12px; text-decoration: none; font-size: .9rem; }
.menu .sub-menu a:hover { background: var(--krem); }
.menu .sub-menu .sub-menu { position: static; display: block; min-width: 0; box-shadow: none; border: 0; border-left: 1.5px solid var(--brzoskwinia); margin: 0 0 4px 12px; padding: 0; }
.menu .sub-menu .sub-menu a { font-size: .86rem; color: var(--tekst-jasny); }
.menu .sub-menu .rozwin { display: none; }
/* Mostek nad szczeliną 8 px, żeby podmenu nie znikało w drodze kursora */
.menu > li > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu, .menu > li.otwarte > .sub-menu { display: block; }
.ikony { display: flex; align-items: center; gap: 4px; }
.ikona { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--grafit); cursor: pointer; text-decoration: none; }
.ikona svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikona:hover { color: var(--akcent-ciemny); }
.hamburger { display: none; }
.hamburger span span { display: block; width: 24px; height: 1.5px; background: var(--grafit); margin: 6px 0; }

/* Podstrony */
.naglowek-strony { background: var(--krem); padding: clamp(48px, 7vw, 88px) 0; }
.naglowek-strony h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; text-transform: uppercase; margin: 0; }
.tresc-strony:not(.tresc-sekcje) { max-width: var(--szer); margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px; }
.tresc-strony:not(.tresc-sekcje) > * { max-width: 760px; }
.tresc-strony:not(.tresc-sekcje) > .alignwide { max-width: var(--szer); }

/* Stopka */
.stopka { background: var(--grafit); color: #E9E4DC; padding: 72px 0 28px; }
.stopka-gora { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.stopka .logo img { height: 92px; width: auto; margin-bottom: 18px; }
.stopka-haslo { margin: 0; font-size: .9rem; }
.stopka-tytul { margin: 0 0 16px; line-height: 1.65; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bialy); }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin-bottom: 8px; font-size: .92rem; }
.stopka a { text-decoration: none; }
.stopka a:hover { color: var(--akcent); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.social a:hover { background: var(--akcent); border-color: var(--akcent); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social a:hover svg { fill: var(--grafit); }
.stopka-dol { border-top: 1px solid rgba(255,255,255,.15); margin-top: 56px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #B8B2A8; }
/* Regulamin Autopay (§11 ust. 4, zał. 4) wymaga logo Autopay i znaku BLIK: logo w wersji na ciemne tło z developers.autopay.pl/online/grafiki,
   znak BLIK z blik.com. Bez znaków kart, bo karty nie są włączone. */
.stopka-platnosci { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.stopka-platnosci a { color: inherit; }
.stopka-znaki { display: inline-flex; align-items: center; gap: 14px; }
.stopka-znak-autopay { height: 18px; width: auto; }
.stopka-znak-blik { height: 24px; width: auto; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1080px) {
	.nawigacja { display: contents; }
	.menu { display: none; position: absolute; top: 84px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--tlo); border-bottom: 1px solid var(--linia); padding: 10px 24px 20px; max-height: calc(100vh - 84px); overflow-y: auto; }
	.menu.otwarte { display: flex; }
	.menu > li { flex-wrap: wrap; }
	.menu > li > a { flex: 1; padding: 14px 4px; }
	.menu .rozwin { display: grid; }
	.menu .sub-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 10px; margin: 0; background: none; flex-basis: 100%; }
	.menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu { display: none; }
	.menu > li.otwarte > .sub-menu { display: block; }
	.hamburger { display: grid; }
	.stopka-gora { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.naglowek .kontener { height: 72px; }
	.menu { top: 72px; }
	.naglowek .logo img { height: 48px; }
}
@media (max-width: 520px) {
	.stopka-gora { grid-template-columns: 1fr; }
	.ikony .ikona-szukaj { display: none; }
}
@media (max-width: 782px) {
	.admin-bar .naglowek { top: 0; }
}