/* ================================================
   PNP – STYLE STRONY WERSETU (CLEAN)
   - Mobile: większe logo, większe popupy, większe treści komentarzy,
     mniejsza treść "Nasz przekład", większe etykiety wyszukiwarki,
     tabela przewijana w bok
   - Desktop: większe logo, większe etykiety wyszukiwarki,
     większa treść komentarzy, tabela na pełną szerokość
   - FIX: powiązane wersety – złoty pasek nie wchodzi na tekst
   - FIX: morfologia popup nie może być ucinana
   - FIX: logo NIE sticky (nie „scrolluje w dół”)
   ================================================= */

/* --- Bazowe bezpieczeństwo układu --- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

.page-container { margin-top: 2px; }
.breadcrumb { margin-top: 2px; margin-bottom: 2px; }
.verse-header { margin-top: 0; margin-bottom: 0; }

/* ====================================
   NAWIGACJA WERSETÓW (DESKTOP)
   ==================================== */
.verse-nav{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 2px 0;
  gap:10px;
}
.verse-nav .nav-left,.verse-nav .nav-center,.verse-nav .nav-right{ flex:1; }
.verse-nav .nav-left{ text-align:left; }
.verse-nav .nav-center{ text-align:center; font-weight:600; font-size:1.15rem; }
.verse-nav .nav-right{ text-align:right; }
.verse-nav .verse-label{ white-space:nowrap; }

