/* LMS Theme — tokeny i style bazowe
   Zrodlo: specyfikacja "Marketplace • Developer handoff" (sekcja Design System).
   Wszystkie pozostale arkusze korzystaja z tych zmiennych - kolor albo promien
   zmienia sie w jednym miejscu. */

:root {
	/* Marka */
	--lms-purple: #833ab4;
	--lms-pink: #e1306c;
	--lms-orange: #f77737;
	--lms-yellow: #fcaf45;
	--lms-gradient: linear-gradient(90deg, #833ab4 0%, #e1306c 52%, #f77737 100%);
	--lms-gradient-soft: linear-gradient(135deg, #f3e8fb 0%, #fde6ef 55%, #ffeede 100%);

	/* Tekst i tla */
	--lms-text: #17151a;
	--lms-text-2: #4d4852;
	--lms-muted: #736e79; /* #8B8790 ze specyfikacji przyciemniony do kontrastu 4.5:1 na bialym */
	--lms-bg: #fcfafd;
	--lms-surface: #ffffff;
	--lms-surface-2: #f8f5fa;
	--lms-border: #e8e5ea;
	--lms-border-strong: #d9d4dd;
	--lms-dark: #17151a;

	/* Stany */
	--lms-success: #20c997;
	--lms-error: #d64545;
	--lms-info: #5b7cfa;

	/* Pastelowe tla ikon i kafli */
	--lms-tint-purple: #f1e7f9;
	--lms-tint-pink: #fde7ef;
	--lms-tint-orange: #ffeee2;
	--lms-tint-yellow: #fff4dd;
	--lms-tint-blue: #e8eeff;
	--lms-tint-green: #e2f8f0;

	/* Typografia */
	--lms-font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--lms-h1: clamp(36px, 4.4vw, 56px);
	--lms-h2: clamp(24px, 2.4vw, 30px);
	--lms-h3: 20px;

	/* Ksztalt */
	--lms-radius-card: 20px;
	--lms-radius-md: 16px;
	--lms-radius-control: 12px;
	--lms-radius-pill: 999px;
	--lms-shadow-card: 0 8px 30px rgba(23, 21, 26, 0.06);
	--lms-shadow-elevated: 0 16px 50px rgba(23, 21, 26, 0.1);
	--lms-shadow-glow: 0 12px 32px rgba(225, 48, 108, 0.18);
	--lms-focus: 0 0 0 3px rgba(131, 58, 180, 0.28);

	/* Uklad */
	--lms-container: 1280px;
	--lms-gutter: 32px;
	--lms-gap: 24px;
	--lms-section: 88px;
	--lms-header-h: 80px;
	--lms-ease: 0.22s ease;
}

@media (max-width: 1023px) {
	:root {
		--lms-gutter: 24px;
		--lms-gap: 20px;
		--lms-section: 60px;
	}
}

@media (max-width: 767px) {
	:root {
		--lms-gutter: 20px;
		--lms-gap: 16px;
		--lms-section: 44px;
		--lms-header-h: 64px;
	}
}

/* Elementor: globalne kolory i kroje zestawu (kit) sprowadzamy do tokenow motywu.
   Zmienne zestawu sa zapisane na klasie .elementor-kit-*, wiec nadpisujemy je
   selektorem o wyzszej wadze. */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--lms-purple);
	--e-global-color-secondary: var(--lms-text);
	--e-global-color-text: var(--lms-text-2);
	--e-global-color-accent: var(--lms-pink);
	--e-global-typography-primary-font-family: "Plus Jakarta Sans";
	--e-global-typography-secondary-font-family: "Plus Jakarta Sans";
	--e-global-typography-text-font-family: "Plus Jakarta Sans";
	--e-global-typography-accent-font-family: "Plus Jakarta Sans";
	--e-global-typography-primary-font-weight: 700;
	--e-global-typography-secondary-font-weight: 600;
}

/* Tutor LMS: akcenty wtyczki w kolorach marki (panel kursanta, lekcje, formularze). */
body,
body .tutor-wrap,
body .tutor-wrap-parent {
	--tutor-color-primary: #833ab4;
	--tutor-color-primary-rgb: 131, 58, 180;
	--tutor-color-primary-hover: #6d2f97;
	--tutor-color-primary-hover-rgb: 109, 47, 151;
	--tutor-body-color: #17151a;
	--tutor-body-color-rgb: 23, 21, 26;
	--tutor-border-color: #e8e5ea;
	--tutor-border-color-rgb: 232, 229, 234;
	--tutor-color-secondary: #4d4852;
	--tutor-color-muted: #736e79;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--lms-header-h) + 72px);
}

body {
	font-family: var(--lms-font);
	font-size: 16px;
	line-height: 1.625;
	color: var(--lms-text-2);
	background: var(--lms-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--lms-font);
	font-weight: 700;
	color: var(--lms-text);
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

h1 {
	font-size: var(--lms-h1);
	line-height: 1.14;
}

h2 {
	font-size: var(--lms-h2);
	line-height: 1.25;
}

h3 {
	font-size: var(--lms-h3);
	line-height: 1.4;
}

h4 {
	font-size: 18px;
	line-height: 1.45;
}

p {
	margin: 0 0 16px;
}

a {
	color: var(--lms-purple);
	text-decoration: none;
	transition: color var(--lms-ease);
}

a:hover {
	color: var(--lms-pink);
}

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

:focus-visible {
	outline: 2px solid var(--lms-purple);
	outline-offset: 2px;
}

::selection {
	background: rgba(131, 58, 180, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Uklad */

.lms-container {
	width: min(100% - (2 * var(--lms-gutter)), var(--lms-container));
	margin-inline: auto;
}

.lms-main {
	display: block;
	padding-bottom: var(--lms-section);
}

.lms-section {
	margin-top: var(--lms-section);
}

.lms-section--tight {
	margin-top: calc(var(--lms-section) * 0.62);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.lms-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1000;
	padding: 12px 16px;
	border-radius: var(--lms-radius-control);
	background: var(--lms-dark);
	color: #fff;
	font-weight: 600;
}

.lms-skip-link:focus {
	top: 16px;
	color: #fff;
}

/* Naglowki i teksty widgetow Elementora w palecie motywu */
.elementor-widget-heading .elementor-heading-title {
	color: var(--lms-text);
	font-family: var(--lms-font);
	letter-spacing: -0.02em;
}

.elementor-widget-text-editor {
	color: var(--lms-text-2);
	font-family: var(--lms-font);
}

/* Elementor: sekcje stron budowanych z szablonow motywu trzymaja wspolny kontener,
   a odstepy miedzy widgetami ustawia arkusz motywu, nie domyslne 20 px Elementora. */
.elementor-section.lms-sec > .elementor-container {
	max-width: var(--lms-container);
	width: min(100% - (2 * var(--lms-gutter)), var(--lms-container));
}

.elementor-section.lms-sec > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

.elementor-section.lms-sec .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

.elementor-section.lms-sec--full > .elementor-container {
	max-width: none;
	width: 100%;
}

/* Widget z przewijanym w poziomie rzedem (pas firm, karuzela kursow) nie moze
   rozpychac kolumny - bez tego strona dostaje poziomy pasek na telefonie. */
.elementor-section.lms-sec .elementor-column,
.elementor-section.lms-sec .elementor-widget-wrap,
.elementor-section.lms-sec .elementor-widget {
	min-width: 0;
	max-width: 100%;
}