/* ════════════════════════════════════════════════════
   МОЛИТВОСЛОВ v3 — blagovist.info
   Кольори точно відповідають сайту:
   Шапка розділів:  #3d1f0a → #4e2a10  (темно-коричневий)
   Посилання:       #8b1c1c            (бордово-червоний)
   Активний таб:    #3d1f0a
   Фон:             #ffffff / #f7f2ec
   Текст:           #222222
   Межі:            #d4b896 / rgba(139,60,20,.2)
   ════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* ── Головні кольори сайту ── */
  --s-brown:      #3d1f0a;       /* темно-коричневий — шапки розділів */
  --s-brown2:     #4e2a10;       /* коричневий світліший — градієнт */
  --s-brown3:     #5c3318;       /* коричневий ще світліший */
  --s-red:        #8b1c1c;       /* бордово-червоний — посилання, хрести */
  --s-red-hover:  #6a1414;       /* темніший для hover */
  --s-gold:       #b8892a;       /* золотистий акцент */
  --s-gold-lt:    #d4aa55;       /* золотий світліший */

  /* ── Фони ── */
  --s-bg:         #ffffff;       /* основний фон */
  --s-bg-soft:    #f9f5ef;       /* м'який кремовий */
  --s-bg-warm:    #f3ece0;       /* тепліший крем для рядків */

  /* ── Межі ── */
  --s-border:     rgba(139,60,20,.18);
  --s-border-mid: rgba(139,60,20,.28);
  --s-border-tab: #d4c4a8;

  /* ── Тіні ── */
  --s-shadow:     rgba(40,15,5,.10);
  --s-shadow-md:  rgba(40,15,5,.18);

  /* ── Текст ── */
  --s-text:       #1a1a1a;
  --s-text-mid:   #3d2010;
  --s-text-muted: #7a5c3e;

  --s-radius:     6px;
  --s-radius-pill: 30px;
}

/* ══════════════════════════════════════
   ОБГОРТКА
══════════════════════════════════════ */
.mlv-wrap {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  color: var(--s-text);
  max-width: 940px;
  margin: 0 auto;
  padding: 4px 0 56px;
  background: transparent;
}

/* ══════════════════════════════════════
   ПОШУК
══════════════════════════════════════ */
.mlv-search-bar {
  position: relative;
  margin-bottom: 18px;
}

.mlv-search {
  width: 100%;
  padding: 12px 46px 12px 48px;
  border: 1.5px solid var(--s-border-tab);
  border-radius: var(--s-radius-pill);
  background: var(--s-bg);
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  color: var(--s-text);
  outline: none;
  box-shadow: 0 2px 12px var(--s-shadow);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  letter-spacing: .01em;
}

.mlv-search::placeholder {
  color: var(--s-text-muted);
  font-style: italic;
  font-size: 16px;
}

.mlv-search:focus {
  border-color: var(--s-gold);
  box-shadow: 0 3px 18px rgba(184,137,42,.2);
}

.mlv-search-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  pointer-events: none;
  opacity: .45;
  color: var(--s-text-muted);
}

.mlv-clear {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--s-text-muted);
  font-size: 14px;
  padding: 5px;
  display: none;
  line-height: 1;
  opacity: .6;
  transition: color .18s, opacity .18s;
}
.mlv-clear.visible { display: block; }
.mlv-clear:hover   { color: var(--s-red); opacity: 1; }

/* ══════════════════════════════════════
   ВКЛАДКИ
══════════════════════════════════════ */
.mlv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.mlv-tab {
  padding: 6px 16px;
  border: 1.5px solid var(--s-border-tab);
  border-radius: var(--s-radius-pill);
  background: var(--s-bg);
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--s-text-mid);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
  line-height: 1.5;
}

.mlv-tab:hover {
  background: var(--s-bg-warm);
  border-color: var(--s-gold);
  color: var(--s-brown);
}

.mlv-tab.active {
  background: var(--s-brown);
  border-color: var(--s-brown);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(61,31,10,.3);
}

/* ══════════════════════════════════════
   РОЗДІЛ
══════════════════════════════════════ */
.mlv-section {
  background: var(--s-bg);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  margin-bottom: 12px;
  box-shadow: 0 2px 10px var(--s-shadow);
  overflow: hidden;
  transition: box-shadow .2s;
  animation: mlvIn .3s ease both;
}

