/*
Theme Name:  SAMMY EDUCATION
Theme URI:   https://sammy.edu.pl
Description: Motyw potomny Astry zbudowany pod projekt SAMMY EDUCATION. Warstwa wizualna
             pochodzi z zaakceptowanego projektu (assets/styles.css, assets/pages.css).
             Nie edytowac motywu nadrzednego - zmiany wprowadzamy tutaj.
Author:      NexLead Studio
Template:    astra
Version:     0.13.0
Text Domain: sammy
Requires PHP: 8.1
*/

/*
   UWAGA przy dodawaniu wzorcow blokowych do katalogu patterns/:
   WordPress trzyma ich liste w transjencie sieciowym uniewazniamym WYLACZNIE
   zmiana numeru Version w naglowku powyzej. Dodanie pliku bez podbicia wersji
   nie pokaze go w edytorze - sprawdzone na zywo 22.08.2026.
*/

/*
   Ten plik celowo jest niemal pusty.
   Cala warstwa wizualna siedzi w assets/styles.css i assets/pages.css,
   ktore functions.php doklada z numerem wersji opartym o czas modyfikacji pliku.
   Tutaj trzymamy wylacznie nadpisania samej Astry.
*/

/* Astra dokleja wlasne odstepy do kontenera - projekt ma swoj wlasny .wrap */
.ast-container,
.site-content .ast-container {
	max-width: none;
	padding: 0;
}

/*
   Astra maluje tlo na klasie .ast-separate-container (--ast-global-color-5, #F0F5FA).
   Selektor klasowy bije nasze "body" ze styles.css, wiec tlo projektu nigdy by nie doszlo.
   Zmierzone na zywo, nie zgadniete.
*/
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container .site-content,
.ast-separate-container .ast-article-single {
	background-color: var(--bg);
}

/* Astra rysuje ramke wokol tresci wpisu; projekt tego nie uzywa */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	padding: 0;
	background: transparent;
	border: 0;
}

/* wylaczamy domyslny naglowek i stopke Astry - mamy wlasne szablony */
.ast-above-header-wrap,
.ast-below-header-wrap {
	display: none;
}

/*
   Kolumny stopki maja naglowki h2, nie h3. Na stronie bez wlasnych sekcji
   (np. swiezo utworzonej) h3 tuz po h1 tworzy przeskok w hierarchii naglowkow,
   co czytniki ekranu zglaszaja jako blad struktury. Arkusz projektu stylowal
   .foot-col h3 - dokladamy h2, zamiast zmieniac wspoldzielony plik dema.
*/
.foot-col h2 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
	margin-bottom: 14px;
	color: #fff;
}

/*
   Przycisk wysylki w Contact Form 7 to <input type="submit">, a Astra styluje
   ten selektor wlasnym kolorem - wygrywal z klasa .btn-primary z projektu.
   Podnosimy specyficznosc, zamiast walczyc kolejnoscia arkuszy.
*/
.wpcf7-form input[type="submit"].btn-primary,
.wpcf7-form input[type="submit"].btn-primary:focus {
	background: var(--yellow);
	color: #231c00;
	border: 2px solid transparent;
	box-shadow: var(--shadow-y);
	font-family: inherit;
	font-weight: 800;
}

.wpcf7-form input[type="submit"].btn-primary:hover {
	background: var(--yellow);
	transform: translateY(-2px);
}

/* Komunikaty CF7 w stylistyce strony, zamiast domyslnych ramek wtyczki. */
.wpcf7-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: var(--r);
	border-width: 2px;
	font-size: 15px;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--yellow);
	background: var(--yellow-soft);
	color: var(--ink);
}

/*
   Zgoda pod formularzem.

   .consent z projektu jest kontenerem elastycznym, ale CF7 opakowuje pole
   wyboru w trzy zagniezdzone elementy i dodaje wlasny margines. Proba
   poskramiania tego wewnatrz ukladu elastycznego wypchnela opis poza karte -
   regula trafiala w elementy, ktore nie sa bezposrednimi dziecmi kontenera.

   Siatka o dwoch kolumnach jest odporna na to, ile opakowan doda wtyczka:
   pierwsza kolumna dopasowuje sie do pola wyboru, druga bierze reszte.
*/
.contact-card .consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 11px;
}

