/*
 * Codelab — oblikovni tokeni in gradniki tečajev.
 * Vrednosti so prepisane iz HTML prototipa (design-ref/).
 */

:root {
	--cl-primary: #7b2fbe;
	--cl-primary-dark: #6220a0;
	--cl-primary-tint: rgba(123, 47, 190, 0.1);
	--cl-teal: #00c4b0;
	--cl-teal-tint: rgba(0, 196, 176, 0.1);
	--cl-navy: #1a1a3e;
	--cl-text: #374151;
	--cl-muted: #6b7280;
	--cl-page: #f8f7ff;
	--cl-lavender: #f1efff;
	--cl-surface: #ffffff;
	--cl-border: #e5e1f5;

	--cl-dashed: #b8b5c4;

	--cl-radius-card: 24px;
	--cl-radius-pill: 9999px;
	--cl-shadow-soft: 0 4px 24px rgba(26, 26, 62, 0.07);
	--cl-shadow-card: 0 8px 32px rgba(123, 47, 190, 0.13);
	--cl-shadow-purple: 0 8px 32px rgba(123, 47, 190, 0.22);
	--cl-shadow-lift: 0 16px 40px rgba(123, 47, 190, 0.16);

	--cl-gap: 24px;
	--cl-section-y: 80px;

	/* Elementorjeva lepljiva glava sedi na z-index 99; predal mora čeznjo. */
	--cl-z-drawer: 900;
}

/* Organska oblika slike v hero sekciji — Elementorjeva kontrola za
   zaobljenost ne pozna zapisa z osmimi vrednostmi. */

.elementor-widget.cl-blob img {
	border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
	border: 8px solid var(--cl-lavender);
	box-shadow: var(--cl-shadow-card);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Slika v sekciji "Za koga je tečaj" — druga organska oblika, bela obroba
   in okrasna kroga za njo. */

.elementor-widget.cl-blob-krogi {
	position: relative;
}

.elementor-widget.cl-blob-krogi img {
	position: relative;
	z-index: 1;
	border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
	border: 8px solid #fff;
	box-shadow: var(--cl-shadow-card);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

.elementor-widget.cl-blob-krogi::before,
.elementor-widget.cl-blob-krogi::after {
	content: "";
	position: absolute;
	border-radius: var(--cl-radius-pill);
	z-index: 0;
	pointer-events: none;
}

.elementor-widget.cl-blob-krogi::before {
	top: -24px;
	right: -24px;
	width: 96px;
	height: 96px;
	background: var(--cl-teal-tint);
}

.elementor-widget.cl-blob-krogi::after {
	bottom: -24px;
	left: -24px;
	width: 128px;
	height: 128px;
	background: var(--cl-primary-tint);
}

/* Lokacijski čipi lebdijo čez desni rob slike. */

@media (min-width: 1025px) {
	#cl-hero-media {
		position: relative;
	}

/* .e-con Elementorja je position:relative pri enaki teži selektorja,
	   zato razred zapišemo skupaj z njim. */
	.e-con.cl-hero-chips {
		position: absolute;
		right: -24px;
		top: 25%;
		z-index: 2;
		/* Širina po najširšem čipu, ne 100 % stolpca — ožji čipi se nanj
		   raztegnejo, tako kot v dizajnu. */
		width: max-content;
	}

}

@media (max-width: 1024px) {
	.e-con.cl-hero-chips {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100% !important;
	}

}

/* ---------- ikone ---------- */

.cl-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: block;
}

/* ---------- ikona v obarvanem kvadratku ---------- */

.cl-iconbox {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 16px;
}

.cl-iconbox--xs .cl-icon {
	width: 15px;
	height: 15px;
}

.cl-iconbox--s .cl-icon {
	width: 18px;
	height: 18px;
}

.cl-iconbox--m .cl-icon {
	width: 22px;
	height: 22px;
}

.cl-iconbox--l .cl-icon {
	width: 26px;
	height: 26px;
}

