/*!
 * A&A Forgacs Muhelye - Nyelvvalto (Connect Polylang for Elementor widget)
 *
 * A widget sajat Elementor kontrolljai adjak a szineket es a tipografiat;
 * ez a fajl csak azt teszi hozza, amire a widgetnek nincs kontrollja:
 *
 *   - a kapcsolo "pill" kerete es a foldgomb ikon,
 *   - a kapcsolon csak a nyelv KODJA latszik (HU / EN), a teljes nev nem,
 *   - a leguritott listaban kis kod-jelvenY + teljes nyelvnev, ebben a sorrendben,
 *   - a lenyilo panel sotet felulete es hajszalvonala.
 *
 * A panel megjeleneset szandekosan a <li> elemre tesszuk: a plugin a listat
 * max-height: 0 + overflow: hidden modon rejti el, igy csukott allapotban
 * semmilyen keret vagy hatter nem villan be.
 *
 * Szinek: kizarolag a Kit globalis tokenjei, illetve a szovegtokenbol
 * szarmaztatott attetszo hajszalvonalak.
 */

.aa-langsw {
	--aa-ls-hair: rgba(243, 238, 231, 0.16);
	--aa-ls-surface: var(--e-global-color-primary, #1E1612);
	--aa-ls-gold: var(--e-global-color-accent, #B88A4A);
}

/* =========================================================
 * KAPCSOLO (aktualis nyelv)
 * ========================================================= */

.aa-langsw .cpel-switcher__toggle > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--aa-ls-hair);
	line-height: 1;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.aa-langsw .cpel-switcher__toggle > a:hover,
.aa-langsw .cpel-switcher__nav:hover .cpel-switcher__toggle > a {
	border-color: var(--aa-ls-gold);
}

/* Foldgomb ikon - maszkkent, hogy a szinet a szoveg szine adja. */
.aa-langsw .cpel-switcher__toggle > a::before {
	content: '';
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A kapcsolon csak a kod latszik. */
.aa-langsw .cpel-switcher__toggle .cpel-switcher__name {
	display: none;
}

.aa-langsw .cpel-switcher__toggle .cpel-switcher__code {
	margin: 0;
}

.aa-langsw .cpel-switcher__icon {
	font-size: 9px;
	margin-left: 2px;
	transition: transform 0.2s ease;
}

/* =========================================================
 * LENYILO LISTA
 * ========================================================= */

.aa-langsw .cpel-switcher__list {
	min-width: 190px;
	align-items: stretch;
}

.aa-langsw .cpel-switcher__toggle--on + .cpel-switcher__list {
	max-height: 260px;
}

@media (pointer: fine) {
	.aa-langsw.cpel-switcher--drop-on-hover .cpel-switcher__nav:hover .cpel-switcher__list {
		max-height: 260px;
	}
}

.aa-langsw .cpel-switcher__list .cpel-switcher__lang {
	background: var(--aa-ls-surface);
	border: 1px solid var(--aa-ls-hair);
	margin-top: 8px;
	box-shadow: 0 18px 40px rgba(15, 11, 9, 0.45);
}

.aa-langsw .cpel-switcher__list .cpel-switcher__lang + .cpel-switcher__lang {
	margin-top: -1px;
	box-shadow: none;
}

.aa-langsw .cpel-switcher__list .cpel-switcher__lang a {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
}

/* Kod-jelveny elol, utana a teljes nyelvnev. */
.aa-langsw .cpel-switcher__list .cpel-switcher__code {
	order: -1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 6px 0;
	border: 1px solid var(--aa-ls-hair);
	font-size: 11px;
	letter-spacing: 1px;
	margin: 0;
}

.aa-langsw .cpel-switcher__list .cpel-switcher__name {
	text-transform: none;
	letter-spacing: 0.2px;
	font-size: 13px;
	margin: 0;
}

/* =========================================================
 * MOBIL
 * ========================================================= */

/* A nyelvvalto a menusor es az ajanlatkero gomb kozott all, ezert a fejlecben
   nem foglalhat felesleges helyet. Kisebb kepernyokon a foldgomb ikon elmarad,
   igy a kapcsolo a nyelv kodjara es a nyilra zsugorodik. */
@media (max-width: 1024px) {
	.aa-langsw .cpel-switcher__toggle > a {
		padding-left: 12px;
		padding-right: 12px;
		gap: 6px;
	}
}

@media (max-width: 767px) {
	.aa-langsw .cpel-switcher__toggle > a {
		padding-left: 9px;
		padding-right: 9px;
		gap: 5px;
	}

	.aa-langsw .cpel-switcher__toggle > a::before {
		display: none;
	}

	.aa-langsw .cpel-switcher__list {
		min-width: 170px;
	}
}