.verse-nav .nav-center span{
  display:inline-block;
  padding:10px 32px;
  border-radius:999px;
  background:linear-gradient(to bottom,#ffe9a4,#f1c65a);
  border:1px solid #c9952c;
  font-size:1.1em;
  font-weight:bold;
  color:#5b3a07;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  text-shadow:0 1px 0 rgba(255,255,255,0.7);
  cursor:pointer;
  position:relative;
  top:-40px;
  margin-bottom:-40px;
}
.verse-nav .nav-center span:hover{
  box-shadow:0 3px 6px rgba(0,0,0,0.35);
  transform:translateY(-1px);
}

/* NA MOBILE CHOWAMY CAŁE verse-nav */
@media (max-width:800px){
  .verse-nav{ display:none !important; }
}

/* ====================================
   BLOKI WERSETÓW I SEKCJI
   ==================================== */
.verse-block{
  padding-top:6px !important;
  padding-bottom:8px !important;
  box-sizing:border-box;
  max-width:100%;
  font-size:1.05em !important;
  line-height:1.7 !important;
}

.verse-block h2{
  margin-top:4px !important;
  margin-bottom:6px !important;
}

.verse-block p:first-of-type{ margin-top:4px !important; }

/* Styl pierwszej ramki – Nasz przekład */
.verse-block:first-of-type{
  border-width:2px !important;
  border-style:solid !important;
  border-color:#cfa03a !important;
  border-left-width:6px !important;
  border-left-color:#c5571f !important;
  background:linear-gradient(to bottom,#fff8dc,#ffe6b8);
  box-shadow:0 3px 6px rgba(0,0,0,0.18);
}

/* Nagłówek Nasz przekład */
.verse-block:first-of-type h2{
  font-family:"Georgia","Times New Roman",serif !important;
  font-size:1.7em !important;
  font-weight:700 !important;
  letter-spacing:0.04em;
  color:#5b1a0f;
  text-shadow:0 1px 0 #f7e4c0, 0 2px 2px rgba(0,0,0,0.25);
}

/* Cytat (Nasz przekład) – DESKTOP ok, MOBILE zmniejszymy niżej */
.verse-block:first-of-type p:first-of-type{
  font-family:"Georgia","Times New Roman",serif;
  font-size:1.25em;
  line-height:1.9;
  font-weight:700;
  color:#2b1a06;
  text-shadow:0 1px 0 #fff0d0;
}

/* Dropcap */
.pp-dropcap{
  font-family:"IM Fell English SC","Cormorant Garamond","Georgia","Times New Roman",serif;
  font-size:1.6em;
  font-weight:400;
  letter-spacing:0.06em;
  color:#d4a951;
  text-shadow:0 0 1px #5b1a0f, 0 1px 0 #fff6d5, 0 2px 2px rgba(0,0,0,0.25);
}

/* ================================================
   WYSZUKIWARKA + BELKA MOBILNA
   ================================================ */
.verse-search-panel{
  margin:2px auto 14px auto;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(to bottom,#fff7df,#f3d295);
  border:1px solid #d4a951;
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
  text-align:center;
  max-width:720px;
}

.verse-search-heading{
  font-family:"Cormorant Garamond","Georgia","Times New Roman",serif;
  font-size:1.15em; /* nagłówek mniejszy na desktop (wg Twojej uwagi o 2 napisach) */
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#5b3510;
  text-shadow:0 1px 0 #fff6dd;
  margin-bottom:14px;
}

.vsp-row{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.vsp-field label{
  display:block;
  margin-bottom:3px;
  font-weight:900;
  color:#5b3a07;
  font-size:1.25em; /* etykiety większe (Księga/Rozdział/Werset) */
}

.vsp-field select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #c8aa6a;
  background:#fffdf7;
  font-size:1.10em;
}

/* ====================================
   TOP BANNERY / LOGO – bez sticky (żadnego „scrollowania w dół”)
   ==================================== */
.global-top-banner,
#rbx-top-brand{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

/* Górny globalny baner */
.global-top-banner{
  background:linear-gradient(to bottom,#fff9df,#f3d18f);
  border-bottom:2px solid rgba(182,140,34,.6);
  padding:8px 10px 6px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.global-top-line1{
  font-weight:900;
  font-size:22px;            /* większe logo – desktop */
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#7b1b0b;
  line-height:1.12;
}
.global-top-line2{
  font-weight:700;
  font-size:16px;            /* większe logo – desktop */
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#8b5a0a;
  line-height:1.12;
}

/* Brand „Biblia” */
#rbx-top-brand{
  background:rgba(255,246,214,.96);
  border-bottom:2px solid rgba(182,140,34,.55);
  padding:10px 12px 10px;
  text-align:center;
}
#rbx-top-brand .rbx-line1{
  font-weight:900;
  font-size:44px;            /* większe logo – desktop */
  letter-spacing:.5px;
  color:#8b0c0c;
  text-shadow:0 1px 0 #f2d36b, 0 2px 10px rgba(0,0,0,.12);
  line-height:1.05;
}
#rbx-top-brand .rbx-line2{
  margin-top:4px;
  font-weight:800;
  font-size:18px;
  color:#b8860b;
  text-shadow:0 1px 10px rgba(0,0,0,.08);
  line-height:1.1;
}

/* ====================================
   STOPKA
   ==================================== */
#rbx-footnote{
  margin-top:18px;
  padding:18px 12px;
  text-align:center;
  background:rgba(255,246,214,.92);
  border-top:2px solid rgba(182,140,34,.45);
  color:#4a2f06;
}
#rbx-footnote .f1{ font-weight:900; font-size:16px; margin-bottom:6px; }
#rbx-footnote .f2{ font-weight:800; font-size:14px; margin-bottom:6px; color:#6a4208; }
#rbx-footnote .f3{ font-weight:800; font-size:14px; color:#6a4208; }

/* ukrycie domyślnych H1 */
h1,#content h1,#main h1,.page-title,.verse-title{ display:none; }

/* ====================================
   POPUP LEKSYMÓW (Strong/Lema) – większa czcionka + mobile dół
   ==================================== */
#lexeme-popup{
  position:absolute;
  z-index:2000;
  min-width:260px;
  max-width:420px;
  background:#fffdf5;
  border-radius:12px;
  border:1px solid #d4a951;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  padding:12px 14px;
  font-family:"Cormorant Garamond","Georgia","Times New Roman",serif;
  font-size:1.12em;          /* większa czcionka (już na desktop też) */
  color:#2b1a06;
  display:none;
  box-sizing:border-box;
}
#lexeme-popup-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
#lexeme-popup-lemma{ font-weight:800; font-size:1.35em; }
#lexeme-popup-meta{ font-size:1.05em; color:#6a4208; }
#lexeme-popup-close{
  cursor:pointer;
  font-size:1.1em;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:#6a1b0b;
}
#lexeme-popup-close:hover{ background:rgba(0,0,0,0.05); }
#lexeme-popup-body{ margin-top:6px; }
#lexeme-popup-body p{ margin:6px 0; }
#lexeme-popup-body ul{ margin:6px 0 0 18px; padding:0; }
#lexeme-popup-body li{ margin-bottom:8px; }