.cl-iconbox--xl .cl-icon {
	width: 30px;
	height: 30px;
}

.cl-list__items .cl-icon {
	width: 20px;
	height: 20px;
	color: var(--cl-teal);
}

/* Črtkana povezava med koraki, samo na namizju in ne za zadnjim. */
@media (min-width: 1025px) {
	.cl-step::after {
		content: "";
		position: absolute;
		top: 32px;
		left: 50%;
		width: 100%;
		border-top: 2px dashed var(--cl-dashed);
		z-index: 0;
	}

}

/* ---------- kartica tečaja (Loop Item) ---------- */

.cl-cardmeta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid var(--cl-lavender);
	border-bottom: 1px solid var(--cl-lavender);
}

/* Trije podatki morajo ostati v eni vrstici tudi pri daljši ceni
   ("50 € na mesec"), zato je pisava manjša in se ne lomi. */
.cl-cardmeta__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--cl-text);
}

.cl-cardmeta__item .cl-icon {
	width: 15px;
	height: 15px;
	color: var(--cl-primary);
}

/* Cena je poudarjena in turkizna, kot v dizajnu. */
.cl-cardmeta__item:last-child {
	font-weight: 700;
	color: var(--cl-navy);
}

.cl-cardmeta__item:last-child .cl-icon {
	color: var(--cl-teal);
}

/* Značka je gradnik Naslov z dinamičnim poljem; razred pristane na ovoju,
   zato pilulo nariše naslov znotraj, ovoj pa se samo skrči na vsebino. */
.cl-badge {
	flex: 0 0 auto;
	width: auto;
}

.cl-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--cl-radius-pill);
	background: var(--cl-primary-tint);
	color: var(--cl-primary);
	font-size: 13px;
	font-weight: 700;
	/* 13 × 1.2 + 2 × 4 px odmika = 24 px, kot v dizajnu. */
	line-height: 1.2;
	white-space: nowrap;
}

/* Vsaka druga kartica dobi turkizno značko, kot v dizajnu. */
.e-loop-item:nth-child(even) .cl-badge .elementor-heading-title {
	background: var(--cl-teal-tint);
	color: var(--cl-teal);
}

/* ---------- odzivnost ---------- */

@media (max-width: 1024px) {
	.cl-cards {
		grid-template-columns: repeat(min(var(--cl-cols, 3), 3), minmax(0, 1fr));
	}

}

@media (max-width: 767px) {
	:root {
		--cl-section-y: 64px;
	}

}

/* ---------- drobtine ---------- */

.cl-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cl-muted);
}

.cl-crumbs a {
	color: var(--cl-primary);
	text-decoration: none;
}

.cl-crumbs a:hover {
	text-decoration: underline;
}

/* ---------- naslovnica na kartici tečaja ---------- */

.elementor-widget.cl-course-cover img {
	width: 100%;
	height: 208px;
	object-fit: cover;
	display: block;
}

/* ---------- mreža tečajev ---------- */

/* Brez min-width:0 najmanjša vsebina (768 px široka slika) razširi stolpce
   mreže čez vsebnik. */
.elementor-grid-item,
.e-loop-item {
	min-width: 0;
}

/* Zadnja vrstica je sredinsko poravnana, kadar ni polna (5 tečajev = 3 + 2).
   Mreža tega ne zna, zato postavitev prevzame flex; širina kartice ostane
   enaka, ker je izračunana iz Elementorjevih spremenljivk za stolpce in
   razmik — te sledijo prelomnim točkam (3 / 2 / 1) in se ohranijo, tudi če
   se število stolpcev v builderju spremeni. */
.elementor-widget-loop-grid .elementor-loop-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.elementor-widget-loop-grid .elementor-loop-container > .e-loop-item {
	flex: 0 1 calc(
		(100% - (var(--grid-columns, 3) - 1) * var(--grid-column-gap, 32px)) /
			var(--grid-columns, 3)
	);
}

