/* ===========================================================================
   bible_tafseer — التفاسير tab styles (DEV)
   Accordion cards (one per interpreter) + normalization of the imported
   commentary HTML so the page's huge inline fonts/styles fit the card.
   =========================================================================== */

#xref-sidebar .scs-panel[data-scs-panel="tafseer"] { padding: 10px 12px 22px; }

#xref-sidebar .taf-empty,
#xref-sidebar .taf-loading,
#xref-sidebar .taf-whole,
#xref-sidebar .taf-na {
  padding: 22px 14px; text-align: center; color: #6b7d99;
  font-size: 15px; line-height: 1.7;
}
#xref-sidebar .taf-na { padding: 12px; text-align: start; }
#xref-sidebar .taf-na a,
#xref-sidebar .taf-whole a,
#xref-sidebar .taf-range a { color: #1668cd; font-weight: 700; text-decoration: none; }
#xref-sidebar .taf-na a:hover,
#xref-sidebar .taf-whole a:hover,
#xref-sidebar .taf-range a:hover { text-decoration: underline; }

/* Accordion */
#xref-sidebar .taf-acc { display: flex; flex-direction: column; gap: 8px; }
#xref-sidebar .taf-card {
  border: 1px solid #d4dbe1; border-radius: 8px; overflow: hidden; background: #fff;
}
/* Card header is gray-tinted so each interpreter's bar reads apart from
   from the white commentary body; the OPEN card gets a solid green bar. */
#xref-sidebar .taf-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; cursor: pointer; border: none;
  background: #e9edf0;
  border-inline-start: 4px solid var(--scs-primary, #5d6b78);
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: #3d4750;
  text-align: start; line-height: 1.5;
  transition: background .15s, color .15s;
}
#xref-sidebar .taf-head:hover { background: #dde3e8; }
#xref-sidebar .taf-card.taf-open .taf-head {
  background: var(--scs-primary, #5d6b78); color: #ffffff;
}
#xref-sidebar .taf-arrow { color: var(--scs-primary, #5d6b78); flex-shrink: 0; transition: transform .15s; }
#xref-sidebar .taf-card.taf-open .taf-arrow { transform: rotate(90deg); color: #ffffff; }
#xref-sidebar[data-lang="ar"] .taf-card.taf-open .taf-arrow { transform: rotate(-90deg); }
#xref-sidebar .taf-title { flex: 1; }

/* Body open/close is ANIMATED via the grid-rows trick (0fr→1fr animates to the
   natural height, whatever the content size). The single .taf-inner child holds
   everything and clips during the transition. */
#xref-sidebar .taf-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
#xref-sidebar .taf-card.taf-open .taf-body { grid-template-rows: 1fr; }
#xref-sidebar .taf-inner { min-height: 0; overflow: hidden; border-top: 1px solid #e1e9f5; }
#xref-sidebar .taf-card:not(.taf-open) .taf-inner { border-top-color: transparent; }
#xref-sidebar .taf-range {
  padding: 7px 12px; background: #eef1f3; font-size: 13px; color: #45525c;
  border-bottom: 1px solid #dfe4e8;
}

/* Imported commentary content — normalize the page's inline styling. */
#xref-sidebar .taf-content {
  padding: 12px 13px; line-height: 1.95; font-size: 14pt; color: #1a2a3f;
  direction: rtl; text-align: justify; word-wrap: break-word; overflow-wrap: break-word;
}
/* Force EVERY descendant to ONE ABSOLUTE size — NOT `inherit`. The imported
   pages carry huge inline point fonts (e.g. <span style="font-size:18pt">),
   and the Song-of-Songs / scripture quotes wrap that inline-sized <span> in
   <b><i>. An absolute px with !important overrides inline `pt` in every browser
   and can NEVER be re-grown by the inheritance chain or by `em` compounding —
   whereas `font-size: inherit` left a window where the size resolved back to
   the page's inline value, so those bold/italic quotes rendered far larger than
   the body text. Bold/italic now differ by weight/slant only, never size. */
