/* ==========================================================================
   TimLuks – theme.css
   Tlačidlo vpravo hore na prepínanie tmavého (predvolený) a svetlého režimu webu.
   Je to samostatný plávajúci prvok – NIE je súčasťou hlavičky/navigácie; header.css mu
   len necháva voľné miesto (--toggle-w). Farby oboch režimov sú v base.css (--bg-rgb/
   --ink-rgb a :root[data-theme="light"]); klik ovláda assets/js/theme.js.

   Vzhľad tlačidla samého (tmavé sklo) je pevný, nemení sa podľa režimu.

   Nie je „sticky“ – position: absolute (nie fixed), takže sa posúva spolu so stránkou a pri scrolle
   sa stratí z obrazovky spolu s hornou časťou hera, namiesto toho, aby zostalo pripnuté v rohu.
   ========================================================================== */

.theme-toggle {
  position: absolute;
  top: calc(var(--header-top) + var(--header-h) / 2);   /* rovnaká zvislá os ako biela kapsula hlavičky */
  /* Presne v strede medzi tlačidlom Kontakt (resp. hamburgerom na mobile) a pravým okrajom stránky.
     header.css necháva tlačidlu Kontakt/hamburgeru vždy rovnaké miesto od okraja obsahu (--toggle-w + 12px),
     takže jeho skutočná poloha je "--edge-gap + --toggle-w + 12px" nech je okno akokoľvek úzke – z toho
     vychádza aj tento vzorec (šírka --toggle-w sa v ňom odpočíta, preto sa v ňom už neobjavuje) a je
     vždy bezpečný, nikdy sa nepriblíži ani k druhému tlačidlu, ani za pravý okraj stránky. */
  --edge-gap: max(var(--gutter), calc((100vw - var(--container)) / 2));
  right: calc(var(--edge-gap) / 2 + 6px);
  z-index: 110;   /* nad hlavičkou (100) */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--toggle-w);
  height: var(--toggle-w);
  border-radius: 50%;
  background: rgba(10, 11, 14, 0.55);
  border: 1.5px solid var(--on-ink-line);
  color: var(--on-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.theme-toggle:hover { border-color: var(--on-ink); }
.theme-toggle:active { transform: translateY(-50%) scale(0.92); }

/* Tlačidlo je vždy tmavé sklo bez ohľadu na režim, preto (rovnako ako hlavička/hero/pätička v base.css)
   potrebuje vlastný, vždy dobre viditeľný rámik pri fokuse z klávesnice namiesto bežného tmavého. */
.theme-toggle:focus-visible { outline-color: var(--accent); }

/* Slnko a mesiac sú nad sebou; prepínanie je krížový prelet s malou rotáciou. */
.theme-toggle__icon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-out);
}

/* Predvolený (tmavý) režim: svieti mesiac, slnko je skryté. */
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-70deg) scale(0.5); }
.theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }

:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(70deg) scale(0.5); }

@media (max-width: 899.98px) {
  :root { --toggle-w: 40px; }
  /* Mobil: prepínač je vnútri kapsuly hlavičky, tesne naľavo od hamburgera (hamburger má 44px a margin -10px). */
  .theme-toggle {
    right: calc(var(--edge-gap) + clamp(20px, 2.6vw, 32px) + 34px + 10px);
  }
}