/* =====================================================
   cookies.css — styl dla RODO / Polityka / Regulamin
   Założenia:
   - pionowy, biały "karton" przez całą stronę (header+main+footer)
   - tło szaro-białe
   - mocny cień, aby karton się wyróżniał
   - czarne napisy
   - pomarańczowy przycisk powrotu (hover -> jaśniejszy pomarańcz)
   ===================================================== */

:root{
  --bg: #f2f3f5;        /* jasne tło */
  --bg-2: #fafbfc;      /* bardzo jasne tło (gradient) */
  --text: #111111;      /* czarny tekst */
  --muted: #6b7280;     /* delikatny szary dla opisĂłw */
  --accent: #f58220;    /* pomarańcz – zgodnie z Twoją paletą */
  --radius: 16px;
  --shadow: 0 24px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.10);
  --line: #eceef1;      /* subtelne linie wewnątrz */
  --wrap-w: 860px;      /* stała szerokość białego kartonu (max) */
}

html{ scroll-behavior: smooth; }

/* ---------- Reset + typografia podstawowa ---------- */
*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  line-height: 1.65;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Biały pionowy karton (header + main + footer) ---------- */
:where(header, main, footer){
  width: min(var(--wrap-w), 94vw);
  margin-inline: auto;
  background: #fff;
}

header{
  margin-top: clamp(16px, 3vh, 40px);
  padding: clamp(20px, 3.2vw, 32px) clamp(16px, 3.2vw, 28px) 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 3;
}

main{
  padding: 8px clamp(16px, 3.2vw, 28px) clamp(20px, 3.2vw, 32px);
  /* łączymy wizualnie z nagłówkiem i stopką */
  margin-top: -8px;    /* eliminuje przerwę między blokami */
  position: relative;
  z-index: 2;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

footer{
  padding: clamp(12px, 2.6vw, 20px) clamp(16px, 3.2vw, 28px) clamp(20px, 3.2vw, 32px);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  margin-top: -8px;
  margin-bottom: clamp(16px, 3vh, 40px);
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}

/* ---------- Nagłówki & tekst ---------- */
h1{
  margin: 0 0 8px;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.2px;
}
h2{
  margin: 24px 0 8px;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.25;
}
p{ margin: 12px 0; }
ul{ margin: 12px 0 12px 1.1em; padding: 0; }
li{ margin: 6px 0; }

/* delikatny opis w nagłówku/footerze */
.wrap{
  max-width: 100%;
}

/* ---------- Sekcje/karty z treścią ---------- */
.card{
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.card:first-of-type{ border-top: 0; }

/* ---------- Linki ---------- */
a{ color: inherit; }
a:hover{ text-decoration: underline; }

/* ---------- Przycisk powrotu ---------- */
.btn-home{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 18px;
  background: var(--accent);
  color: #111;                 /* czarny napis */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: 0 6px 16px rgba(245,130,32,.25);
  will-change: transform;
}
.btn-home:hover{
  background: #ff8f2a;         /* jaśniejszy pomarańcz na hover */
  box-shadow: 0 10px 28px rgba(245,130,32,.35);
  transform: translateY(-1px);
}
.btn-home:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(245,130,32,.25);
}
.btn-home:focus-visible{
  outline: 3px solid rgba(245,130,32,.45);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ---------- Tabele (gdyby się trafiły w treści) ---------- */
table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
th, td{
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th{ background: #fafafa; }
tbody tr:last-child td{ border-bottom: 0; }

/* ---------- Responsywność drobna ---------- */
@media (max-width: 560px){
  :where(header, main, footer){ width: min(var(--wrap-w), 96vw); }
  .btn-home{ width: 100%; }
}
/* ===== BUGFIX: cienka linia pod nagłówkiem ===== */
header{
  /* zostawiamy cień i zaokrąglenia */
  border-bottom: 0;
  background-clip: padding-box; /* eliminuje artefakt na krawędzi */
}

main{
  /* mocniej podsuń main pod header, żeby zakryć cień */
  margin-top: -22px;                 /* było -8px */
  padding-top: calc(22px + 8px);     /* kompensacja odsłoniętej treści */
  border-top: 0;                     /* żadnej kreski na łączeniu */
  /* zostawiamy boki, żeby karton miał delikatny outline */
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

footer{
  /* usuwa mikro-przerwę nad stopką na części przeglądarek */
  margin-top: -1px;
}

/* ===== FIX: usuwamy cień spod headera ===== */
header{
  box-shadow: none;         /* usuwa cień z nagłówka */
  border-bottom: 1px solid var(--line); /* delikatna kreska zamiast cienia */
}

/* dodajemy cień na całą „kartę”, a nie osobno na header */
:where(header, main, footer){
  box-shadow: none;
}
.wrapper{
  width: min(var(--wrap-w), 94vw);
  margin-inline: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);   /* cień tylko raz na całość */
  overflow: hidden;            /* żeby krawędzie się ładnie trzymały */
}