/**
 * Custom CSS for Polylang Language Switcher with Triangle Icon
 * 
 * This file contains the CSS for the custom language switcher widget
 * that uses dht1230-triangle instead of FontAwesome icons
 * 
 * @package HelloElementorChild
 */

/* ===== BACKGROUND CUSTOMIZATIONS ===== */
.cpel-switcher__list {
	background: #363a3b;
}

.cpel-switcher__list {
    background-color: transparent !important;
}

/* ===== TYPOGRAPHY & SIZING OVERRIDES ===== */
/* Override elementor typography for language switcher links - Generic selectors */
.cpel-switcher__code a,
.cpel-switcher__lang a {
	font-size: 18px;
	font-weight: 100;
	line-height: 18px;
	letter-spacing: 0.05em;
	color: var( --e-global-color-2bd602f );
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

/* Widget container height override - Generic selectors */
.cpel-switcher--layout-dropdown.elementor-widget-polylang-language-switcher,
.cpel-switcher--layout-dropdown.elementor-widget-polylang-language-switcher > .elementor-widget-container,
.cpel-switcher--layout-dropdown.elementor-widget-polylang-language-switcher-custom,
.cpel-switcher--layout-dropdown.elementor-widget-polylang-language-switcher-custom > .elementor-widget-container {
	height: 18px;
}

/* Language code positioning */
body .cpel-switcher--layout-dropdown .cpel-switcher__list .cpel-switcher__code {
	position: relative;
	left: 0;
}

body .cpel-switcher__icon {
	padding-left: 0px !important;
}

.cpel-switcher__toggle.cpel-switcher__lang a {
  line-height: 18px;
  padding: 0;
  margin: 0;
  display: inline-flex;
}

/* Icon color override - Generic selector */
.cpel-switcher__icon {
    color: var( --e-global-color-2bd602f );
    padding-left: 5px;
}

/* ===== TRIANGLE ICON SUPPORT ===== */
/* Triangle icon support for language switcher */
.cpel-switcher--layout-dropdown .cpel-switcher__toggle a i,
.cpel-switcher--layout-dropdown .cpel-switcher__toggle .cpel-switcher__icon {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

/* Triangle points down when closed (default state) */
.cpel-switcher--layout-dropdown .cpel-switcher__toggle .cpel-switcher__icon .dht1230-triangle {
    transform: rotate(180deg) scale(0.7);
    transition: transform 0.3s ease;
}

/* Triangle points up when open */
.cpel-switcher--layout-dropdown .cpel-switcher__toggle.cpel-switcher__toggle--on .cpel-switcher__icon .dht1230-triangle {
    transform: rotate(0deg) scale(0.7);
    transition: transform 0.3s ease;
}

/* Toggle dropdown on hover only for desktop */
@media (pointer: fine) {
    .cpel-switcher--drop-on-hover .cpel-switcher__nav:hover .cpel-switcher__toggle .cpel-switcher__icon .dht1230-triangle {
        transform: rotate(0deg) scale(0.7);
        transition: transform 0.3s ease;
    }
}

/* Ensure triangle inherits color from parent */
.cpel-switcher__icon .dht1230-triangle {
    border-bottom-color: currentColor;
}