/* =============================================================
 *  back-to-top.css — az oldal tetejére vivő gomb (M360-283)
 *
 *  MIÉRT KÜLÖN FÁJL. Ugyanaz az érv, mint a lebegő Kapcsolat gombnál: a
 *  `main.css` a design rendszer változatlan másolata, a `frame.css` a
 *  WordPress-keretet illeszti. Ez a komponens egyikbe sem való, viszont
 *  önmagában zárt, és csak arra az oldalra megy ki, ahol a gomb be van
 *  kapcsolva.
 *
 *  A SZÍNEK a téma palettájából valók, ugyanazok a hexák, mint a
 *  `contact-fab.css`-ben: a két gomb egymás fölött ül, tehát egy
 *  márkaszín-váltásnál együtt kell mozdulniuk.
 * ============================================================= */

/* A GOMB A KAPCSOLAT GOMB FÖLÖTT ÜL, ugyanabban a sarokban, ugyanazokkal a
   szegélyekkel. Az eltolás a Kapcsolat gomb magassága (54px) plus a köztük
   lévő rés: `:has()` a lap állapotát olvassa, tehát nem kell hozzá közös
   szülő. Ahol nincs `:has()` támogatás, ott a nyíl a Kapcsolat gomb helyén
   maradna, ezért ott inkább nem jelenik meg (lásd a @supports blokkot). */
.to-top {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  /* A KAPCSOLAT GOMB ALATT (az 200), a fejléc fölött (az 100). Az ott nyíló
     fátyolnak takarnia kell ezt is: a nyitott fiók mellett a nyíl amúgy sem
     látszik, de a rétegsor akkor is legyen egyértelmű. */
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #FFFFFF;
  color: #0B1220;
  border: 1px solid #E3E8EE;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(11, 18, 32, 0.45);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}

body:has(.contact-fab) .to-top {
  /* 18px alapszegély + 54px gombmagasság + 12px rés. */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

.to-top:hover,
.to-top:focus-visible {
  background: #287FAA;
  color: #FFFFFF;
  border-color: #287FAA;
  box-shadow: 0 14px 30px -10px rgba(40, 127, 170, 0.6);
}

.to-top__icon {
  display: block;
}

/* A FELIRAT A KÉPERNYŐOLVASÓÉ. Kiírva, nem `aria-label`-ben: így fordítható,
   és a böngésző saját fordítója is látja. */
.to-top__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* NYITOTT FIÓK MELLETT ÁTADJA A HELYET. A Kapcsolat gomb nyitva három pirulát
   emel maga fölé, pontosan ide; a nyíl ilyenkor a pirulák közé ékelődne. A
   nyitott mobil menü ugyanígy takarja, ahogy a Kapcsolat gombot is. */
body:has(.contact-fab[data-open='true']) .to-top,
body:has(.contact-fab[data-closing='true']) .to-top,
body:has(.mobile-nav[data-open='true']) .to-top {
  display: none;
}

/* ASZTALI GÉPEN TÁGABB A SZEGÉLY, ugyanaz a 24 pixel, mint a Kapcsolat
   gombnál: a két gomb széle egy vonalban áll. */
@media (min-width: 1025px) {
  .to-top {
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.contact-fab) .to-top {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  /* Ahol a Kapcsolat gomb mobilra van szűkítve, ott 1024 pixel fölött nincs
     mi alatt ülni: a nyíl visszaül a sarokba. */
  body:has(.contact-fab--mobile-only) .to-top {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* A MEGJELENÉS ANIMÁLT, de csak annak, aki kéri. Aki kikapcsolta a mozgást,
   annál a gomb egyszerűen ott van, amikor kell. */
.to-top[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .to-top {
    animation: m360-to-top-in 0.18s ease-out both;
  }
}

@keyframes m360-to-top-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* `:has()` NÉLKÜL NEM JELENIK MEG. A régi böngészőkben a fenti két szabály
   egyike sem érvényesül, tehát a nyíl pont a Kapcsolat gomb helyére ülne, és
   a fontosabbat takarná ki. Ott inkább nincs nyíl: a lap teteje a görgetéssel
   is elérhető, a Kapcsolat gomb viszont nem pótolható. */
@supports not selector(body:has(.contact-fab)) {
  .to-top {
    display: none;
  }
}