/* =========================================================
   usmoka.pl — warstwa redakcyjna bloga
   Ładowana tylko na wpisach (is_singular('post')).
   Działa w obu trybach: 'template' i 'inject'.
   ========================================================= */

/* ---------- Tokeny — jedyne miejsce do zmiany kolorów ---------- */
.kws-single,
.kws-post {
  --kws-ink:        #17181c;
  --kws-ink-soft:   #5b6068;
  --kws-rule:       #e3e5e9;
  --kws-paper:      #ffffff;
  --kws-tint:       #f5f6f8;
  --kws-accent:     #b8332a;   /* ← PODMIEŃ na kolor marki usmoka.pl */
  --kws-accent-ink: #ffffff;

  --kws-measure:    42rem;     /* szerokość kolumny tekstu (~700px) */
  --kws-body:       1.125rem;
  --kws-lh:         1.72;
}

/* ---------- Wrapper (tryb 'template') ---------- */
.kws-single {
  background: var(--kws-paper);
  color: var(--kws-ink);
  padding: 2.5rem 1.25rem 4rem;
}
.kws-single__inner {
  max-width: 56rem;
  margin-inline: auto;
}

/* W trybie 'inject' wrapper daje motyw — wystarczy sam kolor tekstu. */
.kws-post--inject { color: var(--kws-ink); }

/* ---------- Kolumna tekstu ---------- */
.kws-post__body {
  max-width: var(--kws-measure);
  margin-inline: auto;
  font-size: var(--kws-body);
  line-height: var(--kws-lh);
}
.kws-post__body > * + * { margin-top: 1.35em; }
.kws-post__body p { margin: 0; }

.kws-post__body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--kws-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.kws-post__body a:hover { color: var(--kws-accent); }

.kws-post__body h2,
.kws-post__body h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 100px;   /* pod sticky header Adifiera — dostrój, jeśli trzeba */
}
.kws-post__body h2 { font-size: 1.65rem; margin-top: 2.6em; }
.kws-post__body h3 { font-size: 1.25rem; margin-top: 2em; }

.kws-post__body ul,
.kws-post__body ol { padding-left: 1.25em; }
.kws-post__body li + li { margin-top: .5em; }

.kws-post__body img { border-radius: 6px; height: auto; max-width: 100%; }
.kws-post__body figure { margin: 2rem 0; }
.kws-post__body figcaption {
  font-size: .8125rem;
  color: var(--kws-ink-soft);
  margin-top: .6em;
}

/* Pierwszy akapit = lead */
.kws-post__body > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.6;
}

/* ---------- Nagłówek wpisu (tryb 'template') ---------- */
.kws-post__hero { margin-bottom: 2.5rem; }
.kws-post__hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.kws-post__head {
  max-width: var(--kws-measure);
  margin: 0 auto 2.75rem;
}
.kws-post__eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kws-accent);
  text-decoration: none;
  margin-bottom: .9rem;
}
.kws-post__eyebrow:hover { text-decoration: underline; }
.kws-post__title {
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--kws-ink);
}
.kws-post__lead {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--kws-ink-soft);
  margin: 0 0 1.5rem;
}

/* ---------- Pasek meta ---------- */
.kws-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  max-width: var(--kws-measure);
  margin: 0 auto 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kws-rule);
  font-size: .875rem;
  color: var(--kws-ink-soft);
}
.kws-post__meta-sep { opacity: .45; }
.kws-post__meta strong { color: var(--kws-ink); font-weight: 600; }

/* ---------- Spis treści ---------- */
.kws-toc {
  max-width: var(--kws-measure);
  margin: 0 auto 2.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--kws-tint);
  border-left: 3px solid var(--kws-accent);
  border-radius: 0 6px 6px 0;
}
.kws-toc__title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kws-ink-soft);
  margin: 0 0 .7rem;
}
.kws-toc ol { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.kws-toc li + li { margin-top: .4rem; }
.kws-toc ol ol { margin-top: .4rem; font-size: .9rem; opacity: .85; }
.kws-toc a { color: inherit; text-decoration: none; }
.kws-toc a:hover { color: var(--kws-accent); text-decoration: underline; }

/* ---------- Boks „Warto wiedzieć” / „Uwaga” ---------- */
.kws-note {
  margin: 2.25rem auto;
  padding: 1.35rem 1.5rem;
  background: var(--kws-tint);
  border: 1px solid var(--kws-rule);
  border-radius: 8px;
}
.kws-note__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kws-accent);
  margin-bottom: .55rem;
}
.kws-note p { margin: 0; font-size: 1rem; line-height: 1.6; }
.kws-note p + p { margin-top: .8em; }