.elementor-widget.cl-course-cover,
.elementor-widget.cl-course-cover .elementor-widget-container {
	width: 100%;
}

.elementor-widget.cl-course-cover img {
	width: 100%;
	max-width: 100%;
	height: 208px;
	object-fit: cover;
	display: block;
}

/* Naslov se lomi po besedah, značka ostane v eni vrstici. */
.cl-card-head {
	align-items: flex-start;
}

.cl-card-head > .elementor-widget-theme-post-title {
	flex: 1 1 auto;
	min-width: 0;
}

.cl-card-head > .elementor-widget-shortcode {
	flex: 0 0 auto;
	width: auto;
}

/* Naslovi tečajev se lomijo po besedah, ne sredi besede.
 *
 * Naslov ima rezervirani dve vrstici (2 × line-height 1.4 = 2.8em), da
 * daljši naslov ne zamakne mete, opisa in gumba pri sosednjih karticah.
 * Enovrstični naslovi tako dobijo eno vrstico rezerve. */
.cl-card-head .elementor-heading-title {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	min-height: 2.8em;
}

/* Naslovnica je ovita v povezavo na tečaj; brez display:block se sidro
   skrči na naravno širino slike in slika ne zapolni kartice. */
.elementor-widget.cl-course-cover a {
	display: block;
	width: 100%;
}

/* Gumb na kartici je čez celo širino, kot v dizajnu. */
.cl-course-cta .elementor-button {
	width: 100%;
}

/* Postavitev kartice tečaja pišemo sami.
   Elementor za predlogo Loop Item zgenerira le del pravil (smer in širino,
   ne pa `flex-grow` in `height`), zato kartica ne bi zapolnila celice in
   `margin-top: auto` na gumbu ne bi imel prostora, ki bi ga porabil. */
.e-con.cl-course-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.e-con.cl-course-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Gumb na dno, da so pri vseh tečajih v isti vrstici ne glede na dolžino
   naslova in opisa. */
.e-con.cl-course-body > .cl-course-cta {
	margin-top: auto;
}

/* ---------- številčni krogci v procesnih sekcijah ---------- */

.cl-num .elementor-heading-title,
.cl-num-outline .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--cl-radius-pill);
}

.cl-num .elementor-heading-title {
	background: var(--cl-primary);
	color: #fff;
	border: 4px solid #fff;
	box-shadow: var(--cl-shadow-purple);
}

.cl-num-outline .elementor-heading-title {
	background: var(--cl-page);
	border: 4px solid rgba(123, 47, 190, 0.2);
}

.cl-num-teal .elementor-heading-title {
	border-color: rgba(0, 196, 176, 0.2);
}

/* Črtkana povezava med koraki prijave (samo na namizju). */
@media (min-width: 1025px) {
	.cl-step-link {
		position: relative;
	}

.cl-step-link::after {
		content: "";
		position: absolute;
		top: 32px;
		left: 50%;
		width: 100%;
		border-top: 2px dashed var(--cl-dashed);
		z-index: 0;
	}

.cl-step-link:last-child::after {
		display: none;
	}

.cl-step-link > * {
		position: relative;
		z-index: 1;
	}

}

/* ================================================================
   Gibanje in odziv na miško

   Dizajn te lastnosti nosi v inline slogih (transition, transform,
   animation, backdrop-filter, ::after). Elementor zanje nima kontrol,
   zato so tu — vrednosti so prepisane iz design-ref/home.dc.html.
   ================================================================ */

html {
	scroll-behavior: smooth;
}

/* Lepljiva glava je visoka 80 px — brez tega se cilj sidra skrije podnjo. */
#tecaji,
#kontakt {
	scroll-margin-top: 96px;
}

/* Lepljiva glava je rahlo prosojna in zamegli vsebino pod sabo. */
#codelab-header {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ---------- lebdenje (hero) ---------- */

