/*
 * Language menu (Kyranis_I18n::selector): a globe with the current language
 * in the header; it opens a panel with every language in its own name.
 * Desktop: in the white menu bar, like a menu item. Phone: a small white
 * button next to the menu toggle. lang-rtl.css is the right-to-left copy.
 */
.kz-elm-lang { display: flex; align-items: stretch; }
.kz-lang { position: relative; display: flex; }
.kz-lang > summary { display: flex; align-items: center; gap: 7px; padding: 0 18px; font-size: 15px; font-weight: 700; line-height: 1; color: #5b5b5b; list-style: none; cursor: pointer; user-select: none; transition: color .2s ease-in-out; }
.kz-lang > summary::-webkit-details-marker { display: none; }
.kz-lang > summary::marker { content: ""; }
.kz-lang > summary:hover, .kz-lang[open] > summary { color: var(--kz-accent, #00aeef); }
.kz-lang > summary:focus-visible { outline: 2px solid var(--kz-accent, #00aeef); outline-offset: -4px; border-radius: 4px; }
.kz-lang-globe { width: 19px; height: 19px; flex: none; }
.kz-lang-chevron { width: 11px; height: 11px; flex: none; opacity: .7; transition: transform .2s ease-in-out; }
.kz-lang[open] .kz-lang-chevron { transform: rotate(-180deg); }

.kz-lang-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; box-sizing: border-box; width: 340px; padding: 10px; color: #222; background: #fff; border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06); text-align: right; animation: kz-lang-in .18s ease-out; }
.kz-lang-panel::before { content: ""; position: absolute; top: -6px; left: 26px; width: 12px; height: 12px; background: #fff; transform: rotate(-45deg); border-radius: 2px; }
.kz-lang-title { margin: 2px 8px 8px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #8d969e; }
.kz-lang-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
.kz-lang-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #222; border-radius: 8px; transition: background-color .15s ease-in-out, color .15s ease-in-out; }
a.kz-lang-item:hover, a.kz-lang-item:focus-visible { color: var(--kz-accent, #00aeef); background: #eaf8fe; outline: 0; }
.kz-lang-code { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #9aa3ab; }
a.kz-lang-item:hover .kz-lang-code { color: inherit; }
.kz-lang-item.is-current { color: var(--kz-accent, #00aeef); background: #eaf8fe; }
.kz-lang-check { width: 16px; height: 16px; flex: none; }
/* Languages not shown to visitors yet: only editors see them. */
.kz-lang-item.is-hidden { opacity: .5; }

@keyframes kz-lang-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Phone header: a white button next to the menu toggle. */
.kz-hrow-mobile .kz-elm-lang { align-self: flex-end; } /* level with the menu toggle, which sits at the bottom of the row */
.kz-lang--mobile > summary { gap: 5px; height: 44px; box-sizing: border-box; margin-left: 8px; padding: 0 10px; font-size: 13px; color: var(--kz-accent, #00aeef); background: #fff; border-radius: 3px; }
.kz-lang--mobile > summary:hover, .kz-lang--mobile[open] > summary { color: #fff; background: var(--kz-accent, #00aeef); }
.kz-lang--mobile .kz-lang-globe { width: 17px; height: 17px; }
.kz-lang--mobile .kz-lang-panel { position: fixed; top: 70px; left: 16px; right: 16px; width: auto; }
.kz-lang--mobile .kz-lang-panel::before { display: none; }
@media (max-width: 360px) {
	.kz-lang-panel ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.kz-lang-panel { animation: none; }
	.kz-lang-chevron { transition: none; }
}
