/* NWM – blog Fundacji „Nie wykluczaj mnie” na motywie Simple (Publii).
 * Wspólny mianownik wersji A/B/C strony głównej: logo i jego kolory, ciepłe jasne tło, czytelny tekst.
 * Kolory logo: niebieski #2C3FAF – linki/akcenty (8,0:1 na tle), pomarańcz #ED8313 – WYŁĄCZNIE wypełnienie
 * z ciemnym tekstem #1D2142 (5,8:1; biały na nim ma tylko 2,7:1). Kontrasty sprawdzone dla WCAG 2.1 AA. */
:root {
  --nwm-tlo: #FBF6EE;          /* kość słoniowa – ciepłe jasne tło */
  --nwm-karta: #FFFFFF;
  --nwm-piasek: #F3E8D8;
  --nwm-tekst: #1D2142;        /* atrament (granat logo przygaszony) – 14,5:1 na tle */
  --nwm-tekst-2: #4A4F68;      /* tekst pomocniczy – 7,5:1 na tle */
  --nwm-link: #2C3FAF;         /* niebieski logo */
  --nwm-link-hover: #1E2C85;
  --nwm-pom: #ED8313;          /* pomarańcz logo – tło przycisków */
  --nwm-pom-hover: #F59A3A;
  --nwm-pom-tekst: #8A3D00;    /* pomarańcz do tekstu (7,1:1 na tle) */
  --nwm-linia: #E6D9C6;
  --nwm-stopka: #1D2142;
  --nwm-cien: 0 1px 2px rgba(120, 72, 20, .06), 0 14px 34px -18px rgba(120, 72, 20, .22);
  --nwm-r: 18px;

  /* zmienne motywu Simple */
  --page-bg: var(--nwm-tlo);
  --text-color: var(--nwm-tekst);
  --headings-color: var(--nwm-tekst);
  --link-color: var(--nwm-link);
  --link-color-hover: var(--nwm-link-hover);
  --nav-link-color: var(--nwm-tekst);
  --nav-link-color-hover: var(--nwm-link);
  --logo-color: var(--nwm-tekst);
  --color: var(--nwm-link);
  --dark: var(--nwm-tekst);
  --gray: var(--nwm-tekst-2);
  --light: var(--nwm-linia);
  --lighter: var(--nwm-piasek);
  --helper: #FFFFFF;
  --navbar-height: 4.6rem;
}

html { scroll-padding-top: 6rem; }
body { background: var(--nwm-tlo); color: var(--nwm-tekst); }

