/* ============================================================
   Golden Key Africa — drobne mechanizmy interfejsu
   Powrót na górę, pasek postępu czytania, przełącznik waluty przeliczenia.
   ============================================================ */

/* --- Powrót na górę ---------------------------------------------- */
/* Pojawia się dopiero, gdy przewinięcie ma sens, i chowa się nad paskiem
   przyklejonym na telefonie, żeby nie zasłaniać przycisku kontaktu. */
.totop {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 45;
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  background: var(--bg);
  color: var(--brand-dark);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px -12px oklch(0.15 0.010 260 / .55);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(.94);
  transition:
    opacity 240ms var(--ease-out-quart, ease),
    transform 240ms var(--ease-out-expo, ease),
    visibility 0s linear 240ms,
    background 160ms var(--ease-out-quart, ease);
}
.totop[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.totop:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.totop svg { transition: transform 200ms var(--ease-out-expo, ease); }
.totop:hover svg { transform: translateY(-2px); }

/* Pierścień postępu wokół przycisku: ta sama informacja co pasek u góry,
   ale w miejscu, w które użytkownik i tak patrzy, gdy chce wrócić. */
.totop__ring { position: absolute; inset: -1px; transform: rotate(-90deg); pointer-events: none; }
.totop__ring circle { fill: none; stroke-width: 2; }
.totop__ring .track { stroke: var(--border); }
.totop__ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 90ms linear; }

/* Wariant w pasku: przycisk przestaje pływać i staje się pierwszym
   elementem przyklejonego paska. Nie ma czego zasłaniać ani omijać. */
.totop--bar {
  /* relative, nie static: pierścień postępu jest pozycjonowany absolutnie
     i bez kontekstu na samym przycisku rozciągał się na cały pasek,
     zasłaniając cenę i przycisk zapytania. */
  position: relative;
  transform: none;
  opacity: 1;
  visibility: visible;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  box-shadow: none;
  border-radius: var(--r-sm, 8px);
  transition: background 160ms var(--ease-out-quart, ease);
}
/* W pasku przycisk jest zawsze widoczny, więc stan „ukryty” go nie dotyczy. */
.totop--bar[data-show="false"] { opacity: 1; visibility: visible; transform: none; }
.totop--bar .totop__ring { inset: -3px; }

@media (max-width: 767px) {
  .stickybar { align-items: center; }
  /* Wariant oferty ma jeszcze cenę, więc trzy kolumny zamiast dwóch. */
  .stickybar--offer { grid-template-columns: auto 1fr auto; }
}

/* --- Pasek postępu czytania --------------------------------------- */
/* Cienka linia w mosiądzu na górnej krawędzi ekranu. Dla dokumentu, który
   ma dziesięć paragrafów, to jest informacja „ile jeszcze”, a nie ozdoba. */
.progressbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progressbar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 90ms linear;
}

/* --- Przełącznik waluty -------------------------------------------- */
/* Cena w walucie oferty nigdy się nie zmienia — jest wiążąca. Przełącznik
   dotyczy wyłącznie linii przeliczenia orientacyjnego, i tylko ona reaguje. */
.card__pln, .rail__pln, .feature__pln { transition: opacity 140ms var(--ease-out-quart, ease); }
.is-switching .card__pln,
.is-switching .rail__pln,
.is-switching .feature__pln { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .totop, .totop svg, .progressbar span, .totop__ring .bar { transition: none; }
}


/* --- Renderowanie leniwe sekcji ------------------------------------ */
/* Strona główna ma kilkanaście sekcji. Bez tego przeglądarka liczy układ
   wszystkich naraz przy każdym przemalowaniu. Wysokość zastępcza pilnuje,
   żeby pasek przewijania nie skakał. */