.mlv-section:hover {
  box-shadow: 0 4px 18px var(--s-shadow-md);
}

.mlv-section.mlv-hidden { display: none; }

@keyframes mlvIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Заголовок розділу ── */
.mlv-sec-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(95deg,
    #3d1f0a 0%,
    #4a2510 50%,
    #562c14 100%
  );
  border: none;
  cursor: pointer;
  text-align: left;
  transition: filter .18s;
}

.mlv-sec-head:hover {
  filter: brightness(1.1);
}

.mlv-sec-icon {
  font-size: 18px;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mlv-sec-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #f5e8cc;
  flex: 1;
  line-height: 1.3;
  letter-spacing: .01em;
}

.mlv-sec-count {
  font-family: 'EB Garamond', serif;
  font-size: 12.5px;
  color: rgba(245,232,204,.7);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--s-radius-pill);
  padding: 1px 10px;
  min-width: 26px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.mlv-chevron {
  color: rgba(245,232,204,.8) !important;
  font-size: 13px !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  transform: rotate(0deg) !important;
  line-height: 1 !important;
}

.mlv-section.mlv-collapsed .mlv-chevron {
  transform: rotate(-90deg) !important;
}

/* ── Тіло розділу ── */
.mlv-sec-body {
  max-height: 4000px !important;
  overflow: hidden !important;
  transition: max-height .38s cubic-bezier(.4,0,.2,1) !important;
  background: var(--s-bg);
}

.mlv-section.mlv-collapsed .mlv-sec-body {
  max-height: 0 !important;
}

/* ══════════════════════════════════════
   СПИСОК ПОСИЛАНЬ
══════════════════════════════════════ */
.mlv-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 4px 0;
  columns: 2;
  column-gap: 0;
}

.mlv-list li,
.mlv-list li::before,
.mlv-list li::marker {
  list-style: none !important;
  list-style-type: none !important;
}

.mlv-item {
  break-inside: avoid;
  border-bottom: 1px solid rgba(139,60,20,.07);
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}

.mlv-item.mlv-hidden { display: none; }

.mlv-link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 20px;
  color: var(--s-text);
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.45;
  transition: background .15s, color .15s, padding-left .18s;
}

.mlv-link:hover {
  background: var(--s-bg-soft);
  color: var(--s-red-hover);
  padding-left: 26px;
  text-decoration: none;
}

.mlv-cross {
  color: var(--s-red);
  font-size: 10.5px;
  opacity: .5;
  flex-shrink: 0;
  margin-top: 2px;
  transition: opacity .15s;
  line-height: 1;
}

.mlv-link:hover .mlv-cross {
  opacity: 1;
}

/* ══════════════════════════════════════
   НЕ ЗНАЙДЕНО
══════════════════════════════════════ */
.mlv-no-results {
  display: none;
  text-align: center;
  padding: 44px 20px;
  color: var(--s-text-muted);
  font-size: 17px;
  font-style: italic;
  background: var(--s-bg);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
}

/* ══════════════════════════════════════
   АДАПТИВНІСТЬ
══════════════════════════════════════ */
@media (max-width: 680px) {
  .mlv-list         { columns: 1; }
  .mlv-sec-title    { font-size: 15.5px; }
  .mlv-link         { font-size: 15px; padding: 9px 16px; }
  .mlv-tab          { font-size: 13.5px; padding: 5px 13px; }
}

@media (max-width: 440px) {
  .mlv-tabs         { gap: 5px; }
  .mlv-tab          { padding: 5px 10px; font-size: 12.5px; }
  .mlv-sec-head     { padding: 12px 14px; gap: 9px; }
  .mlv-sec-title    { font-size: 14.5px; }
  .mlv-link         { font-size: 14.5px; padding: 8px 14px; }
}