@keyframes cl-float {
	0%,
	100% {
		transform: translateY(0);
	}

50% {
		transform: translateY(-10px);
	}

}

/* Besedilo hero sekcije se ustavi pri 576 px, slika dobi ostanek. */
.cl-hero-copy {
	max-width: 576px;
}

#cl-hero-media {
	position: relative;
}

/* Okrasna znaka za kodo. Sidrana sta na sliko (in ne na stolpec), ker je
   njen okvir znan — 500 px — postavitev stolpca pa se z Elementorjevimi
   razmiki spreminja. Sta zgolj dekoracija, zato ju bralnik ne dobi. */
@media (min-width: 1025px) {
	.elementor-widget.cl-blob::before,
	.elementor-widget.cl-blob::after {
		position: absolute;
		font-weight: 700;
		line-height: 1;
		pointer-events: none;
		animation: cl-float 3s ease-in-out infinite;
	}

.elementor-widget.cl-blob::before {
		content: "</>";
		top: 10px;
		right: 32px;
		font-size: 60px;
		color: rgba(123, 47, 190, 0.1);
		animation-delay: 0.5s;
	}

.elementor-widget.cl-blob::after {
		content: "{ }";
		bottom: 90px;
		left: -125px;
		font-size: 48px;
		color: rgba(0, 196, 176, 0.2);
		animation-delay: 1.2s;
	}

}

/* Čipi z lokacijami lebdijo zamaknjeno drug za drugim. */
.cl-hero-chips > * {
	animation: cl-float 3s ease-in-out infinite;
}

.cl-hero-chips > *:nth-child(1) {
	animation-delay: 0.2s;
}

.cl-hero-chips > *:nth-child(2) {
	animation-delay: 0.4s;
}

.cl-hero-chips > *:nth-child(3) {
	animation-delay: 0.6s;
}

/* Elementorjev gradnik za ikono postavi ikono kot inline-block, zato pod
   njo ostane prostor za podpisane črke (line-height telesa = 1.65). Zaradi
   tega so bili čipi, ploščice in vrstice s stikom nekaj pikslov previsoki. */
.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon .elementor-icon {
	line-height: 0;
}

/* ---------- odstavki ---------- */

/* WordPress da vsakemu odstavku spodnji odmik (14.4 px), dizajn pa ima
   povsod `margin:0` in razmike ureja s `gap` na vsebniku. Zaradi tega so
   bile kartice, ploščice in sekcije za 15–50 px višje od dizajna.
   Razmik med več odstavki v istem gradniku ostane. */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor p:first-child {
	margin-top: 0;
}

/* ---------- dvig kartice ob prehodu miške ---------- */

.cl-lift,
.e-loop-item > .e-con {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cl-lift:hover,
.e-loop-item > .e-con:hover {
	transform: translateY(-4px);
	box-shadow: var(--cl-shadow-lift);
}

/* ---------- enako visoke kartice korakov ---------- */

/* Stolpec se raztegne čez vso višino vrstice, kartica v njem pa zapolni
   preostanek pod krogcem — sicer so kartice z daljšim besedilom višje. */
@media (min-width: 768px) {
	.cl-steps-row > .e-con {
		align-self: stretch;
	}

.cl-steps-row > .e-con > .e-con {
		flex-grow: 1;
	}

}

/* ---------- gumbi ---------- */

.cl-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease,
		box-shadow 0.2s ease;
}

/* Samostojni poziv k dejanju: 52 px visok, ob prehodu se dvigne. */
.cl-btn--lg .elementor-button {
	min-height: 52px;
}

.cl-btn--lg .elementor-button:hover {
	transform: translateY(-2px);
}

/* Gumb v kartici teče čez celo širino in se ne dviguje. */
.cl-btn--block .elementor-button {
	width: 100%;
}

/* ---------- obrazec ---------- */

