/* BaRock — design system
   Paleta a typografia odvodené z dizajn-referencie (emerald / gold / cream).
   Originálna implementácia; tokeny zdieľa web, /tv aj admin. */

:root {
  /* Zeleň (smaragd) — hlavná značková farba, pozadia tmavých sekcií */
  --emerald:       #1B4332;
  --emerald-dark:  #0F2A1F;
  --emerald-light: #2D6A4F;
  /* Krém — svetlé pozadia obsahu */
  --cream:         #F5F0E6;
  --cream-light:   #FAF7F0;
  /* Zlatá — akcenty, linky, hviezdičky */
  --gold:          #C9A227;
  --gold-soft:     #D9B84A;
  /* Doplnky */
  --warm-brown:    #3D2F22;
  --red:           #B3392E;   /* drobné akcenty, „červené" upozornenia */
  --barock-yellow: #FFD629;   /* značková žltá z loga */

  --text-dark:     #1A1A1A;
  --text-soft:     #5C5C5C;
  --border:        #E0DCD2;

  --sans:  'Helvetica Neue', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --maxw: 1180px;
  --gap:  clamp(1rem, 3vw, 2.5rem);
  --radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* zelený podklad pri „pretiahnutí" (overscroll/bounce) namiesto bielej */
html { scroll-behavior: smooth; background: var(--emerald); }

body {
  font-family: var(--sans);
  color: var(--text-dark);
  background: var(--cream-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }

/* ── Eyebrow label (malý zlatý nadpis nad sekciou) ── */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
}
.stars { color: var(--gold); letter-spacing: .15em; }

/* ── Tlačidlá ── */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: .95rem;
  padding: .85em 1.6em; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold   { background: var(--gold); color: var(--emerald-dark); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost  { border-color: currentColor; color: var(--cream); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark   { background: var(--emerald); color: var(--cream); }
.btn-dark:hover { background: var(--emerald-light); }

/* ── Top-nav (kontaktný pruh) ── */
.topbar {
  background: var(--emerald-dark); color: var(--cream);
  font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding-block: .55rem;
}
.topbar .info { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; opacity: .9; }
.topbar .info b { color: var(--gold); margin-right: .15rem; }
.topbar .social a { color: var(--cream); opacity: .85; margin-left: 1rem; font-weight: 600; }
.topbar .social a:hover { opacity: 1; color: var(--gold-soft); }

/* ── Hlavná navigácia ── */
.mainnav { background: var(--emerald); color: var(--cream); position: sticky; top: 0; z-index: 50; }
.mainnav .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-stars { font-size: .65rem; }
.brand .brand-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--cream); }
.brand .brand-sub  { font-size: .58rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-soft); margin-top: .15rem; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; list-style: none; font-size: .92rem; font-weight: 600; }
.nav-links a { padding-block: .3rem; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-soft); border-color: var(--gold); }
.nav-cta { margin-left: .5rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--cream); font-size: 1.6rem; cursor: pointer; margin-left: auto; }

/* ── Hero ── */
.hero {
  background: radial-gradient(120% 120% at 50% 0%, var(--emerald-light) 0%, var(--emerald) 45%, var(--emerald-dark) 100%);
  color: var(--cream); text-align: center; position: relative; overflow: hidden;
}
.hero .wrap { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; z-index: 2; }
.hero .hero-logo { width: clamp(160px, 26vw, 280px); margin: 0 auto 2rem; }
.hero h1 { max-width: 16ch; margin: 0 auto .4rem; }
.hero h1 .accent { color: var(--gold-soft); font-style: italic; }
.hero p.lead { max-width: 52ch; margin: 1.2rem auto 2rem; font-size: 1.08rem; opacity: .92; }
.hero .cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero::after { /* jemný textúrny prešľah */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 120%, rgba(201,162,39,.18), transparent 70%);
  z-index: 1;
}

/* ── Sekcie ── */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section.cream { background: var(--cream); }
.section.dark  { background: var(--emerald); color: var(--cream); }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto 2.5rem; }
.section-head h2 .accent { color: var(--gold); font-style: italic; }
.section.dark .section-head h2 .accent { color: var(--gold-soft); }
.section-head p { color: var(--text-soft); margin-top: .8rem; }
.section.dark .section-head p { color: rgba(245,240,230,.8); }

/* ── Karta dnešného menu ── */
.menu-teaser { max-width: 760px; margin-inline: auto; background: var(--cream-light);
  border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 10px 30px rgba(15,42,31,.06); }