/* fokus klawiatury – motyw go wyłącza (a:focus{outline:none}); przywracamy wyraźny pierścień (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--nwm-link);
  outline-offset: 3px;
  border-radius: 4px;
}
.nwm-stopka a:focus-visible, .nwm-stopka button:focus-visible { outline-color: #FFFFFF; }

/* linki w treści: podkreślone (nie tylko kolor – WCAG 1.4.1) */
.content__entry a, .page__desc a, .bio__desc a {
  color: var(--nwm-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.content__entry a:hover { color: var(--nwm-link-hover); text-decoration-thickness: 2px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { color: var(--nwm-tekst); letter-spacing: -.01em; }

/* ---------- pasek powrotu na stronę Fundacji ---------- */
.nwm-pasek { background: var(--nwm-tekst); color: #E9EAF4; font-size: .82rem; }
.nwm-pasek__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: calc(var(--page-width) + 2 * var(--page-margin)); margin: 0 auto; padding: .45rem var(--page-margin);
}
.nwm-pasek__powrot { color: #FFFFFF; font-weight: 700; text-decoration: none; }
.nwm-pasek__powrot:hover { color: #FFD7AE; text-decoration: underline; }
.nwm-pasek__powrot:focus-visible { outline-color: #FFFFFF; }
.nwm-pasek__opis { color: #C9CCE0; }
@media (max-width: 37.5em) { .nwm-pasek__opis { display: none; } }

/* ---------- nagłówek ---------- */
.top.nwm-top {
  background: rgba(251, 246, 238, .96);
  border-bottom: 1px solid var(--nwm-linia);
  gap: 1rem;
  max-width: none;
  padding: 0 max(var(--page-margin), calc((100% - var(--page-width)) / 2));
}
.top.nwm-top.sticky { background: rgba(251, 246, 238, .97); box-shadow: 0 6px 18px -12px rgba(29, 33, 66, .35); }
.nwm-logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.nwm-logo > img { height: 46px; width: auto; padding: 0; }
.nwm-logo__blog {
  border-left: 2px solid var(--nwm-pom); padding-left: .7rem; font-weight: 800; font-size: 1.05rem;
  color: var(--nwm-tekst); letter-spacing: .02em;
}
.nwm-top .navbar { order: 2; }
.nwm-top .navbar__menu > li > a,
.nwm-top .navbar__menu > li > span { color: var(--nwm-tekst); font-weight: 600; }
.nwm-top .navbar__menu > li > a:hover { color: var(--nwm-link); }
.nwm-top .navbar__menu > li.active > a { color: var(--nwm-link); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.nwm-top .navbar__toggle { order: 3; }
.nwm-wesprzyj { order: 4; }

/* przycisk w kolorze logo: pomarańcz z CIEMNYM tekstem (5,8:1) */
.nwm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nwm-pom); color: var(--nwm-tekst) !important; border: 2px solid var(--nwm-pom);
  border-radius: 999px; font-weight: 800; font-size: .92rem; line-height: 1.2; padding: .6rem 1.2rem;
  text-decoration: none !important; white-space: nowrap; transition: background .2s, transform .2s;
}
.nwm-btn:hover { background: var(--nwm-pom-hover); border-color: var(--nwm-pom-hover); transform: translateY(-1px); }
@media (max-width: 56.1875em) {
  .nwm-wesprzyj { margin-left: auto; padding: .5rem 1rem; }
  .nwm-top .navbar { order: 5; margin-left: .4rem; }
  .nwm-logo > img { height: 40px; }
}
@media (max-width: 24em) {
  .nwm-logo__blog { display: none; }
}

/* ---------- hero listy wpisów / nagłówki stron ---------- */
.hero__content { padding-top: calc(var(--baseline) * 10 + 1.5vw); }
.hero__content h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.1; }
.hero__content h1::after {
  content: ""; display: block; width: 3.2rem; height: 6px; border-radius: 3px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--nwm-pom) 0 50%, var(--nwm-link) 50% 100%);
}
.post .hero__content h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); }
.page__desc, .hero__content p { color: var(--nwm-tekst-2); font-size: 1.08rem; max-width: 46rem; }
.hero--noimage::after { background: var(--nwm-linia); }

/* ---------- lista wpisów (karty) ---------- */
.feed__item {
  background: var(--nwm-karta); border-radius: var(--nwm-r); box-shadow: var(--nwm-cien);
  padding: clamp(1rem, .6rem + 1.4vw, 1.7rem); gap: clamp(1rem, .5rem + 2vw, 2rem);
  margin-top: calc(var(--baseline) * 7 + 1vw); align-items: flex-start;
}
.feed__image { border-radius: calc(var(--nwm-r) - 6px); overflow: hidden; aspect-ratio: 4 / 3; }
@media all and (min-width: 37.5em) {
  .feed__image { width: clamp(11rem, 8rem + 9vw, 17rem); height: auto; }
}
.feed__image > img { aspect-ratio: 4 / 3; height: 100%; }
.feed__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; margin-bottom: .5rem; }
.feed__title a { color: var(--nwm-tekst); }
.feed__title a:hover { color: var(--nwm-link); text-decoration: underline; text-underline-offset: .15em; }
.feed__meta { margin-bottom: .5rem; font-size: .88rem; }
.feed__date { font-style: normal; color: var(--nwm-pom-tekst); font-weight: 700; letter-spacing: .02em; }
.feed__content p { color: var(--nwm-tekst-2); margin-bottom: 0; }
.readmore, .feed__readmore {
  color: var(--nwm-link); font-style: normal; font-weight: 700; font-size: .95rem;
  text-decoration: underline; text-underline-offset: .2em;
}
.readmore:hover { color: var(--nwm-link-hover); }

