/*
 * hlava.css -- spolecna HLAVICKA vsech stranek v `public/` a uvodni stranky
 * (`index.html` ji nacita taky). Prepsano 2026-09-14 po vraceni uzivatelem
 * („hnusna vibe code stranka"): hlavicka ma tvar -- podklad, serifova
 * znacka, polozky vysoke 52 px s linkou pod aktivni, tlacitko Hrat vpravo.
 *
 * Proc vlastni soubor: `devices.html`, `sounds.html` a `design.html` maji
 * vlastni <style> a `stranka.css` nenacitaji. Hlavicka si proto nese
 * vlastni promenne; vychozi sada je varianta „Noc nad ostrovem" (vNoc),
 * `.vPergamen` a `.vMapa` na <body> ji prebarvi (viz design/web/web.css).
 *
 * Markup:
 *   <header class="hlava">
 *     <a class="hlavaZnacka" href="/">Turma</a>
 *     <nav class="hlavaNav" aria-label="Hlavni navigace">
 *       <a href="/about.html" aria-current="page">O hre</a> ...
 *     </nav>
 *     <a class="hlavaHrat" href="/game.html">Hrat</a>   (nepovinne)
 *   </header>
 */

.hlava {
  --hlava-pozadi: rgba(13, 23, 32, 0.94);
  --hlava-text: #e8e8e0;
  --hlava-znacka: #f0c674;
  --hlava-aktivni: #f0c674;
  --hlava-najeti: rgba(240, 198, 116, 0.12);
  --hlava-linka: rgba(240, 198, 116, 0.55);
  --hlava-cta: #f0c674;
  --hlava-cta-text: #2a2519;
  --hlava-cta-najeti: #ffd98a;
  --hlava-bezpecne-nahore: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));

  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* uzivatel 14. 9.: header vycentrovat na stred */
  align-items: center;
  gap: 0 4px;
  margin: 0;
  padding: var(--hlava-bezpecne-nahore) 22px 0;
  border: 0;
  background: var(--hlava-pozadi);
  backdrop-filter: blur(6px);
  color: var(--hlava-text);
  box-shadow: 0 2px 0 var(--hlava-linka), 0 6px 18px rgba(0, 0, 0, 0.35);
  font: 15px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.vPergamen .hlava {
  --hlava-pozadi: linear-gradient(180deg, #4a3320, #3f2a17);
  --hlava-text: #efe3c8;
  --hlava-najeti: rgba(255, 255, 255, 0.08);
  --hlava-linka: #b98a2f;
  --hlava-cta: #7a2416;
  --hlava-cta-text: #fff4e3;
  --hlava-cta-najeti: #93301f;
  backdrop-filter: none;
}
.vMapa .hlava {
  --hlava-pozadi: #e0d8c3;
  --hlava-text: #2a2519;
  --hlava-znacka: #7a2416;
  --hlava-aktivni: #7a2416;
  --hlava-najeti: rgba(42, 37, 25, 0.08);
  --hlava-linka: rgba(42, 37, 25, 0.6);
  --hlava-cta: #7a2416;
  --hlava-cta-text: #fff4e3;
  --hlava-cta-najeti: #93301f;
  backdrop-filter: none;
}

.hlava a { box-sizing: border-box; text-decoration: none; }
.hlava a:focus-visible { outline: 3px solid var(--hlava-aktivni); outline-offset: -3px; }

.hlavaZnacka {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 10px;
  margin-right: 8px;
  font: 700 22px/1 Georgia, 'Noto Serif', 'Times New Roman', serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hlava-znacka);
}

.hlavaNav {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.hlavaNav a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 3px solid transparent;
  color: var(--hlava-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Slovo se nesmi zlomit uvnitr odkazu. */
  white-space: nowrap;
}
.hlavaNav a:hover { color: var(--hlava-aktivni); background: var(--hlava-najeti); }
/* Kde prave jsi: barva, tucne a linka pod textem -- ne jen atribut. */
.hlavaNav a[aria-current='page'] {
  color: var(--hlava-aktivni);
  border-bottom-color: var(--hlava-aktivni);
  background: var(--hlava-najeti);
}

.hlavaHrat {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 6px 0 6px 14px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--hlava-cta);
  color: var(--hlava-cta-text);
  font-weight: 700;
  white-space: nowrap;
}
.hlavaHrat:hover { background: var(--hlava-cta-najeti); }

@media (max-width: 719px) {
  /* Telefon: znacka na vlastnim radku, pet polozek na druhem (Domu / O hre /
     Galerie / Ke stazeni / Podporit = 378 px pri 9px odsazeni, zmereno na
     400 px). Kdyby jich bylo vic, radek se posouva prstem, nelame se. */
  .hlava { padding-left: 6px; padding-right: 6px; gap: 0; }
  .hlavaZnacka { flex: 1 0 100%; justify-content: center; min-height: 46px; margin-right: 0; }
  /* Radek polozek je vystredeny; kdyby pretekl, roluje od zacatku (stred by
     ho orizl z obou stran). */
  .hlavaNav { flex: 0 1 auto; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin: 0 auto; }
  .hlavaNav a { min-height: 48px; padding: 0 9px; font-size: 14.5px; }
  .hlavaHrat { display: none; }
}
