/* ============================================================
   legal.css — strony prawne (/polityka-prywatnosci, /regulamin)
   Wspólne dla: żywej strony ORAZ powierzchni edytora w /admin
   (dzięki temu WYSIWYG wygląda 1:1 jak opublikowana strona).
   Klasy treści: .legal__callout (tło tekstu), inline style margin-left
   (wcięcia), .legal__icon (ikony). Tokeny kolorów — z css/styles.css.
============================================================ */

/* --- nagłówek strony prawnej --- */
.legal-hero {
  background: var(--color-navy);
  color: var(--color-cream);
  padding: clamp(72px, 12vw, 120px) 0 clamp(40px, 7vw, 64px);
}
.legal-hero .eyebrow { color: var(--color-brass-light); }
.legal-hero h1 {
  color: var(--color-cream);
  margin: 8px 0 18px;
}
.legal-updated {
  font-size: 14px;
  color: rgba(245, 239, 228, 0.7);
  margin: 0;
}
.legal-updated span { color: var(--color-brass-light); font-weight: 500; }

.legal-body-section { padding: clamp(40px, 7vw, 72px) 0 clamp(64px, 10vw, 110px); }

/* Węższa kolumna dla czytelności tekstu prawnego (~70 znaków). */
.container--narrow { max-width: 760px; }

/* --- treść --- */
.legal {
  color: var(--color-text);
  font-size: 16.5px;
  line-height: 1.72;
}
.legal > *:first-child { margin-top: 0; }
.legal > *:last-child { margin-bottom: 0; }

.legal h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 27px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.legal h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.6vw, 20px);
  font-weight: 600;
  color: var(--color-navy);
  margin: 1.5em 0 0.4em;
}
.legal p { margin: 0.85em 0; }

.legal a {
  color: var(--color-brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { color: var(--color-navy); }

.legal strong, .legal b { font-weight: 600; color: var(--color-navy); }

.legal ul,
.legal ol { margin: 0.85em 0; padding-left: 1.5em; }
.legal li { margin: 0.4em 0; padding-left: 0.25em; }
.legal ul li::marker { color: var(--color-brass); }
.legal ol li::marker { color: var(--color-brass); font-weight: 600; }

/* Tło tekstu — wyróżniony blok (callout). */
.legal__callout {
  background: var(--color-cream-warm);
  border-left: 3px solid var(--color-brass);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.4em 0;
}
.legal__callout > *:first-child { margin-top: 0; }
.legal__callout > *:last-child { margin-bottom: 0; }

/* Ikony inline — kolor marki, skala do tekstu. */
.legal__icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-right: 0.3em;
  color: var(--color-brass);
  flex: none;
}

/* Wcięcia stosujemy jako inline style margin-left na bloku — bez dodatkowej klasy. */