@supports (content-visibility: auto) {
  .section:not(.heroX):not(.ledger):not(.stats),
  .visit,
  .drench {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
}

/* --- WhatsApp (brief §60) ------------------------------------------ */
/* Zielony jest tu znakiem rozpoznawczym kanału, a nie kolorem marki —
   dlatego stoi poza paletą i nie wchodzi w tokeny. */
.wa {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5);
  border-radius: 999px;
  background: #25d366;
  color: #0b3d1f;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px -6px oklch(0.21 0.008 260 / .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px oklch(0.21 0.008 260 / .5); }
.wa__label { font-size: var(--fs-sm); }

.btn--wa { background: #25d366; color: #0b3d1f; gap: var(--s-2); }
.btn--wa:hover { background: #1fb757; color: #0b3d1f; }

/* Na telefonie pływający przycisk zniknąłby pod paskiem przyklejonym
   i zasłaniał treść, więc rolę kanału przejmuje przycisk w pasku. */
@media (max-width: 767px) {
  .wa { display: none; }
}

/* --- Pasek przyklejony na telefonie: wyrównanie ---------------------- */
/*
 * Trzy usterki naraz, wszystkie widoczne dopiero na urządzeniu:
 *
 * 1. `.totop` jako wariant pływający ma `right`/`bottom`. Przy `position:
 *    relative` te przesunięcia dalej obowiązują i ciągnęły przycisk 12 px
 *    w górę i w lewo — jego środek wypadał na 27 px, a przycisków na 39 px.
 * 2. Przycisk miał 48 px, a przyciski obok 52 px, więc nie było wspólnej osi.
 * 3. Promień 8 px pod okrągłym pierścieniem postępu dawał dwa różne kształty
 *    jeden na drugim, co czytało się jak błąd renderowania.
 */
.totop--bar {
  right: auto;
  bottom: auto;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  place-content: center;
}

/* Wspólna oś dla wszystkich trzech elementów i równy podział szerokości —
   dwa przyciski o różnej szerokości ciągnęły wzrok na prawą stronę paska. */
.stickybar { align-items: center; }
/* `min-width: 0` jest tu konieczne: domyślne `auto` nie pozwala elementowi
   flex zejść poniżej szerokości własnej treści, więc przycisk z ikoną i
   dłuższą etykietą rozpychał pasek — ostatni kończył się na 405 px przy
   ekranie 390 px. Bez tego `flex: 1 1 0` nie zrównuje szerokości. */
.stickybar .btn { flex: 1 1 0; min-width: 0; min-height: 52px; }

/* Znak graficzny wewnątrz przycisku kurczył się do 1 px: SVG bez własnej
   bazy flexa oddaje całą szerokość tekstowi obok. */
.stickybar .btn svg,
.wa svg { flex: 0 0 auto; }

/* Znak słowny zamiast piktogramu: logotyp niesie teraz sama typografia,
   więc podpis może być cichszy i węższy w rozstrzeleniu. */
.logo__sub {
  letter-spacing: .06em;
  text-transform: none;
  font-size: 0.8125rem;
}

/* WhatsApp: firmowa zieleń była najgłośniejszym kolorem na stronie i wypadała
   poza paletę biel/grafit/złoto (§7). Rozpoznawalność niesie znak graficzny,
   nie tło — dlatego przycisk wygląda jak każdy inny główny, a zieleń zostaje
   wyłącznie w ikonie. */
.wa,
.btn--wa { background: var(--accent); color: var(--on-accent); }
.wa:hover,
.btn--wa:hover { background: var(--accent-dark); color: #fff; }
.wa svg,
.btn--wa svg { color: #128c4a; }
.wa:hover svg,
.btn--wa:hover svg { color: #fff; }

/* --- Sekcje zwijane na stronie głównej ------------------------------ */
/*
 * Brief §13: strona główna ma być krótka i prowadzić dalej. Wywód prawny
 * spychał pierwszą ofertę na piąty ekran, a te same treści mają własne
 * podstrony. Widoczne zostaje to, co niesie tezę — nagłówek i werdykt —
 * a rozwinięcie chowa się za przełącznikiem.
 *
 * Natywne <details>: działa bez JavaScriptu, jest dostępne z klawiatury
 * i czytniki ekranu ogłaszają stan bez dodatkowego ARIA.
 */
.fold { margin-top: var(--s-5); }

.fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fold__toggle::-webkit-details-marker { display: none; }
.fold__toggle:hover { color: var(--ink); }
.fold__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.fold__chevron { transition: transform 200ms var(--ease-out-quart, ease); }
.fold[open] .fold__chevron { transform: rotate(180deg); }
.fold[open] .fold__label { visibility: hidden; }
.fold[open] .fold__toggle::after {
  content: "Zwiń";
  margin-inline-start: -6.2em;
}
html[lang^="en"] .fold[open] .fold__toggle::after { content: "Collapse"; }

.fold__body { padding-top: var(--s-5); }

/* Na ciemnym pasie przełącznik musi mieć własny kolor: accent-dark ginie. */
.drench .fold__toggle { color: var(--accent-dark); }

@media (prefers-reduced-motion: reduce) {
  .fold__chevron { transition: none; }
}

/* --- Dwa przyciski w tym samym rogu ---------------------------------- */
/*
 * WhatsApp i powrót na górę są oba przyklejone do prawego dolnego rogu,
 * więc na komputerze nachodziły na siebie: pastylka WhatsAppa ma 150 px
 * szerokości, a okrągły przycisk powrotu lądował na jej etykiecie.
 *
 * Na telefonie problemu nie ma — WhatsApp jest wtedy w pasku na dole,
 * a przycisk powrotu wchodzi do tego samego paska jako `.totop--bar`.
 * Dlatego przesunięcie obowiązuje wyłącznie tam, gdzie oba pływają.
 *
 * 52 px to wysokość pastylki, --s-3 to odstęp między nimi.
 */
@media (min-width: 768px) {
  .totop:not(.totop--bar) {
    bottom: calc(clamp(1rem, 2vw, 2rem) + 52px + var(--s-3));
  }
}