.menu-teaser .date { text-align: center; color: var(--text-dark); font-size: 1.05rem; font-weight: 600; margin-bottom: 1.5rem; }
/* dátum pod nadpisom „Dnešné menu" (mimo bieleho rámika) */
.section-head .menu-date { color: var(--text-dark); font-weight: 600; font-size: 1.05rem; margin-top: .5rem; }
/* väčší dátum ako nadpis dňa na /denne-menu */
.menu-teaser .date.date-lg { font-family: var(--serif); color: var(--emerald); font-size: clamp(1.3rem, 3.5vw, 1.6rem); font-weight: 700; margin-bottom: 1.1rem; }
/* riadok s časom výdaja/objednávok nad alergénmi (domov) */
.serve-note { text-align: center; color: var(--text-soft); font-size: .9rem; margin: 1.4rem 0 .2rem; }
.menu-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--border); }
.menu-row:last-child { border-bottom: 0; }
.menu-row .pos { font-weight: 700; color: var(--gold); width: 2.4rem; flex: none; }
.menu-row .name { flex: 1; }
.menu-row .price { font-weight: 700; white-space: nowrap; }
.menu-teaser .more { text-align: center; margin-top: 1.6rem; }
.menu-teaser .more a { color: var(--emerald-light); font-weight: 700; }
.placeholder-note { text-align: center; color: var(--text-soft); font-style: italic; }

/* ── Split sekcia (svadby) ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.split .media { aspect-ratio: 4/3; border-radius: 8px; background: var(--emerald-dark) center/cover; }

/* ── Newsletter ── */
.newsletter { text-align: center; }
.newsletter form { display: flex; gap: .6rem; max-width: 460px; margin: 1.5rem auto 0; flex-wrap: wrap; }
.newsletter input[type=email] { flex: 1; min-width: 200px; padding: .85em 1em; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: var(--cream); font-size: 1rem; }
.newsletter input::placeholder { color: rgba(245,240,230,.55); }

/* ── Footer ── */
.footer { background: var(--emerald-dark); color: var(--cream); padding-block: 3rem 1.5rem; font-size: .9rem; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-family: var(--serif); color: var(--gold-soft); margin-bottom: .8rem; font-size: 1.1rem; }
.footer p, .footer a { color: rgba(245,240,230,.85); }
.footer a:hover { color: var(--gold-soft); }
.footer .brand-name { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); }
.footer .legal { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; opacity: .7; font-size: .8rem; }

/* ── Jednoduchá vnútorná stránka (stuby) ── */
.page-hero { background: var(--emerald); color: var(--cream); text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); }
.page-hero .eyebrow { color: var(--gold-soft); }
.prose { max-width: 70ch; margin-inline: auto; }
.prose p { margin-bottom: 1rem; color: var(--text-soft); }