/* ====================================
   POPUP MORFOLOGII – nie może być ucinany
   ==================================== */
html, body,
.page-container,
#content,
#main,
.verse-block{
  overflow:visible !important;
}

.morph-popup,
.morph-box,
.morph-details,
[class*="morph"][class*="popup"],
[class*="morph"][class*="box"],
[class*="morph"][class*="detail"]{
  position:fixed !important;
  right:10px !important;
  top:90px !important;
  left:auto !important;
  max-width:520px;
  max-height:calc(100vh - 140px);
  overflow:auto;
  z-index:999999 !important;
}

/* ====================================
   POWIĄZANE WERSETY – złoty pasek nie wchodzi na tekst
   (działa nawet jeśli treść jest długa)
   ==================================== */
.related-verse,
.verse-related,
.related-item{
  position:relative;
  margin:10px 0;
  padding:14px 14px 14px 40px; /* dużo miejsca na pasek */
  border-radius:10px;
  background:#fff9ec;
  border:1px solid #e5c58b;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.related-verse::before,
.verse-related::before,
.related-item::before{
  content:"";
  position:absolute;
  left:16px;
  top:14px;
  bottom:14px;
  width:6px;
  border-radius:6px;
  background:linear-gradient(to bottom,#f7d77a,#d4a951);
  box-shadow:0 1px 2px rgba(0,0,0,0.12);
}

/* ====================================
   TABELA INTERLINII – większa treść + pełna szerokość na desktop
   ==================================== */
.verse-block table,
.verse-block th,
.verse-block td{
  font-size:1.08em;
  line-height:1.5;
}

/* Desktop: tabela rozciągnięta na całą szerokość */
@media (min-width:801px){
  .verse-block{ max-width:none !important; width:100% !important; }
  .verse-block table{ width:100% !important; table-layout:auto !important; }
}

/* ====================================
   MOBILE
   ==================================== */
@media (max-width:800px){

  /* lekkie paddingi, żeby nic nie „uciekało w lewo” */
  body{
    margin:0;
    padding:0 8px;
    box-sizing:border-box;
  }
  .page-container{ width:100%; margin:0 auto; box-sizing:border-box; }
  .breadcrumb{ padding:0 4px; box-sizing:border-box; }

  /* logo większe (mobile) */
  .global-top-line1{ font-size:20px !important; }
  .global-top-line2{ font-size:15px !important; }
  #rbx-top-brand .rbx-line1{ font-size:34px !important; }

  /* 1) Nasz przekład – treść wersetu MA BYĆ MNIEJSZA na mobile */
  .verse-block:first-of-type p:first-of-type{
    font-size:1.02em !important;
    line-height:1.75 !important;
  }

  /* 2) Treść komentarzy/powiązanych – większa (nie tytuły) */
  .verse-block:not(:first-of-type) p,
  .verse-block:not(:first-of-type) li{
    font-size:1.18em !important;
    line-height:1.75 !important;
  }

  /* 3) Popup (Strong/Lema) – jeszcze większy na mobile */
  #lexeme-popup{
    position:fixed;
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:70px !important;
    width:auto !important;
    max-width:none !important;
    font-size:1.22em !important;
    line-height:1.45 !important;
  }

  /* 4) Wyszukiwarka – wyśrodkowana + większe etykiety */
  .verse-search-panel{
    position:fixed;
    top:12%;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 16px);
    max-width:520px;
    padding:14px 10px 16px 10px;
    box-sizing:border-box;
    border-radius:0;
    z-index:999;
    display:none;
  }
  .verse-search-panel.mobile-open{ display:block !important; }

  .verse-search-heading{ font-size:1.30em !important; }

  .vsp-row{ display:block; margin-bottom:12px; }
  .vsp-field label{
    font-size:1.30em !important;   /* Księga/Rozdział/Werset większe */
    font-weight:900 !important;
  }
  .verse-search-panel select{
    width:100%;
    padding:16px 16px;
    border-radius:12px;
    font-size:1.35em;
  }

  /* 5) Belka dolna – przyciski trochę mniejsze, środek większy */
  .mobile-bottom-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:998;
    padding:6px 6px;
    background:rgba(255,247,226,0.96);
    border-top:1px solid #d4a951;
    display:flex;
    align-items:center;
    gap:6px;
    box-sizing:border-box;
  }
  .mobile-bottom-bar .mb-btn{
    min-width:34px;
    min-height:34px;
    padding:2px 8px;
    background:linear-gradient(to bottom,#ffe9a4,#f1c65a);
    border-radius:999px;
    border:1px solid #c9952c;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
    font-size:16px;
    line-height:1;
  }
  .mobile-bottom-bar .mb-current{
    padding:7px 12px;
    font-size:17px;            /* “Mateusz 1:1” większe */
    font-weight:900;
  }

  /* 6) Tabela na mobile – MUSI dać się przesuwać w bok */
  .verse-block table{
    display:block !important;
    width:max-content !important;
    max-width:none !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-collapse:separate;
  }
  .verse-block th,
  .verse-block td{
    white-space:nowrap !important;
    font-size:1.18em !important;   /* większa treść w tabeli */
    line-height:1.35 !important;
  }

  /* 7) Morfologia popup na mobile na dół (żeby nie uciekała poza ekran) */
  .morph-popup,
  .morph-box,
  .morph-details,
  [class*="morph"][class*="popup"],
  [class*="morph"][class*="box"],
  [class*="morph"][class*="detail"]{
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:80px !important;
    max-width:none;
    max-height:60vh;
  }
}