/* lista kategorii (/blog/category/) */
.feed--grid { list-style: none; margin: calc(var(--baseline) * 8) 0 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.feed--grid .feed__item, .feed--grid li { margin: 0; padding: 1.2rem 1.4rem; }
.feed--grid h2 { margin: 0 0 .3rem; font-size: 1.2rem; }

/* paginacja */
.pagination .btn {
  border: 2px solid var(--nwm-link); color: var(--nwm-link); background: var(--nwm-karta);
  font-size: .95rem; padding: .65rem 1.2rem; font-weight: 700;
}
.pagination .btn:hover, .pagination .btn:focus-visible { background: var(--nwm-link); color: #FFFFFF; }

/* ---------- wpis ---------- */
.post .hero__image { max-width: var(--page-width); margin-left: auto; margin-right: auto; padding: 0 var(--page-margin); }
@media all and (min-width: 56.25em) {
  .post .hero__image-wrapper, .post .hero__image-wrapper img { height: min(var(--hero-height), 34rem); }
}
.post .hero__image-wrapper { background: var(--nwm-piasek); }
.post .hero__image-wrapper img { object-fit: contain; }
.content__meta .feed__date { font-size: .95rem; }
.content__entry { font-size: 1.06rem; }
.content__entry > p, .content__entry li { max-width: 44rem; }
.content__entry strong { font-weight: 700; }
.post__image img, .content__entry img { border-radius: 12px; }
.post__image { margin-top: 2rem; margin-bottom: 2rem; }
.post__image figcaption, .post__video figcaption, .post__audio figcaption { color: var(--nwm-tekst-2); font-size: .9rem; }

/* pliki do pobrania */
.nwm-plik {
  background: var(--nwm-karta); border: 1px solid var(--nwm-linia); border-left: 5px solid var(--nwm-pom);
  border-radius: 10px; padding: .8rem 1rem; color: var(--nwm-tekst-2);
}
.nwm-plik a { font-weight: 700; }
.post__audio audio { width: 100%; max-width: 32rem; }

/* fasada YouTube (nwm.js podmienia na odtwarzacz youtube-nocookie po kliknięciu) */
.nwm-yt { margin: 2rem 0; }
.nwm-yt__link { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #000;
  aspect-ratio: 16 / 9; text-decoration: none !important; }
.nwm-yt__link img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .9; transition: opacity .2s; }
.nwm-yt__link:hover img { opacity: 1; }
.nwm-yt__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--nwm-pom); color: var(--nwm-tekst); font-weight: 800; border-radius: 999px;
  padding: .8rem 1.4rem .8rem 3rem; font-size: 1rem; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.nwm-yt__play::before {
  content: ""; position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: .5rem 0 .5rem .85rem; border-color: transparent transparent transparent var(--nwm-tekst);
}
.nwm-yt__link:hover .nwm-yt__play { background: var(--nwm-pom-hover); }
.nwm-yt__player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }

