/* ============================================================
   HLAVICKA WEBU (`#site`) - logo, menu stranok, prihlasenie.
   Spolocna pre stranky okolo mapy (zatial `bunkre.html`). Mapa sama ju nema -
   tam je cela plocha mapa a menu je vo filtri.
   Do 1000 px logo + tlacidlo menu, ktore rozbali zoznam pod hlavickou - polozky,
   jazyk a ucet sa vedla seba zmestia az od ~950 px (pri 768 pretekali).
   Premenne (farby) su z `app.css`.
   ============================================================ */
#site { position:sticky; top:0; z-index:20; background:var(--panel); border-bottom:1px solid var(--hair);
        padding-top:env(safe-area-inset-top); }
#site .in { display:flex; align-items:center; gap:22px; height:60px; max-width:1440px; margin:0 auto;
            padding:0 16px; }
#site .logo { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none;
              font-weight:800; font-size:18px; letter-spacing:-.02em; flex:0 0 auto; }
#site .logo svg { width:32px; height:32px; display:block; }

#site nav { display:flex; align-items:center; gap:4px; }
#site nav a { display:flex; align-items:center; height:38px; padding:0 14px; border-radius:2rem;
              color:var(--muted); text-decoration:none; font-weight:650; font-size:14.5px; white-space:nowrap; }
#site nav a:hover { color:var(--ink); background:var(--surf); }
#site nav a[aria-current="page"] { color:var(--ink); background:var(--surf); }

#site .ucet { margin-left:auto; display:flex; align-items:center; gap:8px; }
#site .ucet button { height:38px; padding:0 16px; border:0; border-radius:2rem; cursor:pointer;
                     font:650 14.5px/1 ui-sans-serif,-apple-system,"Segoe UI",sans-serif; white-space:nowrap; }
#site .ucet .login { background:none; color:var(--ink); }
#site .ucet .login:hover { background:var(--surf); }
#site .ucet .reg { background:var(--acc); color:#fff; }
#site .ucet .reg:hover { background:var(--acc-dark); }

/* jazyk: globus vlavo, sipka vpravo, cele meno jazyka (kod by nepovedal nic) */
#site .ucet select { height:38px; padding:0 28px 0 34px; border:0; border-radius:2rem; cursor:pointer;
  appearance:none; -webkit-appearance:none; color:var(--ink); font:650 14px ui-sans-serif,-apple-system,sans-serif;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322201d' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5s-1.1 5.9-3.6 8.5c-2.5-2.6-3.6-5.4-3.6-8.5s1.1-5.9 3.6-8.5z'/%3E%3C/svg%3E") no-repeat left 11px center/17px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322201d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/13px,
    var(--surf); }
#site .ucet select:hover { background-color:var(--surf-hi); }

/* tlacidlo menu - len na mobile */
#site .burger { display:none; margin-left:auto; width:42px; height:42px; border:0; border-radius:12px;
                background:var(--surf); cursor:pointer; place-items:center; color:var(--ink); }
#site .burger svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
#site .burger .x { display:none; }
#site.open .burger .bars { display:none; }
#site.open .burger .x { display:block; }

#site :focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

@media (max-width: 1000px) {
  #site .in { height:56px; gap:12px; }
  #site .burger { display:grid; }
  /* zoznam pod hlavickou: polozky pod sebou, ucet dole */
  #site nav, #site .ucet { display:none; }
  #site.open .in { flex-wrap:wrap; height:auto; min-height:56px; padding-bottom:14px; }
  #site.open .logo { height:56px; }
  #site.open nav { display:flex; flex-direction:column; align-items:stretch; gap:2px; order:3; width:100%; }
  #site.open nav a { height:48px; font-size:16px; padding:0 12px; }
  #site.open .ucet { display:flex; flex-wrap:wrap; order:4; width:100%; margin:8px 0 0; gap:8px; }
  #site.open .ucet button { flex:1; height:46px; font-size:15.5px; }
  #site.open .ucet select { height:46px; flex:1 0 100%; font-size:15.5px; }
  #site.open .ucet .login { background:var(--surf); }
}

/* ============================================================
   MENU NA MAPE - logo vlavo vo vyhladavacej pilulke (`#siteBtn`), pod nim
   rozbalovacie menu (`#siteMenu`) zarovnane s pilulkou.
   ============================================================ */
#siteBtn { flex:0 0 auto; width:40px; height:40px; margin-left:-9px; padding:4px; border:0; border-radius:50%;
           background:none; cursor:pointer; display:grid; place-items:center; }
#siteBtn:hover, #siteBtn[aria-expanded="true"] { background:var(--surf); }
#siteBtn svg { width:30px; height:30px; display:block; }
#siteMenu { position:absolute; top:calc(3.625rem + 8px); left:0; z-index:5; width:min(300px, 100%);
            background:#fff; border-radius:18px; box-shadow:var(--lift); padding:8px; display:flex;
            flex-direction:column; gap:2px; }
#siteMenu[hidden] { display:none; }
#siteMenu > a { display:flex; align-items:center; height:44px; padding:0 12px; border-radius:12px;
                color:var(--ink); text-decoration:none; font-weight:650; font-size:15px; }
#siteMenu > a:hover { background:var(--surf); }
#siteMenu > a[aria-current="page"] { background:var(--surf); }
#siteMenu .ucet { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; padding-top:10px;
                  border-top:1px solid var(--hair); }
#siteMenu .ucet select { flex:1 0 100%; height:42px; padding:0 28px 0 34px; border:0; border-radius:2rem;
  cursor:pointer; appearance:none; -webkit-appearance:none; color:var(--ink);
  font:650 14px ui-sans-serif,-apple-system,sans-serif;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322201d' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5s-1.1 5.9-3.6 8.5c-2.5-2.6-3.6-5.4-3.6-8.5s1.1-5.9 3.6-8.5z'/%3E%3C/svg%3E") no-repeat left 11px center/17px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322201d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/13px,
    var(--surf); }
#siteMenu .ucet button { flex:1; height:42px; border:0; border-radius:2rem; cursor:pointer;
                         font:650 14px ui-sans-serif,-apple-system,sans-serif; }
#siteMenu .ucet .login { background:var(--surf); color:var(--ink); }
#siteMenu .ucet .login:hover { background:var(--surf-hi); }
#siteMenu .ucet .reg { background:var(--acc); color:#fff; }
#siteMenu .ucet .reg:hover { background:var(--acc-dark); }
#siteBtn:focus-visible, #siteMenu :focus-visible { outline:2px solid var(--acc); outline-offset:2px; }