/* =========================================================================
   wrotranslate.pl
   Paleta i typografia przeniesione z mockupu Elżbiety (Canva, wrzesień 2026).
   Zero zewnętrznych zasobów: fonty hostowane lokalnie, brak JavaScriptu.
   ========================================================================= */

:root {
  --granat:        #020C45;   /* prawa kolumna, nagłówki, stopka */
  --granat-jasny:  #2B4688;   /* pasek nawigacji */
  --lawenda:       #D5D5F7;   /* akcenty na granacie, ramki */
  --lawenda-tlo:   #EFEFF9;   /* tła bloków */
  --czerwien:      #AF2533;   /* akcenty, strzałki, linia pod paskiem */
  --biel:          #FFFFFF;
  --tekst:         #16171D;
  --tekst-slaby:   #4A4F5E;
  --linia:         #DCDCE8;

  --pas: 4.5rem;              /* wysokość paska nawigacji */
  --kolumna: 11rem;           /* szerokość granatowej kolumny po prawej */
  --tresc: 68rem;             /* maksymalna szerokość treści */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- fonty; podzbiór latin-ext jest obowiązkowy dla polskich znaków -- */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- podstawy ---------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--biel);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--granat); }
h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); margin: 0 0 1rem; }
h3 { font-size: 1.125rem; font-family: var(--sans); font-weight: 700; margin: 0 0 .35rem; color: var(--tekst); }

p { margin: 0 0 1.15rem; }
a { color: var(--granat); }

.pominlink {
  position: absolute; left: -9999px; top: 0;
  background: var(--granat); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.pominlink:focus { left: .5rem; top: .5rem; }

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

/* ---------- pasek nawigacji --------------------------------------------- */

.pasek {
  position: sticky; top: 0; z-index: 40;
  background: var(--granat-jasny);
  border-bottom: 3px solid var(--czerwien);
}

.pasek-wnetrze {
  max-width: 84rem; margin: 0 auto;
  min-height: var(--pas);
  display: flex; align-items: stretch; gap: 1rem;
  padding-left: clamp(1rem, 4vw, 2.5rem);
}

.menu { flex: 1; display: flex; align-items: center; }

.menu ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: clamp(.75rem, 2.2vw, 1.75rem);
  margin: 0; padding: 0;
}

.menu a {
  display: block; padding: .35rem 0;
  color: #fff; text-decoration: none;
  font-size: .8125rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--lawenda); }
.menu a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--lawenda); }

/* Zakładka wyceny; skos po lewej odtwarza kształt z mockupu. Kolor jak
   przycisk główny, bo w lawendzie wtapiała się w granatowy pasek. */