.contact-card .consent .wpcf7-list-item {
	margin: 0;
}


/* --------------------------------------------------------------------------
   Odstep pod naglowkiem podstrony

   W makiecie pierwsza sekcja po .page-head zawsze ma wyzerowany gorny odstep
   (_src/pages/*.html: <section style="padding-top:0">). Szablony motywu robia
   to samo, ale strony budowane w edytorze blokow skladaja sie z wzorcow, ktore
   tej korekty nie mialy - pod naglowkiem zostawalo 84 px pustki na /kontakt/,
   /o-nas/, /faq/, /kursy/ i /opinie/.
   -------------------------------------------------------------------------- */
.page-head + section,
.page-head + .wp-block-group {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Stopka karty kursu przypieta do dolu

   W makiecie stopke karty (.ccard-f) spycha na dol lista .ccard-meta
   z regula "margin-top:auto" (assets/pages.css). W wersji dla WordPressa
   usunelismy te liste - nie mamy prawdziwej liczby modulow, lekcji i godzin -
   a razem z nia zniknelo przypiecie stopki. Przy roznej dlugosci tytulow
   napis "Zapisy wkrotce" stal w kazdej karcie na innej wysokosci.
   -------------------------------------------------------------------------- */
.ccard-b > .ccard-f {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   Dolny margines akapitow i list

   Makieta zeruje marginesy resetem "*{margin:0}" i rozstawia tresc wylacznie
   jawnymi regulami (.doc p = 12 px, .course p = 22 px, .doc ol = 14 px).
   Astra dokłada natomiast "p{margin-bottom:1.75em}", czego makieta nie miala.
   Zmierzone skutki: 27 px pustki pod kazda odpowiedzia w harmonijce (9 pozycji
   na /faq/) i 30 px pod wstepem na kazdej podstronie.

   Zerujemy wiec margines ogolny selektorem o tej samej specyficznosci co
   regula Astry (0,0,1). Wygrywa kolejnoscia - arkusz motywu potomnego wczytuje
   sie pozniej - a przegrywa z kazda regula projektu w rodzaju ".doc p" (0,1,1),
   dlatego tresc ciagla zachowuje swoje 12 px.

   UWAGA przy edycji: ":root p" NIE zadziala. ":root" to pseudoklasa (0,1,0),
   wiec ":root p" ma 0,1,1 - tyle samo co ".doc p" - i wygrywajac kolejnoscia
   kasuje odstepy w regulaminie, polityce i artykulach.

   WordPress i tak rozstawia bloki gornym marginesem (margin-block-start),
   wiec dolny margines byl tu podwojeniem, nie odstepem.
   -------------------------------------------------------------------------- */
p,
ul,
ol {
	margin-bottom: 0;
}

/* Makieta definiuje tylko ".doc ol"; artykuly na blogu uzywaja list
   nieuporzadkowanych, wiec dostaja to samo rozstawienie. */
.doc ul {
	margin: 0 0 14px 20px;
	display: grid;
	gap: 9px;
}

/* --------------------------------------------------------------------------
   Odstepy blokowe WordPressa wewnatrz komponentow projektu

   WordPress rozstawia bloki regula
   ":root :where(.is-layout-flow) > * { margin-block: 24px 0 }".
   Makieta rozstawia tresc inaczej: resetem "*{margin:0}" plus wlasnymi
   regulami (.val h3 = 16 px, .step h3 = 9 px, .final p = 30 px, .doc p = 12 px).
   Tam, gdzie oba mechanizmy sie spotykaja, wygrywa 24 px WordPressa i rytm
   z makiety znika. Zmierzone skutki:

     * siatki: wiersz rosnie o 24 px, a pierwszy kafelek (jedyny bez marginesu)
       rozciaga sie na cala jego wysokosc i stoi wyzej - na /o-nas/ mial 280 px
       wobec 256 px pozostalych,
     * kolumny elastyczne: w karcie opinii odstep 12 px rosl do 36 px,
     * karty: w kafelku .val odstepy 16 px i 8 px rosly obie do 24 px.

   Zerujemy wiec gorny margines w komponentach projektu. Dolne odstepy
   pochodza z makiety i zostaja nietkniete.

   Dwie granice tej reguly:
     1. celuje w pojemnik z klasa ukladu WordPressa (.is-layout-flow /
        .is-layout-constrained), wiec nie rusza komponentow z surowego HTML,
        gdzie makieta ma wlasne korekty 1-3 px (.app-side, .ai-list, .consent,
        .contact-list, .price-list),
     2. nie obejmuje samego ".wrap" - tresc dodana przez wlasciciela strony
        wprost w sekcji ma dalej dostawac normalny odstep 24 px.

   Lista wygenerowana z assets/*.css: selektory z "display:grid|flex" oraz
   komponenty, ktorym makieta nadaje marginesy dzieciom.
   -------------------------------------------------------------------------- */
:root .about-grid.is-layout-flow > *,
:root .about-grid.is-layout-constrained > *,
:root .acc-b.is-layout-flow > *,
:root .acc-b.is-layout-constrained > *,
:root .acc-h.is-layout-flow > *,
:root .acc-h.is-layout-constrained > *,
:root .ai.is-layout-flow > *,
:root .ai.is-layout-constrained > *,
:root .ai-badge.is-layout-flow > *,
:root .ai-badge.is-layout-constrained > *,
:root .ai-grid.is-layout-flow > *,
:root .ai-grid.is-layout-constrained > *,
:root .ai-list.is-layout-flow > *,
:root .ai-list.is-layout-constrained > *,
:root .ai-s.is-layout-flow > *,
:root .ai-s.is-layout-constrained > *,
:root .app.is-layout-flow > *,
:root .app.is-layout-constrained > *,
:root .app-av.is-layout-flow > *,
:root .app-av.is-layout-constrained > *,
:root .app-col.is-layout-flow > *,
:root .app-col.is-layout-constrained > *,
:root .app-grid.is-layout-flow > *,
:root .app-grid.is-layout-constrained > *,
:root .app-main.is-layout-flow > *,
:root .app-main.is-layout-constrained > *,
:root .app-menu.is-layout-flow > *,
:root .app-menu.is-layout-constrained > *,
:root .app-side.is-layout-flow > *,
:root .app-side.is-layout-constrained > *,
:root .app-top.is-layout-flow > *,
:root .app-top.is-layout-constrained > *,
:root .app-top-r.is-layout-flow > *,
:root .app-top-r.is-layout-constrained > *,
:root .board.is-layout-flow > *,
:root .board.is-layout-constrained > *,
:root .bot.is-layout-flow > *,
:root .bot.is-layout-constrained > *,
:root .burger.is-layout-flow > *,
:root .burger.is-layout-constrained > *,
:root .buy-list.is-layout-flow > *,
:root .buy-list.is-layout-constrained > *,
:root .buy-price.is-layout-flow > *,
:root .buy-price.is-layout-constrained > *,
:root .buy-safe.is-layout-flow > *,
:root .buy-safe.is-layout-constrained > *,
:root .card-s.is-layout-flow > *,
:root .card-s.is-layout-constrained > *,
:root .cards.is-layout-flow > *,
:root .cards.is-layout-constrained > *,
:root .cards-s.is-layout-flow > *,
:root .cards-s.is-layout-constrained > *,
:root .cart-count.is-layout-flow > *,
:root .cart-count.is-layout-constrained > *,
:root .cart-link.is-layout-flow > *,
:root .cart-link.is-layout-constrained > *,
:root .cat-stats.is-layout-flow > *,
:root .cat-stats.is-layout-constrained > *,
:root .ccard.is-layout-flow > *,
:root .ccard.is-layout-constrained > *,
:root .ccard-b.is-layout-flow > *,
:root .ccard-b.is-layout-constrained > *,
:root .ccard-f.is-layout-flow > *,
:root .ccard-f.is-layout-constrained > *,
:root .ccard-meta.is-layout-flow > *,
:root .ccard-meta.is-layout-constrained > *,
:root .checkout.is-layout-flow > *,
:root .checkout.is-layout-constrained > *,
:root .checkout-main.is-layout-flow > *,
:root .checkout-main.is-layout-constrained > *,
:root .citem.is-layout-flow > *,
:root .citem.is-layout-constrained > *,
:root .citem-b.is-layout-flow > *,
:root .citem-b.is-layout-constrained > *,
:root .consent.is-layout-flow > *,
:root .consent.is-layout-constrained > *,
:root .contact-card.is-layout-flow > *,
:root .contact-card.is-layout-constrained > *,
:root .contact-grid.is-layout-flow > *,
:root .contact-grid.is-layout-constrained > *,
:root .contact-list.is-layout-flow > *,
:root .contact-list.is-layout-constrained > *,
:root .cookie-btns.is-layout-flow > *,
:root .cookie-btns.is-layout-constrained > *,
:root .cookie-in.is-layout-flow > *,
:root .cookie-in.is-layout-constrained > *,
:root .course.is-layout-flow > *,
:root .course.is-layout-constrained > *,
:root .course-grid.is-layout-flow > *,
:root .course-grid.is-layout-constrained > *,
:root .course-main.is-layout-flow > *,
:root .course-main.is-layout-constrained > *,
:root .course-meta.is-layout-flow > *,
:root .course-meta.is-layout-constrained > *,
:root .courses.is-layout-flow > *,
:root .courses.is-layout-constrained > *,
:root .crumbs.is-layout-flow > *,
:root .crumbs.is-layout-constrained > *,
:root .doc.is-layout-flow > *,
:root .doc.is-layout-constrained > *,
:root .f-row.is-layout-flow > *,
:root .f-row.is-layout-constrained > *,
:root .feat.is-layout-flow > *,
:root .feat.is-layout-constrained > *,
:root .filters.is-layout-flow > *,
:root .filters.is-layout-constrained > *,
:root .final.is-layout-flow > *,
:root .final.is-layout-constrained > *,
:root .foot-bottom.is-layout-flow > *,
:root .foot-bottom.is-layout-constrained > *,
:root .foot-col.is-layout-flow > *,
:root .foot-col.is-layout-constrained > *,
:root .foot-grid.is-layout-flow > *,
:root .foot-grid.is-layout-constrained > *,
:root .hero.is-layout-flow > *,
:root .hero.is-layout-constrained > *,
:root .hero-actions.is-layout-flow > *,
:root .hero-actions.is-layout-constrained > *,
:root .hero-feats.is-layout-flow > *,
:root .hero-feats.is-layout-constrained > *,
:root .hero-grid.is-layout-flow > *,
:root .hero-grid.is-layout-constrained > *,
:root .hero-trust.is-layout-flow > *,
:root .hero-trust.is-layout-constrained > *,
:root .learn.is-layout-flow > *,
:root .learn.is-layout-constrained > *,
:root .learn-grid.is-layout-flow > *,
:root .learn-grid.is-layout-constrained > *,
:root .lesson.is-layout-flow > *,
:root .lesson.is-layout-constrained > *,
:root .lessons.is-layout-flow > *,
:root .lessons.is-layout-constrained > *,
:root .modal.is-layout-flow > *,
:root .modal.is-layout-constrained > *,
:root .more-subjects.is-layout-flow > *,
:root .more-subjects.is-layout-constrained > *,
:root .nav-cta.is-layout-flow > *,
:root .nav-cta.is-layout-constrained > *,
:root .nav-in.is-layout-flow > *,
:root .nav-in.is-layout-constrained > *,
:root .nav-links.is-layout-flow > *,
:root .nav-links.is-layout-constrained > *,
:root .page-head.is-layout-flow > *,
:root .page-head.is-layout-constrained > *,
:root .pay-done.is-layout-flow > *,
:root .pay-done.is-layout-constrained > *,
:root .pays.is-layout-flow > *,
:root .pays.is-layout-constrained > *,
:root .pb.is-layout-flow > *,
:root .pb.is-layout-constrained > *,
:root .player-bar.is-layout-flow > *,
:root .player-bar.is-layout-constrained > *,
:root .player-mid.is-layout-flow > *,
:root .player-mid.is-layout-constrained > *,
:root .post.is-layout-flow > *,
:root .post.is-layout-constrained > *,
:root .posts.is-layout-flow > *,
:root .posts.is-layout-constrained > *,
:root .price-list.is-layout-flow > *,
:root .price-list.is-layout-constrained > *,
:root .price-top.is-layout-flow > *,
:root .price-top.is-layout-constrained > *,
:root .promo-row.is-layout-flow > *,
:root .promo-row.is-layout-constrained > *,
:root .review.is-layout-flow > *,
:root .review.is-layout-constrained > *,
:root .reviews-grid.is-layout-flow > *,
:root .reviews-grid.is-layout-constrained > *,
:root .sec-head.is-layout-flow > *,
:root .sec-head.is-layout-constrained > *,
:root .spark.is-layout-flow > *,
:root .spark.is-layout-constrained > *,
:root .stat-row.is-layout-flow > *,
:root .stat-row.is-layout-constrained > *,
:root .stats.is-layout-flow > *,
:root .stats.is-layout-constrained > *,
:root .step.is-layout-flow > *,
:root .step.is-layout-constrained > *,
:root .steps.is-layout-flow > *,
:root .steps.is-layout-constrained > *,
:root .steps-bar.is-layout-flow > *,
:root .steps-bar.is-layout-constrained > *,
:root .streak.is-layout-flow > *,
:root .streak.is-layout-constrained > *,
:root .strip-in.is-layout-flow > *,
:root .strip-in.is-layout-constrained > *,
:root .strip-nav.is-layout-flow > *,
:root .strip-nav.is-layout-constrained > *,
:root .strip-track.is-layout-flow > *,
:root .strip-track.is-layout-constrained > *,
:root .sub-in.is-layout-flow > *,
:root .sub-in.is-layout-constrained > *,
:root .sum-list.is-layout-flow > *,
:root .sum-list.is-layout-constrained > *,
:root .sum-total.is-layout-flow > *,
:root .sum-total.is-layout-constrained > *,
:root .test-card.is-layout-flow > *,
:root .test-card.is-layout-constrained > *,
:root .test-cards.is-layout-flow > *,
:root .test-cards.is-layout-constrained > *,
:root .val.is-layout-flow > *,
:root .val.is-layout-constrained > * {
	margin-block-start: 0;
}

/* Pasek koncowy ma wlasny rytm w makiecie (.final h2 = 14 px, .final p = 30 px),
   wiec jego wrap traktujemy jak komponent, a nie jak miejsce na tresc wlasciciela. */
:root .final .wrap.is-layout-flow > *,
:root .final .wrap.is-layout-constrained > * {
	margin-block-start: 0;
}

/* ==========================================================================
   POPRAWKI MOBILNE

   Warunek brzmi "(pointer: coarse), (max-width: 900px)" - czyli albo palec,
   albo szerokosc ukladu mobilnego. Sam "pointer: coarse" nie wystarcza:
   przegladarka bezglowa go NIE zglasza, wiec regula cicho nie dziala i nie ma
   jak jej sprawdzic. Warunek szerokosci daje drugie, mierzalne wejscie.
   Na komputerze przy szerokosci powyzej 900 px nic sie nie zmienia.

   Zmierzone na emulacji telefonu (dotyk 5-punktowy, wskaznik gruby, hover
   niedostepny) i na szerokosciach 320-430 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pola formularza: 16 px, bo iOS sam przybliza strone przy mniejszym

   Safari na iPhonie przy wejsciu w pole o rozmiarze pisma ponizej 16 px
   POWIEKSZA cala strone i juz z niej nie wraca. Pola mialy 15 px, wiec
   dotkniecie "Imie" rozjezdzalo uklad na caly czas wypelniania formularza.
   Przy okazji pola rosna z 40 do okolo 46 px, czyli do wielkosci wygodnej
   dla palca.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 900px) {
	.field input,
	.field select,
	.field textarea,
	.contact-card input[type="text"],
	.contact-card input[type="email"],
	.contact-card select,
	.contact-card textarea {
		font-size: 16px;
	}

	.contact-card input[type="submit"],
	.wpcf7-form input[type="submit"] {
		min-height: 48px;
		font-size: 16px;
	}

	/* pole zgody: samo kwadracik ma 19 px, ale caly wiersz etykiety jest klikalny */
	.consent {
		min-height: 44px;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   2. Cele dotykowe w katalogu i w tresci

   Filtry przedmiotow mialy 35 px wysokosci, a odnosniki "Czytaj dalej"
   i "Zobacz wszystkie kursy" od 21 do 27 px. Zalecane minimum to 44 px.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 900px) {
	.filters .chip,
	.filters button,
	.chip {
		min-height: 44px;
	}

	.more {
		min-height: 44px;
	}

	.btn.btn-sm {
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   3. Menu mobilne: pozycje jako pelne wiersze

   Pozycje byly wysokie na 24 px i szerokie dokladnie na tyle, ile zajmowal
   tekst - "Blog" to byl cel 32 na 24 px. Dotkniecie kilka pikselow obok slowa
   trafialo w tlo menu i nic sie nie dzialo (sprawdzone elementFromPoint).

   Podkreslenie aktywnej pozycji chowamy, bo przy wierszu na pelna szerokosc
   ciagnelo sie przez cale menu i wygladalo jak linia oddzielajaca. Aktywna
   pozycja zostaje oznaczona ciemniejszym kolorem i grubszym krojem, ktore
   projekt i tak jej nadaje.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.nav-links.open {
		align-items: stretch;
		gap: 2px;
	}

	.nav-links.open > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.nav-links.open > a::after {
		display: none;
	}

	.nav-links.open > a.btn {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   4. Rozmycie tla na Safari

   Safari liczy backdrop-filter dopiero z przedrostkiem -webkit- (do wersji 17
   wlacznie). Bez niego przyklejony naglowek na iPhonie zostawal poprzezroczysty
   bez rozmycia i tresc przewijajaca sie pod nim byla widoczna przez tlo.
   -------------------------------------------------------------------------- */
header.nav,
.modal-bg,
.ai-badge {
	-webkit-backdrop-filter: blur(10px);
}

.modal-bg {
	-webkit-backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   5. Zapas na iOS 14: proporcje zdjec w katalogu

   Kafelek zdjecia w katalogu opiera sie na "aspect-ratio", ktore Safari zna
   od wersji 15. Na iOS 14 pojemnik miałby zerowa wysokosc i katalog kursow
   zostalby bez zdjec. Zapasowa wersja liczy wysokosc starym sposobem.
   -------------------------------------------------------------------------- */
@supports not (aspect-ratio: 3 / 2) {
	.ccard-ph {
		height: 0;
		padding-bottom: 66.6667%;
	}

	.ccard-ph img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* --------------------------------------------------------------------------
   Odnosniki "czytaj dalej" — brakujace reguly bazowe

   Makieta definiuje te odnosniki WYLACZNIE w kontekscie:
     .course a.more, .summary .more   (assets/styles.css, assets/pages.css)
     .post .rd                        (assets/styles.css)

   Wszedzie indziej — na stronie bledu 404, w zapowiedziach na stronie glownej,
   przy "Wszystkie wpisy" i "Jak powstaja nasze kursy" — te same klasy nie mialy
   zadnej reguly. Zmierzone: display:inline, font-weight:400, font-size:17px,
   czyli zwykly tekst akapitu zamiast pogrubionego odnosnika ze strzalka.
   Ta sama luka jest w makiecie, wiec nie zauwazylismy jej przy przenoszeniu.

   Reguly bazowe maja specyficznosc 0,1,0, wiec wersje kontekstowe (0,2,0
   i 0,2,1) dalej wygrywaja i karty kursow oraz wpisow wygladaja jak wczesniej.
   Przy okazji odnosniki staja sie inline-flex, dzieki czemu dziala na nich
   "min-height" z poprawek dotykowych — wczesniej element liniowy je ignorowal.
   -------------------------------------------------------------------------- */
.more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}

.more:hover {
	color: var(--yellow-text);
}

.rd {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 14px;
}

.rd:hover {
	color: var(--yellow-text);
}

/* --------------------------------------------------------------------------
   Siatka zapowiedzi z jedna karta

   Na stronie glownej publikujemy tyle zapowiedzi, ile jest naprawde wydanych
   artykulow. Przy jednym artykule zwykla siatka trzykolumnowa zostawialaby
   karte szeroka na jedna trzecia ekranu i przyklejona do lewej. Klasa
   "posts-1" ustawia jedna kolumne o rozsadnej szerokosci i srodkuje ja.

   Gdy wlasciciel strony wyda kolejne artykuly i dolozy karty w edytorze,
   nalezy usunac "posts-1" z grupy - opisane w PRZEKAZANIE.
   -------------------------------------------------------------------------- */
.posts.posts-1 {
	grid-template-columns: minmax(0, 440px);
	justify-content: center;
}

@media (max-width: 900px) {
	.posts.posts-1 {
		grid-template-columns: 1fr;
	}
}

/* Domkniecie celow dotykowych: odnosnik ".rd" w kartach wpisow oraz wysokosc
   pol formularza. Pole tekstu wielowierszowego celowo pominiete - ma juz
   wlasne "min-height: 96px" i zapis 46 px by je obnizyl. */
@media (pointer: coarse), (max-width: 900px) {
	.rd {
		min-height: 44px;
	}

	.field input,
	.field select,
	.contact-card input[type="text"],
	.contact-card input[type="email"],
	.contact-card select {
		min-height: 46px;
	}
}

/* --------------------------------------------------------------------------
   Kontrast tekstu drugorzednego

   Kolor --muted (#6C6B82) na liliowej plakietce (#EEEBFF) dawal 4,42 : 1 przy
   wymaganych 4,5 dla tekstu tej wielkosci. Dotyczylo etykiet sekcji na stronie
   glownej: "Jak to dziala", "O nas", "Opinie", "Blog" oraz oznaczen przedmiotu
   w kartach kursow.

   Przyciemnienie o dwa punkty wystarcza i jest niewidoczne golym okiem:
     plakietka liliowa  4,42 -> 4,55
     plakietka zolta    4,56 -> 4,70
     tlo strony         4,99 -> 5,14
     biala karta        5,17 -> 5,32
   -------------------------------------------------------------------------- */
:root {
	--muted: #6A6980;
}

/* --------------------------------------------------------------------------
   Widoczny fokus klawiatury

   Projekt ma globalną regułę ":focus-visible{outline:3px solid var(--indigo)}",
   ale przegrywa ona SPECYFICZNOSCIA z regulami Astry i WordPressa:

     button:focus      { outline: 0 }        (0,1,1)  Astra  -> przyciski traca obrys
     a:focus           { outline: dotted thin } (0,1,1) Astra -> cienka kropka zamiast ramki
     a:focus-visible   { outline: inherit }   (0,2,0)  arkusz wbudowany
     :focus-visible    { outline: 3px ... }   (0,1,0)  projekt  <- przegrywa z kazda z nich

   Kolejnosc wczytywania tu nie pomaga, bo specyficznosc jest wazniejsza.
   Dlatego powtarzamy regule z przedrostkiem :root, co daje (0,2,1).

   Pola tekstowe formularza celowo pominiete - projekt daje im wlasny, widoczny
   fokus (zolta poswiata w ".field input:focus"), ktorego nie nadpisujemy.
   -------------------------------------------------------------------------- */
:root a:focus-visible,
:root button:focus-visible,
:root summary:focus-visible,
:root input[type="submit"]:focus-visible,
:root [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--indigo);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Na ciemnych tlach obrys w kolorze marki byłby niewidoczny - projekt
   przewiduje tam zolty. Specyficznosc (0,3,1) wygrywa z regula wyzej. */
:root .strip a:focus-visible,
:root .strip button:focus-visible,
:root footer a:focus-visible,
:root footer button:focus-visible,
:root .final a:focus-visible,
:root .sub-band a:focus-visible {
	outline-color: var(--yellow);
}

/* Naglowek harmonijki jest szeroki na cala karte - obrys musi byc do srodka,
   inaczej zostaje przyciety przez krawedz. Projekt ma to w ".acc-h:focus-visible". */
:root .acc-h:focus-visible {
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Fokus pol formularza - przywrocenie wygladu z projektu

   Contact Form 7 wstrzykuje wlasny arkusz w naglowku strony:

     .wpcf7 input.wpcf7-form-control:not([type="submit"]):focus
       { outline: none; box-shadow: none; border-color: #046BD2 }   (0,4,1)

   To kasuje projektowa zolta poswiate (".field input:focus", 0,1,2) i daje
   obce, niebieskie obramowanie. Powtarzamy wiec selektor CF7 z przedrostkiem
   :root, co daje (0,5,1) i wygrywa niezaleznie od kolejnosci arkuszy.
   -------------------------------------------------------------------------- */
:root .wpcf7 input.wpcf7-form-control:not([type="submit"]):focus,
:root .wpcf7 select.wpcf7-form-control:not([type="submit"]):focus,
:root .wpcf7 textarea.wpcf7-form-control:not([type="submit"]):focus {
	outline: none;
	border-color: var(--yellow);
	box-shadow: 0 0 0 4px rgba(255, 192, 30, .22);
}

/* --------------------------------------------------------------------------
   Bez JavaScriptu

   Animacje pojawiania sa juz zabezpieczone w makiecie (".js .rv{opacity:0}"),
   wiec przy wylaczonym skrypcie tresc jest widoczna. Harmonijka nie byla:
   odpowiedzi chowa regula ".acc-b{display:none}", a otwiera je dopiero
   klikniecie, ktore ustawia aria-expanded. Bez skryptu widac wylacznie
   pierwsza odpowiedz w kazdej grupie, reszta jest nieosiagalna.

   Nawigacja bez skryptu dziala przez stopke - ma komplet odnosnikow w trzech
   kolumnach - wiec przycisk menu, ktory bez JavaScriptu nic nie robi,
   nie odcina nikogo od stron.
   -------------------------------------------------------------------------- */
html:not(.js) .acc-b {
	display: block;
}

html:not(.js) .acc-x {
	display: none;
}

/* --------------------------------------------------------------------------
   Druk

   Najczesciej drukowane sa Regulamin i Polityka prywatnosci - dokumenty,
   ktore ktos chce miec na papierze. Bez wlasnego arkusza wychodzily razem
   z nagłowkiem, menu, paskiem koncowym i pelna stopka.
   -------------------------------------------------------------------------- */
@media print {
	header.nav,
	.burger,
	.skip,
	.final,
	.strip,
	footer .foot-grid,
	.hero-visual,
	.hero-dots,
	.faq-more,
	.posts,
	.contact-card {
		display: none !important;
	}

	:root {
		--bg: #fff;
		--surface: #fff;
		--surface-2: #fff;
		--ink: #000;
		--ink-2: #1a1a1a;
		--muted: #444;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	section {
		padding: 0 0 12pt;
	}

	.wrap {
		max-width: none;
		padding: 0;
	}

	/* adres odnosnika przydaje sie na papierze, ale nie przy kotwicach */
	.doc a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
		word-break: break-all;
	}

	h1, h2, h3 {
		page-break-after: avoid;
		break-after: avoid;
	}

	p, li, .acc-i {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.acc-b {
		display: block !important;
	}
}