/* Opony Kotlina (firma fikcyjna): warsztat oponiarski.
   Głośny jest tylko ciemny pas z oponą i napisami z jej boku (205/55 R16), reszta to jasny, czytelny „beton i kreda”.
   Niebieski akcent to kołpak w środku felgi i wszystko, co da się kliknąć. */

:root {
  --tlo: #f7f7f4;
  --pow: #e4e5e1;
  --karta: #ffffff;
  --tekst: #1b1d1f;
  --tekst-2: #4b5054;
  --linia: #c3c6c2;
  --guma: #1b1d1f;
  --guma-2: #26292c;
  --na-gumie: #f1f1ec;
  --na-gumie-2: #b9bdbf;
  --kreda: #f7f5e8;
  --akcent: #2346c8;
  --na-akcencie: #ffffff;
  --akcent-tekst: #2346c8;
  --akcent-jasny: #9fb3ff;
  --fokus: #2346c8;
  --blad: #b3261e;
  --ok: #1f6b3a;
  --cien: 0 1px 0 rgba(27, 29, 31, 0.08), 0 14px 34px -20px rgba(27, 29, 31, 0.5);

  --font: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-n: 'Saira Semi Condensed', 'Arial Narrow', sans-serif;
  --szer: 72rem;
  --odstep: clamp(1rem, 3vw, 2rem);

  color-scheme: light;
}

:root[data-motyw='ciemny'] {
  --tlo: #121415;
  --pow: #1a1d1f;
  --karta: #16191b;
  --tekst: #ecede9;
  --tekst-2: #aab0b3;
  --linia: #33383b;
  --guma: #0c0d0e;
  --guma-2: #181a1c;
  --akcent: #9fb3ff;
  --na-akcencie: #0f1322;
  --akcent-tekst: #9fb3ff;
  --fokus: #9fb3ff;
  --blad: #ff8a80;
  --ok: #7fd69b;
  --cien: 0 1px 0 rgba(0, 0, 0, 0.4), 0 16px 40px -20px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

/* stopka zawsze na dole okna, także w panelu z krótką treścią (bez jasnego pasa pod nią) */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-n);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--akcent-tekst);
  text-underline-offset: 0.18em;
}

/* numer telefonu nie rozpada się na dwie linie */
a[href^='tel:'] {
  white-space: nowrap;
}

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

.przeskocz {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 20;
  padding: 0.7rem 1rem;
  background: var(--kreda);
  color: #1b1d1f;
  font-weight: 700;
}

.przeskocz:focus {
  top: 0.5rem;
}

.wiersz {
  width: min(100% - 2 * var(--odstep), var(--szer));
  margin-inline: auto;
}

/* ---------- ciemna góra: nagłówek i opona ---------- */

.naglowek,
.hero {
  --fokus: #9fb3ff;
  background: var(--guma);
  color: var(--na-gumie);
}

.naglowek {
  border-bottom: 1px solid #2f3337;
}

.naglowek__wnetrze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  min-height: 4rem;
  padding-block: 0.5rem;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--na-gumie);
  font-family: var(--font-n);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
}

.marka svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  color: var(--na-gumie);
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.przelacznik {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #44494d;
  border-radius: 50%;
  background: transparent;
  color: var(--na-gumie);
  cursor: pointer;
}

.przelacznik svg {
  width: 20px;
  height: 20px;
}

.hero {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.hero__tekst {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.hero h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: -0.01em;
}

.hero__wstep {
  max-width: 40ch;
  color: var(--na-gumie-2);
  font-size: 1.15rem;
}

.hero__fakty {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--na-gumie-2);
}

.hero__fakty strong {
  color: var(--na-gumie);
}

