/* Kwalifikator obywatelstwa - cztery strony, ktore go maja:
 *   /en/polish-citizenship/      i /pl/obywatelstwo-polskie/      (landingi)
 *   /en/services/citizenship-and-documents/ i /pl/uslugi/obywatelstwo-i-dokumenty/
 *
 * Osobny arkusz tylko dla nich. Reguly mogly trafic do service-pages.css,
 * ale ten arkusz laduja 44 strony: kazda zmiana w nim zmienia odcisk wersji
 * wszedzie i oznacza wgranie calego serwisu przez FTP.
 * Tokeny kolorow (--cream, --navy, --gold-dark, --line) przychodza z
 * service-pages.css, ktory stoi w <head> przed tym plikiem.
 *
 * .contact-cta dotyczy wylacznie landingow - tylko tam sekcja kontaktu stoi
 * bez formularza. Podstrony uslugi zachowuja swoj formularz na dole.
 */

/* --- Podziekowanie po wyslaniu -----------------------------------------
   Karta wezsza niz formularz i wysrodkowana: po pieciu krokach z tekstem
   do lewej ta zmiana sama mowi, ze droga sie skonczyla. Poza znakiem
   nie ma tu nic - ocene sprawy pisze prawnik w mailu, nie strona. */
.quiz-result {
  max-width: 560px;
  margin-inline: auto;
  padding: 48px 38px 44px;
  text-align: center;
}
.quiz-done-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--gold-pale);
}
/* Znak jest duzy i dekoracyjny, wiec --gold-dark trzyma go czytelnym takze
   dla kogos, kto slabo rozroznia odcienie na jasnym tle. */
.quiz-done-mark svg {
  width: 27px;
  height: 27px;
  color: var(--gold-dark);
}
.quiz-result h3 {
  margin: 0 0 14px;
}
.quiz-result > p {
  max-width: 38ch;
  margin-inline: auto;
}

/* Odeslanie do poradnika, tylko na podstronach uslugi - tam pod
   kwalifikatorem stoi pelny tekst o obywatelstwie i czlowiek, ktory czeka na
   odpowiedz, ma co robic. Na landingu tego bloku nie ma i nie ma tam czego
   czytac. Przycisk drugoplanowy: to lektura, nie kolejny krok sprawy. */
.quiz-done-next {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.quiz-done-next p {
  max-width: 44ch;
  margin: 0 auto 20px;
  color: var(--ink-muted);
  font-size: .95rem;
  line-height: 1.7;
}

/* Ruch tylko tam, gdzie jest mile widziany. Bez tej zgody karta stoi od razu
   w stanie koncowym - nic nie czeka na animacje, zeby sie pokazac. */
@media (prefers-reduced-motion: no-preference) {
  .quiz-done-mark { animation: quizDoneIn .42s var(--ease-lux) forwards; }
  /* pathLength="1" w SVG sprawia, ze dlugosc kreski liczy sie jak procent -
     nie trzeba zgadywac dlugosci sciezki ptaszka. */
  .quiz-done-mark path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: quizDoneDraw .46s ease .16s forwards;
  }
}
@keyframes quizDoneIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes quizDoneDraw {
  to { stroke-dashoffset: 0; }
}

/* --- Krok szosty kwalifikatora: dane kontaktowe -------------------------
   Pola formularza w service-pages.css sa pisane pod ciemna karte sekcji
   kontaktu (bialy tekst na granacie). Tutaj ta sama konstrukcja stoi na
   bialej karcie kwalifikatora, wiec kolory trzeba odwrocic. Ukladu nie
   ruszamy - .field-row i .consent-label zostaja te same, zeby oba
   formularze zawijaly sie na telefonie identycznie. */
.quiz-lead h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.24;
  text-wrap: balance;
}
.quiz-lead .quiz-hint {
  margin: 0;
}
.quiz-lead .quiz-answers {
  margin-top: 26px;
  margin-bottom: 30px;
}
.quiz-lead .field label {
  color: var(--ink-muted);
}
/* Wyzsze pola niz w sekcji kontaktu: 48 px to cel dotykowy z reguly projektu,
   a tu formularz jest jedynym na stronie. Checkbox zgody zostaje poza regula -
   .field input dosiega takze jego, a min-height zepchnelby go pod etykiete. */
.quiz-lead .field input:not([type="checkbox"]) {
  min-height: 48px;
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
}
.quiz-lead .field input::placeholder {
  color: var(--ink-muted);
}
.quiz-lead .field input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px var(--gold-pale);
}
.quiz-lead .consent-label {
  color: var(--navy);
  font-size: .93rem;
}
.quiz-lead .consent-label input {
  padding: 0;
  accent-color: var(--gold-dark);
}

/* Linia stanu pod przyciskiem. Neutralna przy "wysylanie" i przy czekaniu na
   Turnstile, karmazynowa dopiero przy bledzie - .quiz-error jest karmazynowa
   zawsze i malowala na czerwono takze zwykly komunikat o postepie. */
.quiz-lead-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-muted);
  font-size: .93rem;
  line-height: 1.55;
}
.quiz-lead-status:empty {
  display: none;
}
.quiz-lead-status.is-error {
  color: var(--crimson);
}
@media (max-width: 680px) {
  /* Dwa przyciski obok siebie mieszcza sie przy "Dalej" i "Wstecz", ale nie
     przy "Wyslij odpowiedzi" - na 390 px etykieta lamie sie na dwa wiersze.
     Ponizej 680 px ida wiec jeden pod drugim, glowny na gorze. */
  .quiz-lead .quiz-buttons { flex-direction: column-reverse; }
  .quiz-lead .quiz-buttons .button { flex: none; width: 100%; }
  /* .btn ma white-space:nowrap, a etykieta odsylajaca do pytan jest dluzsza
     niz zwykle "Wyslij" - ponizej 680 px niech sie zlamie, zamiast rozepchnac
     karte i wymusic przewijanie w poziomie. */
  .contact-cta .btn { white-space: normal; }
}

/* Po wyslaniu przyklejony przycisk na telefonie nie ma dokad prowadzic.
   Osobna klasa, bo is-hidden przelacza obserwator przewijania w formularz.js
   i skasowalby ustawienie przy najblizszym przesunieciu strony. */
.mobile-cta.is-done {
  display: none;
}

/* --- Sekcja kontaktu bez formularza --------------------------------------
   Formularz stoi tylko w kwalifikatorze, zeby na landingu byl jeden punkt
   konwersji. Druga kolumna sekcji kontaktu odsyla wiec do pytan zamiast
   powtarzac pola. Karta zostaje ta sama (.consult-card), zeby sekcja
   wygladala jak na pozostalych stronach. */
.contact-cta .step-hint {
  margin-bottom: 18px;
}
.contact-cta-free {
  margin: 0 0 22px;
  color: var(--gold-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}