/* ============================================================
   Fatawa Directory — searchable accordion of masail / fatawa
   Used by aia-boys/fatawa.html. Urdu content is RTL (AlQalam).
   ============================================================ */

.fatwa-wrap { max-width: 1100px; margin: 0 auto; }

/* page banner (replaces the text page-header) — the artwork is a pre-composed
   wide strip, so it is shown whole (never cropped) and capped to the content
   width so it sits compactly above the listing instead of towering full-bleed.
   On phones (< content width) it still spans edge to edge. */
.fatwa-banner { width: 100%; max-width: 1120px; margin: 0 auto; line-height: 0; }
.fatwa-banner img { display: block; width: 100%; height: auto; }

/* import-in-progress / info banner */
.fatwa-note { display: flex; align-items: flex-start; gap: 12px; background: rgba(31,95,139,0.06);
  border: 1px solid rgba(31,95,139,0.25); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
  color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.fatwa-note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.fatwa-note strong { color: var(--ink); }

/* search bar */
.fatwa-searchbar { position: relative; display: flex; align-items: center; margin-bottom: 14px; }
.fatwa-searchbar .fatwa-ico { position: absolute; right: 18px; width: 20px; height: 20px; color: var(--ink-mute);
  pointer-events: none; }
.fatwa-search { width: 100%; padding: 15px 48px 15px 46px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--white); outline: none;
  box-shadow: 0 6px 20px -14px rgba(20,56,50,0.3); transition: border-color .2s, box-shadow .2s; }