.hero__skrot {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 4px;
  background: var(--akcent-jasny);
  color: #0f1322;
  font-family: var(--font-n);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.hero__skrot:hover {
  background: #c3cfff;
}

/* opona: wychodzi poza prawą krawędź, jak koło wtaczane do warsztatu */
.opona {
  margin: 0 calc(-1 * var(--odstep) - 7rem) 0 0;
}

.opona svg {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
}

.opona text {
  font-family: var(--font-n);
  font-weight: 700;
}

.opona__kolo {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- rezerwacja ---------- */

.sekcja {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.sekcja + .sekcja {
  border-top: 1px solid var(--linia);
}

.sekcja--pow {
  background: var(--pow);
}

.sekcja__tytul {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.sekcja__wstep {
  max-width: 60ch;
  margin-bottom: 2rem;
  color: var(--tekst-2);
}

.rezerwacja__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.rezerwacja__bok {
  display: grid;
  gap: 1rem;
}

.rezerwacja__bok .sekcja__wstep {
  margin-bottom: 0;
}

/* ten sam podział co przy rezerwacji: tytuł i dopiski z lewej, treść z prawej, bez pustej połowy ekranu */
.uklad-boczny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.uklad-boczny__bok {
  display: grid;
  gap: 1rem;
}

.uklad-boczny__bok .sekcja__tytul,
.uklad-boczny__bok .sekcja__wstep {
  margin-bottom: 0;
}

/* kredowy dopisek: tak warsztat znaczy opony do przechowania */
.kreda {
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--akcent-tekst);
  background: var(--karta);
}

.kreda strong {
  display: block;
  font-family: var(--font-n);
  font-size: 1.2rem;
}

.karta {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--linia);
  border-radius: 6px;
  background: var(--karta);
  box-shadow: var(--cien);
}

.zastepstwo {
  padding: 1rem;
  border-left: 4px solid var(--akcent-tekst);
  background: var(--pow);
}

.zastepstwo p + p {
  margin-top: 0.5rem;
}

.kotlina .rez,
.kotlina .pan {
  --rez-tlo: var(--karta);
  --rez-pow: var(--pow);
  --rez-tekst: var(--tekst);
  --rez-tekst-2: var(--tekst-2);
  --rez-linia: var(--linia);
  --rez-akcent: var(--akcent);
  --rez-na-akcencie: var(--na-akcencie);
  --rez-akcent-tekst: var(--akcent-tekst);
  --rez-zaznaczenie: var(--akcent);
  --rez-na-zaznaczeniu: var(--na-akcencie);
  --rez-blad: var(--blad);
  --rez-ok: var(--ok);
  --rez-fokus: var(--fokus);
  --rez-promien: 4px;
  --rez-font: var(--font);
  --rez-font-naglowek: var(--font-n);
}

.kotlina .rez-krok__tytul,
.kotlina .rez-potwierdzenie__tytul {
  font-size: 1.4rem;
}

/* ---------- cennik ---------- */

.cennik {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.cennik th,
.cennik td {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--linia);
  text-align: left;
  vertical-align: top;
}

.cennik thead th {
  color: var(--tekst-2);
  font-size: 0.85rem;
  font-weight: 400;
}

.cennik tbody th {
  font-weight: 700;
}

.cennik__opis {
  display: block;
  color: var(--tekst-2);
  font-size: 0.92rem;
  font-weight: 400;
}

.cennik .liczba {
  text-align: right;
  white-space: nowrap;
}

.cennik__uwaga {
  max-width: 60ch;
  margin-top: 1.5rem;
  color: var(--tekst-2);
  font-size: 0.95rem;
}

/* ---------- godziny i dojazd ---------- */

.godziny__uklad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem 3rem;
}

.godziny {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.godziny th,
.godziny td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linia);
  text-align: left;
}

.godziny td {
  text-align: right;
}

.godziny th {
  font-weight: 400;
}

.dojazd {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.dojazd h3 {
  font-size: 1.5rem;
}

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

/* ---------- kroki i pytania ---------- */

.kroki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.kroki li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1rem;
  border-top: 3px solid var(--tekst);
  counter-increment: krok;
}

.kroki li::before {
  content: counter(krok);
  font-family: var(--font-n);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--akcent-tekst);
}

.kroki h3 {
  font-size: 1.5rem;
}

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

.pytania {
  display: grid;
  border-top: 1px solid var(--linia);
}

.pytania details {
  border-bottom: 1px solid var(--linia);
}

.pytania summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.6rem 0;
  font-size: 1.12rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pytania summary::-webkit-details-marker {
  display: none;
}

.pytania summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-n);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--akcent-tekst);
}

.pytania details[open] summary::after {
  content: '–';
}

.pytania details p {
  max-width: 62ch;
  padding-bottom: 1.1rem;
  color: var(--tekst-2);
}

/* ---------- stopka ---------- */

.stopka {
  padding-block: 3rem 2rem;
  background: var(--guma);
  color: #d9dcdc;
}

.stopka a {
  color: #b9c7ff;
}

.stopka :focus-visible {
  outline-color: #9fb3ff;
}

.stopka__uklad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
}

.stopka h2 {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 1.4rem;
}

/* linki w stopce mają 44 px wysokości do kliknięcia, ale pierwsza linia stoi równo z adresem obok */
.stopka ul {
  margin: -0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.stopka li a {
  display: inline-block;
  padding-block: 0.6rem;
}

.stopka__dol {
  display: grid;
  gap: 0.35rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #b4b9bb;
  font-size: 0.9rem;
}

.stopka__dol strong {
  color: #fff;
}

/* w panelu stopka ma tylko dolną część: bez kreski i pustego pasa nad nią */
.stopka__dol:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- panel właściciela ---------- */

.panel-strona {
  padding-block: 2rem 4rem;
}

.panel-strona__wstep {
  max-width: 62ch;
  margin-bottom: 1.5rem;
  color: var(--tekst-2);
}

.panel-strona__wstep a {
  font-weight: 700;
}

/* ---------- telefon ---------- */

@media (min-width: 861px) {
  .hero__skrot {
    display: none;
  }
}

/* przy długim formularzu tytuł i dopisek o kluczu jadą razem z nim, zamiast zostawiać pustą kolumnę */
@media (min-width: 861px) and (min-height: 600px) {
  .rezerwacja__bok {
    position: sticky;
    top: 1.5rem;
  }
}

@media (max-width: 860px) {
  .hero__uklad,
  .rezerwacja__uklad,
  .uklad-boczny {
    grid-template-columns: minmax(0, 1fr);
  }

  .opona {
    width: 78%;
    margin: 0 calc(-1 * var(--odstep) - 18%) 0 auto;
  }
}

@media (max-width: 440px) {
  /* karta rezerwacji od krawędzi do krawędzi: kalendarz i godziny mają pełne 44 px na telefonie 360 px */
  .karta {
    margin-inline: calc(-1 * var(--odstep));
    padding-inline: 0.75rem;
    border-inline: 0;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  .naglowek nav {
    order: 3;
    flex-basis: 100%;
  }

  .menu {
    margin-left: -0.6rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* jedyny ruch na stronie: koło wtacza się raz przy wejściu */
  .ma-js .opona__kolo {
    animation: wtocz 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes wtocz {
    from {
      transform: translateX(18%) rotate(80deg);
      opacity: 0;
    }
  }
}