/* PNP Theme Dark Overrides — AUDYT CLEAN v1 (2026-01-15)
   Cel: tryb nocny ma być spójny i czytelny na całej stronie:
   - Topbar: "PISMA NOWEGO PRZYMIERZA" nie może być jasny
   - "Nasz przekład" (p#pnpNaszText) nie może być czarny (ani "złoty dopiero na hover")
   - "Podpowiedź..." (p.morph-help-text) ma być jednolita, bez czarnych fragmentów
   - Interlinia/tabele/stopka: spójny nocny, złote akcenty
*/

/* Aktywacja: projekt używa html[data-theme="dark"] i/lub body.pp-dark */
html[data-theme="dark"], body.pp-dark{ color-scheme: dark; }

/* =========================================================
   1) Globalne tło i typografia nocna
   ========================================================= */
html[data-theme="dark"] body,
body.pp-dark{
  background:#0b0b0c !important;
  color:rgba(255,255,255,.88) !important;
}

/* częste wrappery które lubią mieć jasne tło */
html[data-theme="dark"] :where(#content,#main,main,.main,.content,.container,.wrapper,.wrap,.page,.page-container,.site,.site-content),
body.pp-dark :where(#content,#main,main,.main,.content,.container,.wrapper,.wrap,.page,.page-container,.site,.site-content){
  background:#0b0b0c !important;
  color:rgba(255,255,255,.88) !important;
}

/* =========================================================
   2) TOPBAR: "PISMA NOWEGO PRZYMIERZA" (masz .global-top-line1)
   ========================================================= */
html[data-theme="dark"] :where(.global-top, .global-topbar, .global-top-wrap, .global-top-line, .global-top-line1, .global-top-line2),
body.pp-dark :where(.global-top, .global-topbar, .global-top-wrap, .global-top-line, .global-top-line1, .global-top-line2){
  background:#0b0b0c !important;
  border-bottom:1px solid rgba(215,194,138,.18) !important;
}

html[data-theme="dark"] :where(.global-top-line1,.global-top-line2),
body.pp-dark :where(.global-top-line1,.global-top-line2){
  color:rgba(215,194,138,.94) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.70) !important;
}

/* =========================================================
   3) Nawigacja (góra): .verse-nav + przyciski + środek
   ========================================================= */
html[data-theme="dark"] .verse-nav,
body.pp-dark .verse-nav{
  background:transparent !important;
}

/* Poprzedni/Następny */
html[data-theme="dark"] :where(.verse-nav a, .verse-nav button),
body.pp-dark :where(.verse-nav a, .verse-nav button){
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,255,255,.92) !important;
  border:1px solid rgba(215,194,138,.28) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] :where(.verse-nav a:hover, .verse-nav button:hover),
body.pp-dark :where(.verse-nav a:hover, .verse-nav button:hover){
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(215,194,138,.40) !important;
}

/* Środek — NAJWAŻNIEJSZE: nie może rozciągać się na całą szerokość (to robiło “ramkę”) */
html[data-theme="dark"] .verse-nav .nav-center,
body.pp-dark .verse-nav .nav-center{
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: calc(100% - 24px);
  margin: 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:rgba(215,194,138,.16) !important;
  border:1px solid rgba(215,194,138,.42) !important;
  border-radius:999px !important;

  color:rgba(215,194,138,.96) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.75), 0 0 18px rgba(215,194,138,.10) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.45) !important;
  padding: 8px 18px !important;
}

/* Jeśli w środku jest link/span – też wymuś kolor */
html[data-theme="dark"] .verse-nav .nav-center :where(a,span,div),
body.pp-dark .verse-nav .nav-center :where(a,span,div){
  color:rgba(215,194,138,.96) !important;
  background:transparent !important;
}

/* =========================================================
   4) "Nasz przekład" (p#pnpNaszText)
   ========================================================= */
html[data-theme="dark"] #pnpNaszText,
body.pp-dark #pnpNaszText{
  color:rgba(255,244,226,.94) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.92), 0 0 12px rgba(215,194,138,.10) !important;

  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
}

html[data-theme="dark"] #pnpNaszText:hover,
body.pp-dark #pnpNaszText:hover{
  color:rgba(255,244,226,.94) !important;
}

/* tytuł sekcji */
html[data-theme="dark"] #pnpNaszToggle,
body.pp-dark #pnpNaszToggle{
  color:rgba(215,194,138,.95) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.75) !important;
}

/* przycisk kopiowania (⧉) */
html[data-theme="dark"] .pnp-copy-btn,
body.pp-dark .pnp-copy-btn{
  color:rgba(255,255,255,.90) !important;
}
html[data-theme="dark"] .pnp-copy-btn:hover,
body.pp-dark .pnp-copy-btn:hover{
  color:rgba(215,194,138,.98) !important;
}

/* =========================================================
   5) "Podpowiedź..." — p.morph-help-text
   UWAGA: robimy * i strong, bo potrafią mieć własne kolory/!important
   ========================================================= */
html[data-theme="dark"] p.morph-help-text,
html[data-theme="dark"] p.morph-help-text * ,
body.pp-dark p.morph-help-text,
body.pp-dark p.morph-help-text *{
  color:rgba(235,235,235,.88) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.92) !important;

  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
  opacity: 1 !important;
}

/* strong w podpowiedzi – złoty akcent */
html[data-theme="dark"] p.morph-help-text strong,
body.pp-dark p.morph-help-text strong{
  color:rgba(215,194,138,.95) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.92) !important;
}

/* =========================================================
   6) Interlinia / tabela
   ========================================================= */