.wycena-tab {
  display: flex; align-items: center; justify-content: center;
  padding: .5rem clamp(1rem, 3vw, 2.25rem) .5rem clamp(1.75rem, 4vw, 3.25rem);
  background: var(--czerwien); color: #fff;
  font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 2rem);
  text-decoration: none; letter-spacing: .01em;
  clip-path: polygon(1.4rem 0, 100% 0, 100% 100%, 0 100%);
  transition: background .18s ease;
}
.wycena-tab:hover { background: #8F1C28; }
/* domyślny obrys ogniskowania jest czerwony, więc na czerwieni byłby niewidoczny */
.wycena-tab:focus-visible { outline-color: #fff; outline-offset: -6px; }

.przelacznik { display: none; }
.przelacznik-etykieta { display: none; }

/* ---------- dekoracyjna kolumna po prawej ------------------------------- */

.kolumna-granat {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--kolumna);
  background: var(--granat); z-index: 1; pointer-events: none;
}
@media (min-width: 78rem) {
  .kolumna-granat { display: block; }
  body { padding-right: var(--kolumna); }
}

/* ---------- wysuwana zakładka „Poznaj Elę" -------------------------------
   Odtworzenie zakładki z mockupu. Bez JavaScriptu: przełącznikiem jest pole
   wyboru, ukryte wizualnie, ale dostępne z klawiatury (tabulator, spacja).
   ------------------------------------------------------------------------ */

.panel-przelacznik {
  position: fixed; top: 0; left: 0;
  width: 1px; height: 1px; opacity: 0; margin: 0;
}

/* Uchwyt stoi na krawędzi białej treści, a nie na granatowej kolumnie —
   w kolorze kolumny zostawał z niego sam napis. Na białym granat wraca. */
.panel-uchwyt {
  position: fixed; top: 40%; right: 0; z-index: 45;
  display: block; cursor: pointer;
  background: var(--granat); color: #fff;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1.25rem .55rem;
  border-left: 4px solid var(--czerwien);   /* ta sama krawędź, co w panelu */
  border-radius: .5rem 0 0 .5rem;
  writing-mode: vertical-rl; text-orientation: mixed;
  box-shadow: -4px 0 14px rgba(2, 12, 69, .28);
  transition: background .18s ease, transform .18s ease, padding-left .18s ease;
}
@media (min-width: 78rem) {
  .panel-uchwyt { right: var(--kolumna); }   /* lewa krawędź granatowej kolumny */
}
/* po najechaniu uchwyt wysuwa się spod krawędzi — zapowiedź panelu */
.panel-uchwyt:hover,
.panel-przelacznik:focus-visible + .panel-zaslona + .panel-uchwyt {
  background: var(--granat-jasny);
  transform: translateX(-.4rem);
  padding-left: .95rem;
}
.panel-przelacznik:focus-visible + .panel-zaslona + .panel-uchwyt {
  outline: 3px solid var(--czerwien); outline-offset: 3px;
}

.panel-osoba {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(24rem, 90vw);
  background: #fff; color: var(--tekst);
  border-left: 4px solid var(--czerwien);
  box-shadow: -8px 0 30px rgba(2, 12, 69, .22);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  overflow-y: auto;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s;
}

.panel-zaslona {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(2, 12, 69, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}

.panel-przelacznik:checked ~ .panel-osoba { transform: translateX(0); visibility: visible; }
.panel-przelacznik:checked ~ .panel-zaslona { opacity: 1; visibility: visible; }
.panel-przelacznik:checked ~ .panel-uchwyt { opacity: 0; pointer-events: none; }

/* Na myszy panel wysuwa się samym najechaniem i zostaje, dopóki kursor jest
   na uchwycie albo na panelu. Ćwierć sekundy zwłoki, żeby nie wyskakiwał
   komuś, kto tylko przejeżdża myszą do paska przewijania. Bez przyciemnienia
   tła — zasłona zostaje dla świadomego kliknięcia. Na dotyku (brak :hover)
   i z klawiatury działa jak dotąd: przełącznikiem. */
@media (hover: hover) and (pointer: fine) {
  .panel-uchwyt:hover ~ .panel-osoba,
  .panel-osoba:hover {
    transform: translateX(0); visibility: visible;
    transition-delay: .25s;
  }
  /* Krzyżyk zamyka tylko panel otwarty kliknięciem. Przy samym najechaniu
     byłby pułapką: kliknięcie w niego dopiero by panel przypięło. */
  .panel-przelacznik:not(:checked) ~ .panel-osoba .panel-zamknij { display: none; }
}

.panel-zamknij {
  position: absolute; top: .5rem; right: .75rem;
  font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--granat-jasny); padding: .25rem .5rem;
}
.panel-zamknij:hover { color: var(--czerwien); }

.panel-portret {
  display: block; width: 100%; height: auto;
  border-radius: 1rem; margin-bottom: 1.25rem;
}

.panel-osoba h2 { font-size: 1.5rem; margin-bottom: .15rem; }
.panel-rola {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--czerwien); margin-bottom: 1rem;
}

