/* Rich content formatting for fatwa answers, research and nawazil bodies on the public site — ported 1:1
   from the admin editor (resources/css/filament/admin/editor.css) so verses,
   footnotes, hadith and poetry render on the site exactly as in the editor. */

@font-face {
  font-family: 'KFGQPC Uthmanic Hafs';
  src: url('/fonts/kfgqpc/UthmanicHafs1Ver18.woff2') format('woff2'),
       url('/fonts/kfgqpc/UthmanicHafs1Ver18.woff')  format('woff'),
       url('/fonts/kfgqpc/UthmanicHafs1Ver18.ttf')   format('truetype');
  font-display: swap;
}

/* ===== Quranic verses — green, Uthmanic font, auto { } brackets ===== */
#ftwrap .quran-text,
#qvbody .quran-text,
.rich-content .quran-text,
.answer .quran-text {
  font-family: 'KFGQPC Uthmanic Hafs', 'Amiri Quran', 'Scheherazade New', 'Amiri', serif;
  font-size: 1.25em;
  line-height: 2.1;
  color: #15803d;
}
#ftwrap .quran-text::before,
#qvbody .quran-text::before,
.rich-content .quran-text::before,
.answer .quran-text::before { content: '{'; }
#ftwrap .quran-text::after,
#qvbody .quran-text::after,
.rich-content .quran-text::after,
.answer .quran-text::after { content: '}'; }
html[data-theme="dark"] #ftwrap .quran-text,
html[data-theme="dark"] #qvbody .quran-text,
html[data-theme="dark"] .rich-content .quran-text,
html[data-theme="dark"] .answer .quran-text { color: #86efac !important; }

/* ===== Hadith (inline mark) — blue text with (( )) brackets ===== */
#ftwrap .hadith-text,
#qvbody .hadith-text,
.rich-content .hadith-text,
.answer .hadith-text { color: #2563eb !important; }
#ftwrap .hadith-text::before,
#qvbody .hadith-text::before,
.rich-content .hadith-text::before,
.answer .hadith-text::before { content: '(('; }
#ftwrap .hadith-text::after,
#qvbody .hadith-text::after,
.rich-content .hadith-text::after,
.answer .hadith-text::after { content: '))'; }
html[data-theme="dark"] #ftwrap .hadith-text,
html[data-theme="dark"] #qvbody .hadith-text,
html[data-theme="dark"] .rich-content .hadith-text,
html[data-theme="dark"] .answer .hadith-text { color: #93c5fd !important; }

/* ===== Footnotes — auto (1)(2)…, text shown in popup or tooltip ===== */
#ftwrap .answer,
#qvbody .answer,
.rich-content,
.answer { counter-reset: footnote; }
#ftwrap .footnote-ref,
#qvbody .footnote-ref,
.rich-content .footnote-ref,
.answer .footnote-ref {
  counter-increment: footnote;
  color: #b45309;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.2em;
  display: inline-block;
  text-decoration: none;
}
#ftwrap .footnote-ref::before,
#qvbody .footnote-ref::before,
.rich-content .footnote-ref::before,
.answer .footnote-ref::before { content: '(' counter(footnote) ')'; }
html[data-theme="dark"] #ftwrap .footnote-ref,
html[data-theme="dark"] #qvbody .footnote-ref,
html[data-theme="dark"] .rich-content .footnote-ref,
html[data-theme="dark"] .answer .footnote-ref { color: #fbbf24 !important; }

/* ===== Footnote popup dialog (tap/click a footnote to read its text) ===== */
.fn-pop{position:fixed;inset:0;z-index:3500;background:rgba(8,24,18,.65);display:none;align-items:center;justify-content:center;padding:20px}
.fn-pop.open{display:flex}
body.fn-lock{overflow:hidden}
.fn-box{background:var(--card,#fff);border:1px solid var(--line,#e4ddd0);border-radius:16px;max-width:480px;width:100%;padding:24px 22px 20px;position:relative;box-shadow:0 24px 60px -24px rgba(0,0,0,.55);animation:fnIn .18s ease;direction:rtl;text-align:right}
@keyframes fnIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fn-x{position:absolute;top:10px;left:12px;width:32px;height:32px;border:none;background:transparent;font-size:19px;cursor:pointer;color:var(--muted,#6b6257);line-height:1;border-radius:8px;display:grid;place-items:center}
.fn-x:hover{background:rgba(0,0,0,.06)}
.fn-title{font-weight:700;color:#a9812f;margin-bottom:10px;font-size:.98rem}
.fn-text{color:var(--ink,#2c2620);line-height:1.95;font-size:1.02rem}
html[data-theme="dark"] .fn-box{background:#14302a;border-color:#1f4034}
html[data-theme="dark"] .fn-x{color:#c9c0b0}
html[data-theme="dark"] .fn-x:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .fn-title{color:#e5c375}
html[data-theme="dark"] .fn-text{color:#e7e0d2}

/* ===== Hadith (blockquote.hadith) — blue block ===== */
#ftwrap blockquote.hadith,
#qvbody blockquote.hadith,
.rich-content blockquote.hadith,
.answer blockquote.hadith {
  border-inline-start: 4px solid #2563eb;
  background: #eff6ff;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
#ftwrap blockquote.hadith .matn,
#qvbody blockquote.hadith .matn,
.rich-content blockquote.hadith .matn,
.answer blockquote.hadith .matn {
  font-family: 'KFGQPC Uthmanic Hafs', 'Tajawal', serif;
  font-size: 1.1em;
  line-height: 1.9;
  color: #1e3a8a;
}
#ftwrap blockquote.hadith cite,
#qvbody blockquote.hadith cite,
.rich-content blockquote.hadith cite,
.answer blockquote.hadith cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.875em;
  color: #1d4ed8;
}
html[data-theme="dark"] #ftwrap blockquote.hadith,
html[data-theme="dark"] #qvbody blockquote.hadith,
html[data-theme="dark"] .rich-content blockquote.hadith,
html[data-theme="dark"] .answer blockquote.hadith { background: rgba(37, 99, 235, 0.12); }
html[data-theme="dark"] #ftwrap blockquote.hadith .matn,
html[data-theme="dark"] #ftwrap blockquote.hadith cite,
html[data-theme="dark"] #qvbody blockquote.hadith .matn,
html[data-theme="dark"] #qvbody blockquote.hadith cite,
html[data-theme="dark"] .rich-content blockquote.hadith .matn,
html[data-theme="dark"] .rich-content blockquote.hadith cite,
html[data-theme="dark"] .answer blockquote.hadith .matn,
html[data-theme="dark"] .answer blockquote.hadith cite { color: #bfdbfe !important; }

/* ===== Poetry (table.poetry-table) — brown two-column table ===== */
#ftwrap table.poetry-table,
#qvbody table.poetry-table,
.rich-content table.poetry-table,
.answer table.poetry-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-family: 'Tajawal', serif;
  color: #7c2d12;
  border: 1px solid #b45309;
  border-radius: 0.5rem;
  overflow: hidden;
}
#ftwrap table.poetry-table td,
#qvbody table.poetry-table td,
.rich-content table.poetry-table td,
.answer table.poetry-table td {
  width: 50%;
  padding: 0.6rem 1rem;
  font-size: 1.05em;
  line-height: 1.9;
  border: 1px solid #d6a77a;
}
#ftwrap table.poetry-table td.sadr,
#qvbody table.poetry-table td.sadr,
.rich-content table.poetry-table td.sadr,
.answer table.poetry-table td.sadr { text-align: end; }
#ftwrap table.poetry-table td.ajuz,
#qvbody table.poetry-table td.ajuz,
.rich-content table.poetry-table td.ajuz,
.answer table.poetry-table td.ajuz { text-align: start; }
html[data-theme="dark"] #ftwrap table.poetry-table,
html[data-theme="dark"] #qvbody table.poetry-table,
html[data-theme="dark"] .rich-content table.poetry-table,
html[data-theme="dark"] .answer table.poetry-table { color: #fca5a5 !important; border-color: #7c2d12; }
html[data-theme="dark"] #ftwrap table.poetry-table td,
html[data-theme="dark"] #qvbody table.poetry-table td,
html[data-theme="dark"] .rich-content table.poetry-table td,
html[data-theme="dark"] .answer table.poetry-table td { border-color: rgba(180, 83, 9, 0.4); }

/* ===== Inline text color ===== */
#ftwrap .color,
#qvbody .color,
.rich-content .color,
.answer .color { color: var(--color) !important; }
html[data-theme="dark"] #ftwrap .color,
html[data-theme="dark"] #qvbody .color,
html[data-theme="dark"] .rich-content .color,
html[data-theme="dark"] .answer .color { color: var(--dark-color, var(--color)) !important; }

/* ===== Links inside the answer / rich-content ===== */
#ftwrap .answer a,
#qvbody .answer a,
.rich-content a,
.answer a {
  color: #a8851c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#ftwrap .answer a:hover,
#qvbody .answer a:hover,
.rich-content a:hover,
.answer a:hover { text-decoration-thickness: 2px; }
html[data-theme="dark"] #ftwrap .answer a,
html[data-theme="dark"] #qvbody .answer a,
html[data-theme="dark"] .rich-content a,
html[data-theme="dark"] .answer a { color: #e5c375; }

/* ===== Lists & typography inside answer / rich-content ===== */
#ftwrap .answer ul,
#qvbody .answer ul,
.rich-content ul,
.answer ul { list-style: disc; padding-inline-start: 1.6em; margin: 0.6em 0; }
#ftwrap .answer ol,
#qvbody .answer ol,
.rich-content ol,
.answer ol { list-style: decimal; padding-inline-start: 1.6em; margin: 0.6em 0; }
#ftwrap .answer li,
#qvbody .answer li,
.rich-content li,
.answer li { margin: 0.25em 0; }

.rich-content p,
.answer p { margin: 0 0 14px; line-height: 2.05; }
.rich-content p:last-child,
.answer p:last-child { margin-bottom: 0; }

/* ===== Shared Fatwa-style Modal Overlay and Content Card ===== */
.overlay{position:fixed;inset:0;background:rgba(8,24,18,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:3000}
.overlay.on,.overlay.open{display:flex}
.modal{background:var(--card,#fbf9f4);border-radius:18px;max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:34px 30px;position:relative;border:1px solid var(--line,#e3ddd0);box-shadow:0 24px 60px -24px rgba(11,61,46,.45);direction:rtl;text-align:right}
.modal .x{position:absolute;top:14px;left:16px;border:none;background:none;font-size:24px;cursor:pointer;color:var(--muted,#6f675a);line-height:1;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;transition:.15s}
.modal .x:hover{background:rgba(0,0,0,.06)}

/* Q/A content box matching Fatwa */
.qa-a{position:relative;background:var(--white,#fff);border:1.5px solid rgba(11,61,46,.35);border-radius:14px;padding:28px 22px 20px;margin-top:26px;box-shadow:0 10px 26px -20px rgba(11,61,46,.35)}
.qa-lbl{position:absolute;top:-18px;right:20px;display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14.5px;border-radius:20px;padding:6px 20px;margin:0;line-height:1.6;box-shadow:0 4px 12px -6px rgba(11,61,46,.45);z-index:1;background:var(--green,#0B3D2E);color:#fff}

.iconacts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px}
.ibtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line,#e3ddd0);background:var(--white,#fff);color:var(--green,#0b3d2e);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.ibtn:hover{border-color:var(--gold,#c9a227);color:var(--gold-d,#a8851c);transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(11,61,46,.35)}

.acts{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.btn{border:1px solid var(--green,#0b3d2e);color:var(--green,#0b3d2e);background:none;border-radius:11px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none;transition:.18s}
.btn:hover{background:var(--green,#0b3d2e);color:#fff}
.btn.solid{background:var(--green,#0b3d2e);color:#fff}
.btn.solid:hover{background:#0e4a38}

/* Dark mode for Fatwa-style Modal */
html[data-theme="dark"] .overlay{background:rgba(0,0,0,.75)}
html[data-theme="dark"] .modal{background:#14302a;border-color:#1f4034;color:#ece5d6}
html[data-theme="dark"] .modal .x{color:#a9bcb0}
html[data-theme="dark"] .modal .x:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .qa-a{background:#102b22;border-color:#1f4034;box-shadow:none}
html[data-theme="dark"] .qa-lbl{background:#164434;color:#fff}
html[data-theme="dark"] .ibtn{background:#0f3528;border-color:#2c5546;color:#e7dcc6}
html[data-theme="dark"] .ibtn:hover{border-color:var(--gold-l,#ecc486);color:var(--gold-l,#ecc486)}
html[data-theme="dark"] .btn:not(.solid){border-color:#3a6253;color:#e7dcc6}
html[data-theme="dark"] .btn:not(.solid):hover{border-color:var(--gold-l,#ecc486);color:var(--gold-l,#ecc486)}
html[data-theme="dark"] .btn.solid{background:#0f3528;color:#fff;border-color:#1f4034}
html[data-theme="dark"] .btn.solid:hover{background:#164434}

body.rs-lock{overflow:hidden}

@media(max-width:560px){
  .modal{padding:22px 14px}
  .qa-a{padding:24px 16px 18px;margin-top:20px}
  .qa-lbl{position:static;display:inline-flex;margin:0 0 12px;box-shadow:none}
}