.cl-form .elementor-button {
	min-height: 52px;
	border-radius: var(--cl-radius-pill);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cl-form .elementor-button:hover {
	background-color: var(--cl-primary-dark);
	transform: translateY(-2px);
}

/* Vaba za robote (polje "website"): Elementor skrije samo vnosno polje,
   njegova vrstica pa bi pustila prazno režo pred gumbom. */
.cl-form .elementor-field-group-website {
	display: none;
}

/* Privolitveni polji: 16 px kvadratek v barvi znamke, drobno besedilo. */
.cl-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cl-primary);
	flex-shrink: 0;
}

.cl-form .elementor-field-type-acceptance .elementor-field-option label {
	font-size: 12px;
	line-height: 1.5;
	color: var(--cl-text);
}

/* ---------- popup s povpraševanjem ---------- */

/* Elementor da drsečemu delu popupa `max-height: 100vh`, zato se daljši
   obrazec dotakne zgornjega in spodnjega roba zaslona. Nižja meja pusti
   navpično sredinjenemu popupu 32 px zraka nad in pod sabo; `dvh` upošteva
   še naslovno vrstico mobilnih brskalnikov. */
.elementor-popup-modal.dialog-type-lightbox .dialog-message {
	max-height: calc(100vh - 64px);
	max-height: calc(100dvh - 64px);
	/* Zaobljene vogale ima ovoj. Chrome drsnika ob robu ne poreže po
	   zaokrožitvi, zato drsi šele notranji sloj, ta pa ga poreže. */
	border-radius: inherit;
	overflow: hidden;
}

.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor {
	/* Brez min-height se prožni element razpne po vsebini in ne drsi. */
	min-height: 0;
	overflow-y: auto;
	/* Ko je obrazec prevožen do konca, se pomik ne prenese na stran. */
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--cl-border) transparent;
}

/* Chrome in Safari drsnika po `scrollbar-width` ne stanjšata, zato še
   pseudo-elementi. Prosojna obroba s `background-clip` naredi režo med
   ročico in robom popupa, da ročica ne visi na steklu. */
.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor::-webkit-scrollbar {
	width: 10px;
}

/* Puščici na koncih traku sta iz starih časov in kvarita mehko obliko. */
.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor::-webkit-scrollbar-button {
	display: none;
}

.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor::-webkit-scrollbar-track {
	background: transparent;
}

.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor::-webkit-scrollbar-thumb {
	background-color: var(--cl-border);
	background-clip: content-box;
	border: 3px solid transparent;
	border-radius: var(--cl-radius-pill);
}

.elementor-popup-modal.dialog-type-lightbox .dialog-message > .elementor::-webkit-scrollbar-thumb:hover {
	background-color: var(--cl-dashed);
}

@media (max-width: 767px) {
	.elementor-popup-modal.dialog-type-lightbox .dialog-message {
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px);
	}
}

/* ---------- ploščici družbenih omrežij v stiku ---------- */