/* Desktop: jeśli gdzieś był max-width w środku */
@media (min-width:1100px){
  .page-container{ max-width:none !important; }
}

/* Desktop: większa treść komentarzy (pewniak – zwykłe <p> wewnątrz bloków) */
@media (min-width:801px){
  .verse-block:not(:first-of-type) p,
  .verse-block:not(:first-of-type) li{
    font-size:1.18em !important;
    line-height:1.8 !important;
  }
}

/* =========================================================
   HOTFIX: MOBILE - koniec przesuwania strony na boki
   + stopka nie ucinana przez dolną belkę
   ========================================================= */

/* Cała strona NIE może mieć poziomego scrolla */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Częsty winowajca: elementy z 100vw/absolute */
.global-top-banner,
#rbx-top-brand,
.page-container,
.verse-search-panel,
.mobile-bottom-bar,
#rbx-footnote {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 800px) {

  /* Daj miejsce na dolną belkę, żeby stopka nie była “połową” */
  body {
    padding-bottom: 90px !important; /* dopasowane do wysokości belki */
  }

  #rbx-footnote {
    margin-bottom: 20px !important;
  }

  /* TABELA: niech się przewija w swoim kontenerze, nie cała strona */
  .table-responsive,
  .interlinear-table,
  .interlinear-wrap,
  .verse-block .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Jeśli nie masz wrappera, to wymuszamy “scrollowalną tabelę” */
  .verse-block table {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   DESKTOP: tabela interlinii na całą szerokość ekranu
   ========================================================= */

@media (min-width: 801px) {

  /* Zdejmij ograniczenia szerokości, jeśli gdzieś są */
  .page-container {
    max-width: none !important;
    width: 100% !important;
  }

  .verse-block {
    max-width: none !important;
    width: 100% !important;
  }

  /* Interlinia / tabela: pełna szerokość */
  .verse-block table,
  table.interlinear,
  .interlinear-table table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* Gdyby nagle wyszła za szeroka - niech ma swój scroll (bez psucia strony) */
  .table-responsive,
  .interlinear-table,
  .interlinear-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* =========================================================
   DESKTOP: wyszukiwarka - większy "Werset" (napis + pole)
   ========================================================= */

@media (min-width: 801px) {

  /* Napis "Werset" */
  .vsp-verse-label {
    font-size: 1.45em !important;
    font-weight: 900 !important;
  }

  /* Select z numerem wersetu */
  #vsVerse {
    font-size: 1.20em !important;
    padding: 10px 12px !important;
  }
}

/* ================================
   MORFOLOGIA – STABILNY POPUP
   (mobile wyśrodkowany, desktop nieucinany)
   ================================ */

/* bardzo szerokie selektory (bo nie wiemy jak dokładnie masz nazwane elementy) */
:where(
  .morph-popup, .morph-box, .morph-details,
  [id*="morph"][id*="popup"], [id*="morph-popup"], #morph-popup,
  [class*="morph"][class*="popup"], [class*="morph"][class*="box"], [class*="morph"][class*="detail"]
){
  position: fixed !important;
  z-index: 2147483000 !important;     /* ponad wszystko */
  overflow: auto !important;
  box-sizing: border-box !important;
  max-width: 520px;
  background: #fffdf5;
}

/* DESKTOP: prawa strona, wysoko, żeby nie wchodziło pod górny baner */
@media (min-width: 801px){
  :where(
    .morph-popup, .morph-box, .morph-details,
    [id*="morph"][id*="popup"], [id*="morph-popup"], #morph-popup,
    [class*="morph"][class*="popup"], [class*="morph"][class*="box"], [class*="morph"][class*="detail"]
  ){
    top: 140px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-height: calc(100vh - 180px) !important;
  }
}

/* MOBILE: zawsze pośrodku, nad belką */
@media (max-width: 800px){
  :where(
    .morph-popup, .morph-box, .morph-details,
    [id*="morph"][id*="popup"], [id*="morph-popup"], #morph-popup,
    [class*="morph"][class*="popup"], [class*="morph"][class*="box"], [class*="morph"][class*="detail"]
  ){
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 92px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 16px) !important;
    max-width: 560px !important;
    max-height: 55vh !important;
  }
}

