/*
Theme Name:   Avuerra
Theme URI:    https://fabrykaabstrakcji.pl/
Description:  Motyw potomny Kadence dla AVUERRA. Strony budowane z sekcji SCF (Flexible Content), naglowek i stopka po stronie Kadence.
Author:       Mateusz Ciołek
Author URI:   https://fabrykaabstrakcji.pl/
Template:     kadence
Version:      2.24.2
License:      GNU General Public License v2 or later
Text Domain:  avuerra
*/

/* ==========================================================================
   Tokeny marki
   Zrodlo wartosci: identyfikacja wizualna AVUERRA.
   Kolory ustawione sa rowniez w globalnej palecie Kadence, te zmienne
   sluza sekcjom motywu, zeby nie zaszywac kodow HEX w arkuszu sekcji.
   ========================================================================== */

:root{
	--av-red:        #D30000;
	--av-red-hover:  #970808;
	--av-blush:      #FCE8E5;
	--av-sand:       #C9AE94;
	--av-sand-soft:  #E3D4C4;
	--av-paper:      #FBF7F4;
	/* Te same skladowe co --av-paper, ale rozbite, zeby dalo sie budowac
	   przezroczystosci przez rgba() w gradiencie sekcji hero. */
	--av-paper-rgb:  251, 247, 244;
	--av-ink:        #2E211A;
	--av-ink-soft:   #7D6650;

	/* Zmierzone z makiety klienta. Tlo kart to ciepla biel, a nie roz.
	   Rozowy jest tylko krazek pod ikona, czyli --av-blush. */
	--av-karta:       #FDF9F7;
	--av-linia-lekka: #F3E9E4;

	--av-font-head:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--av-font-body:  'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--av-maxw:       1180px;
	--av-gap:        clamp(28px, 4vw, 56px);
	--av-sekcja-y:   clamp(64px, 8vw, 118px);
}

/* ==========================================================================
   Baza
   Kadence ustawia typografie globalnie. Ponizej tylko to, czego Kadence
   nie obejmuje, czyli elementy wlasne sekcji.
   ========================================================================== */

/* Kadence ustawia to globalnie, ale motyw nie powinien na tym polegac.
   Bez border-box szerokosc 50% plus padding daje ponad polowe i kolumna
   tekstu w sekcji hero wchodzi na zdjecie. */
.av-main *,
.av-main *::before,
.av-main *::after{ box-sizing: border-box; }

.av-kontener{
	max-width: var(--av-maxw);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

/* Kolor ustawiony wprost, a nie dziedziczony. Kadence ma wlasne globalne
   kolory naglowkow i jesli trafi tam jasny odcien z palety, naglowki sekcji
   znikaja na kremowym tle. Motyw nie powinien od tego zalezec. */
.av-naglowek{
	font-family: var(--av-font-head);
	font-weight: 600;
	line-height: 1.15;
	color: var(--av-ink);
	margin: 0;
	text-wrap: balance;
}

.av-naglowek em{ font-style: italic; }

/* Znak z logo, wstawiany w naglowek tokenem [slonce] w polu.
   Litera U jest zwyklym tekstem w kroju i kolorze naglowka, a tarcza slonca
   jest nalozona w jej wnetrzu, jak w logo. Wszystko w em, wiec skaluje sie
   razem z napisem. */
.av-slonce{
	position: relative;
	display: inline-block;
}

/* Tarcza w dolnej czesci litery, czyli tam, gdzie U ma swoje wnetrze. */
.av-slonce__tarcza{
	position: absolute;
	left: 50%;
	bottom: .03em;
	transform: translateX(-50%);
	width: .52em;
	height: .52em;
	color: var(--av-red);
	pointer-events: none;
}

.av-slonce__tarcza svg{ width: 100%; height: 100%; display: block; }

/* Akcent w tekscie. Fragment owiniety w **podwojne gwiazdki** w polu.
   Ten sam charakter co haslo sekcji: szeryfowa kursywa w czerwieni marki,
   wieksza od tekstu wokol. Dzieki temu wyroznienie wyglada jak element
   identyfikacji, a nie jak zwykle pogrubienie. */
.av-akcent{
	font-family: var(--av-font-head);
	font-style: italic;
	font-weight: 500;
	font-size: 1.22em;
	color: var(--av-red);
}

.av-tekst{
	font-family: var(--av-font-body);
	color: var(--av-ink-soft);
	margin: 0 0 1em;
	max-width: 68ch;
}

.av-tekst:last-child{ margin-bottom: 0; }

/* Haslo pisane kursywa szeryfowa, zastepuje krój odreczny z makiety. */
.av-haslo{
	font-family: var(--av-font-head);
	font-style: italic;
	font-weight: 400;
	color: var(--av-red);
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.35;
	margin: 0;
}

/* Kreska pod naglowkiem sekcji, powtarza sie w calej makiecie. */
.av-kreska{
	width: 64px;
	height: 2px;
	background: var(--av-red);
	border: 0;
	margin: 18px 0 0;
}

.av-kreska--srodek{ margin-inline: auto; }

/* Dopisek podatkowy przy cenie, np. „netto + 23% VAT”. WooCommerce owija go
   w te klase i wypisuje tym samym wielkim krojem co cena. Sprowadzamy go do
   drobnego, spokojnego tekstu obok kwoty. Rozmiar w em, wiec dziala tak samo
   przy cenie na karcie i na stronie szkolenia. */
.woocommerce-price-suffix{
	display: inline;
	font-family: var(--av-font-body);
	font-size: .42em;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--av-ink-soft);
	white-space: nowrap;
	margin-left: .2em;
}

