/* =====================================================================
   FUTURE WOOD – bazowy CSS (globalny, ładowany też w edytorze)
   Design system (kolory, typografia, odstępy) idzie z theme.json.
   Fonty self-hostowane (woff2) – bez połączenia z Google CDN.
   ===================================================================== */

/* --- FONTY ----------------------------------------------------------
   Kroje przyciete do znakow, ktore strona realnie uzywa: alfabet polski,
   cyfry i typografia. Wczesniej byly cztery pliki (osobno dla znakow
   podstawowych i polskich), razem 133 kB. Teraz dwa, razem 49 kB, bez
   podzialu na zakresy - polski tekst potrzebowal i tak obu czesci.
   Oba pozostaja krojami zmiennymi, wiec grubosci dzialaja jak wczesniej.
   Dolozenie nowego znaku (np. innego alfabetu) wymaga przyciecia od nowa. */

@font-face {
	font-family: 'Open Sans';
	font-style: normal; font-weight: 300 800; font-display: swap;
	src: url('../fonts/open-sans-pl.woff2') format('woff2');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/hanken-pl.woff2') format('woff2');
}

/* Open Sans – tekst (variable, latin + latin-ext = PL) */

/* --- RESET / UTILITY ------------------------------------------------ */

html { scroll-behavior: smooth; }

/* Zamkniete menu mobilne stoi na position: fixed, przesuniete o cala
   szerokosc ekranu w prawo. Chrome tego nie liczy do obszaru przewijania,
   ale Safari na telefonie juz tak i strone da sie ciagnac na boki. Wtedy
   pelnoekranowe tla sekcji rozjezdzaja sie z trescia.
   clip zamiast hidden, bo nie tworzy kontenera przewijania i nie psuje
   position: sticky. hidden zostaje jako zapas dla starszych przegladarek. */
html, body { overflow-x: hidden; overflow-x: clip; }

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

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Animacja pojawiania sekcji przy scrollu (bez pętli infinite).
   .fw-reveal -> po wejściu w viewport JS dodaje .is-visible */
@media (prefers-reduced-motion: no-preference) {
	.js .fw-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
	.js .fw-reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Hanken Grotesk - naglowki (czysty, cieply sans; propozycja) */

/* =====================================================================
   SYSTEM PRZYCISKOW - dwa warianty na cala strone.
   .btn           na JASNYM tle: granat, wypelnienie bieli od lewej
   .btn--on-dark  na CIEMNYM tle: bialy, wypelnienie granatu od lewej
   .btn--sm       modyfikator rozmiaru (karty, ciasne konteksty)
   Wypelnienie wjezdza z lewej do prawej; na dotyku stan bazowy zostaje.
   ===================================================================== */
.btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	padding: 1rem 1.7rem;
	border-radius: 100px;
	border: 2px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	overflow: hidden; isolation: isolate;
	transition: color .35s ease, border-color .35s ease;
}
.btn > * { position: relative; z-index: 1; }
.btn__icon { display: inline-flex; flex: 0 0 auto; transition: transform .4s var(--ease-out); }
.btn__icon svg { display: block; }

/* wypelnienie wjezdzajace od lewej */
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--wp--preset--color--base);
	transform: translateX(-101%);
	transition: transform .45s var(--ease-out);
}
.btn--on-dark {
	border-color: #fff;
	background: #fff;
	color: var(--wp--preset--color--accent);
}
.btn--on-dark::before { background: var(--wp--preset--color--accent); }
.btn--sm { padding: .62rem 1.15rem; font-size: .88rem; border-width: 1.5px; }

@media (hover: hover) {
	.btn:hover::before { transform: translateX(0); }
	.btn:hover { color: var(--wp--preset--color--accent); }
	.btn--on-dark:hover { color: #fff; }
	.btn:hover .btn__icon { transform: translateX(3px); }
	.btn--diag:hover .btn__icon { transform: translate(3px, -3px); }
}
.btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.btn--on-dark:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =====================================================================
   KROPKI SLIDEROW - sygnal ile jest tresci i gdzie jestem.
   Budowane przez JS, wiec bez JS nic nie zostaje na stronie.
   ===================================================================== */
.slider-dots {
	display: flex; justify-content: center; align-items: center; gap: .45rem;
	margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
	list-style: none; padding: 0;
}
.slider-dots__dot {
	width: 8px; height: 8px; padding: 0;
	border: none; border-radius: 100px; cursor: pointer;
	background: currentColor; opacity: .28;
	transition: opacity .3s ease, width .35s var(--ease-out);
}
.slider-dots__dot.is-active { opacity: 1; width: 26px; }
@media (hover: hover) { .slider-dots__dot:hover { opacity: .6; } }
.slider-dots__dot.is-active:hover { opacity: 1; }
.slider-dots__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Pole dotyku kropek slidera.
   Sama kropka ma 8 px, co na dotyku jest nie do trafienia. Powiekszamy
   przycisk wypelnieniem i przycinamy tlo do pola tresci, wiec kropka
   wyglada tak samo, a palec ma w co celowac (26x32 px). */
.slider-dots { gap: 0; }
.slider-dots__dot {
	box-sizing: content-box;
	padding: 12px 9px;
	background-clip: content-box;
}

/* Na waskich ekranach napis na przycisku moze sie zlamac.
   Zakaz zawijania jest dobry na wiekszych ekranach (napis nie rozpada sie
   w polowie), ale przy 320 px najdluzsze wezwania potrzebuja okolo 300 px,
   a na tresc zostaje 265 px. Przycisk narzucal wtedy szerokosc calej sekcji
   i tresc wychodzila poza ekran. */
@media (max-width: 620px) {
	.btn { white-space: normal; text-align: center; }
}