/* ------------------------------------------------------------------
   Powtarzalne elementy cwiczen app1-app4.
   Wczytywany PRZED arkuszem konkretnej aplikacji, wiec kazda z nich
   moze nadpisac to, co u niej wyglada inaczej.

   KOLORY sa piętro wyzej, w app-wspolne/paleta.css - wczytywanym przez
   wszystkie strony, takze spis lekcji, 404 i bramke. Tutaj sa wylacznie
   ksztalty: naglowek, stopka, opis, odtwarzacz, przyciski.

   app4 (gra na canvasie) dlugo tego pliku NIE wczytywala - byla
   pelnoekranowa plansza bez paska i stopki. Teraz bierze go jak reszta;
   swoja plansze rysuje sama, kolorami z `--gra-*` (patrz app4/style.css).

   Zasada: tutaj trafia wszystko, co na stronach cwiczen wyglada tak samo.
   W arkuszach app1-app4 zostaje wylacznie to, co robi dane cwiczenie.
   ------------------------------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 10px, bo caly kod app1-app3 liczy rozmiary w rem wzgledem tej wartosci */
  font-size: 10px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--tlo);
  color: var(--tekst);
}

/* ---------------------------------------------------------------
   Naglowek - jasny pasek z logo, suwakiem motywu i licznikiem zadan.

   W jasnym motywie bialy, a nie granatowy, bo logo jest ciemnogranatowa
   kreska na bialym tle - na granacie zostawialoby bialy prostokat.
   Z tego samego powodu pasek zostaje jasny takze w motywie ciemnym:
   `--karta` robi sie tam grafitowa, ale samo logo dostaje jasne tlo
   (patrz `header img` nizej).
   --------------------------------------------------------------- */

header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background-color: var(--karta);
  border-bottom: 1px solid var(--obwodka);
  padding-block: 10px;
  /* Tresc trzyma sie srodka na szerokich ekranach, pasek idzie na calosc */
  padding-inline: max(16px, (100% - var(--szerokosc)) / 2);
}

header img {
  display: block;
  max-width: 130px;
  height: auto;

  @media (min-width: 640px) {
    max-width: 180px;
  }

  @media (min-width: 1024px) {
    max-width: 220px;
  }
}

header #info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#result {
  display: inline-block;
  background-color: var(--granat-jasny);
  color: var(--tekst);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 1.7rem;
  font-weight: 500;
  white-space: nowrap;

  @media (min-width: 640px) {
    font-size: 2rem;
    padding: 6px 18px;
  }
}

/* Pigulka na stronie odsluchania startuje ukryta i odslania ja dopiero
   app-wspolne/odsluch.js. Bez tej reguly `hidden` nic by nie dalo -
   `display: inline-block` powyzej jest mocniejsze od domyslnego
   `display: none`, ktore przegladarka daje ukrytym elementom. */
#result[hidden] {
  display: none;
}

/* Numer biezacego zdania - jedyny wyrozniony element licznika */
#result .x,
#result #x {
  color: var(--granat);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Waski ekran: licznik zadan idzie do gornego rzedu, obok suwaka.

   Naglowek ma dwa pudelka: `.marka` (logo + suwak) i `#info` (licznik).
   Na telefonie nie miescily sie obok siebie, wiec CALE `#info` spadalo
   pod logo - gorny rzad stal w polowie pusty, a licznik niepotrzebnie
   spychal cwiczenie w dol.

   `display: contents` zdejmuje samo pudelko `#info`, a jego dzieci staja
   sie dziecmi naglowka - licznik zostaje wiec w gornym rzedzie, obok
   suwaka. Wszystkie trzy cwiczenia maja teraz w pasku dokladnie to samo:
   logo, suwak i licznik "Zadanie N z M".
   --------------------------------------------------------------- */

@media (max-width: 639px) {
  header {
    gap: 8px;
  }

  header #info {
    display: contents;
  }

  /* Krok mniejszy niz domyslny, zeby licznik zmiescil sie w jednym
     rzedzie z logo i suwakiem takze na najwezszych telefonach. */
  #result {
    font-size: 1.5rem;
    padding: 4px 12px;
  }
}

/* Na najwezszych telefonach z tego samego powodu maleje jeszcze logo.
   Gdy i to nie wystarczy, licznik po prostu zejdzie do drugiego rzedu:
   naglowek nadal sie zawija, wiec nic nie wyjedzie poza ekran. */
