/* Hlavička. Předloha: sekce `hlava` v prototyp/v22/vina.html */

.hlava {
  position: relative;
  z-index: 50;
  /* Vodorovné okraje vně obalu jako u ostatních sekcí — jinak by obsah hlavičky
     začínal o okraj dál než obsah stránky pod ní. */
  padding: 0 2rem;
  background: var(--bg-normal, hsl(36 40% 96%));
  color: var(--fg-normal, hsl(334 40% 22%));
  border-bottom: 1px solid var(--c-linka, hsl(334 12% 89%));
}
.hlava__obal { max-width: var(--sirka-obalu, 78rem); margin: 0 auto; min-height: 6.5rem; padding: 1.5rem 0; display: flex; align-items: center; gap: 3rem; }

/* Logo je původní soubor ze současného webu. Nese vlastní bordó pozadí a nápis
   je v něm vysoký 18 px, takže se zobrazuje ve své skutečné velikosti —
   zvětšené by změklo. Na krémové hlavičce z něj tím vzniká bordó štítek. */
.hlava__znacka { display: flex; flex: none; text-decoration: none; border-radius: 6px; overflow: hidden; }
.hlava__logo { display: block; width: 199px; height: 44px; }
/* Nové logo (LOGO_NOVE, na zkoušku): kruh s nápisem přes střed — nápis má jen 13,5 % výšky,
   proto je logo vyšší než staré. Místo na něj dává menší svislý padding hlavičky, takže
   hlavička má kolem 126 px. 100 px = nápis ~13,5 px; SVG se dá zvětšit bez ztráty. */