@media (max-width: 40rem) {
  .panel-uchwyt { top: auto; bottom: 1.25rem; padding: 1rem .5rem; font-size: .6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-osoba, .panel-zaslona { transition: none; }
}

@media print { .panel-uchwyt, .panel-osoba, .panel-zaslona { display: none !important; } }

/* ---------- układ treści ------------------------------------------------ */

main { position: relative; z-index: 2; }

.sekcja { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem); }
.sekcja--tlo { background: var(--lawenda-tlo); }
.srodek { max-width: var(--tresc); margin: 0 auto; }
.waska { max-width: 46rem; }

.nadtytul {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--czerwien); margin: 0 0 .85rem;
}

.wstep { font-size: 1.1875rem; color: var(--tekst-slaby); }

/* ---------- ekran otwierający ------------------------------------------- */

.hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
.hero h1 { max-width: 20ch; }

.hero-claim {
  display: inline-block;
  background: var(--granat); color: #fff;
  font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.375rem);
  padding: .85rem 1.5rem; border-radius: .9rem;
  margin: .5rem 0 1.25rem;
}

.dymek {
  background: var(--lawenda-tlo);
  border: 2px solid var(--granat); border-radius: 1rem;
  padding: 1.1rem 1.4rem; max-width: 34rem;
  color: var(--granat); margin: 0 0 1.5rem;
}
.dymek p:last-child { margin-bottom: 0; }

.hero-uklad { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 52rem) {
  .hero-uklad { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; }
}

/* ---------- kategorie dokumentów ---------------------------------------- */

.kategorie { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .kategorie { gap: 1.25rem; } }

.kategorie li { display: grid; grid-template-columns: 3.25rem 1fr; gap: .9rem; align-items: start; }
.kategorie .strzalka { margin-top: .35rem; }
.kategorie p { margin: 0; color: var(--tekst-slaby); font-size: .9688rem; }

/* ---------- kroki procesu ------------------------------------------------ */

.kroki {
  list-style: none; counter-reset: krok; margin: 0; padding: 0;
  background: var(--lawenda-tlo);
  border: 2px solid var(--granat); border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  display: grid; gap: 1.1rem;
}
.kroki li {
  counter-increment: krok;
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; align-items: baseline;
  font-size: 1.125rem;
}
.kroki li::before {
  content: counter(krok);
  font-family: var(--serif); font-size: 1.25rem; color: var(--czerwien);
  border-bottom: 2px solid var(--czerwien); text-align: center;
}
.kroki li:last-child { font-weight: 700; }

/* ---------- przyciski ---------------------------------------------------- */

