/* Jednotná navigace — sdílená všemi stránkami.
   Barvy se berou z :root, který si každá stránka definuje sama (stejné hodnoty). */

/* Tmavý pruh proti krémovému listu. Světlý na světlém se přehlédne, proto se
   navigace drží barvy pozadí stránky (--forest-dp) a odděluje se zlatou linkou. */
.sitenav{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 26px;
  padding:16px 60px;
  background:var(--forest-dp);
  border-bottom:2px solid var(--gold);
  font-family:'Cormorant Garamond', Georgia, serif;
  position:relative; z-index:6;
}

.sitenav-brand{
  font-family:'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  font-size:17px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
}
.sitenav-brand:hover{ color:var(--cream); border-bottom-color:var(--gold-lt); }

.sitenav-links{ display:flex; flex-wrap:wrap; gap:4px 26px; list-style:none; margin:0; padding:0; }
.sitenav-links a{
  font-size:18px; color:var(--cream); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.sitenav-links a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold-lt); }
.sitenav-links a:focus-visible{ outline:1px dotted var(--gold-lt); outline-offset:4px; }
.sitenav-links a[aria-current="page"]{
  color:var(--gold-lt); border-bottom-color:var(--gold);
}

/* Jazykový přepínač zarovnaný doprava. Vlastnosti se vypisují všechny, protože
   homepage má vlastní .langbar/.lang-btn pravidla a jinak by se lišila od zbytku. */
.sitenav .langbar{
  margin:0 0 0 auto; display:flex; align-items:center; justify-content:flex-end;
  gap:10px; position:relative; z-index:10;
}
.sitenav .lang-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid transparent;
  padding:2px 2px 3px; color:var(--sage); cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.sitenav .lang-btn:hover{ color:var(--cream); border-bottom-color:var(--gold-lt); }
.sitenav .lang-btn:focus-visible{ outline:1px dotted var(--gold-lt); outline-offset:4px; }
.sitenav .lang-btn[aria-current="true"]{
  color:var(--gold-lt); border-bottom-color:var(--gold); cursor:default;
}
.sitenav .lang-sep{ color:var(--gold); opacity:.8; font-size:12px; }

/* druhý pruh — pracovní stránky, které nejsou pro veřejnost */
.sitenav-work{
  background:var(--forest);
  border-bottom:1px solid var(--gold);
  padding-top:10px; padding-bottom:10px;
}
.sitenav-work .sitenav-links a{ font-size:15px; color:var(--parchment); }
.sitenav-work .sitenav-links a:hover{ color:var(--gold-lt); }
.sitenav-worklabel{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lt); white-space:nowrap;
}

/* Ornamenty v rozích jsou position:absolute vůči .sheet a začínají na top:0,
   takže by ležely přes navigaci. Posuneme je pod ni. Výšku pruhů měří site.js
   a zapisuje ji do --navh — pevná hodnota by se rozešla, jakmile se navigace
   na užším displeji zalomí. Číslo ve fallbacku platí pro jednořádkový pruh. */
.sheet.has-nav > .tl,
.sheet.has-nav > .tr{ top:var(--navh, 59px); }

@media (max-width:760px){
  .sitenav{ padding:12px 18px; gap:8px 16px; }
  .sitenav-links{ gap:4px 16px; }
  .sitenav-links a{ font-size:17px; }
  .sitenav .langbar{ margin:0; width:100%; justify-content:flex-start; }
}

/* ---------- ovládání hlasitosti (assets/volume.js) ----------
   Sedí v liště přehrávání vedle času, ne jako vlastní pruh pod ní. */
.volbox{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.volbox .volmute{
  width:26px; height:24px; flex:0 0 26px; padding:0;
  border:1px solid var(--gold); border-radius:3px;
  background:transparent; color:var(--forest-dp);
  cursor:pointer; font-size:12px; line-height:1;
}
.volbox .volmute:hover{ background:rgba(169,121,58,.14); }
.volbox .volmute:focus-visible{ outline:2px dotted var(--wine); outline-offset:2px; }
.volbox.is-muted .volmute{ background:var(--wine); color:var(--cream); border-color:var(--wine); }
.volbox .volrange{ width:74px; flex:0 0 74px; }
.volbox .volnum{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  color:var(--gold); min-width:34px; text-align:right; white-space:nowrap;
}
.volbox.is-muted .volnum{ color:var(--wine); }
@media (max-width:720px){
  .volbox .volnum{ display:none; }
  .volbox .volrange{ width:56px; flex-basis:56px; }
}