/* galeria (bez wtyczki lightbox – kliknięcie otwiera pełne zdjęcie) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin: 2rem 0; }
.gallery__item { margin: 0; padding: 0; width: auto !important; }
.gallery__item a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* tagi (kategorie) pod wpisem */
.content__tag > li > a {
  background: var(--nwm-karta); border: 1px solid var(--nwm-linia); color: var(--nwm-link);
  border-radius: 999px; padding: .3rem .9rem; font-weight: 600;
}
.content__tag > li > a:hover { background: var(--nwm-link); border-color: var(--nwm-link); color: #FFFFFF; }

/* nawigacja poprzedni/następny i powiązane */
.content__nav-link { color: var(--nwm-tekst); }
.content__nav-link span { color: var(--nwm-pom-tekst); font-weight: 700; }
.content__nav-link:hover { color: var(--nwm-link); }
.related__title { font-size: 1.3rem; }

/* ---------- stopka ---------- */
.footer.nwm-stopka {
  background: var(--nwm-stopka); color: #E3E5F2; max-width: none; border: 0; text-align: left;
  margin-top: calc(var(--baseline) * 16 + 2vw); padding: 2.6rem 0 2rem;
}
.nwm-stopka__in {
  display: grid; gap: 1.6rem 2.4rem; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
}
.nwm-stopka__marka p { margin: .9rem 0 0; color: #C9CCE0; font-size: .92rem; max-width: 26rem; }
.nwm-stopka__logo img { height: 40px; width: auto; }
.nwm-stopka a { color: #FFFFFF; }
.nwm-stopka a:hover { color: #FFD7AE; }
.nwm-stopka__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .5rem 1.6rem; }
.nwm-stopka__nav ul li { padding: 0; }
.nwm-stopka__nav a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .25em; }
.nwm-stopka__social { margin: 0 !important; display: flex; gap: .4rem; }
.nwm-stopka__social a { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .08); }
.nwm-stopka__social a:hover { background: var(--nwm-pom); }
.nwm-stopka__social svg { fill: #FFFFFF; margin: 0; width: 1.15rem; height: 1.15rem; }
.nwm-stopka__social a:hover svg { fill: var(--nwm-tekst); }
.nwm-stopka__prawa { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.2rem;
  color: #C9CCE0; font-size: .85rem; margin: 0; }
@media (max-width: 47.9375em) {
  .nwm-stopka__in { grid-template-columns: 1fr; }
}
.footer__bttop { background: var(--nwm-karta); border-color: var(--nwm-linia); color: var(--nwm-tekst); }
.footer__bttop:hover { background: var(--nwm-pom); color: var(--nwm-tekst); }

/* mobilne menu (sidebar motywu) */
.navbar_mobile_sidebar { background: var(--nwm-tlo) !important; }
.navbar_mobile_sidebar a { color: var(--nwm-tekst) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- dopiski do listy wpisów ---------- */
.hero__content { padding-top: calc(var(--baseline) * 6 + 1vw); }
/* wpis bez obrazka wyróżniającego – kafel z kropkami logo (dekoracja, aria-hidden) */
.nwm-bez-obrazu { background: var(--nwm-piasek) url(../img/kropki.svg) center / 34% no-repeat; }
@media all and (max-width: 37.4375em) { .nwm-bez-obrazu { display: none; } }
/* kategoria główna obok daty */
.feed__meta { flex-wrap: wrap; gap: .4rem .8rem; }
.nwm-kat {
  background: #E4E7FF; color: var(--nwm-link-hover); border-radius: 999px; padding: .1rem .7rem;
  font-weight: 700; font-size: .82rem; text-decoration: none;
}
.nwm-kat:hover { background: var(--nwm-link); color: #FFFFFF; }

/* ---------- poprawki po zrzutach ---------- */
/* przycisk menu mobilnego: granat logo zamiast czerni */
.nwm-top .navbar .navbar__toggle { background: var(--nwm-tekst); }
.nwm-top .navbar .navbar__toggle:focus-visible { outline: 3px solid var(--nwm-link); outline-offset: 3px; }
@media (max-width: 30em) { .nwm-logo__blog { display: none; } .nwm-logo > img { height: 38px; } }
/* poprzedni/następny – miniatury */
.content__nav-image { border-radius: 12px; overflow: hidden; }
.content__nav-image img { border-radius: 12px; object-fit: cover; width: 100%; height: 100%; }
.content__nav-link > div { font-style: normal; font-weight: 700; }
@media (max-width: 56.1875em) { .nwm-logo { margin-right: 0; } }
.gallery { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
@media (max-width: 56.1875em) { .nwm-top .navbar { flex: 0 0 auto; width: auto; } }

/* link „Przejdź do treści” (WCAG 2.4.1) – niewidoczny, pokazuje się przy fokusie z klawiatury */
.nwm-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .7rem 1.1rem; background: var(--nwm-tekst);
  color: #FFFFFF; font-weight: 700; border-radius: 0 0 var(--nwm-r) 0; text-decoration: none; }
.nwm-skip:focus, .nwm-skip:focus-visible { left: 0; outline: 3px solid var(--nwm-pom); outline-offset: 0; color: #FFFFFF; }
#tresc:focus { outline: none; }