.e-con.cl-tile {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.e-con.cl-tile:hover {
	border-color: var(--cl-primary);
}

/* ---------- okrogle ikone v nogi ---------- */

.cl-social .elementor-social-icon {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cl-social .elementor-social-icon:hover {
	background-color: var(--cl-primary);
	border-color: var(--cl-primary);
}

.cl-social .elementor-social-icon:hover i,
.cl-social .elementor-social-icon:hover svg {
	color: #fff;
	fill: #fff;
}

/* Kredit izdelovalca v nogi kaže na flick-web.com. Tema povezavam v besedilu
   da svojo rožnato barvo, v dizajnu pa je ime temno modro in se ob prehodu
   miške obarva vijolično — enako kot preostale povezave v nogi. */
.cl-credit a {
	color: var(--cl-navy);
	text-decoration: none;
	transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-credit a:hover,
.cl-credit a:focus {
	color: var(--cl-primary);
}

/* Dva razreda, ker Elementor nosi `.elementor img { height: auto }` — z enim
   razredom bi slika obdržala naravno višino in blob oblike ne bi zapolnila. */
.cl-heromedia__frame .cl-heromedia__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Neizpolnjeno polje izriše prazen shortcode gradnik. Ta v stolpcu še vedno
   šteje v flex razmik, zato med naslovom in gumbom zazija luknja — skrijemo
   ga. Brskalniki brez :has pravilo spregledajo in dobijo le večji razmik. */
.elementor-widget-shortcode:has(> .elementor-shortcode:empty) {
	display: none;
}

.cl-opomba--rahla .cl-icon {
	width: 16px;
	height: 16px;
}

.cl-opomba--poudarjena .cl-icon {
	width: 20px;
	height: 20px;
}

.cl-socialni__ikona .cl-icon {
	width: 18px;
	height: 18px;
}

/* ---------- vijoličen pas s pozivom ---------- */

.e-con.cl-cta {
	position: relative;
	overflow: hidden;
}

/* Znaka </> in { } v ozadju. Dekoracija, zato brez vsebine za bralnik. */
.e-con.cl-cta::before,
.e-con.cl-cta::after {
	position: absolute;
	font-size: 128px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.e-con.cl-cta::before {
	content: "</>";
	top: 40px;
	right: 40px;
}

.e-con.cl-cta::after {
	content: "{ }";
	bottom: -50px;
	left: -20px;
}

.e-con.cl-cta > * {
	position: relative;
	z-index: 1;
}

.cl-btn--cta .elementor-button {
	min-height: 64px;
	font-size: 20px;
	font-weight: 800;
	padding-left: 40px;
	padding-right: 40px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.elementor-widget.cl-cta__slika {
	max-width: 384px;
}

.elementor-widget.cl-cta__slika img {
	width: 100%;
	border-radius: 16px;
	border: 4px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
	display: block;
}

/* ---------- glava na ozkih zaslonih ---------- */

/* Do 1024 px so v glavi le logotip in gumb za meni. Povezave in "Prijava"
   se preselijo v predal — gumb je bil na telefonu pretežak, ker je poleg
   burgerja tekmoval za isto vlogo, meni pa je bil gol spustni seznam.
   Elementorjev burger zato ni v rabi (gradnik menija je tu skrit); predal
   izriše inc/drawer.php, odpira pa codelab.js. */

.cl-burger-w {
	display: none;
}

@media (max-width: 1024px) {
	/* Vrsta gradnika je v selektorju zato, ker Elementor gradniku menija
	   sam zapiše prikaz s prav tako težkim selektorjem — brez nje ostane
	   njegov burger poleg našega. */
	.e-con.cl-headerbar .elementor-widget-nav-menu.cl-nav,
	.e-con.cl-headerbar .elementor-widget-button.cl-header-cta {
		display: none;
	}

	/* `margin-left: auto` potisne burger na desno. Poravnave ni mogoče
	   doseči s `--justify-content`: Elementor jo zapiše s selektorjem
	   `.elementor-47 .elementor-element.elementor-element-hdr0004`
	   (tri razredne enote), ki premaga karkoli tu. Enako `flex: 0 0 auto`
	   — vsebnik vrstice nastavi `--container-widget-flex-grow: 1`. */
	.e-con.cl-headerbar .cl-burger-w {
		display: block;
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
	}

	/* Logotip se sme skrčiti — na 320 px zaslonu bi oba nezmanjšljiva
	   elementa presegla širino. Burger ostane neokrnjen, popusti logotip,
	   ker je vektorski in ostane oster. */
	.e-con.cl-headerbar .elementor-widget-image {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
	}

	.e-con.cl-headerbar .elementor-widget-image img {
		max-width: 100%;
		height: auto;
	}
}

/* ---------- gumb za meni ---------- */

/* Vrsta elementa je v selektorju povsod, kjer je pod njim gumb ali povezava:
   Elementor Kit obleče vsak <button> in <a> na strani (`.elementor-kit-5 button`),
   kar je enako težko kot goli razred in pride pozneje — burger bi bil brez
   tega vijolična pilula z odmikom 30 px. */
.cl-burger-w button.cl-burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--cl-navy);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-burger-w button.cl-burger:hover {
	background: var(--cl-primary-tint);
	color: var(--cl-primary);
}

.cl-burger-w button.cl-burger:focus-visible {
	outline: 2px solid var(--cl-primary);
	outline-offset: 2px;
}

/* ---------- predal (mobilni meni) ---------- */

/* Nad 1024 px predala ni — meni in gumb sta v glavi. */
@media (min-width: 1025px) {
	.cl-drawer {
		display: none;
	}
}

/* Ostane v dokumentu tudi zaprt, da se odpiranje in zapiranje animirata;
   `visibility` ga vzame bralnikom in kazalcu. */
.cl-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--cl-z-drawer);
	visibility: hidden;
}

.cl-drawer.is-open {
	visibility: visible;
}

.cl-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 62, 0.45);
	opacity: 0;
	transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-drawer.is-open .cl-drawer__scrim {
	opacity: 1;
}

.cl-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(360px, 86vw);
	height: 100dvh;
	padding: 18px 24px 32px;
	background: var(--cl-surface);
	box-shadow: -8px 0 40px rgba(26, 26, 62, 0.22);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cl-drawer.is-open .cl-drawer__panel {
	transform: translateX(0);
}

/* Na telefonu predal pokrije zaslon v celoti. 86vw je puščalo ob robu trak
   zatemnjene strani, ki ni bil ne meni ne vsebina — postavke menija so bile
   videti zamaknjene. Senca ob polni širini nima česa ločevati. */
@media (max-width: 640px) {
	.cl-drawer__panel {
		width: 100%;
		box-shadow: none;
	}
}

/* Gumb za zapiranje stoji tam, kjer je bil burger — glava je visoka 80 px,
   gumb 44 px, torej 18 px odmika zgoraj (padding vsebnika). */
.cl-drawer__top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 44px;
}