#xref-sidebar .taf-content,
#xref-sidebar .taf-content * {
  max-width: 100% !important;
  font-size: 14pt !important;
  line-height: inherit !important;
  /* Explicit SERIF stack (not `inherit`): the commentary body is Times New Roman,
     and italic Arabic (<i> / font-style:italic on the Pauline pages) must stay in
     the SAME serif font — `inherit` let italic Arabic fall back to a sans face
     (Tahoma-like). Ending the stack in `serif` keeps the slanted italic serif too. */
  font-family: "Times New Roman", "Traditional Arabic", "Simplified Arabic", serif !important;
  color: inherit;
}
#xref-sidebar .taf-content b,
#xref-sidebar .taf-content strong { font-weight: 700; }
/* Headings keep a modest, FIXED (absolute, capped) step-up. The `, … *` half
   forces the cap onto the inline-sized <span> the heading text actually sits
   in, so it applies — but can never exceed these values. */
#xref-sidebar .taf-content h1, #xref-sidebar .taf-content h1 * { font-size: 17pt !important; font-weight: 700; }
#xref-sidebar .taf-content h2, #xref-sidebar .taf-content h2 * { font-size: 16pt !important; font-weight: 700; }
#xref-sidebar .taf-content h3, #xref-sidebar .taf-content h3 * { font-size: 15pt !important; font-weight: 700; }
#xref-sidebar .taf-content img { height: auto !important; border-radius: 5px; margin: 8px auto; display: block; }
/* Word/other links in BLUE, NO underline (underline only on hover); scripture
   references in GREEN (override below). A "bookmark" — an <a name> anchor with NO
   href — is NOT a link, so it drops the blue + underline and reads as plain text. */
#xref-sidebar .taf-content a[href] { color: #1668cd !important; text-decoration: none; }
#xref-sidebar .taf-content a[href]:hover { text-decoration: underline; }
#xref-sidebar .taf-content a:not([href]) { color: inherit !important; text-decoration: none; cursor: text; }
#xref-sidebar .taf-content table { width: 100% !important; }
#xref-sidebar .taf-content p { margin: 0 0 10px; }

/* Image blocks: FLOAT them (the source marks them align="left") so the tafsir
   text wraps around the image + its collapsed caption — instead of the image
   taking a full-width band the way it did before. */
#xref-sidebar .taf-content table:has(img),
#xref-sidebar .taf-content table[align="left"] {
  float: left !important;
  width: 40% !important;
  max-width: 230px !important;
  margin: 2px 14px 8px 0 !important;   /* gap toward the right-side text */
  clear: none !important;
}
#xref-sidebar .taf-content table:has(img) img,
#xref-sidebar .taf-content table[align="left"] img { width: 100% !important; margin: 0 !important; }
#xref-sidebar .taf-content table:has(img) td,
#xref-sidebar .taf-content table[align="left"] td { padding: 0 !important; }

/* Image caption — the «وصف الصورة» button stays UNDER the image (inside its floated
   cell); clicking opens a floating POPUP (.taf-cap-pop on <body>) holding the caption,
   sized to half the sidebar on desktop / full width on mobile. The button keeps the
   lavender #DBDAEC. */
#xref-sidebar .taf-content .taf-cap { margin: 3px 0 2px; }
#xref-sidebar .taf-content .taf-cap-sum {
  cursor: pointer; font-family: inherit; font-size: 10px !important; font-weight: 700;
  color: #3d4658; background: #DBDAEC; border: 1px solid #c3c2dd;
  border-radius: 4px; padding: 1px 6px; line-height: 1.6; white-space: nowrap;
}
#xref-sidebar .taf-content .taf-cap-sum::before { content: "🖼"; margin-inline-end: 3px; }

