/*
 * FABLE — izbirnik jezika na telefonu kot spodnje okno (splet in aplikacija).
 *
 * Osnovni gradnik (<details class="lang-switch">) je v style-child.css; na ozkem zaslonu je spustni seznam v meniju
 * in nogi segal čez desni rob, zato se tu odpre kot spodnje okno, enako kot razvrščanje v aplikaciji (css/app.css).
 * Ozadje je ::before odprtega <details>, da dotik nanj ne zadene povezave pod njim (zapre ga js/lang-switch.js).
 * Mobilni meni (z-index 999) je pod glavo (1000), zato glavo, ko je okno odprto iz menija, zatemni ::after.
 * Naložen pred dark-mode.css; temna pravila spodaj imajo zato večjo specifičnost kot tista v dark-mode.css.
 */
/* Slovenska zastavica: krog pri grbu na levem delu zastave, ne na sredini (object-fit: cover je v style-child.css). */
.lang-switch-flag[src$="/si.png"] { object-position: 0 50%; }
/* Glava na telefonu: okrogla zastavica levo od iskanja. Glava sicer skrije vse razen iskanja (style-child.css,
   body:not(.search) .header-right > :not(.fsp-open)), zato pravilo z večjo specifičnostjo. */
@media (max-width: 768px) {
  html body .header-right > .header-lang:not(.fsp-open) { display: inline-flex !important; }
  .header-lang .lang-switch > summary { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-lang .lang-switch > summary .lang-switch-name,
  .header-lang .lang-switch > summary .lang-switch-chev { display: none; }
  .header-lang .lang-switch > summary .lang-switch-flag { width: 24px; height: 24px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
}

@keyframes lang-sheet-up { from { transform: translateY(100%); } }
@keyframes lang-sheet-fade { from { opacity: 0; } }

@media (max-width: 760px) {
  .lang-switch[open]::before {
    content: ""; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.45); animation: lang-sheet-fade .3s;
  }
  html:has(.mobile-nav-drawer.open .lang-switch[open]) header.site-header::after {
    content: ""; position: absolute; inset: 0; z-index: 100002; background: rgba(0,0,0,.45); animation: lang-sheet-fade .3s;
  }
  .lang-switch[open] .lang-switch-list {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 100001; width: auto; min-width: 0;
    max-height: calc(100vh - env(safe-area-inset-top) - 24px); max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
    box-sizing: border-box; padding: 26px 0 env(safe-area-inset-bottom); border: 0; border-radius: 16px 16px 0 0;
    background: #fff; box-shadow: 0 -8px 32px rgba(0,0,0,.16); animation: lang-sheet-up .3s cubic-bezier(.2,.7,.2,1);
  }
  .lang-switch[open] .lang-switch-list::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
    border-radius: 3px; background: #d4d4d8;
  }
  /* vrstice kot pri razvrščanju: 16 px, črte, izbrani jezik krepko s kljukico (velja tudi v črni nogi) */
  .lang-switch[open] .lang-switch-opt {
    gap: 14px; padding: 16px 20px !important; border-bottom: 1px solid #e4e4e7 !important; background: none !important;
    color: #18181b !important; font-size: 16px; line-height: 22px;
  }
  .lang-switch[open] li:last-child .lang-switch-opt { border-bottom: 0 !important; }
  .lang-switch[open] .lang-switch-list .lang-switch-flag { width: 24px; height: 24px; }
  .lang-switch[open] .lang-switch-opt.is-active::after {
    content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[data-theme="dark"] .lang-switch[open] .lang-switch-list { background: var(--fd-surface, #1a1d21); box-shadow: 0 -8px 32px rgba(0,0,0,.5); }
  html[data-theme="dark"] .lang-switch[open] .lang-switch-list::before { background: var(--fd-border-strong, #3a3f45); }
  html[data-theme="dark"] .lang-switch[open] .lang-switch-list .lang-switch-opt { border-bottom-color: var(--fd-border, #2a2e33) !important; color: var(--fd-text, #e8e8ea) !important; }
}