.kws-note--warn { background: #fff8f0; border-color: #f0dcc4; }
.kws-note--warn .kws-note__label { color: #b06b12; }

/* ---------- Cytat ---------- */
.kws-post__body blockquote {
  margin: 2.5rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--kws-accent);
  font-size: 1.3rem;
  line-height: 1.5;
  font-style: normal;
}
.kws-post__body blockquote p { margin: 0; }
.kws-post__body blockquote cite {
  display: block;
  margin-top: .9rem;
  font-size: .875rem;
  font-style: normal;
  color: var(--kws-ink-soft);
}

/* ---------- FAQ ---------- */
.kws-faq { margin: 2.5rem 0; }
.kws-faq__heading { font-size: 1.35rem; margin: 0 0 1rem; }
.kws-faq__item { border-bottom: 1px solid var(--kws-rule); }
.kws-faq__item:first-of-type { border-top: 1px solid var(--kws-rule); }
.kws-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
}
.kws-faq__item summary::-webkit-details-marker { display: none; }
.kws-faq__item summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--kws-accent);
}
.kws-faq__item[open] summary::after { content: "−"; }
.kws-faq__item summary:focus-visible {
  outline: 2px solid var(--kws-accent);
  outline-offset: 2px;
}
.kws-faq__answer { padding: 0 0 1.1rem; font-size: 1rem; line-height: 1.65; }
.kws-faq__answer p { margin: 0; }
.kws-faq__answer p + p { margin-top: .8em; }

/* =========================================================
   SYGNATURA: tablica ogłoszeń w treści
   Wizualny cytat z gazetowej kolumny ogłoszeń drobnych:
   grube hairline'y, wersaliki, cena monospace'em.
   Wyłamana szerzej niż kolumna tekstu — czytelnik widzi,
   że to treść portalu, nie reklama.
   ========================================================= */
.kws-ads {
  width: min(100% + 8rem, 100%);
  max-width: 56rem;
  margin: 3rem auto;
  border-top: 3px solid var(--kws-ink);
  border-bottom: 3px solid var(--kws-ink);
  padding: 1.1rem 0 1.25rem;
  background: var(--kws-paper);
}
/* w trybie 'template' kolumna tekstu jest węższa niż wrapper —
   wyciągamy tablicę na pełną szerokość wrappera */
.kws-post__body .kws-ads {
  width: calc(100% + 14rem);
  max-width: 56rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.kws-ads__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--kws-rule);
  margin-bottom: .25rem;
}
.kws-ads__title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--kws-ink);
}
.kws-ads__all {
  font-size: .8rem;
  color: var(--kws-accent);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.kws-ads__all:hover { text-decoration: underline; }

.kws-ads__list { list-style: none; margin: 0; padding: 0; }
.kws-ads__item { border-bottom: 1px solid var(--kws-rule); }
.kws-ads__item:last-child { border-bottom: 0; }

.kws-ads__link {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem .25rem;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.kws-ads__link:hover { background: var(--kws-tint); }
.kws-ads__link:focus-visible {
  outline: 2px solid var(--kws-accent);
  outline-offset: -2px;
}

.kws-ads__thumb {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--kws-tint);
}
.kws-ads__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--kws-ink-soft);
  opacity: .5;
}
.kws-ads__name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: .25rem;
}
.kws-ads__where {
  display: block;
  font-size: .8125rem;
  color: var(--kws-ink-soft);
}
.kws-ads__price {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.kws-ads__empty {
  padding: 1.25rem .25rem;
  font-size: .95rem;
  color: var(--kws-ink-soft);
  margin: 0;
}
.kws-ads__empty a,
.kws-ads__cta a {
  color: var(--kws-accent);
  font-weight: 600;
  text-decoration: none;
}
.kws-ads__empty a:hover,
.kws-ads__cta a:hover { text-decoration: underline; }
.kws-ads__cta {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--kws-rule);
  font-size: .875rem;
  color: var(--kws-ink-soft);
}

