/*
 * HARASIMIUK – rodzina z Derewicznej
 * Baza stylów (Faza 1). Korzysta z kolorów zdefiniowanych w tailwind-config.js.
 * Wartości kolorów powtórzone tu jako zmienne, aby plik działał także po
 * odłączeniu CDN (wdrożenie WordPress).
 */

:root {
  --papier: #F5F0E6;
  --papier-ciemny: #EAE2D0;
  --papier-jasny: #FBF8F1;
  --grafit: #2B2B2B;
  --grafit-jasny: #555250;
  --granat: #1B2A41;
  --sepia: #7A5C3E;
  --sepia-jasna: #B39674;
  --sepia-linia: #D4C6AC;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--papier);
  color: var(--grafit);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typografia ----------
 * Ten plik MUSI być podpięty na końcu <body> (po resecie Tailwind - preflight),
 * inaczej reset wyzeruje rozmiary nagłówków, marginesy i listy.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--granat);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.75rem, 6vw, 4.25rem); font-weight: 700; margin-bottom: .5em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: .5em; }
h3 { font-size: 1.75rem; margin-bottom: .4em; }
h4 { font-size: 1.35rem; font-weight: 700; margin-bottom: .4em; }
h5 { font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: "Source Serif 4", Georgia, serif; }
h6 { font-size: 1rem; font-weight: 600; font-style: italic; }

h1 em, h2 em { font-style: italic; font-weight: 500; }

p { margin-bottom: 1.25em; }

a {
  color: var(--sepia);
  text-decoration: underline;
  text-decoration-color: var(--sepia-linia);
  text-underline-offset: 0.2em;
  transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--granat); text-decoration-color: var(--granat); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sepia);
  outline-offset: 3px;
}

blockquote {
  border-left: 2px solid var(--sepia-jasna);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--granat);
}
blockquote cite {
  display: block;
  margin-top: .5rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: .85rem;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sepia);
}

ul.lista, ol.lista { margin: 0 0 1.25em 1.25rem; padding: 0; }
ul.lista { list-style: "– " outside; }
ol.lista { list-style: decimal outside; }
.lista li { margin-bottom: .35em; padding-left: .25rem; }

hr { border: 0; border-top: 1px solid var(--sepia-linia); margin: 3rem 0; height: 0; }

::selection { background: var(--sepia-linia); color: var(--granat); }

/* Kontener wstawiany przez main.js nie tworzy własnego bloku (potrzebne dla sticky header) */
[data-include] { display: contents; }

/* Cyfry równe (wysokości kapitalików) tam, gdzie liczą się daty i liczby.
 * Nagłówki zostają w klasycznym stylu ze starymi cyframi. */
.tabela, .numer-sekcji, .daty { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ---------- Komponenty ---------- */

/* Tytuł serwisu: ozdobny tylko tu (logo w nagłówku i hero) */
.tytul-serwisu { line-height: 1; }
.tytul-serwisu span.nazwisko {
  display: block;
  line-height: 1;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--granat);
}
.tytul-serwisu span.podtytul {
  display: block;
  line-height: 1;
  margin-top: .1em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--sepia);
}

/* Etykieta w małych kapitalikach (daty, kategorie) */
.etykieta {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sepia);
  font-weight: 600;
}

/* Numer sekcji (01, 02 …) */
.numer-sekcji {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  color: var(--sepia);
  letter-spacing: .1em;
}

/* Kolumna tekstu do czytania */
.czytanie { max-width: 42rem; }

/* Początek akapitu z inicjałem */
.inicjal::first-letter {
  float: left;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4.2rem;
  line-height: .8;
  padding: .35rem .6rem 0 0;
  color: var(--granat);
  font-weight: 600;
}

/* Separator ozdobny */
.separator {
  display: flex; align-items: center; gap: 1rem;
  color: var(--sepia-jasna);
  margin: 3rem 0;
}
.separator::before, .separator::after {
  content: ""; flex: 1; border-top: 1px solid var(--sepia-linia);
}

/* Przyciski */
.przycisk {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 1px solid var(--granat);
  background: var(--granat);
  color: var(--papier-jasny);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.przycisk:hover { background: transparent; color: var(--granat); }
.przycisk-kontur { background: transparent; color: var(--granat); }
.przycisk-kontur:hover { background: var(--granat); color: var(--papier-jasny); }

/* Karta */
.karta {
  background: var(--papier-jasny);
  border: 1px solid var(--sepia-linia);
  padding: 1.75rem;
}
.karta h3 { margin-bottom: .5rem; }
.karta-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.karta-link:hover { border-color: var(--sepia); color: inherit; }

/* Panel (beżowe tło) */
.panel { background: var(--papier-ciemny); border: 1px solid var(--sepia-linia); padding: 1.75rem; }

/* Ramka na skan / fotografię archiwalną */
.skan {
  background: var(--papier-jasny);
  border: 1px solid var(--sepia-linia);
  padding: .6rem;
  box-shadow: 0 1px 0 var(--sepia-linia);
}
.skan img { display: block; width: 100%; height: auto; }
.skan figcaption {
  font-size: .85rem;
  color: var(--grafit-jasny);
  padding: .6rem .2rem 0;
  line-height: 1.4;
}

/* Tabela archiwalna */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th {
  text-align: left; padding: .6rem .75rem;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sepia); border-bottom: 1px solid var(--granat);
}
.tabela td { padding: .6rem .75rem; border-bottom: 1px solid var(--sepia-linia); }

/* ---------- Nawigacja i stopka (Faza 2) ---------- */

/* Link menu głównego: kapitaliki, cienkie podkreślenie; aktywna strona wyróżniona */
.nav-link {
  display: inline-block;
  padding: .4rem 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--granat);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-link:hover { color: var(--sepia); border-bottom-color: var(--sepia-linia); }
.nav-link[aria-current="page"] { color: var(--sepia); border-bottom-color: var(--sepia); }

/* Link w ciemnej stopce */
.stopka-link {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.stopka-link:hover { color: var(--sepia-jasna); border-bottom-color: var(--sepia-jasna); }

/* ---------- Podstrony (Faza 4) ---------- */

/* Okruszki nawigacyjne */
.okruszki { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grafit-jasny); }
.okruszki a { color: var(--sepia); text-decoration: none; }
.okruszki a:hover { color: var(--granat); text-decoration: underline; }
.okruszki .rozdzielacz { margin: 0 .5rem; color: var(--sepia-jasna); }

/* Oś czasu: lista pionowa z kropkami; li.wazne = wyróżniony punkt */
.os-czasu { list-style: none; margin: 0 0 0 .5rem; padding: 0; border-left: 1px solid var(--sepia-linia); }
.os-czasu li { position: relative; padding: 0 0 2rem 2rem; margin: 0; }
.os-czasu li:last-child { padding-bottom: 0; }
.os-czasu li::before {
  content: ""; position: absolute; left: -6px; top: .6rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--sepia);
}
.os-czasu li.wazne::before { background: var(--sepia); }
.os-czasu .rok {
  display: block; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--granat);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.os-czasu p { margin-bottom: 0; }

/* Kroki: np. droga imienia (strzałka między kartami na szerokim ekranie) */
.kroki { display: grid; gap: 1rem; }
.kroki .karta { position: relative; }
@media (min-width: 768px) {
  .kroki { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .kroki .karta:not(:last-child)::after {
    content: "→"; position: absolute; right: -1.6rem; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; color: var(--sepia-jasna);
  }
}