/* Geoportál KSK — zdieľaný dizajnový systém (navy + žltá, Bebas/Barlow) */
:root{
  --navy-950:#0A1A2F; --navy-900:#0E2138; --navy-800:#123158; --navy-700:#16273F;
  --navy-line:#1E3A5F; --blue:#2D6CDF; --blue-soft:#5E8DEB; --yellow:#FFC528;
  --red:#E03C31; --green:#3FA66A; --ink:#0A1A2F; --body:#33415A; --muted:#5A6B82;
  --faint:#8FA5C6; --mist:#EEF2F7; --line:#DCE4EE; --paper:#FFFFFF;
  /* dizajn-systém: rádiusy, tiene, prechody (jednotné naprieč appkou) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(10,26,47,.06); --sh-md:0 8px 24px rgba(10,26,47,.10); --sh-lg:0 18px 44px rgba(10,26,47,.16);
  --ease:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------------------
   Značka GeoHub AI — firemná paleta Geosupport (tyrkys).
   Prepína ju brand.js cez data-brand na <html>, takže KSK ostáva nedotknuté.
   Zdroj farieb: geosupport.sk (--teal #00a5a5, --char #2d2d2d, --teal-bg #edf7f7).
   Prepisujeme existujúce premenné, nie jednotlivé pravidlá — vďaka tomu sa
   preladí celý portál vrátane mapy, a nie len hlavička.
--------------------------------------------------------------------------- */
:root[data-brand="geohub"]{
  --navy-950:#0E2626; --navy-900:#123030; --navy-800:#17403F; --navy-700:#143434;
  --navy-line:#1F4A49;
  --yellow:#00A5A5;            /* hlavný akcent je firemný tyrkys */
  --blue:#007D7D; --blue-soft:#33C0C0;
  --ink:#2D2D2D; --body:#3C3C3C; --muted:#6D6D6D; --faint:#9EC6C6;
  --mist:#EDF7F7; --line:#CFE6E6;
  --sh-sm:0 1px 2px rgba(14,38,38,.06); --sh-md:0 8px 24px rgba(14,38,38,.10);
  --sh-lg:0 18px 44px rgba(14,38,38,.16);
}
/* tyrkysový akcent je tmavší než žltá — na tmavom podklade potrebuje svetlejší
   odtieň, inak by nadpisy a aktívne položky splývali s pozadím */
:root[data-brand="geohub"] .hero h1 em,
:root[data-brand="geohub"] .eyebrow,
:root[data-brand="geohub"] .kicker,
:root[data-brand="geohub"] .side-label,
:root[data-brand="geohub"] .nav-links a:hover,
:root[data-brand="geohub"] .nav-links a.on{ color:#33C0C0 }
:root[data-brand="geohub"] .btn:hover{ box-shadow:0 5px 14px rgba(0,165,165,.30) }
:root[data-brand="geohub"] .zaver{ background:#00A5A5; color:#07201F }
:root[data-brand="geohub"] .zaver .btn{ background:#07201F; color:#fff }

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow',sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
.bebas{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.5px}
.wrap{max-width:1240px;margin:0 auto;padding:0 36px}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2.5px solid var(--yellow);outline-offset:2px;border-radius:3px}
/* slim scrollbar (jednotný vzhľad) */
.scroll-slim{scrollbar-width:thin;scrollbar-color:var(--navy-line) transparent}
.scroll-slim::-webkit-scrollbar{width:8px;height:8px}
.scroll-slim::-webkit-scrollbar-thumb{background:var(--navy-line);border-radius:var(--r-pill)}
.scroll-slim::-webkit-scrollbar-track{background:transparent}

nav.topbar{position:sticky;top:0;z-index:1100;background:var(--navy-950);border-bottom:1px solid var(--navy-line)}
.nav-inner{display:flex;align-items:center;gap:32px;height:64px}
.logo{display:flex;align-items:baseline;gap:10px;color:#fff}
.logo .bebas{font-size:24px}
.logo .k{color:var(--yellow)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{color:#C6D3E8;font-weight:500;font-size:15px;padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.on{color:#fff;border-color:var(--yellow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--yellow);color:var(--navy-950);
     font-weight:600;font-size:15px;line-height:1.2;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);border:none;cursor:pointer;
     transition:transform var(--ease),box-shadow var(--ease),background var(--ease),color var(--ease),border-color var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(255,197,40,.28)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn.small{padding:7px 15px;font-size:13.5px;min-height:36px}
.btn svg{width:15px;height:15px;flex:none}
.btn.dark{background:var(--navy-950);color:#fff}
.btn.dark:hover{box-shadow:var(--sh-md)}
/* ghost tlačidlo: na svetlej stránke tmavý text (inak pôsobí vypnuto),
   na tmavom podklade mapy svetlý — preto dva varianty */
.btn.ghost{background:transparent;color:var(--navy-950);border:1.6px solid var(--line);font-weight:600}
.btn.ghost:hover{background:var(--navy-950);border-color:var(--navy-950);color:#fff;box-shadow:none;transform:translateY(-1px)}
.btn.ghost:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.topbar .btn.ghost,.app .btn.ghost,.dock .btn.ghost{color:#C6D3E8;border-color:var(--navy-line);font-weight:500}
.topbar .btn.ghost:hover,.app .btn.ghost:hover,.dock .btn.ghost:hover{
  background:transparent;border-color:var(--yellow);color:var(--yellow)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn[hidden]{display:none}

input.field,select.field,textarea.field{
  width:100%;background:#fff;border:1.6px solid var(--line);border-radius:var(--r-sm);
  font:500 15px 'Barlow';padding:10px 14px;color:var(--ink);transition:border-color var(--ease),box-shadow var(--ease)}
input.field:hover,select.field:hover,textarea.field:hover{border-color:var(--faint)}
input.field:focus,select.field:focus,textarea.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,108,223,.18)}
.dark input.field,.dark select.field,.dark textarea.field{
  background:var(--navy-700);border-color:var(--navy-line);color:#fff}
.dark input.field:hover,.dark select.field:hover,.dark textarea.field:hover{border-color:#2C4A72}
.dark input.field:focus,.dark select.field:focus,.dark textarea.field:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,40,.18)}
textarea.field{font-family:'JetBrains Mono';font-size:13px}

.ok{color:var(--green);font-weight:500;font-size:13.5px}
.err{color:var(--red);font-weight:500;font-size:13.5px}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.dark .hint{color:#5F7396}
.dark .hint a{color:var(--blue-soft)}

.card{border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:var(--r-md);
      padding:20px 22px;background:#fff;box-shadow:var(--sh-sm);
      transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);display:block}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2px;padding:3px 9px;border-radius:var(--r-sm);
     background:var(--navy-950);color:#fff;margin:2px 4px 0 0}
.tag.alt{background:var(--blue)}
.tag.geo{background:var(--mist);color:var(--body)}

/* ---------- prechod medzi nástrojmi (Material „shared axis") ----------
   Zámerne bez 3D: animuje sa len opacity + posun/mierka, teda vlastnosti,
   ktoré rieši GPU. Ťažké stránky (mapa s WebGL) tak neblikajú ani nesekajú.  */
@view-transition { navigation: auto; }
:root{ view-transition-name: root; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: axisOut 110ms cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation: axisIn 220ms cubic-bezier(0,0,.2,1) 80ms both; }
  html[data-nav="back"] ::view-transition-old(root){ animation-name: axisOutBack; }
  html[data-nav="back"] ::view-transition-new(root){ animation-name: axisInBack; }
}
/* dopredu: odchádza doľava, prichádza sprava */
@keyframes axisOut{ to  { opacity:0; transform: translateX(-26px) scale(.985); } }
@keyframes axisIn { from{ opacity:0; transform: translateX(26px)  scale(.985); } }
/* späť: opačne */
@keyframes axisOutBack{ to  { opacity:0; transform: translateX(26px)  scale(.985); } }
@keyframes axisInBack { from{ opacity:0; transform: translateX(-26px) scale(.985); } }


/* ---- Emil premýšľa: viditeľná činnosť, nech nikto nehľadí do prázdna ---- */
.emil-dots{display:inline-flex;gap:4px;vertical-align:middle;margin-left:2px}
.emil-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;
             animation:emilDot 1.1s infinite ease-in-out}
.emil-dots i:nth-child(2){animation-delay:.18s}
.emil-dots i:nth-child(3){animation-delay:.36s}
@keyframes emilDot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.emil-step{display:inline-block;animation:emilFade .3s ease}
@keyframes emilFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .emil-dots i{animation:none;opacity:.6}
  .emil-step{animation:none}
}