/* ---------- Autor ---------- */
.kws-author {
  max-width: var(--kws-measure);
  margin: 3rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--kws-rule);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.kws-author__avatar { border-radius: 50%; flex-shrink: 0; }
.kws-author__name { font-weight: 700; margin: 0 0 .3rem; font-size: 1rem; }
.kws-author__bio {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--kws-ink-soft);
}

/* ---------- Powiązane wpisy ---------- */
.kws-related { margin: 3.5rem auto 0; max-width: 56rem; }
.kws-related__title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--kws-ink);
  margin: 0 0 1.25rem;
  color: var(--kws-ink);
}
.kws-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.kws-related__card { text-decoration: none; color: inherit; display: block; }
.kws-related__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: .7rem;
  background: var(--kws-tint);
}
.kws-related__name { font-weight: 600; font-size: 1rem; line-height: 1.35; margin: 0; }
.kws-related__card:hover .kws-related__name { color: var(--kws-accent); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .kws-single { padding: 1.5rem 1rem 3rem; }
  .kws-post__body .kws-ads,
  .kws-ads {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .kws-ads__link { grid-template-columns: 64px 1fr; row-gap: .35rem; }
  .kws-ads__thumb { width: 64px; height: 48px; }
  .kws-ads__price { grid-column: 2; text-align: left; font-size: .95rem; }
  .kws-post__body { font-size: 1.0625rem; }
}

/* ---------- Dostępność ---------- */
@media (prefers-reduced-motion: reduce) {
  .kws-ads__link { transition: none; }
}

/* =========================================================
   RESET NADPISAŃ ADIFIERA
   Motyw narzuca własne style na <article class="post">,
   podkreślenia linków i kolory. Tu je neutralizujemy.
   Dodane w v1.1 po testach na żywo.
   ========================================================= */

/* Adifier rysuje ramkę/tło wokół article.post — zdejmujemy */
.kws-single .kws-post,
.kws-single article.post {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Centrowanie wrappera niezależnie od kontenera motywu */
.kws-single {
  width: 100%;
  box-sizing: border-box;
}
.kws-single__inner {
  width: 100%;
  box-sizing: border-box;
}

/* Adifier podkreśla wszystkie <a> — w naszych blokach tego nie chcemy */
.kws-post__meta a,
.kws-post__eyebrow,
.kws-toc a,
.kws-ads a,
.kws-ads__link,
.kws-ads__link *,
.kws-related__card,
.kws-related__card *,
.kws-author a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.kws-toc a:hover,
.kws-ads__all:hover,
.kws-ads__cta a:hover,
.kws-ads__empty a:hover,
.kws-post__eyebrow:hover {
  text-decoration: underline !important;
}

/* Cena i nazwa ogłoszenia dziedziczą kolor tekstu, nie kolor linku motywu */
.kws-ads__name,
.kws-ads__price { color: var(--kws-ink) !important; }
.kws-ads__where { color: var(--kws-ink-soft) !important; }

/* Wyłamanie tablicy ogłoszeń — wersja odporna na kontener motywu.
   Zamiast translateX używamy ujemnych marginesów, które nie wychodzą
   poza wrapper i nie psują centrowania. */
.kws-post__body .kws-ads {
  width: auto;
  max-width: none;
  margin-left: calc((var(--kws-measure) - 56rem) / 2);
  margin-right: calc((var(--kws-measure) - 56rem) / 2);
  transform: none;
}
@media (max-width: 900px) {
  .kws-post__body .kws-ads {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================================
   v1.2 — wyjście z wąskiego kontenera Adifiera
   ========================================================= */

/* Adifier stylizuje <header> wewnątrz article — zdejmujemy ramkę i tło */
.kws-single .kws-post header,
.kws-single .kws-post__head {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* zostawiamy tylko naszą kreskę nad paskiem meta */
.kws-single .kws-post__meta {
  border-top: 1px solid var(--kws-rule) !important;
}

/* Wyrwanie się z kontenera motywu na pełną szerokość okna,
   a potem własne centrowanie treści. */
.kws-single {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.kws-single__inner {
  max-width: 46rem;      /* wrapper: hero + tablica ogłoszeń */
  margin-inline: auto;
}
.kws-post {
  --kws-measure: 40rem;  /* kolumna tekstu, węższa niż wrapper */
}
/* tablica ogłoszeń: pełna szerokość wrappera */
.kws-post__body .kws-ads {
  width: auto;
  max-width: none;
  margin-left: calc((40rem - 46rem) / 2);
  margin-right: calc((40rem - 46rem) / 2);
  transform: none;
}
@media (max-width: 800px) {
  .kws-post__body .kws-ads { margin-left: 0; margin-right: 0; }
}

/* =========================================================
   v1.4 — px zamiast rem
   Adifier ustawia bazowy font-size na ~10px (62.5%), przez co
   wszystkie wymiary w rem kurczyły się o ~⅜. Przechodzimy na px,
   żeby layout nie zależał od bazy motywu.
   ========================================================= */
.kws-single,
.kws-post {
  --kws-measure: 700px;
  --kws-body: 18px;
}
.kws-single__inner { max-width: 880px; }

.kws-post__body { font-size: 18px; line-height: 1.72; }
.kws-post__body > p:first-of-type { font-size: 20px; line-height: 1.6; }
.kws-post__body h2 { font-size: 27px; }
.kws-post__body h3 { font-size: 21px; }
.kws-post__body blockquote { font-size: 21px; }
.kws-post__body figcaption { font-size: 13px; }

.kws-post__title { font-size: clamp(31px, 4.2vw, 46px); }
.kws-post__lead  { font-size: 21px; }
.kws-post__eyebrow { font-size: 12px; }
.kws-post__meta  { font-size: 14px; }

.kws-toc { font-size: 16px; }
.kws-toc__title { font-size: 12px; }
.kws-toc ol { font-size: 15px; }

.kws-note p { font-size: 16px; }
.kws-note__label { font-size: 11px; }

.kws-faq__heading { font-size: 22px; }
.kws-faq__item summary { font-size: 17px; }
.kws-faq__item summary::after { font-size: 22px; }
.kws-faq__answer { font-size: 16px; }

.kws-ads__title { font-size: 13px; }
.kws-ads__all   { font-size: 13px; }
.kws-ads__name  { font-size: 16px; }
.kws-ads__where { font-size: 13px; }
.kws-ads__price { font-size: 16px; }
.kws-ads__cta,
.kws-ads__empty { font-size: 14px; }

.kws-author__name { font-size: 16px; }
.kws-author__bio  { font-size: 15px; }

.kws-related__title { font-size: 13px; }
.kws-related__name  { font-size: 16px; }

/* tablica ogłoszeń wyłamana na pełną szerokość wrappera */
.kws-post__body .kws-ads {
  width: auto;
  max-width: none;
  margin-left: calc((700px - 880px) / 2);
  margin-right: calc((700px - 880px) / 2);
  transform: none;
}
@media (max-width: 940px) {
  .kws-post__body .kws-ads { margin-left: 0; margin-right: 0; }
}
@media (max-width: 640px) {
  .kws-post__body { font-size: 17px; }
}

/* =========================================================
   v1.5 — kolorystyka marki usmoka.pl
   Zieleń z logo (#8CC63F) ma na białym tle kontrast ~2:1 —
   za mało na tekst (WCAG AA wymaga 4.5:1). Dlatego:
   --kws-accent        → ciemniejsza zieleń, do tekstu i linków
   --kws-accent-bright → zieleń z logo, tylko dekoracyjnie
   ========================================================= */
.kws-single,
.kws-post {
  --kws-accent:        #4F8A16;   /* linki, eyebrow, kotwice — kontrast 4.8:1 */
  --kws-accent-bright: #8CC63F;   /* zieleń z logo — paski, kreski, ikony */
  --kws-accent-ink:    #ffffff;
}

/* Elementy dekoracyjne dostają jasną zieleń z logo */
.kws-toc { border-left-color: var(--kws-accent-bright); }
.kws-post__body blockquote { border-left-color: var(--kws-accent-bright); }
.kws-faq__item summary::after { color: var(--kws-accent-bright); }

/* Tekstowe zostają na ciemnej — czytelność */
.kws-post__eyebrow,
.kws-toc a:hover,
.kws-ads__all,
.kws-ads__cta a,
.kws-ads__empty a,
.kws-note__label { color: var(--kws-accent); }

.kws-post__body a { text-decoration-color: var(--kws-accent); }
.kws-post__body a:hover { color: var(--kws-accent); }