/* =====================================================================
   SDÍLENÁ LIŠTA (navbar) — JEDEN zdroj pravdy pro weby Strážný + appku.
   Kanonická kopie: strazny-prototyp/css/navbar.css
   Zrcadlo v appce:  strazny4-new/frontend/src/app/navbar.css (držet v syncu!)
   Self-contained: barvy (Ostrava) definované na .navbar → funguje i v appce,
   jejíž :root má jiné hodnoty. Přepínač (.theme-switch/.ts-*) NENÍ zde —
   zůstává vlastní v každém projektu (vizuálně shodný, vzor svetlo1).
   ===================================================================== */
/* Konzistentní pozice lišty/loga napříč stránkami: rezervuj místo pro svislý
   posuvník i když stránka neroluje (reg/přihl) → nescáče vůči rolujícímu webu. */
html { scrollbar-gutter: stable; }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(11, 18, 32, 1);
  /* backdrop-filter odebrán: pozadí je neprůhledné (efekt nebyl vidět) a vytvářel containing-block pro fixed mobilní drawer (.nav-links) → drawer se ořízl na výšku navbaru */
  border-bottom: 1px solid var(--line);
  /* font stejný jako web (jinak menu/tlačítko Přihlášení mají jiné písmo) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* stejné vyhlazení jako web (body na webu má antialiased) — jinak text v appce
     renderuje default subpixel = vypadá tučnější než na webu */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* stejný line-height jako web (body na webu má 1.6) — jinak text v tlačítku
     Přihlášení sedí výš než na webu (v appce se dědí default ~1.2) */
  line-height: 1.6;
  --accent: #0EA5E9; --accent-dark: #0284C7; --bg-blue: #eff6ff; --line: #e2e8f0;
}
.navbar .nav-inner {
  width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px;
  height: 84px; display: flex; align-items: center; justify-content: space-between;
}
.navbar .brand { font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: #e5edf7; text-decoration: none; cursor: pointer; }
.navbar .brand span { color: var(--accent); font-weight: 600; font-size: 14px; margin-left: 6px; }
.navbar .brand-logo { height: 49.5px; width: auto; display: block; }
@media (max-width: 640px) { .navbar .brand-logo { height: 35.64px; } }  /* mobil: menší logo v liště */
.navbar .brand .logo-white { display: none; }
html[data-theme="dark"] .navbar .brand .logo-black { display: none; }
html[data-theme="dark"] .navbar .brand .logo-white { display: block; }
.navbar .nav-links { display: flex; gap: 28px; }
.navbar .nav-links a { color: #cbd5e1; font-size: 17px; font-weight: 500; text-decoration: none; transition: color .2s, transform .15s ease; transform-origin: center; }
.navbar .nav-links a:hover { color: var(--accent); }
/* Desktop: při najetí myší zvětšit položku menu o 10 % (jen kde je hover = myš). */
@media (min-width: 641px) and (hover: hover) { .navbar .nav-links a:hover { transform: scale(1.15); } }
.navbar .nav-m-only { display: none; }
.navbar .nav-right { display: flex; align-items: center; gap: 16px; }
.navbar .nav-reg { display: inline-flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s; }
.navbar .nav-reg:hover { color: var(--accent); }
.navbar .nav-reg svg { flex: none; color: #94a3b8; }
html[data-theme="dark"] .navbar .nav-reg { color: #475569; }
.navbar .nav-login { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 20px; border-radius: 12px; font-weight: 700; font-size: 16px; transition: .2s; background: #16A34A; color: #fff; border: 0; text-decoration: none; }
.navbar .nav-login:hover { background: #15803d; color: #fff; }
.navbar .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 2px; }
.navbar .nav-burger span { display: block; width: 22px; height: 2px; background: #94a3b8; border-radius: 2px; }
html[data-theme="dark"] .navbar .nav-burger span { background: #475569; }
html[data-theme="dark"] .navbar { background: rgba(255, 255, 255, 1); }
html[data-theme="dark"] .navbar .nav-links a { color: #475569; }
html[data-theme="dark"] .navbar .brand { color: #0f172a; }

/* Tooltip Registrace (nad kurzorem) — position:fixed, NEskopovat pod .navbar
   (na webu ho JS připojí na <body>, mimo .navbar). */
.map-tip { position: fixed; z-index: 60; pointer-events: none; background: #fff; color: #000; border-radius: 8px; padding: 6px 11px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(2, 8, 23, .18); transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .12s ease; }
.map-tip.show { opacity: 1; }
.map-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }

@media (max-width: 820px) {
  .navbar .nav-burger { display: flex; }
  .navbar .nav-links { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 50%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; background: rgba(11, 18, 32, 1); padding: calc(84px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)) 39px; box-shadow: -10px 0 30px rgba(0, 0, 0, .35); transform: translateX(100%); visibility: hidden; overflow-y: auto; z-index: 41; transition: transform .25s ease, visibility .25s; }
  .navbar .nav-links.open { transform: translateX(0); visibility: visible; }
  .navbar .nav-links a { padding: 12px 0; font-size: 16px; }
  .navbar .nav-links a:nth-child(-n+4) { transform: translateY(-80px); font-size: 17.6px; }
  .navbar .nav-links a:nth-child(-n+4)::before { content: ""; display: inline-block; width: 4.8px; height: 4.8px; border-radius: 50%; background: #0ea5e9; margin-right: 10px; vertical-align: middle; }
  html[data-theme="dark"] .navbar .nav-links { background: rgba(255, 255, 255, 1); }
  .navbar .nav-right .nav-reg, .navbar .nav-right .nav-login { display: none; }
  .navbar .nav-links .nav-m-only { display: block; }
  .navbar .nav-links .nav-m-reg { display: inline-flex; align-items: center; padding: 12px 0; }
  .navbar .nav-links .nav-m-login { display: inline-block; align-self: flex-start; margin: 20px 0 0; background: #16A34A; color: #fff; border-radius: 8px; padding: 11px 24px; font-weight: 600; }
  .navbar .nav-links .nav-m-login:hover { background: #15803d; color: #fff; }
  /* Mobil: „← Zpět na úvod" dole pod tlačítkem Přihlášení, mezera 70px. */
  .navbar .nav-links .nav-m-back { margin: 70px 0 0; padding: 0; font-size: 15px; }
  /* Mobil: nadpis „Menu" nahoře v drawru, v linii loga (vlevo 39px), pěkná modrá. */
  .navbar .nav-links .nav-m-title { position: absolute; top: -5px; left: 39px; height: calc(84px + env(safe-area-inset-top,0px)); display: flex; align-items: center; margin: 0; padding: 0; font-size: 16px; font-weight: 700; color: #0ea5e9; }
  /* mobil: ikona přepínače vpravo vedle hamburgeru (10px), NE vycentrovaná */
  .navbar .nav-right { gap: 10px; }
}
/* Mobil (na výšku i na šířku): nižší menu lišta (84→64px, −10 nahoře i dole). Logo v landscape jako v portrétu (39,6px). */
@media (orientation:portrait) and (max-width:640px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .navbar .nav-inner{ height:64px; }
  .navbar .brand-logo{ height:35.64px; }
}
/* Mobil NA ŠÍŘKU se šířkou ≥768px: dost místa na plné menu jako na D: → zrušit drawer + hamburger, položky v řádku.
   Portrét i úzké landscape (<768px, např. iPhone SE 667) zůstávají s hamburgerem (tam by se plné menu nevešlo). */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) and (min-width:768px){
  .navbar .nav-links{ position:static; flex-direction:row; align-items:center; justify-content:normal; gap:28px; width:auto; background:none; box-shadow:none; transform:none; visibility:visible; overflow:visible; z-index:auto; padding:0; }
  html[data-theme="dark"] .navbar .nav-links{ background:none; }
  .navbar .nav-links a{ padding:0; font-size:15px; }
  .navbar .nav-links a:nth-child(-n+4){ transform:none; font-size:15px; }
  .navbar .nav-links a:nth-child(-n+4)::before{ content:none; }
  .navbar .nav-links .nav-m-only{ display:none; }
  .navbar .nav-burger{ display:none; }
  .navbar .nav-right .nav-reg, .navbar .nav-right .nav-login{ display:inline-flex; }
  .nav-scrim{ display:none; }
  .nav-edge{ display:none; }
}