@media (max-width: 479px) {
  header img {
    max-width: 110px;
  }
}

/* ---------------------------------------------------------------
   Opis cwiczenia, temat lekcji i odtwarzacz
   --------------------------------------------------------------- */

a {
  color: var(--granat);
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.info {
  width: 100%;
}

.description {
  width: min(var(--szerokosc), 100% - 32px);
  margin: 24px auto;
  padding: 20px;
  background-color: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien);
  color: var(--tekst);
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;

  @media (min-width: 640px) {
    padding: 24px 28px;
    font-size: 1.7rem;
  }

  @media (min-width: 1024px) {
    font-size: 1.8rem;
  }
}

/* Odstepy wewnatrz karty robi CSS, a nie <br> w szablonie - inaczej
   te same trzy bloki mialyby trzy rozne przerwy. */
.description > * + * {
  margin-top: 12px;
}

.description > h1 {
  margin-top: 24px;
}

.description p {
  color: var(--tekst);
}

.description a {
  color: var(--granat);
  font-weight: 700;
}

/* Temat lekcji - jedyny <h1> na stronie, wiec moze byc wyrazisty */
h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--granat);
  line-height: 1.25;

  @media (min-width: 1024px) {
    font-size: 2.6rem;
  }
}

.description h1 {
  color: var(--granat);
}

/* Odtwarzacz jest rysowany przez przegladarke i nie wypelnia calego swojego
   pudelka - w rogach widac to, co pod nim. Dlatego tlo musi byc PRZEZROCZYSTE,
   a nie w jakims konkretnym kolorze: odtwarzacz siedzi na karcie, wiec kazdy
   inny kolor obrysowywal go ramka. W jasnym motywie roznica miedzy `--tlo`
   a `--karta` byla niewidoczna, w ciemnym robila czarna otoczke. */
audio {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
}

/* ---------------------------------------------------------------
   Przyciski - jeden wyglad we wszystkich cwiczeniach
   --------------------------------------------------------------- */

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(var(--szerokosc), 100% - 32px);
  margin: 0 auto;
}

/* Przyciski w tresci sa flexem, zeby ikona (glosnik) stala rowno z tekstem
   i nie rozpychala wiersza. Przyciskom bez ikony to nie szkodzi. */
.buttons button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Ikona ma trzymac sie tekstu, a nie kurczyc sie, gdy nazwa akcji
   zawija sie na waskim ekranie. */
.ikona-dzwieku {
  flex-shrink: 0;
}

button {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 10px 16px;
  border: 1px solid var(--granat);
  border-radius: 6px;
  background-color: var(--granat);
  color: var(--na-kolorze);
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;

  @media (min-width: 640px) {
    font-size: 1.7rem;
    padding: 11px 20px;
  }
}

button:hover {
  background-color: var(--karta);
  color: var(--granat);
}

button:focus-visible {
  outline: 3px solid var(--granat-ciemny);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Ekran konca cwiczenia

   app1 i app3 podmieniaja cale <body> na .end_message, app2 na p.end -
   po tej podmianie na stronie nie ma juz nic wiecej, wiec te bloki
   musza same sie wysrodkowac.
   --------------------------------------------------------------- */

.end_message,
p.end {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 32px 20px;
  color: var(--tekst);
  font-size: 2.2rem;
  line-height: 1.5;

  @media (min-width: 1024px) {
    font-size: 2.8rem;
  }
}

.end_message p {
  margin: 0;
}

.end_message a,
p.end a {
  color: var(--granat);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Stopka - jasny pas, taki sam jak naglowek.

   Byla granatowa, ale to podnosilo odnosnik do ksiazki do rangi
   najwazniejszego elementu strony. Jest tu po to, zeby powiedziec,
   skad kurs pochodzi - nie po to, zeby przerywac cwiczenie.
   --------------------------------------------------------------- */

footer {
  width: 100%;
  display: block;
  margin-top: auto;
  background-color: var(--karta);
  border-top: 1px solid var(--obwodka);
  color: var(--tekst-drugi);
  text-align: center;
  padding: 20px 16px;
}

footer p {
  margin: 0;
  font-size: 1.6rem;

  @media (min-width: 1024px) {
    font-size: 1.7rem;
  }
}

footer a {
  color: var(--granat);
  font-weight: 700;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}