.przycisk {
  display: inline-block; text-decoration: none;
  background: var(--czerwien); color: #fff;
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  padding: .85rem 1.75rem; border: 2px solid var(--czerwien); border-radius: .5rem;
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.przycisk:hover { background: #8F1C28; border-color: #8F1C28; }

.przycisk--drugi {
  background: transparent; color: var(--granat); border-color: var(--granat);
}
.przycisk--drugi:hover { background: var(--granat); color: #fff; }

.przyciski { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-top: 1.5rem; }

/* ---------- ilustracje i zdjęcia zastępcze ------------------------------ */

.ilustracja { display: block; margin: 0 auto; }

.zastepcze {
  display: grid; place-items: center; text-align: center;
  background: var(--lawenda-tlo); border: 2px dashed var(--granat-jasny);
  border-radius: 1rem; padding: 2rem 1.25rem; min-height: 14rem;
  color: var(--granat-jasny);
}
.zastepcze b { display: block; font-size: 1rem; margin-bottom: .35rem; color: var(--granat); }
.zastepcze span { font-size: .875rem; }

/* Zdjęcia w sekcjach treści. Stały kadr, żeby układ nie skakał przy
   podmianie fotografii o innych proporcjach. */
.zdjecie {
  display: block; width: 100%; height: auto;
  border-radius: 1rem;
  aspect-ratio: 4 / 3; object-fit: cover;
}

.flagi { display: flex; gap: .5rem; align-items: center; }

/* ---------- formularz ---------------------------------------------------- */

.formularz { display: grid; gap: 1.1rem; max-width: 34rem; }
.pole { display: grid; gap: .35rem; }
.pole label { font-weight: 700; font-size: .9375rem; }
.pole .podpowiedz { font-size: .8125rem; color: var(--tekst-slaby); font-weight: 400; }

.pole input, .pole textarea {
  font: inherit; color: inherit;
  padding: .7rem .85rem;
  border: 2px solid var(--linia); border-radius: .45rem; background: #fff;
  width: 100%;
}
.pole input:focus, .pole textarea:focus { border-color: var(--granat-jasny); }
.pole textarea { min-height: 9rem; resize: vertical; }

.pole--blad input, .pole--blad textarea { border-color: var(--czerwien); }
.blad { color: var(--czerwien); font-size: .875rem; font-weight: 700; }

.zgoda { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .875rem; }
.zgoda input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; }

.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.komunikat {
  border-left: 4px solid var(--czerwien); background: var(--lawenda-tlo);
  padding: 1rem 1.25rem; margin: 0 0 1.75rem; border-radius: 0 .5rem .5rem 0;
}
.komunikat--ok { border-left-color: #1E7B4D; }

/* ---------- dokumenty prawne -------------------------------------------- */

.dokument { max-width: 48rem; }
.dokument h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.dokument h3 { margin-top: 1.5rem; }
.dokument ol, .dokument ul { padding-left: 1.35rem; }
.dokument li { margin-bottom: .5rem; }
.dokument .meta { color: var(--tekst-slaby); font-size: .875rem; }
.dokument table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: .9375rem; }
.dokument th, .dokument td { border: 1px solid var(--linia); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.dokument th { background: var(--lawenda-tlo); }
.przewijane { overflow-x: auto; }

/* ---------- pasek podglądu ------------------------------------------------ */

.pasek-podgladu {
  background: var(--czerwien); color: #fff;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  text-align: center; position: relative; z-index: 50;
}

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

.stopka {
  position: relative; z-index: 2;
  background: var(--granat); color: #C9CDE4;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) 2rem;
  font-size: .9375rem;
}
.stopka-siatka { max-width: var(--tresc); margin: 0 auto; display: grid; gap: 2rem; }
@media (min-width: 46rem) { .stopka-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stopka h2 { color: #fff; font-family: var(--sans); font-size: .8125rem; font-weight: 700;
             letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .85rem; }
.stopka a { color: #fff; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin-bottom: .4rem; }
.stopka .dane { font-style: normal; line-height: 1.75; }

.stopka-dol {
  max-width: var(--tresc); margin: 2.5rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: #A7AECD;
}

/* ---------- wąskie ekrany ------------------------------------------------ */

@media (max-width: 56rem) {
  .pasek-wnetrze { flex-wrap: wrap; padding-left: 0; min-height: 0; }

  .przelacznik-etykieta {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem clamp(1rem, 4vw, 1.5rem);
    color: #fff; font-size: .8125rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; flex: 1;
  }
  .przelacznik-etykieta .kreski { display: grid; gap: 4px; }
  .przelacznik-etykieta .kreski span { display: block; width: 22px; height: 2px; background: #fff; }

  .wycena-tab { font-size: 1.25rem; padding: .5rem 1.25rem .5rem 2rem; }

  .menu {
    order: 3; flex-basis: 100%; display: none;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .przelacznik:checked ~ .menu { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: .5rem 0 1rem; width: 100%; }
  .menu li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .menu a { padding: .85rem clamp(1rem, 4vw, 1.5rem); font-size: .875rem; }
  .menu a[aria-current="page"], .menu a:hover { border-bottom-color: transparent; background: rgba(255,255,255,.08); }
}

@media (max-width: 30rem) {
  .kategorie li { grid-template-columns: 2.5rem 1fr; }
  .kroki li { grid-template-columns: 1.75rem 1fr; font-size: 1rem; }
}

/* ---------- druk ---------------------------------------------------------- */

@media print {
  .pasek, .kolumna-granat, .przyciski, .pasek-podgladu { display: none !important; }
  body { padding-right: 0; color: #000; }
  .sekcja { padding: 0 0 1rem; }
}