/* ── Responzív ── */
@media (max-width: 820px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--emerald-dark);
    flex-direction: column; gap: 0; padding: .5rem 0; display: none; }
  .nav-links.open { display: flex; }
  /* display:block je kľúčové — inline odkaz si zvislý padding aj spodný okraj
     vylieva mimo riadku a čiary sa kreslia cez text susedných položiek. */
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: .9rem var(--gap);
    border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-links li:last-of-type a { border-bottom: 0; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .mainnav .wrap { position: relative; }
  .split { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
}

/* ── Iterácia 3: logo, sticky ticker, lightbox, cookie, responsive ── */
.brand-logo{ height:46px; width:auto; display:block; }
.stickytop{ position:sticky; top:0; z-index:50; }
.mainnav{ position:static; }   /* sticky rieši .stickytop */

/* Ticker (oznamy po zavretí lightboxu) — scrolluje do boku */
.ticker{ background:var(--gold); color:var(--emerald-dark); overflow:hidden; white-space:nowrap; }
/* obsah je v JS zdvojený (A+A) → posun o -50% = plynulý nekonečný beh bez medzery */
.ticker-track{ display:inline-block; white-space:nowrap; animation:ticker 45s linear infinite; font-weight:700; font-size:.9rem; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{ margin:0 2.5rem; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; padding-left:1rem; } }

/* Zariadenie-špecifické CTA */
.only-mobile{ display:none; } .only-desktop{ display:inline-flex; }
@media (max-width:768px){ .only-mobile{ display:inline-flex; } .only-desktop{ display:none; } }

/* Web lightbox modal (prvá návšteva) */
.lb-overlay{ position:fixed; inset:0; background:rgba(15,42,31,.78); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.lb-card{ background:var(--cream-light); color:var(--text-dark); border-radius:18px; max-width:560px; width:100%;
  overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.45); animation:lbIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lbIn{ from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none} }
.lb-card img{ width:100%; max-height:46vh; object-fit:cover; }
.lb-body{ padding:2rem 2.2rem 2.2rem; text-align:center; }
.lb-body.warn{ border-top:6px solid var(--red); }
.lb-body .lb-kicker{ text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:700; color:var(--gold); margin-bottom:.7rem; }
.lb-body p{ white-space:pre-line; font-size:1.18rem; line-height:1.55; }
.lb-close{ margin-top:1.6rem; padding:.8em 2em; font-size:1rem; }
/* len obrázok (promo/upozornenie bez textu): bez rámu, celý obrázok, klik mimo zatvára */
.lb-imageonly{ max-width:92vw; max-height:90vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:lbIn .35s cubic-bezier(.2,.8,.2,1); object-fit:contain; }
/* malé „×" vpravo hore na zatvorenie image-only */
.lb-x{ position:fixed; top:1.2rem; right:1.4rem; z-index:201; width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.4); color:#fff; border:0; font-size:1.6rem; cursor:pointer; line-height:1; }

/* Cookie banner — nenápadný */
.cookie{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:150; max-width:560px; margin-inline:auto;
  background:var(--emerald-dark); color:var(--cream); border-radius:10px; padding:.9rem 1.1rem;
  display:flex; gap:1rem; align-items:center; box-shadow:0 12px 40px rgba(0,0,0,.3); font-size:.88rem; }
.cookie p{ flex:1; } .cookie a{ color:var(--gold-soft); text-decoration:underline; }
.cookie button{ background:var(--gold); color:var(--emerald-dark); border:0; border-radius:6px; padding:.5rem 1rem; font-weight:700; cursor:pointer; white-space:nowrap; }

/* à la carte / pivo / víno */
.ac-cat{ margin-bottom:2.5rem; }
.ac-cat h3{ font-family:var(--serif); color:var(--gold); font-size:1.5rem; margin-bottom:.4rem; }
.ac-cat .rule{ height:1px; background:var(--border); margin-bottom:1rem; }
.ac-item{ display:flex; gap:1rem; align-items:baseline; padding:.55rem 0; }
.ac-item .nm{ flex:1; } .ac-item .nm .star{ color:var(--gold); }
.ac-item .desc{ color:var(--text-soft); font-size:.9rem; }
.ac-item .al{ color:var(--text-soft); font-size:.78rem; font-style:italic; }
.ac-item .pr{ font-weight:700; white-space:nowrap; }
/* Pivo a víno pod sebou, nie vedľa seba: vínna karta má 12 vín s popismi
   chuti, takže by vedľa piva vyrástla do niekoľkonásobnej výšky. */
.drinks{ display:grid; grid-template-columns:1fr; gap:2rem; }
.drink-card{ background:var(--cream-light); border:1px solid var(--border); border-radius:10px; padding:1.4rem; }
.drink-card h3{ font-family:var(--serif); color:var(--gold); margin-bottom:.2rem; }
.drink-card .sub{ color:var(--text-soft); font-size:.85rem; margin-bottom:1rem; }
.drink-card .d{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px dashed var(--border); }
.drink-card .d:last-child{ border-bottom:0; }
.drink-card .d.tap .n::after{ content:" • na výčape"; color:var(--gold); font-size:.8em; font-weight:700; }

/* ── Vínna karta ──────────────────────────────────────────────────────────
   Biele vľavo, červené vpravo; na mobile pod sebou. Cena drží pravý okraj
   cez margin-left:auto, aby sedela v jednej linke bez ohľadu na dĺžku názvu. */
.wine-cols{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 2.4rem; }
.wine-group h4{ font-family:var(--serif); color:var(--gold-soft); font-size:1.02rem;
                font-style:italic; margin:.6rem 0 .5rem; }
.wine{ padding:.5rem 0; border-bottom:1px dashed var(--border); }
.wine:last-child{ border-bottom:0; }
.wine-head{ display:flex; align-items:baseline; gap:.6rem; }
.wine-name{ font-weight:700; }
.wine-price{ margin-left:auto; color:var(--gold); font-weight:700; white-space:nowrap; }
.wine-meta{ color:var(--text-soft); font-size:.78rem; margin-top:.05rem; }
.wine-descr{ color:var(--text-soft); font-size:.85rem; line-height:1.5; margin:.3rem 0 0; }
@media (max-width:760px){ .drinks{ grid-template-columns:1fr; } .wine-cols{ grid-template-columns:1fr; } }

/* Pätička denného menu (doobjednávky, alergény) */
.menu-foot{ max-width:760px; margin:1.5rem auto 0; padding-top:1.4rem; border-top:1px solid var(--border); text-align:center; }
.menu-foot .xl{ font-weight:700; color:var(--emerald); margin-bottom:1rem; }
.menu-foot .extras{ max-width:420px; margin:0 auto 1rem; }
.menu-foot .extras .et{ font-family:var(--serif); font-weight:700; margin-bottom:.5rem; }
.menu-foot .extras .er{ display:flex; justify-content:space-between; padding:.2rem 0; font-size:.92rem; }
.menu-foot .extras .er .p{ font-weight:700; white-space:nowrap; }
.menu-foot .dis{ font-size:.85rem; color:var(--text-soft); margin-bottom:.6rem; }
.menu-foot .al{ font-size:.78rem; color:var(--text-soft); line-height:1.4; }

/* Jemné oddelenie polievok od hlavných (bez popisu) */
.menu-teaser .grp-sep{ height:0; margin:.9rem 0; border-top:2px solid var(--gold); opacity:.35; }

/* ── Galéria (web) + lightbox s navigáciou ── */
/* Kontakt — dva stĺpce sa „stretnú" v strede: ľavý doprava, pravý doľava */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.contact-grid .cg-left{ text-align:right; }
.contact-grid .cg-right{ text-align:left; }
@media(max-width:640px){
  .contact-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .contact-grid .cg-left, .contact-grid .cg-right{ text-align:center; }
}

/* Masonry cez column-count: každá fotka si drží vlastný pomer strán, takže
   panoráma zostane panorámou a portrét portrétom. Skúšal som jednotné dlaždice
   cez CSS Grid — zarovnané boli dokonale, ale fotky sa museli orezávať, a to
   nechceme. */
.gal-grid{ column-count:3; column-gap:1.25rem; }
/* Fotka je zabalená vo <figure> — drží prekrytie a je položkou stĺpca.
   Medzera pod fotkou je zámerne PADDING, nie margin: vonkajší okraj sa vie
   v stĺpcovom rozložení zliať alebo prepadnúť do ďalšieho stĺpca a odsunúť
   jeho prvú fotku o presne túto hodnotu nižšie (nameraný príznak: tretia
   fotka o 12,8 px nižšie, čo je presne .8rem). Padding je uzavretý v prvku
   a nemá ako uniknúť. Prekrytie sa preto počíta bez tejto medzery. */
.gal-item{ break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0; padding-bottom:1.25rem; position:relative; }
/* Prekrytie pri prejdení myšou: mení sa len farba pozadia pseudo-prvku. */
.gal-item::after{ content:''; position:absolute; inset:0 0 1.25rem 0; border-radius:10px;
  pointer-events:none; background-color:rgba(15,42,31,0); transition:background-color .18s ease; }
.gal-item:hover::after{ background-color:rgba(15,42,31,.20); }
.gal-grid img{ width:100%; height:auto; border-radius:10px; display:block; cursor:zoom-in;
  /* Tieň musí obopínať fotku rovnomerne. Pri väčšom zvislom posune (bolo 6px)
     sa celý zosunie pod fotku: dole mäkký prechod, hore ostrá hrana. Preto malý
     posun a väčší rozptyl — hore aj po stranách zostane rovnaký jemný nádych. */
  box-shadow:0 2px 10px rgba(15,42,31,.10);
  /* Rám je tu stále, len priehľadný — animuje sa iba farba, takže nič neposkakuje. */
  outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color .18s ease, box-shadow .25s ease; }
.gal-item:hover img{ outline-color:var(--gold); box-shadow:0 3px 14px rgba(15,42,31,.18); }
/* HISTÓRIA, nech to niekto nezopakuje: kým bola galéria na column-count,
   čokoľvek, čo vynúti GPU vrstvu (will-change, backface-visibility, translateZ
   aj obyčajný transform pri :hover), spôsobilo, že fotky blikli na bielo alebo
   sa nevykreslili vôbec — stĺpcový kontajner si obsah láme na fragmenty a novú
   vrstvu vnútri musí prekresliť. Odhalené na živej stránke dvakrát.
   Na CSS Grid to neplatí, tá sa nefragmentuje, takže zdvih pri hoveri sa sem
   dá kedykoľvek vrátiť. Ale ak by sa niekto vracal ku column-count — pozor. */
@media (prefers-reduced-motion: reduce){
  .gal-grid img{ transition:none; } .gal-item::after{ transition:none; } }
@media(max-width:820px){ .gal-grid{ column-count:2; } }
@media(max-width:480px){ .gal-grid{ column-count:1; } }
.gal-lb{ position:fixed; inset:0; background:rgba(15,42,31,.94); display:none; align-items:center;
  justify-content:center; z-index:1000; padding:2vw; }
.gal-lb.show{ display:flex; }
.gal-lb img{ max-width:90vw; max-height:92vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
/* neviditeľný štvorcový hitbox, len šípka s tieňom (žiadny kruh → žiadna nesúmernosť) */
.gal-lb .nav{ position:absolute; top:50%; transform:translateY(-50%); width:5rem; height:5rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:4.4rem;
  line-height:1; user-select:none; opacity:.9; text-shadow:0 2px 12px rgba(0,0,0,.75); transition:opacity .15s; }
.gal-lb .nav:hover{ opacity:1; }
.gal-lb .prev{ left:1.5vw; }
.gal-lb .next{ right:1.5vw; }
.gal-lb .cls{ position:absolute; top:2.5vh; right:3vw; width:3rem; height:3rem; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:2.2rem; cursor:pointer; opacity:.85; z-index:2; }

/* Prepínač jazykov — rozbaľovací. V lište je vidieť aktuálny jazyk, po kliknutí
   sa ukážu ostatné. Kódy (SK/EN/DE/RU) namiesto vlajok — vlajka označuje krajinu,
   nie jazyk. Postavené na <details>, takže funguje aj bez JavaScriptu. */
.nav-links .langsw{ position:relative; margin-left:.4rem; padding-left:.9rem;
  border-left:1px solid rgba(245,240,230,.22); }
.langsw details{ position:relative; }
.langsw summary{ display:flex; align-items:center; gap:.35rem; cursor:pointer;
  list-style:none; padding:.3rem .1rem; opacity:.75; font-size:.8rem; font-weight:800;
  letter-spacing:.05em; user-select:none; }
.langsw summary::-webkit-details-marker{ display:none; }
.langsw summary:hover,.langsw details[open] summary{ opacity:1; color:var(--gold-soft); }
.langsw .chev{ width:.42em; height:.42em; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s ease; }
.langsw details[open] .chev{ transform:rotate(-135deg) translate(-2px,-2px); }
.langmenu{ position:absolute; top:calc(100% + .55rem); right:0; z-index:60;
  min-width:11rem; list-style:none; padding:.3rem; margin:0;
  background:var(--emerald-dark); border:1px solid rgba(245,240,230,.16);
  border-radius:8px; box-shadow:0 14px 34px rgba(0,0,0,.35); }
.langmenu li{ margin:0; }
.langmenu a{ display:flex; align-items:center; gap:.5rem; padding:.55rem .6rem;
  border-radius:6px; font-size:.92rem; font-weight:600; letter-spacing:0;
  border-bottom:0; opacity:.9; white-space:nowrap; }
.langmenu a:hover{ background:rgba(245,240,230,.1); opacity:1; color:var(--gold-soft); }
.langmenu a.cur{ color:var(--gold-soft); }
.langmenu .tick{ width:.9em; flex:none; text-align:center; font-weight:700; }

/* Mobil: prepínač je posledná položka rozbaleného menu. Zoznam sa nevznáša nad
   obsahom, ale sa rozbalí v toku — inak by na malej obrazovke prekryl navigáciu. */
@media(max-width:820px){
  .nav-links .langsw{ margin:0; padding:0; border-left:0;
    border-top:1px solid rgba(245,240,230,.14); }
  .langsw summary{ padding:.9rem var(--gap); font-size:.95rem; opacity:.9;
    justify-content:space-between; }
  .langmenu{ position:static; min-width:0; border:0; border-radius:0; box-shadow:none;
    background:rgba(0,0,0,.22); padding:.2rem 0; }
  .langmenu a{ padding:.75rem var(--gap); border-radius:0; font-size:.95rem; }
}