/* ═══════════════════════════════════════════════
   DARK MODE (читабельність на blagovist.info)
   Підхоплює популярні switcher-и:
   - html[data-theme="dark"]
   - body.dark-mode / body.dark
   - .dark-mode / .dark
═══════════════════════════════════════ */
html[data-theme="dark"],
html.dark,
body.dark,
body.dark-mode,
.dark-mode,
.dark {
  /* Фони */
  --s-bg:         #121212;
  --s-bg-soft:    #181818;
  --s-bg-warm:    #1e1e1e;

  /* Текст */
  --s-text:       #f5f5f5;
  --s-text-mid:   #e6e6e6;
  --s-text-muted: #b5b5b5;

  /* Межі/тіні */
  --s-border:     rgba(255,255,255,.08);
  --s-border-mid: rgba(255,255,255,.15);
  --s-border-tab: rgba(255,255,255,.18);
  --s-shadow:     rgba(0,0,0,.60);
  --s-shadow-md:  rgba(0,0,0,.80);

  /* Акценти */
  --s-brown:      #2c1a10;
  --s-brown2:     #3a2214;
  --s-brown3:     #4a2a18;

  --s-red:        #ff6b6b;
  --s-red-hover:  #ff8c8c;

  --s-gold:       #d4af37;
  --s-gold-lt:    #f0c96a;
}

/* Тема WP часто перебиває колір посилань — фіксуємо для списків */
html[data-theme="dark"] .mlv-wrap a.mlv-link,
html.dark .mlv-wrap a.mlv-link,
body.dark-mode .mlv-wrap a.mlv-link,
body.dark .mlv-wrap a.mlv-link,
.dark-mode .mlv-wrap a.mlv-link,
.dark .mlv-wrap a.mlv-link {
  color: var(--s-text) !important;
}

html[data-theme="dark"] .mlv-wrap a.mlv-link:hover,
html.dark .mlv-wrap a.mlv-link:hover,
body.dark-mode .mlv-wrap a.mlv-link:hover,
body.dark .mlv-wrap a.mlv-link:hover,
.dark-mode .mlv-wrap a.mlv-link:hover,
.dark .mlv-wrap a.mlv-link:hover {
  color: var(--s-gold-lt) !important;
}

/* Таби/фільтри — щоб не були “брудно-сірі” */
html[data-theme="dark"] .mlv-tab,
html.dark .mlv-tab,
body.dark-mode .mlv-tab,
body.dark .mlv-tab,
.dark-mode .mlv-tab,
.dark .mlv-tab {
  background: rgba(255,255,255,.06);
  color: var(--s-text);
  border-color: rgba(255,255,255,.14);
}

html[data-theme="dark"] .mlv-tab.active,
html.dark .mlv-tab.active,
body.dark-mode .mlv-tab.active,
body.dark .mlv-tab.active,
.dark-mode .mlv-tab.active,
.dark .mlv-tab.active {
  background: linear-gradient(180deg, var(--s-brown2), var(--s-brown));
  color: #fff;
  border-color: rgba(240,201,106,.28);
}


/* =====================================================
   Molytvoslov dark theme (synced)
   JS adds .mlv-dark to .mlv-wrap when site is in dark mode
===================================================== */
.mlv-wrap.mlv-dark{
  --s-bg:         #121212;
  --s-bg-soft:    #171717;
  --s-bg-warm:    #1d1d1d;

  --s-text:       #f2ede6;
  --s-text-mid:   #e7d6c2;
  --s-text-muted: #bca489;

  --s-border:     rgba(255,255,255,.10);
  --s-border-mid: rgba(255,255,255,.16);
  --s-border-tab: rgba(255,255,255,.20);

  --s-shadow:     rgba(0,0,0,.55);
  --s-shadow-md:  rgba(0,0,0,.80);

  --s-brown:      #2a1508;
  --s-brown2:     #3a1f0b;
  --s-brown3:     #4a2a12;

  --s-red:        #ff7a7a;
  --s-red-hover:  #ff9a9a;

  --s-gold:       #d4aa55;
  --s-gold-lt:    #f0c96a;
}

/* Links inside the list: readable in dark mode */
.mlv-wrap.mlv-dark .mlv-link{
  color: var(--s-text) !important;
}
.mlv-wrap.mlv-dark .mlv-link:hover{
  color: var(--s-gold-lt) !important;
}

/* Search placeholder visibility */
.mlv-wrap.mlv-dark .mlv-search::placeholder{
  color: var(--s-text-muted);
  opacity: .85;
}

/* Tabs in dark mode */
.mlv-wrap.mlv-dark .mlv-tab{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: var(--s-text);
}
.mlv-wrap.mlv-dark .mlv-tab.active{
  background: rgba(212,170,85,.18);
  border-color: rgba(240,201,106,.35);
  color: var(--s-text);
}