/* Logotip v vrhu predala — enak in enako širok kot v glavi na telefonu
   (140 px). `margin-right: auto` ga potisne levo, križec pa pusti desno tudi
   takrat, ko logotipa ni (glej flex-end zgoraj). */
.cl-drawer__logo {
	display: block;
	margin-right: auto;
	line-height: 0;
}

.cl-drawer__logo img {
	display: block;
	width: 140px;
	height: auto;
}

.cl-drawer button.cl-drawer__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--cl-navy);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-drawer button.cl-drawer__close:hover {
	background: var(--cl-primary-tint);
	color: var(--cl-primary);
}

.cl-drawer button.cl-drawer__close:focus-visible,
.cl-drawer a:focus-visible {
	outline: 2px solid var(--cl-primary);
	outline-offset: 2px;
}

.cl-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-drawer__nav li + li {
	border-top: 1px solid var(--cl-border);
}

.cl-drawer .cl-drawer__nav a {
	display: block;
	padding: 15px 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cl-navy);
	text-decoration: none;
	transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Trenutna stran ostane temna — enako kot meni v glavi na namizju. Sicer
   sta obarvani dve postavki hkrati: "Tečaji" in "Kontakt" sta sidri, ki ju
   WordPress na domači strani prav tako šteje za trenutni. */
.cl-drawer .cl-drawer__nav a:hover {
	color: var(--cl-primary);
}

/* `margin-top: auto` pritisne poziv k dejanju na dno predala, tudi ko je
   postavk menija malo. */
.cl-drawer a.cl-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	min-height: 52px;
	padding: 0 32px;
	border-radius: var(--cl-radius-pill);
	background: var(--cl-primary);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--cl-shadow-purple);
	transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-drawer a.cl-drawer__cta:hover,
.cl-drawer a.cl-drawer__cta:focus {
	background: var(--cl-primary-dark);
	color: #fff;
}

/* Stran pod predalom ne drsi. Širino traku nadomesti codelab.js, sicer
   vsebina ob zaklepu poskoči. */
