/*
 * Language switcher (resources/views/layouts/partials/language-switcher.blade.php).
 * Built on <details>/<summary>: open/close works without JavaScript.
 * Solid brand colours only, no gradients (.cursor/rules/no-gradients.mdc).
 */

.lang-switch { position: relative; }

/* The button: globe icon + current code ("DE"). */
.lang-switch summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 40px;
    margin-top: 2px;
    font-weight: 600;
    color: #1C5253;
    background: #F5F8F7;
    border-radius: 20px;
    cursor: pointer;
    list-style: none; /* Hides the default triangle (Firefox). */
    user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; } /* Same, Safari/Chrome. */
.lang-switch summary:hover,
.lang-switch[open] summary { color: #FFFFFF; background: #306B34; }
.lang-switch summary i { font-size: 15px; }

/* ---------- Desktop: dropdown panel with 3 columns of languages ---------- */
.lang-switch--header .lang-switch__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 2px 8px;
    width: max-content;
    margin: 0;
    padding: 14px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #E3EAE7;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(28, 82, 83, 0.15);
}

/* The theme sets line-height 44px on header links: make language links compact. */
.lang-switch .lang-switch__list a,
.main-header .header-upper .links-box .link .lang-switch__list a {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #1C5253;
    border-radius: 8px;
}
.lang-switch .lang-switch__list a:hover,
.main-header .header-upper .links-box .link .lang-switch__list a:hover { color: #1C5253; background: #F5F8F7; }
.lang-switch .lang-switch__list a.is-current,
.main-header .header-upper .links-box .link .lang-switch__list a.is-current { color: #FFFFFF; background: #306B34; }

/* ---------- Mobile side menu: the list opens below the button, 2 columns ---------- */
.lang-switch--mobile .lang-switch__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* Right-to-left pages: the dropdown opens towards the left edge instead. */
[dir="rtl"] .lang-switch--header .lang-switch__list { right: auto; left: 0; }