html[data-theme="dark"] .interlinear-wrapper,
body.pp-dark .interlinear-wrapper{
  background:#0f0f10 !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] table.interlinear-table,
body.pp-dark table.interlinear-table{
  background:transparent !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] table.interlinear-table th,
html[data-theme="dark"] table.interlinear-table td,
body.pp-dark table.interlinear-table th,
body.pp-dark table.interlinear-table td{
  background:rgba(255,255,255,.04) !important;
  color:#f2f2f2 !important;
  border-color:rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] table.interlinear-table tr:nth-child(even) td,
body.pp-dark table.interlinear-table tr:nth-child(even) td{
  background:rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] table.interlinear-table a,
body.pp-dark table.interlinear-table a{
  color:rgba(215,194,138,.98) !important;
}

/* =========================================================
   7) Stopka (#rbx-footnote)
   ========================================================= */
html[data-theme="dark"] #rbx-footnote,
body.pp-dark #rbx-footnote{
  background:#0b0b0c !important;
  color:rgba(255,255,255,.86) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] #rbx-footnote a,
body.pp-dark #rbx-footnote a{
  color:rgba(215,194,138,.98) !important;
}
/* =========================================================
   PNP_DARK_FIX_SCREEN_2026-01-15_BEGIN
   Fix A: usuń “drugą pigułkę/ramkę” pod nav-center
   Fix B: Podpowiedź (p.morph-help-text) nie może być czarna
   ========================================================= */

/* =======================
   Fix A — NAV CENTER
   ======================= */

/* Kontener nav-center ma być przezroczysty (to on robi “drugą pigułkę”) */
html[data-theme="dark"] .verse-nav .nav-center,
body.pp-dark .verse-nav .nav-center{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;

  /* ważne: nie rozciągaj na szerokość (to często robi “belkę/ramkę”) */
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: calc(100% - 24px);
  margin: 0 auto !important;
}

/* jeśli “ramka” jest pseudo-elementem */
html[data-theme="dark"] .verse-nav .nav-center::before,
html[data-theme="dark"] .verse-nav .nav-center::after,
body.pp-dark .verse-nav .nav-center::before,
body.pp-dark .verse-nav .nav-center::after{
  content: none !important;
  display: none !important;
}

/* Pigułka tylko na pierwszym sensownym elemencie w środku */
html[data-theme="dark"] .verse-nav .nav-center :where(a,button,span,div):first-child,
body.pp-dark .verse-nav .nav-center :where(a,button,span,div):first-child{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 18px !important;
  border-radius: 999px !important;

  background: rgba(215,194,138,.16) !important;
  border: 1px solid rgba(215,194,138,.42) !important;

  color: rgba(215,194,138,.96) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 18px rgba(215,194,138,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}

/* Pozostałe elementy w środku — bez tła (żeby nie tworzyły “drugiej warstwy”) */
html[data-theme="dark"] .verse-nav .nav-center :where(a,button,span,div):not(:first-child),
body.pp-dark .verse-nav .nav-center :where(a,button,span,div):not(:first-child){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =======================
   Fix B — PODPOWIEDŹ
   ======================= */

html[data-theme="dark"] p.morph-help-text,
html[data-theme="dark"] p.morph-help-text * ,
body.pp-dark p.morph-help-text,
body.pp-dark p.morph-help-text *{
  color: rgba(235,235,235,.88) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.92) !important;

  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

/* strong ma być złoty (czytelny) */
html[data-theme="dark"] p.morph-help-text strong,
body.pp-dark p.morph-help-text strong{
  color: rgba(215,194,138,.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.92) !important;
}

/* PNP_DARK_FIX_SCREEN_2026-01-15_END */

/* =========================================================
   PNP_DARK_FIX_MORPH_HELP_TEXT_FINAL_2026-01-15_BEGIN
   Cel: "Podpowiedź..." (p.morph-help-text) ma być czytelna w nocnym,
   mimo że istnieje późniejsza reguła .morph-help-text w <style> strony.
   ========================================================= */

html[data-theme="dark"] body .page-container .verse-block p.morph-help-text,
html[data-theme="dark"] body .interlinear-wrapper p.morph-help-text,
html[data-theme="dark"] body p.morph-help-text,
body.pp-dark .page-container .verse-block p.morph-help-text,
body.pp-dark .interlinear-wrapper p.morph-help-text,
body.pp-dark p.morph-help-text{
  color: rgba(235,235,235,.90) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.92) !important;
  opacity: 1 !important;

  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

/* zabij czarne fragmenty na dzieciach (jeśli np. strong/span ma własny kolor) */
html[data-theme="dark"] body .page-container .verse-block p.morph-help-text *,
html[data-theme="dark"] body .interlinear-wrapper p.morph-help-text *,
html[data-theme="dark"] body p.morph-help-text *,
body.pp-dark .page-container .verse-block p.morph-help-text *,
body.pp-dark .interlinear-wrapper p.morph-help-text *,
body.pp-dark p.morph-help-text *{
  color: inherit !important;
  text-shadow: inherit !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* strong ma być złoty (i tylko strong) */
html[data-theme="dark"] body .page-container .verse-block p.morph-help-text strong,
html[data-theme="dark"] body .interlinear-wrapper p.morph-help-text strong,
html[data-theme="dark"] body p.morph-help-text strong,
body.pp-dark .page-container .verse-block p.morph-help-text strong,
body.pp-dark .interlinear-wrapper p.morph-help-text strong,
body.pp-dark p.morph-help-text strong{
  color: rgba(215,194,138,.96) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.92) !important;
}

/* =========================================================
   PNP_DARK_FIX_MORPH_HELP_TEXT_FINAL_2026-01-15_END
   ========================================================= */