/**
 * Language switcher (P1-09) — styly pro stranky/layout/partials/language-switcher.blade.php.
 *
 * Dvě varianty: textový seznam (footer) a vlaječková s názvem jazyka
 * (modifikátor .language-switcher--flags — topbar + mobilní menu; vlaječky
 * jen pro jazyky se souborem v public/img/flag/, ostatní zůstanou textově).
 * Položky oddělené svislítkem přes ::after (žádná inline separator logika
 * v blade).
 *
 * Soubor se linkuje jen podmíněně (viz master.blade.php <head>, stejná
 * podmínka jako partial) — na prod (enabled=['cs']) se <link> vůbec
 * neemituje, takže i tento soubor zůstává mrtvý bez viditelného dopadu.
 */

.language-switcher {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
}

.language-switcher-item {
    display: inline-block;
}

.language-switcher-item:not(:last-child)::after {
    content: "|";
    margin: 0 6px;
    opacity: .5;
}

.language-switcher-current,
.language-switcher-link {
    text-transform: uppercase;
}

.language-switcher-current {
    font-weight: 700;
    color: inherit;
}

.language-switcher-link {
    color: inherit;
    text-decoration: none;
}

.language-switcher-link:hover,
.language-switcher-link:focus {
    text-decoration: underline;
}

.language-switcher-prefix {
    margin: 0 6px;
    opacity: .5;
}

/* Vlaječková varianta (topbar, mobilní menu) — název jazyka v přirozené
   velikosti písmen, vlaječka zarovnaná na účaří textu. */
.language-switcher--flags .language-switcher-current,
.language-switcher--flags .language-switcher-link {
    text-transform: none;
}

.language-switcher-flag {
    width: 16px;
    height: auto;
    margin-right: 5px;
    vertical-align: text-bottom;
}

/* Rolovátko (topbar) — čistě CSS dropdown přes :hover/:focus-within,
   žádný JS. Toggle je <button> kvůli klávesnici a touch zařízením
   (tap = focus = focus-within). */
.language-switcher--dropdown {
    position: relative;
    display: inline-block;
}

.language-switcher-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.language-switcher-caret {
    margin-left: 6px;
    font-size: 10px;
    opacity: .6;
}

.language-switcher-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e9e9e9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    text-align: left;
    z-index: 1100;
}

.language-switcher--dropdown:hover .language-switcher-menu,
.language-switcher--dropdown:focus-within .language-switcher-menu {
    display: block;
}

.language-switcher-menu .language-switcher-link {
    display: block;
    padding: 7px 14px;
    white-space: nowrap;
}

.language-switcher-menu .language-switcher-link:hover,
.language-switcher-menu .language-switcher-link:focus {
    background: #f5f5f5;
    text-decoration: none;
}

/* Rolovátko se musí vykreslit NAD #header — ten je Bootstrap .col-lg-12
   (position: relative) se z-index: 997 (style.css), takže tvoří stacking
   context nad topbarem, který žádný z-index nemá. Topbar proto zvedneme
   výš; s headerem se nepřekrývá, jediný přesah je právě dropdown menu.
   overflow: visible přebíjí globální `section { overflow: hidden; }`
   (style3.css) — #topbar je <section> a hidden by menu ořízl na hranici
   topbaru (empiricky ověřeno; bez toho se menu vůbec nevykreslí ven).
   (Soubor se linkuje jen při >= 2 zapnutých jazycích — cs prod nedotčen.)
   Hodnota musí zůstat pod Bootstrap modalem (backdrop 1050, dialog 1055),
   jinak topbar překryje promo popup. */
#topbar {
    position: relative;
    z-index: 1000;
    overflow: visible;
}

/* Pozn.: chování topbaru při otevřeném mobilním menu (zůstává vidět, menu
   začíná pod ním, křížek se s ním proto nepřekrývá) řeší style3.css v bloku
   body.mobile-nav-active — ne tenhle soubor, protože se to týká i cs-only
   webu, kde se language-switcher.css vůbec nelinkuje. */

/* Umístění v topbaru za odkazem Přihlásit se (social-links float-right). */
#topbar .social-links .language-switcher-prefix {
    margin: 0 8px 0 10px;
}

#topbar .social-links .language-switcher {
    vertical-align: middle;
}

/* Přebití obecného #topbar .social-links a pravidla (border-left,
   line-height: 1px, padding 4px 12px, display: inline-block) pro odkazy
   uvnitř menu rolovátka. display: block je nutný i tady — obecné pravidlo
   má ID specificitu a přebilo by .language-switcher-menu .language-switcher-link,
   položky by pak nebyly přes celou šířku menu. */
#topbar .social-links .language-switcher-menu a {
    display: block;
    border-left: 0;
    line-height: 1.4;
    padding: 7px 14px;
}