.hlava--logo-nove .hlava__obal { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.hlava__logo--nove { width: auto; height: 100px; }

.hlava__menu { display: flex; gap: 1.75rem; margin: 0 auto; }
.hlava__odkaz { font-size: 1rem; color: var(--fg-muted, hsl(334 12% 42%)); text-decoration: none; padding: 0.5rem 0; white-space: nowrap; transition: color 0.15s ease; }
.hlava__odkaz:hover, .hlava__odkaz:focus-visible { color: var(--fg-normal, hsl(334 40% 22%)); }
.hlava__odkaz--zde { color: var(--fg-normal, hsl(334 40% 22%)); }

.hlava__kosik { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--fg-normal, hsl(334 40% 22%)); text-decoration: none; padding: 0.625rem 1.25rem; border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-pilulka, 999px); background: var(--bg-karta, hsl(0 0% 100%)); white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hlava__kosik:hover, .hlava__kosik:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); box-shadow: 0 2px 8px hsl(334 20% 30% / 0.06); }
.hlava__pocet { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Hlavička k novému logu — varianta H z prototypu v50 („Střed, čárka se prolne“), jen
   s hlava--logo-nove. Položky jednou barvou, po najetí barva kaňky loga a pod slovem tenká
   čárka, která se jen prolne. Čárka je vlastní prvek (::after), ne podtržení písma. Aktivní
   stránka má čárku trvale ve světlé barvě kaňky, při najetí ztmavne. Košík je plné červené
   tlačítko, po najetí ztmavne do barvy nápisu loga. */
.hlava--logo-nove .hlava__odkaz { position: relative; color: var(--fg-normal, hsl(334 40% 22%)); transition: color 0.3s ease; }
.hlava--logo-nove .hlava__odkaz::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1875rem; height: 1px; background: currentColor; opacity: 0; transition: opacity 0.3s ease, background-color 0.3s ease; }
.hlava--logo-nove .hlava__odkaz:hover, .hlava--logo-nove .hlava__odkaz:focus-visible { color: var(--c-logo-cervena, #A92039); }
.hlava--logo-nove .hlava__odkaz:hover::after, .hlava--logo-nove .hlava__odkaz:focus-visible::after, .hlava--logo-nove .hlava__odkaz--zde::after { opacity: 1; }
.hlava--logo-nove .hlava__odkaz--zde::after { background: var(--c-logo-svetla, #C9586C); }
.hlava--logo-nove .hlava__odkaz--zde:hover::after, .hlava--logo-nove .hlava__odkaz--zde:focus-visible::after { background: currentColor; }
.hlava--logo-nove .hlava__kosik { background: var(--c-logo-cervena, #A92039); border-color: var(--c-logo-cervena, #A92039); color: var(--bg-normal, hsl(36 40% 96%)); transition: background-color 0.15s ease, border-color 0.15s ease; }
.hlava--logo-nove .hlava__kosik:hover, .hlava--logo-nove .hlava__kosik:focus-visible { background: var(--c-logo-tmava, #7B061A); border-color: var(--c-logo-tmava, #7B061A); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .hlava--logo-nove .hlava__odkaz, .hlava--logo-nove .hlava__odkaz::after, .hlava--logo-nove .hlava__kosik { transition: none; }
}
/* Logo vlevo, menu přesně uprostřed, košík vpravo: dva stejně široké krajní sloupce drží
   menu ve středu bez ohledu na šířku loga. Níž je rozvržení jako se starým logem. */
@media (min-width: 1151px) {
  .hlava--logo-nove .hlava__obal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; }
  .hlava--logo-nove .hlava__znacka { justify-self: start; }
  .hlava--logo-nove .hlava__menu { margin: 0; }
  .hlava--logo-nove .hlava__kosik { justify-self: end; }
}

/* Nabídku plní administrace, takže položek může přibýt. Do jednoho řádku
   s logem a košíkem se šest položek vejde zhruba od 1150 px; níž se nabídka
   odsune pod ně a dá se rolovat do strany. */
@media (max-width: 1150px) {
  .hlava__obal { min-height: 0; padding: 1rem 0; gap: 1.5rem; flex-wrap: wrap; }
  /* Bitmapa se zmenšuje, ne zvětšuje, takže zůstává ostrá. */
  .hlava__logo { width: auto; height: 33px; }
  .hlava__logo.hlava__logo--nove { height: 72px; }
  .hlava__menu { order: 3; flex-basis: 100%; margin: 0; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; }
  .hlava__menu::-webkit-scrollbar { display: none; }
  .hlava__kosik { margin-left: auto; }
}

@media (max-width: 900px) { .hlava { padding: 0 1.5rem; } }
@media (max-width: 600px) { .hlava { padding: 0 1rem; } .hlava__obal { padding: 0.75rem 0; gap: 0.75rem 1rem; } }

/* --- Mobilní menu (hamburger), varianta A z návrhů 2026-09-24 ---------------
 * Do 750 px se menu schová za tlačítko a rozbalí pod hlavičkou přes stránku.
 * Platí jen s třídou hlava--js (js/menu.js); bez JavaScriptu zůstane rolovací
 * řádek odshora. Kontakt v menu je vidět jen tady — na širší obrazovce je
 * v patičce. */
.hlava__kontakt { display: none; }
.hlava__prepinac { display: none; }
.hlava-clona { position: fixed; inset: 0; z-index: 40; background: hsl(334 30% 15% / 0.35); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }

@media (max-width: 750px) {
  .hlava--js .hlava__prepinac {
    display: inline-grid; place-items: center; flex: none;
    width: var(--v-ovladani, 2.75rem); height: var(--v-ovladani, 2.75rem); padding: 0;
    border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-ovladani, 10px);
    background: var(--bg-karta, hsl(0 0% 100%)); color: var(--c-bordo, hsl(334 45% 26%)); cursor: pointer;
  }
  .hlava--js .hlava__prepinac:focus-visible { outline: 2px solid var(--c-bordo, hsl(334 45% 26%)); outline-offset: 2px; }
  .hlava__prepinactext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hlava__ikona { position: relative; width: 18px; height: 12px; }
  .hlava__ikona i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; }
  .hlava__ikona i:nth-child(1) { top: 0; }
  .hlava__ikona i:nth-child(2) { top: 5px; }
  .hlava__ikona i:nth-child(3) { top: 10px; }
  .hlava--otevreno .hlava__ikona i:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .hlava--otevreno .hlava__ikona i:nth-child(2) { opacity: 0; }
  .hlava--otevreno .hlava__ikona i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

  .hlava--js .hlava__obal { flex-wrap: nowrap; }
  .hlava--js .hlava__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: 0.25rem 1rem 1.25rem;
    overflow-y: auto; max-height: calc(100vh - 5rem);
    background: var(--bg-karta, hsl(0 0% 100%));
    border-bottom: 1px solid var(--c-linka, hsl(334 12% 89%));
    box-shadow: 0 16px 32px hsl(334 20% 30% / 0.12);
    opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .hlava--otevreno .hlava__menu { opacity: 1; visibility: visible; transform: none; }
  .hlava--js .hlava__odkaz { font-size: 1.0625rem; padding: 0.875rem 0; border-bottom: 1px solid var(--c-linka, hsl(334 12% 89%)); white-space: normal; color: var(--fg-normal, hsl(334 40% 22%)); }
  .hlava--js .hlava__odkaz--zde { color: var(--c-akce, hsl(345 62% 36%)); }
  .hlava--js .hlava__kontakt { display: block; margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--fg-muted, hsl(334 12% 42%)); }
  .hlava__kontakt a { color: var(--fg-normal, hsl(334 40% 22%)); text-decoration: none; }
  .hlava-clona--videt { opacity: 1; visibility: visible; }
  /* Nové logo: v rozbaleném menu mají položky vlastní linky, čárka by se s nimi prala. */
  .hlava--logo-nove.hlava--js .hlava__odkaz::after { display: none; }
  .hlava--logo-nove.hlava--js .hlava__odkaz--zde { color: var(--c-logo-cervena, #A92039); }
}

/* Nejužší telefony: logo, košík a hamburger se musí vejít do jednoho řádku. */
@media (max-width: 400px) {
  .hlava__obal { gap: 0.5rem; }
  .hlava__logo { height: 28px; }
  .hlava__logo.hlava__logo--nove { height: 72px; }
  .hlava__kosik { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
}