.fatwa-search::placeholder { color: var(--ink-mute); }
.fatwa-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,95,139,0.12); }
.fatwa-clear { position: absolute; left: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--bg-alt); color: var(--ink-soft); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s; }
.fatwa-clear:hover { background: #dfe7ec; color: var(--ink); }

.fatwa-count { text-align: center; color: var(--ink-mute); font-size: 0.88rem; margin: 22px 0 0; }
.fatwa-count strong { color: var(--ink); font-weight: 700; }

/* list + accordion items */
.fatwa-list { display: flex; flex-direction: column; gap: 10px; }
.fatwa-item { border: 1px solid var(--line); border-radius: 12px; background: #f7efd3; overflow: hidden;
  box-shadow: 0 5px 20px -14px rgba(20,56,50,0.25); transition: border-color .2s, box-shadow .2s, background .2s; }
.fatwa-item:hover { background: #f3e8c2; }
.fatwa-item.open { background: #fbf6e5; }
.fatwa-item.open { border-color: var(--accent); box-shadow: 0 10px 30px -16px rgba(31,95,139,0.4); }

.fatwa-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: none;
  border: 0; cursor: pointer; direction: rtl; text-align: right; font-family: inherit; color: inherit; }
.fatwa-num { flex: 0 0 auto; min-width: 40px; height: 38px; padding: 0 11px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.95rem; display: inline-flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.fatwa-item.open .fatwa-num { background: var(--accent-deep, #14456a); }
.fatwa-qtext { flex: 1 1 auto; font-family: 'Faiz Lahori Nastaleeq','AlQalam-Taj-Nastaleeq','Noto Nastaliq Urdu','Amiri',serif;
  direction: rtl; text-align: right; font-size: 1.85rem; line-height: 1.7; color: var(--ink); }
.fatwa-tag { display: inline-block; font-family: 'Manrope', sans-serif; font-size: 0.6rem; letter-spacing: 0.06em;
  vertical-align: middle; color: #14456a; background: rgba(31,95,139,0.12); border-radius: 6px; padding: 2px 7px;
  margin-inline-end: 8px; }
.fatwa-chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ink-mute); transition: transform .28s ease; }
.fatwa-item.open .fatwa-chev { transform: rotate(180deg); color: var(--accent); }

/* answer: smooth grid expand (0fr -> 1fr) */
.fatwa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.fatwa-item.open .fatwa-a { grid-template-rows: 1fr; }
.fatwa-a-inner { overflow: hidden; }
.fatwa-a-body { padding: 14px 20px 20px; margin: 0 18px; border-top: 1px dashed var(--line); }

/* ---- typography: four roles ---- */
/* Urdu body/titles — AlQalam Taj Nastaleeq, NORMAL spacing */
.f-ur { font-family: 'Faiz Lahori Nastaleeq','AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu', serif; direction: rtl; }
/* fixed labels (سوال / بسم اللہ الرحمن الرحیم / الجواب وباللہ التوفیق / جواب) — bold Arabic (Wajid) */
.f-lbl { font-family: 'Wajid','Aref Ruqaa','Amiri', serif; font-weight: 700; unicode-bidi: isolate; }
/* general Arabic quotes / du'as — Amiri */
.f-ar { font-family: 'Amiri','Scheherazade New', serif; unicode-bidi: isolate; }
/* Qur'anic verses — Muhammadi Quranic (used first once self-hosted; falls back for now) */
.f-quran { font-family: 'Muhammadi Quranic','PDMS Saleem QuranFont','Amiri Quran','Scheherazade New','Amiri', serif;
  unicode-bidi: isolate; }

.fatwa-a-body .fw-sawal, .fatwa-a-body .fw-jawab, .fatwa-a-body .fw-para {
  direction: rtl; text-align: justify; font-size: 1.65rem; line-height: 1.95; margin: 0 0 12px; }
.fatwa-a-body .fw-sawal { color: var(--ink); }
.fatwa-a-body .fw-jawab, .fatwa-a-body .fw-para { color: var(--ink-soft); }
.fatwa-a-body > :last-child { margin-bottom: 0; }
/* leading سوال / الجواب labels stand out in the accent colour */
.fatwa-a-body .fw-sawal > .f-lbl:first-child, .fatwa-a-body .fw-jawab > .f-lbl:first-child { color: var(--accent); }
.fatwa-a-body .fw-bism { direction: rtl; text-align: center; font-size: 1.55rem; line-height: 1.8;
  color: var(--accent-deep, #14456a); margin: 2px 0 12px; }
/* closing sign-off (فقط واللہ … اعلم بالصواب) — uniform, in the Arabic (Amiri) font */
.fatwa-a-body .fw-khatam { direction: rtl; text-align: center;
  font-family: 'Amiri','Scheherazade New', serif; unicode-bidi: isolate;
  font-size: 1.45rem; line-height: 1.8; color: var(--accent-deep, #14456a); font-weight: 700;
  margin: 16px 0 2px; }
/* Only the Urdu prose is enlarged; keep Arabic-script runs — Amiri quotes,
   Qur'anic verses, and the fixed Wajid labels (سوال / جواب) — at their prior
   size so they render as before, not scaled up with the Urdu text. */
.fatwa-a-body .fw-sawal .f-lbl, .fatwa-a-body .fw-jawab .f-lbl,
.fatwa-a-body .f-ar, .fatwa-a-body .f-quran { font-size: 1.4rem; }

/* ---- two-column layout: fatawa list (left) + search widget (right) ---- */
.fatwa-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
.fatwa-main { min-width: 0; }
.fatwa-side { position: sticky; top: 16px;
  /* warm palette — brown headers, light parchment bodies, scoped to the sidebar cards */
  --fs-dark:#e2cb90; --fs-mid:#f6efe1; --fs-edge:#e2d5bf; --fs-cream:#493523;
  --fs-cream-soft:#8c7358; --fs-ink:#4a3928; --fs-gold:#7a5e15; --fs-gold-2:#a8791d; }

/* faint arabesque on the dark header bars */
.fsearch-head, .fatwa-ask-head { background-color: var(--fs-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M17 3l3.2 6.5L27 12l-6.8 2.5L17 21l-3.2-6.5L7 12l6.8-2.5z' fill='none' stroke='%237a5e15' stroke-opacity='0.14'/%3E%3C/svg%3E");
  background-size: 34px; }

/* category index table (RTL columns: شمار | عنوان | مسائل) */
.fcat-table { width: 100%; border-collapse: collapse; direction: rtl; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 22px -16px rgba(20,56,50,0.3); }
.fcat-table thead th { background: var(--accent); color: #fff; font-family: 'Manrope', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700;
  padding: 9px 10px; text-align: center; white-space: nowrap; }
.fcat-table thead th.fcat-name { text-align: right; }
.fcat-row { cursor: pointer; border-top: 1px solid var(--line); transition: background .15s; }
.fcat-row:hover { background: var(--bg-alt); }
.fcat-row.is-active { background: var(--bg-alt); }
.fcat-row td { padding: 7px 10px; vertical-align: middle; }
.fcat-no { width: 42px; text-align: center; font-family: 'Manrope', sans-serif; font-size: 0.85rem;
  font-weight: 600; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.fcat-name { text-align: right; }
.fcat-name .fc-ur { font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  direction: rtl; font-size: 1.2rem; line-height: 1.35; color: var(--ink); }
.fcat-cnt { width: 52px; text-align: center; font-family: 'Manrope', sans-serif; font-size: 0.85rem;
  font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fcat-row.is-active .fc-ur { color: var(--accent); font-weight: 700; }
.fcat-row.is-active .fcat-no, .fcat-row.is-active .fcat-cnt { color: var(--accent); }

/* ---- Search widget card (keyword + number + categories + button) ---- */
.fsearch-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--fs-edge);
  background: var(--fs-mid); box-shadow: 0 12px 34px -20px rgba(20,56,50,0.55); }
.fsearch-head { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 16px; color: var(--fs-cream); border-bottom: 1px solid var(--fs-edge); }
.fsearch-ico { width: 20px; height: 20px; color: var(--fs-gold); flex: 0 0 auto; }
.fsearch-title { display: flex; align-items: baseline; gap: 9px; }
.fsearch-title .ur { font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  font-size: 1.5rem; line-height: 1; }
.fsearch-title .en { font-family: 'Manrope', sans-serif; font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fs-gold); }
.fsearch-body { padding: 15px; display: flex; flex-direction: column; gap: 12px; }

.fsearch-field { display: flex; flex-direction: column; gap: 5px; }
.fsearch-lbl { direction: rtl; text-align: right; color: var(--fs-ink);
  font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  font-size: 1.08rem; line-height: 1.3; }
.fsearch-input { width: 100%; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--fs-edge);
  background: #fffdf8; color: #3b2c24; font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color .2s, box-shadow .2s; }
.fsearch-input::placeholder { color: #a1907c; }
.fsearch-input:focus { border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(203,161,78,0.28); }

/* categories collapsible block */
.fcat-block { border-radius: 10px; overflow: hidden; border: 1px solid var(--fs-edge); background: var(--fs-dark); }
.fcat-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: none; border: 0; cursor: pointer; color: var(--fs-cream); }
.fcat-toggle-lbl { display: flex; align-items: baseline; gap: 8px; }
.fcat-toggle-lbl .ur { font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  font-size: 1.28rem; line-height: 1; }
.fcat-toggle-lbl .en { font-family: 'Manrope', sans-serif; font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fs-gold); }
.fcat-toggle-chev { width: 18px; height: 18px; color: var(--fs-gold); flex: 0 0 auto; transition: transform .25s ease; }
.fcat-block.is-collapsed .fcat-toggle-chev { transform: rotate(-90deg); }
.fcat-panel { max-height: 560px; overflow: hidden; transition: max-height .3s ease; border-top: 1px solid var(--fs-edge); }
.fcat-block.is-collapsed .fcat-panel { max-height: 0; border-top-color: transparent; }

/* the category table, themed for the light card */
.fcat-panel .fcat-table { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.fcat-panel .fcat-table thead th { background: #efe3ce; color: var(--fs-cream-soft);
  border-bottom: 1px solid var(--fs-edge); }
.fcat-panel .fcat-row { border-top: 1px solid rgba(90,70,45,0.10); background: #fdf9f0; }
.fcat-panel .fcat-row:hover { background: #f2e9d7; }
.fcat-panel .fcat-row.is-active { background: #f6ecd2; }
.fcat-panel .fc-ur { color: var(--fs-ink); }
.fcat-panel .fcat-no, .fcat-panel .fcat-cnt { color: var(--fs-cream-soft); }
.fcat-panel .fcat-row.is-active .fc-ur,
.fcat-panel .fcat-row.is-active .fcat-no,
.fcat-panel .fcat-row.is-active .fcat-cnt { color: var(--fs-gold-2); font-weight: 700; }

/* search button */
.fsearch-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--fs-dark); color: var(--fs-cream); transition: background .2s;
  font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif; font-size: 1.3rem; }
.fsearch-btn:hover { background: #d5ba76; }
.fsearch-btn svg { width: 18px; height: 18px; color: var(--fs-gold); }

/* ---- "سوال پوچھیں" (Ask a Question) card ---- */
.fatwa-ask { display: block; margin-top: 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--fs-edge); text-decoration: none;
  box-shadow: 0 12px 34px -20px rgba(20,56,50,0.55); transition: box-shadow .2s, transform .2s; }
.fatwa-ask:hover { box-shadow: 0 16px 38px -18px rgba(20,56,50,0.6); transform: translateY(-2px); }
.fatwa-ask-head { display: flex; direction: rtl; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--fs-cream); padding: 11px 16px; border-bottom: 1px solid var(--fs-edge); }
.fatwa-ask-title { display: flex; direction: rtl; align-items: baseline; gap: 9px; }
.fatwa-ask-title .ur { font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  font-size: 1.55rem; line-height: 1.1; }
.fatwa-ask-title .en { font-family: 'Manrope', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fs-gold); }
.fatwa-ask-head svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--fs-gold); opacity: .95; }
.fatwa-ask-body { background: var(--fs-mid); padding: 16px 16px 18px; }
.fatwa-ask-text { direction: rtl; text-align: justify;
  font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
  font-size: 1.22rem; line-height: 2; color: var(--fs-ink); margin: 0 0 10px; }
.fatwa-ask-text-en { direction: ltr; text-align: left; font-size: 0.82rem; line-height: 1.55;
  color: var(--fs-cream-soft); margin: 0 0 16px; }
.fatwa-ask-btn { display: flex; direction: rtl; align-items: center; justify-content: center; gap: 8px;
  background: var(--fs-dark); color: var(--fs-cream); border-radius: 8px; padding: 9px 16px;
  font-family: 'AlQalam-Taj-Nastaleeq','Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif; font-size: 1.35rem;
  transition: background .2s, color .2s; }
.fatwa-ask:hover .fatwa-ask-btn { background: #d5ba76; color: var(--fs-cream); }
.fatwa-ask-btn .en { font-family: 'Manrope', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.9; }
.fatwa-ask-btn .chev { font-family: 'Manrope', sans-serif; font-size: 1.05rem; opacity: .85; }

/* stack on narrow screens: category index above the list */
@media (max-width: 820px) {
  .fatwa-layout { grid-template-columns: 1fr; gap: 18px; }
  .fatwa-side { position: static; order: -1; }
}

/* ---- numbered pagination (RTL) ---- */
.fatwa-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  margin-top: 30px; direction: rtl; }
.fp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  border-radius: 9px; font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: background .18s, color .18s, border-color .18s; }
.fp-btn:hover { border-color: var(--accent); color: var(--accent); }
.fp-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.fp-btn.fp-nav { color: var(--ink-soft); }
.fp-btn.fp-nav svg { width: 18px; height: 18px; }
.fp-btn.is-disabled { opacity: .35; cursor: default; pointer-events: none; }
.fp-gap { padding: 0 2px; color: var(--ink-mute); align-self: flex-end; }

.fatwa-empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.fatwa-empty .fatwa-empty-ur { font-family: 'Faiz Lahori Nastaleeq','AlQalam-Taj-Nastaleeq','Noto Nastaliq Urdu','Amiri',serif;
  direction: rtl; font-size: 1.3rem; line-height: 2.2; color: var(--ink); margin-bottom: 6px; }

@media (max-width: 560px) {
  .fatwa-qtext { font-size: 1.5rem; }
  .fatwa-a-body .fw-sawal, .fatwa-a-body .fw-jawab, .fatwa-a-body .fw-para { font-size: 1.42rem; }
  .fatwa-a-body .fw-bism { font-size: 1.4rem; }
  .fatwa-a-body .fw-sawal .f-lbl, .fatwa-a-body .fw-jawab .f-lbl,
  .fatwa-a-body .f-ar, .fatwa-a-body .f-quran { font-size: 1.25rem; }
  .fatwa-a-body { margin: 0 8px; }
}