/* Mobilní hamburger menu (#mobile-nav = JS klon #nav-menu-container, viz
   public/front/js/main.js) — switcher tam sedí v posledním <li class="hidden">
   (topMenu.blade.php) ve variantě 'dropdown' s vlaječkami. Bez těchto pravidel
   ho trefí obecné #mobile-nav ul li a (specificita 1-0-3): odkazy v rozbaleném
   seznamu dostanou display: block s paddingem 10px 22px 0 15px a bílou barvu
   textu, tedy bílá na bílé. Selektory proto nesou ID i třídu (1-1-3), aby na
   pořadí <link> nezáleželo — stejný důvod jako u #topbar bloku výše.

   Vzhled (volba vlastníka 10. 8. 2026): pilulkový toggle — bílá pilulka
   s modrým rámečkem a modrým textem, jasně odlišená od modrých pruhů ostatních
   položek menu, protože přepínač jazyka není další cíl navigace, ale ovládací
   prvek. Seznam se rozbaluje DOVNITŘ (position: static), ne jako plovoucí karta:
   #mobile-nav má overflow-y: auto, takže absolutně pozicované menu z topbaru by
   se v něm mohlo oříznout. Otevírá se přes :hover/:focus-within, čistě CSS jako
   v topbaru — tap na dotykovém zařízení = focus = focus-within. */

/* Ostatní <li> v mobilním menu jsou modré pruhy (#mobile-nav ul li v style3.css).
   Přepínač modrý pruh mít nemá — pilulka nese barvu sama a na modré by musela
   být bílá, což by ji smazalo do pozadí. Třída je na <li> v topMenu.blade.php. */
#mobile-nav ul li.menu-language-switcher {
    background: none;
}

#mobile-nav .language-switcher {
    display: block;
    font-size: 16px;
    line-height: 1.375;
}

#mobile-nav .language-switcher--dropdown {
    position: relative;
    width: 100%;
}

/* Toggle — hranatý řádek přes celou šířku jako ostatní položky menu, jen
   v bílé s modrým textem, aby bylo poznat, že je to ovládací prvek. Název
   jazyka je anonymní textový uzel, tedy samostatná flexová položka; mezery
   mezi vlaječkou, názvem a šipkou proto řeší gap, ne padding na šipce
   (padding by rozšířil její box a rotace by pak vypadala jako oblet kolem
   cizí osy). */
#mobile-nav .language-switcher-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid #26ace3;
    border-radius: 0;
    background: #fff;
    color: #26ace3;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.375;
    text-align: left;
}

/* Šipka se plynule otáčí podle aria-expanded, které přepíná JS (main.js).
   Rotace musí být kolem středu GLYFU, ne kolem středu boxu s odsazením —
   proto padding: 0 (mezery řeší gap na toggli), display: block a line-height: 1,
   aby se box neroztahoval nad rámec ikony. Jinak šipka při otočení „obletí"
   cizí osu. */
#mobile-nav .language-switcher-caret {
    display: block;
    margin-left: auto;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    opacity: 1;
    transform-origin: 50% 50%;
    transition: transform .25s ease;
}

#mobile-nav .language-switcher-toggle[aria-expanded="true"] .language-switcher-caret {
    transform: rotate(180deg);
}

/* Rozbalení dovnitř — přebíjí absolutní pozicování z topbarové varianty výše.
   Obsah pod přepínačem se odsune, nic se nepřekrývá ani neořezává (#mobile-nav
   má overflow-y: auto). Panel navazuje přímo na toggle, sdílí s ním okraj. */
#mobile-nav .language-switcher-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0;
    padding: 0;
    border: 1px solid #26ace3;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

/* Padding shodný s ostatními rozbalenými položkami mobilního menu
   (#mobile-nav ul li li ul li a ve style3.css). */
#mobile-nav ul li a.language-switcher-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px 6px 15px;
    background: #fff;
    color: #26ace3;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.375;
    text-decoration: none;
    white-space: normal;
}

#mobile-nav ul li a.language-switcher-link + .language-switcher-link {
    border-top: 1px solid #d9eef8;
}

/* Otevírání řeší JS (main.js, slideToggle) stejně jako u ostatních položek
   mobilního menu — :hover/:focus-within z topbarové varianty se tady musí
   vypnout, jinak by menu zůstalo otevřené po tapu i po zavření a druhý tap
   by ho nezavřel. Inline display z jQuery přebíjí tohle pravidlo, takže
   otevřený stav funguje. */
#mobile-nav .language-switcher--dropdown:hover .language-switcher-menu,
#mobile-nav .language-switcher--dropdown:focus-within .language-switcher-menu {
    display: none;
}

#mobile-nav ul li a.language-switcher-link:hover,
#mobile-nav ul li a.language-switcher-link:focus {
    background: #26ace3;
    color: #fff;
    text-decoration: none;
}

#mobile-nav .language-switcher-flag {
    width: 20px;
    margin-right: 10px;
}

/* Drop-up varianta (footer) — menu se rozbaluje nahoru, stín obrácený. */
.language-switcher--dropup .language-switcher-menu {
    top: auto;
    bottom: 100%;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .1);
}

/* Footer řádek pod menu odkazů — vycentrovaný, vizuálně navazuje na okolní
   footer odkazy (color/font-size shodné s řádky nad ním). Menu vycentrované
   pod/nad togglem (footer je text-center, right: 0 by ujíždělo doleva). */
.language-switcher-footer-row {
    margin-top: 12px;
    color: #444;
    font-size: 13px;
}

.language-switcher-footer-row .language-switcher-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}