/* ==========================================================================
   quran-ayah.css — Стили блока аята
   Классы соответствуют JS-рендерингу: quran-ayah-block, quran-ayah-arabic, etc.
   ========================================================================== */

/* --- Контейнер списка аятов --- */
.quran-ayah-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* На всю ширину — решение владельца (сжатая колонка не понравилась) */
  max-width: 100%;
}

/* ==========================================================================
   Блок одного аята
   ========================================================================== */

.quran-ayah-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--quran-border, #e5e7eb);
  transition: background .15s ease;
  max-width: 100%;
  overflow: hidden;
}

.quran-ayah-block:last-child {
  border-bottom: none;
}

.quran-ayah-block:hover {
  background: var(--quran-highlight, color-mix(in srgb, var(--emerald) 6%, transparent));
  border-radius: 8px;
}

/* --- Подсветка выделенного аята --- */
.quran-ayah-block.highlighted {
  background: color-mix(in srgb, var(--emerald) 6%, transparent);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--emerald, #198754);
}

/* --- Аят, воспроизводимый аудиоплеером --- */
.quran-ayah-block.playing {
  background: rgba(197, 160, 89, 0.08);
  border-radius: 8px;
}

/* ==========================================================================
   Арабский текст аята
   ========================================================================== */

.quran-ayah-arabic {
  font-family: var(--quran-font-uthmani, 'UthmanicHafs', 'Amiri', serif);
  font-size: 1.75rem;
  line-height: 2.2;
  color: var(--quran-arabic, #1a1a1a);
  direction: rtl;
  text-align: center;
  padding: 8px 4px;
  word-spacing: 6px;
  letter-spacing: 0;
  user-select: text;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* --- Шрифт Indopak (альтернативный) --- */
.quran-ayah-arabic.indopak {
  font-family: var(--quran-font-indopak, 'IndoPak', 'Noto Nastaliq Urdu', serif);
  line-height: 2.6;
}

/* --- Кликабельное слово --- */
.quran-ayah-word {
  cursor: pointer;
  padding: 2px 1px;
  border-radius: 4px;
  transition: background .1s, color .1s;
  display: inline;
}

.quran-ayah-word:hover {
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald-dark, #0f5132);
}

.quran-ayah-word.active {
  background: var(--emerald, #198754);
  color: #fff;
}

/* ==========================================================================
   Номер аята ﴿١﴾
   ========================================================================== */

.quran-ayah-number {
  display: inline;
  font-family: 'Scheherazade New', 'Amiri', serif;
  font-size: 0.85em;
  /* Золото — классический цвет знаков аятов в печатных мусхафах */
  color: var(--gold-dark, #a8873d);
  margin: 0 2px;
  user-select: none;
  white-space: nowrap;
}

/* ==========================================================================
   Перевод аята
   ========================================================================== */

.quran-ayah-translation {
  padding: 8px 12px;
  margin-top: 6px;
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--quran-text, #333);
  text-align: start;
  overflow: hidden;
}

/* ==========================================================================
   Кнопки действий
   ========================================================================== */

.quran-ayah-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0 2px;
  margin-top: 4px;
  /* Тишина на странице чтения: действия проявляются при наведении/фокусе.
     На тач-устройствах (hover: none) видимы всегда. */
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s ease);
}

.quran-ayah-block:hover .quran-ayah-actions,
.quran-ayah-block:focus-within .quran-ayah-actions {
  opacity: 1;
}

@media (hover: none) {
  .quran-ayah-actions { opacity: 1; }
}

.quran-ayah-action-btn,
.quran-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--medium-gray, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.quran-ayah-action-btn:hover,
.quran-action-btn:hover {
  background: var(--quran-highlight, color-mix(in srgb, var(--emerald) 8%, transparent));
  color: var(--emerald, #198754);
}

.quran-ayah-action-btn svg,
.quran-action-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.quran-ayah-action-btn.active {
  color: var(--gold, #c5a059);
}

/* ==========================================================================
   Ночной режим
   ========================================================================== */

.night-mode .quran-ayah-action-btn,
.night-mode .quran-action-btn {
  color: #9ca3af;
}

.night-mode .quran-ayah-action-btn:hover,
.night-mode .quran-action-btn:hover {
  color: var(--emerald-light, #6ee7b7);
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
}

.night-mode .quran-ayah-block {
  border-bottom-color: var(--quran-border);
}

.night-mode .quran-ayah-block.highlighted {
  box-shadow: inset 3px 0 0 var(--quran-tab-active);
}