body.cl-drawer-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.cl-drawer__panel {
		transform: none;
		opacity: 0;
		transition: opacity 120ms linear;
	}

	.cl-drawer.is-open .cl-drawer__panel {
		opacity: 1;
	}

	.cl-drawer__scrim {
		transition: none;
	}
}

/* ---------- pogosta vprašanja ---------- */

/* Elementorjeva harmonika je privzeto zložen seznam z eno skupno obrobo,
   dizajn (design-ref/tecaj-scratch.html) pa hoče vsako vprašanje kot svojo
   zaobljeno belo kartico z razmikom, senco in okroglo ikono na desni. Tega
   z nastavitvami gradnika ni mogoče doseči, zato je tu.

   Izbirniki nosijo tri razrede, ker Elementorjeva lastna pravila za
   harmoniko nosijo dva — z dvema bi bil izid odvisen od vrstnega reda
   datotek. */

.cl-faq-widget .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cl-faq-widget .elementor-accordion .elementor-accordion-item {
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius-card);
	overflow: hidden;
	box-shadow: var(--cl-shadow-soft);
}

.cl-faq-widget .elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 32px;
	border: 0;
	transition: background 0.2s ease;
}

.cl-faq-widget .elementor-accordion .elementor-tab-title:hover {
	background: rgba(123, 47, 190, 0.03);
}

/* V označbi stoji ikona pred naslovom; dizajn jo hoče na desni. */
.cl-faq-widget .elementor-accordion .elementor-accordion-title {
	order: 1;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

/* Elementor ikono postavi s float in text-align, in to z izbirnikom s
   štirimi razredi — zato jih ima tole pravilo pet, sicer krogec ostane
   prazen, glaif pa odplava v kot. */
.cl-faq-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
.cl-faq-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left,
.cl-faq-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
	order: 2;
	float: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	line-height: 1;
	border-radius: var(--cl-radius-pill);
	background: rgba(123, 47, 190, 0.05);
	color: var(--cl-primary);
	transition: transform 0.3s ease;
}

/* Plus se ob odpiranju prevrne v minus; oboje izriše Elementor sam, tu se
   zavrti le krogec, da je gib enak kot v prototipu. */
.cl-faq-widget .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	transform: rotate(180deg);
}

.cl-faq-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

.cl-faq-widget .elementor-accordion .elementor-tab-content {
	padding: 24px 32px;
	border: 0;
	border-top: 1px solid var(--cl-border);
}

.cl-faq-widget .elementor-accordion .elementor-tab-content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.cl-faq-widget .elementor-accordion .elementor-tab-title,
	.cl-faq-widget .elementor-accordion .elementor-tab-content {
		padding: 20px;
	}
}

/* ---------- odzivnost strani tečaja ---------- */

@media (max-width: 1024px) {
	.cl-hero__title {
		font-size: 44px;
	}

}

@media (max-width: 767px) {
	.cl-hero__title {
		font-size: 34px;
	}

.e-con.cl-cta::before,
	.e-con.cl-cta::after {
		font-size: 80px;
	}

.elementor-widget.cl-blob-krogi::before,
	.elementor-widget.cl-blob-krogi::after {
		display: none;
	}

}

/* ---------- kdor gibanja ne želi, ga ne dobi ---------- */

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

.cl-hero-chips > *,
	.cl-heromedia__cip,
	.cl-heromedia__deco,
	#cl-hero-media::before,
	#cl-hero-media::after {
		animation: none;
	}

.cl-lift,
	.e-loop-item > .e-con,
	.cl-btn .elementor-button,
	.cl-form .elementor-button,
	.e-con.cl-tile,
	.cl-social .elementor-social-icon {
		transition: none;
	}

.cl-lift:hover,
	.e-loop-item > .e-con:hover,
	.cl-btn--lg .elementor-button:hover,
	.cl-form .elementor-button:hover {
		transform: none;
	}

}