/* The floating caption popup — selectable / copyable, links clickable. Lives on
   <body> so it escapes the card's overflow + the image float's width cap. Fades in/out
   (opacity + slight rise) like the verse popup; JS sizes + positions it. */
.taf-cap-pop {
  position: fixed; z-index: 100000; box-sizing: border-box;
  max-width: 94vw; max-height: 62vh; overflow: auto;
  background: #ededf0; border: 1px solid #c3c2dd; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 9px 11px;
  direction: rtl; text-align: right;
  -webkit-user-select: text; user-select: text;
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.taf-cap-pop.taf-cap-pop-on { opacity: 1; transform: translateY(0); }
.taf-cap-pop, .taf-cap-pop * {
  font-size: 12.5px !important; color: #5a6b85 !important; line-height: 1.6 !important;
}
.taf-cap-pop img { max-width: 100%; height: auto; }
/* Verse-reference links inside a caption: keep the green colour + dotted underline. */
.taf-cap-pop a.autoverse {
  color: #1f8f4a !important; background: transparent !important; padding: 0 !important;
  text-decoration: none; border-bottom: 1px dotted #1f8f4a; white-space: nowrap; font-weight: 700;
}

/* Mobile image lightbox (Task H): tap a sidebar image → it opens enlarged in this
   modal (instead of leaving for the Gallery page); tap anywhere to close. Sits above
   the sidebar and the floating verse indicators. */
.taf-lb {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100090;
  background: rgba(10,16,30,.86); display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .2s ease; cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}
.taf-lb.taf-lb-on { opacity: 1; }
.taf-lb img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 6px; box-shadow: 0 12px 44px rgba(0,0,0,.55);
  transform: scale(.94); transition: transform .2s ease;
}
.taf-lb.taf-lb-on img { transform: scale(1); }

/* Scripture references auto-linked from plain text — the WHOLE reference is the
   link, coloured GREEN (like the original interpretation page) to set it apart
   from the blue word links. */
#xref-sidebar .taf-content a.autoverse {
  color: #1f8f4a !important; font-weight: 700; text-decoration: none;
  background: #e7f5ec; border-radius: 4px; padding: 0; white-space: nowrap;
}
#xref-sidebar .taf-content a.autoverse:hover { text-decoration: underline; background: #d4eedd; }

/* Footnote markers like (66): styled to look clickable (blue, dotted underline,
   pointer) so users notice them; hovering shows the footnote text in a popup
   positioned by JS on document.body (.taf-fn-pop, below). */
#xref-sidebar .taf-content .taf-fn {
  cursor: pointer; color: #1668cd !important; font-weight: 700;
  border-bottom: 1px dotted #1668cd; border-radius: 2px; padding: 0 1px;
}
#xref-sidebar .taf-content .taf-fn:hover { background: #e8f1ff; }

/* Catena Aurea (stored-text) cards: each gloss is its own paragraph, the
   Church Father's name bolded inline in the theme colour so the patristic
   structure reads clearly. (Remove-safe: only applies to .taf-catena.) */
#xref-sidebar .taf-content .taf-catena p { margin: 0 0 13px; }
#xref-sidebar .taf-content .taf-catena p:last-child { margin-bottom: 0; }
#xref-sidebar .taf-content .taf-father { color: var(--scs-primary, #5d6b78); font-weight: 700; }

/* Footnote popup — appended to <body> (NOT inside .taf-content), so it escapes
   the card's overflow clipping and the .taf-content width caps that were
   squashing the old tooltip into a vertical sliver. */
.taf-fn-pop {
  position: fixed; z-index: 100000;
  max-width: 300px;
  background: #2c3540; color: #ffffff;
  font: 400 13px/1.6 Arial, "Segoe UI", Tahoma, sans-serif;
  direction: rtl; text-align: right;
  padding: 9px 12px; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.32);
  pointer-events: none; white-space: pre-wrap; word-wrap: break-word;
}