/* Przycisk. Kadence stylowalby wlasny, ale sekcje uzywaja swojego,
   zeby wyglad nie zalezal od ustawien bloku. */
.av-przycisk{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--av-red);
	padding: 15px 34px;
	border: 0;
	border-radius: 2px;
	transition: background .2s ease, transform .2s ease;
}

/* Kadence koloruje przyciski wlasna paleta i wygrywa na stanach :focus
   oraz :active, wiec po kliknieciu przycisk potrafi zmienic kolor na
   niebieski. Ustawiamy stany wprost. */
.av-przycisk:focus,
.av-przycisk:active{
	background: var(--av-red);
	color: #fff;
}

.av-przycisk:hover,
.av-przycisk:focus-visible{
	background: var(--av-red-hover);
	color: #fff;
	transform: translateY(-2px);
}

.av-przycisk:focus-visible{
	outline: 2px solid var(--av-ink);
	outline-offset: 3px;
}

.av-przycisk--obrys{
	background: transparent;
	color: var(--av-red);
	box-shadow: inset 0 0 0 1px var(--av-red);
}

.av-przycisk--obrys:hover,
.av-przycisk--obrys:focus-visible{
	background: var(--av-red);
	color: #fff;
}

/* ==========================================================================
   Kotwice sekcji
   Pusty znacznik stoi przed sekcja i nie zajmuje miejsca. scroll-margin-top
   odsuwa cel przewijania o wysokosc przyklejonego naglowka, inaczej poczatek
   sekcji chowa sie pod nim. Wartosc zmienisz jedna zmienna, gdy naglowek
   zmieni wysokosc.
   ========================================================================== */

:root{ --av-kotwica-odstep: 110px; }

.av-kotwica{
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: var(--av-kotwica-odstep);
}

/* Plynne przewijanie tylko dla osob, ktore nie prosily o ograniczenie ruchu. */
@media (prefers-reduced-motion: no-preference){
	html{ scroll-behavior: smooth; }
}

/* ==========================================================================
   Animacja wejscia
   Klasa html.av-js dodawana jest inline w <head>. Bez JS wszystko
   jest widoczne od razu, wiec strona nigdy nie zostaje pusta.
   ========================================================================== */

.av-js .av-anim{
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}

.av-js .av-anim.av-widoczny{
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce){
	.av-js .av-anim{ opacity: 1; transform: none; transition: none; }
	.av-przycisk{ transition: none; }
}