/* ========= MORFOLOGIA: PANEL (zamiast popup) ========= */

#morph-panel{
  position: fixed;
  z-index: 2147483000;
  background: #fffdf5;
  border: 1px solid #d4a951;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: none;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Cormorant Garamond","Georgia","Times New Roman",serif;
}

#morph-panel[aria-hidden="false"]{ display:block; }

#morph-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background: linear-gradient(to bottom, #fff9df, #f3d18f);
  border-bottom: 1px solid rgba(182,140,34,.45);
}

#morph-panel-title{ font-weight: 900; font-size: 18px; color:#5b1a0f; }
#morph-panel-close{
  border:0; background:transparent; cursor:pointer;
  font-size:18px; font-weight:900; color:#6a1b0b;
}

#morph-panel-body{
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.55;
  color:#2b1a06;
  max-height: 60vh;
  overflow:auto;
}

/* Desktop: panel po prawej */
@media (min-width: 801px){
  #morph-panel{
    top: 140px;
    right: 16px;
    width: 420px;
    max-height: calc(100vh - 180px);
  }
}

/* Mobile: panel z dołu (nad belką) */
@media (max-width: 800px){
  #morph-panel{
    left: 8px;
    right: 8px;
    bottom: 92px;
    width: auto;
    border-radius: 16px;
  }
  #morph-panel-body{ font-size: 19px; }
}

/* =========================
   MORFOLOGIA – popup jak lexeme
   ========================= */
#morph-popup{
  position: fixed;
  z-index: 2147483000;
  display: none;
  min-width: 260px;
  max-width: 520px;
  background: #fffdf5;
  border-radius: 12px;
  border: 1px solid #d4a951;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  padding: 10px 12px;
  font-family: "Cormorant Garamond","Georgia","Times New Roman",serif;
  color: #2b1a06;
  box-sizing: border-box;
  overflow: auto;
}

#morph-popup-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}

#morph-popup-title{
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1.15;
}

#morph-popup-code{
  font-weight: 800;
  font-size: 1.05em;
  opacity: .85;
  margin-top: 2px;
}

#morph-popup-close{
  border: 1px solid #c8aa6a;
  background: #fff6dd;
  border-radius: 10px;
  padding: 2px 10px;
  cursor: pointer;
  font-weight: 900;
}

@media (max-width: 800px){
  #morph-popup{
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 86px !important; /* nad dolną belką */
    max-width: none !important;
    width: auto !important;
    max-height: 55vh !important;
  }
}

@media (min-width: 801px){
  #morph-popup{
    top: 140px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: 520px !important;
    max-height: calc(100vh - 180px) !important;
  }
}