/* ==========================================================================
   Tlačidlo "späť hore" (#topcontrol)
   Kruh vo farbe hlavičky so zlatým okrajom a bielou šípkou nahor, v súlade
   s tlačidlami zdieľania (page-share.css). Pri hover/focus sa okraj zhrubne
   o 1px a tlačidlo sa jemne nadvihne.
   Zobrazovanie/skrývanie (opacity, display) rieši skript témy – nemeníme ho.
   Cieľ: <div id="topcontrol"><i class="fas fa-chevron-up"></i></div> (téma Porto).
   ========================================================================== */

/* --- Premenné --------------------------------------------------------------- */
#topcontrol {
  --totop-size: 46px;                             /* priemer kruhu */
  --totop-icon-size: 18px;                        /* veľkosť šípky */
  --totop-offset: 20px;                           /* odstup od okraja okna */

  --totop-bg: #6b1420;                            /* farba hlavičky */
  --totop-color: #fffaf2;                         /* farba šípky */
  --totop-border: #d9b45c;                        /* zlatý okraj */
  --totop-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* --- Tlačidlo ----------------------------------------------------------------
   bottom je v inline štýle skriptu (bottom: 0px), preto !important. */
body #topcontrol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--totop-size);
  height: var(--totop-size);
  right: var(--totop-offset);
  bottom: var(--totop-offset) !important;
  left: auto;
  margin: 0;
  padding: 0;
  border: 2px solid var(--totop-border);
  border-radius: 50%;
  background: var(--totop-bg);
  color: var(--totop-color);
  box-shadow: var(--totop-shadow);
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* --- Ikona: šípka nahor (namiesto chevronu) ------------------------------- */
body #topcontrol > i {
  position: static;                               /* téma ikonu absolútne umiestňuje (top: 0) */
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  font-size: var(--totop-icon-size);
  line-height: 1;
  color: inherit;
}

body #topcontrol > i.fa-chevron-up::before {
  content: "\f062";                               /* Font Awesome: arrow-up */
}

/* --- Hover / klávesnicový focus: o 1px hrubší zlatý okraj, nadvihnutie ----- */
body #topcontrol:hover,
body #topcontrol:focus,
body #topcontrol:focus-visible {
  background: var(--totop-bg);
  box-shadow: inset 0 0 0 1px var(--totop-border), var(--totop-shadow);
  transform: translateY(-2px);
  outline: none;
}

/* --- Mobil: o niečo menšie a bližšie k okraju ------------------------------ */
@media (max-width: 575px) {
  #topcontrol {
    --totop-size: 42px;
    --totop-icon-size: 16px;
    --totop-offset: 14px;
  }
}