/* ==========================================================================
   Typography styleguide — EdukacjaplusTerapia
   ==========================================================================
   Źródło: homepage (WP page ID 14099) + kit Elementora (13276) + header (17459).

   Breakpointy jak w Elementorze:
     tablet ≤ 1024px
     mobile ≤ 767px

   Zaobserwowana skala (desktop → tablet → mobile):
     Hero H1 ............... 34 → 26 → 26
     Section title (H2) .... 34 → 34 → 34
     Card title (H3) ....... 24 (ustawione od tabletu; desktop często dziedziczy)
     Body .................. ~16 → 14 → 12
     Label / eyebrow ....... 14 / 600 → 14 → 12
     Button CTA ............ 14 / 700 → 14 → 12
     Nav ................... 12 / 600 / uppercase
     Card micro-button ..... 10 (występuje na kartach usług; raczej wyjątek)

   Elementor ma pierwszeństwo: selektory poniżej są celowo słabe (bez klas,
   bez !important). Widget / Theme Style z `.elementor-kit-*` je nadpisze.
   ========================================================================== */

:root,
body {
	/* --- Fonty ---------------------------------------------------------- */
	--ept-font-sans: "Montserrat", sans-serif;
	--ept-font-display: "Montserrat", sans-serif;

	/* --- Miary bazowe --------------------------------------------------- */
	--ept-letter-spacing: 0.2px;
	--ept-line-height-body: 24px;
	--ept-line-height-tight: 1.2;

	/* --- Wagi ----------------------------------------------------------- */
	--ept-weight-regular: 400;
	--ept-weight-medium: 500;
	--ept-weight-semibold: 600;
	--ept-weight-bold: 700;

	/* --- Skala (desktop) ------------------------------------------------ */
	--ept-text-hero: 34px;
	--ept-text-title: 34px;
	--ept-text-subtitle: 24px;
	--ept-text-body: 16px;
	--ept-text-body-sm: 14px;
	--ept-text-caption: 12px;
	--ept-text-micro: 10px;

	/* --- Role semantyczne ----------------------------------------------- */
	--ept-font-size-h1: var(--ept-text-hero);
	--ept-font-size-h2: var(--ept-text-title);
	--ept-font-size-h3: var(--ept-text-subtitle);
	--ept-font-size-body: var(--ept-text-body);
	--ept-font-size-label: var(--ept-text-body-sm);
	--ept-font-size-button: var(--ept-text-body-sm);
	--ept-font-weight-button: var(--ept-weight-bold);
	--ept-font-size-nav: var(--ept-text-caption);
}

@media (max-width: 1024px) {
	:root,
	body {
		--ept-text-hero: 26px;
		--ept-text-title: 34px;
		--ept-text-subtitle: 24px;
		--ept-text-body: 14px;
		--ept-text-body-sm: 14px;
		--ept-text-caption: 12px;
	}
}

@media (max-width: 767px) {
	:root,
	body {
		--ept-text-hero: 26px;
		--ept-text-title: 34px;
		--ept-text-subtitle: 24px;
		--ept-text-body: 12px;
		--ept-text-body-sm: 12px;
		--ept-text-caption: 12px;
		--ept-font-size-button: var(--ept-text-caption);
		--ept-font-size-label: var(--ept-text-caption);
	}
}

/* --------------------------------------------------------------------------
   Letter-spacing — 0.2px na wszystkich elementach tekstowych.
   Kit Elementora też ustawia 0.2px na `.elementor-kit-*`; ta reguła łapie
   tagi, które go nie dziedziczą albo go zerują. Specyficzność celowo niska
   (same elementy), żeby Theme Style / widget mógł nadpisać.
   -------------------------------------------------------------------------- */

a,
span,
li,
label,
button,
input,
textarea,
select,
option,
figcaption,
blockquote,
cite,
time,
small,
strong,
b,
em,
i,
td,
th,
dt,
dd,
legend,
summary,
address,
code,
pre,
caption {
	letter-spacing: var(--ept-letter-spacing);
}

/* --------------------------------------------------------------------------
   Bazowe elementy — fallback poza / pod Elementorem.
   Nadpisz w Site Settings → Theme Style, jeśli chcesz inne wartości globalnie.
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ept-font-sans);
	font-size: var(--ept-font-size-body);
	font-weight: var(--ept-weight-regular);
	line-height: var(--ept-line-height-body);
	letter-spacing: var(--ept-letter-spacing);
	color: var(--ept-color-text, #211e1f);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ept-font-display);
	font-weight: var(--ept-weight-bold);
	line-height: var(--ept-line-height-tight);
	letter-spacing: var(--ept-letter-spacing);
	color: inherit;
}

h1 {
	font-size: var(--ept-font-size-h1);
}

h2 {
	font-size: var(--ept-font-size-h2);
}

h3 {
	font-size: var(--ept-font-size-h3);
}

p {
	font-family: var(--ept-font-sans);
	font-size: var(--ept-font-size-body);
	font-weight: var(--ept-weight-regular);
	line-height: var(--ept-line-height-body);
	letter-spacing: var(--ept-letter-spacing);
}

/* Eyebrow / label (np. „TERAPIA”, „SPRAWDŹ CO SIĘ U NAS DZIEJE”). */
.ept-label {
	font-family: var(--ept-font-sans);
	font-size: var(--ept-font-size-label);
	font-weight: var(--ept-weight-semibold);
	letter-spacing: var(--ept-letter-spacing);
	color: var(--ept-color-text-muted, #757575);
}

/* Przyciski — bold (700) na całej stronie (CTA, formularze, Elementor). */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.ept-button,
.elementor .elementor-element :is(
	.elementor-button,
	.button-primary,
	.e-button,
	.e-search-submit,
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"]
) {
	font-weight: var(--ept-font-weight-button);
}

.ept-button {
	font-family: var(--ept-font-sans);
	font-size: var(--ept-font-size-button);
	letter-spacing: var(--ept-letter-spacing);
}