/* Language Selector Styles */
.header-right {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: end;
	z-index: 9999;
}

.language-selector {
	display: flex;
	margin-right: 2rem;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-semibold);
}

.language-option {
	position: relative;
	padding: 0.25rem 0.5rem;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.3s ease;
	font-size: 24px;
	line-height: 30px;
}

.language-option:first-child {
	margin-right: 1rem;
}

.language-option.active {
	color: var(--color-text-primary);
}

.language-option.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 1px;
	background-color: var(--color-text-primary);
}

.language-option:hover {
	color: var(--color-text-primary);
}

.language-selector li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Style for language links - applying your language-option styles */
.language-selector a {
	position: relative;
	padding: 0.25rem 0.5rem;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.3s ease;
	font-size: 24px;
	line-height: 30px;
}

/* Add spacing between language items */
.language-selector a:not(:last-child) {
	margin-right: 1rem;
}

/* Current language styling - applying your active styles */
.language-selector a.active {
	color: var(--color-text-primary);
}

/* Active language underline */
.language-selector a.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 1px;
	background-color: var(--color-text-primary);
}

/* Hover state */
.language-selector a:hover {
	color: var(--color-text-primary);
}

/* Remove the default bullet points from the language list */
.language-selector ul {
	display: flex;
	margin: 0;
	padding: 0;
}

@media (max-width: 425px) {
	.language-selector.flex {
		display: flex !important;
	}
	.language-selector {
		display: none;
	}
}