/* ==========================================================================
   THE CURRENT — Component System
   All 8 special block types: 4 inherited, 4 new.
   ========================================================================== */

/* ==========================================================================
   INHERITED BLOCKS
   ========================================================================== */

/* ---- 1. Quran Block (.ayah-block) ----
   Gold left border, italic Cormorant. For Quranic ayat.
   Visually the most prominent block — the word of Allah takes priority.
   ========================================================================== */
.ayah-block {
  border-left: 4px solid var(--gold);
  background-color: var(--gold-light);
  padding: var(--space-lg) var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.ayah-block .ayah-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--gold);
  margin-bottom: var(--space-sm);
  font-style: normal;
  letter-spacing: 0.02em;
}

.ayah-block .ayah-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--text);
}

.ayah-block .ayah-ref {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--gold);
  font-weight: var(--weight-semibold);
}

/* ---- 2. Hadith Block (.hadith-block) ----
   Green left border, italic Cormorant. For Prophetic narrations.
   Softer background than ayah block — hadith defers to Quran visually.
   ========================================================================== */
.hadith-block {
  border-left: 4px solid var(--accent);
  background-color: var(--accent-light);
  padding: var(--space-lg) var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.hadith-block .hadith-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--text);
}

.hadith-block .hadith-narrator {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* ---- 3. Reflection Block (.reflect-box) ----
   Distinct warm gray-cream background. Separate from ayah block.
   ========================================================================== */
.reflect-box {
  background-color: var(--bg-reflect);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.reflect-box .reflect-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.reflect-box p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
}

/* ---- 4. Note Box (.note-box) ----
   Dashed border. For caveats, disclaimers, and clarifications.
   ========================================================================== */
.note-box {
  border: 1.5px dashed var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  background-color: var(--bg);
}

.note-box .note-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: var(--space-sm);
}

.note-box p {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.65;
}


/* ==========================================================================
   NEW BLOCKS (The Current)
   ========================================================================== */

/* ---- 5. Table Block (.table-block) ----
   For comparative charts, fiqh rulings, inheritance shares, timeline data.
   ========================================================================== */
.table-block {
  margin: var(--space-lg) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-block table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.table-block thead th {
  background-color: var(--accent-structure);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}

.table-block thead th:first-child {
  border-radius: var(--border-radius) 0 0 0;
}

.table-block thead th:last-child {
  border-radius: 0 var(--border-radius) 0 0;
}

.table-block tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text);
}

/* Narrow column — shrinks to content width */
.table-block table th.col-narrow,
.table-block table td.col-narrow {
  width: 1%;
  white-space: nowrap;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Arabic letter cells — large isolated letters */
.table-block table td.arabic-letter {
  font-size: 2rem !important;
  line-height: 1.3;
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  text-align: center;
  direction: rtl;
  vertical-align: middle;
}

/* Arabic example words in tables — cell-level for pure Arabic cells */
.table-block table td.arabic-example {
  font-size: 1.5rem !important;
  line-height: 1.5;
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  direction: rtl;
  vertical-align: middle;
}

/* Inline Arabic within English text — subtle bump, not jarring */
.ar {
  font-size: 1.2em;
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1;
}

.table-block tbody tr:nth-child(even) {
  background-color: var(--bg-aside);
}

.table-block tbody tr:last-child td {
  border-bottom: none;
}

.table-block caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-light);
  text-align: left;
  margin-bottom: var(--space-sm);
  font-weight: var(--weight-medium);
}

/* ---- 6. Step Block (.step-block) ----
   Numbered steps for processes: wudu, salah, zakah calculation.
   Outlined circles — guide rather than demand.
   ========================================================================== */
.step-block {
  margin: var(--space-lg) 0;
}

.step-block .step {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-light);
}

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

.step-block .step-number {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  color: var(--accent-structure);
  border: 2px solid var(--accent-structure-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-top: 2px;
}

.step-block .step-content {
  flex: 1;
}

.step-block .step-title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.step-block .step-desc {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.6;
}

/* ---- 7. Opinion Block (.opinion-block) ----
   Scholarly positions side by side with evidence and school attribution.
   Full-intensity blue-slate header — highest authority structural element.
   ========================================================================== */
.opinion-block {
  margin: var(--space-lg) 0;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.opinion-block .opinion-header {
  background-color: var(--accent-structure);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-md);
}

.opinion-block .opinion {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

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

.opinion-block .opinion:nth-child(even) {
  background-color: var(--bg-aside);
}

.opinion-block .opinion-school {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-structure);
  margin-bottom: var(--space-xs);
}

.opinion-block .opinion-position {
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.opinion-block .opinion-evidence {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.6;
}

.opinion-block .opinion-scholars {
  font-size: var(--text-xs);
  color: var(--text-light);
  margin-top: var(--space-sm);
  font-style: italic;
}

/* ---- 8. Chart / Visual Block (.chart-block) ----
   For tajweed charts, inheritance diagrams, timeline maps.
   Uses mid-intensity blue-slate for title — secondary structural element.
   ========================================================================== */
.chart-block {
  margin: var(--space-lg) 0;
  background-color: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  overflow-x: auto;
  max-width: 100%;
}

.chart-block .chart-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-structure-mid);
  margin-bottom: var(--space-md);
}

.chart-block .chart-content {
  width: 100%;
}

.chart-block .chart-caption {
  font-size: var(--text-xs);
  color: var(--text-light);
  margin-top: var(--space-md);
  font-style: italic;
}


/* ==========================================================================
   SHARED COMPONENT UTILITIES
   ========================================================================== */

/* ---- Disclaimer (bottom of every page) ---- */
.page-disclaimer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.page-disclaimer p {
  font-size: var(--text-xs);
  color: var(--text-light);
  line-height: 1.6;
}

/* ---- Tawhid Thread (closing line of every page) ---- */
.tawhid-thread {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  text-align: center;
}

.tawhid-thread::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--accent);
  margin: 0 auto var(--space-lg);
  border-radius: 2px;
}

.tawhid-thread p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--accent);
  line-height: 1.6;
}

/* ---- Section divider ---- */
.section-divider {
  width: 3rem;
  height: 3px;
  background-color: var(--accent);
  border: none;
  margin: var(--space-xl) 0;
}

/* ---- Unverified badge ---- */
.unverified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}

.unverified-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--badge-border);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .unverified-badge {
    position: static;
    display: inline-flex;
    margin-bottom: var(--space-sm);
  }
}

/* ============================================ */
/* BIBLIOGRAPHY                                 */
/* ============================================ */

.bibliography-section .bib-entry {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border, #e0dcd4);
}

.bibliography-section .bib-entry:last-child {
  border-bottom: none;
}

.bib-author {
  font-weight: 600;
  margin-bottom: 0.15em;
  color: var(--color-heading, #2c2c2c);
}

.bib-title {
  margin-bottom: 0.25em;
  font-size: 1.05em;
}

.bib-desc {
  margin-bottom: 0.25em;
  color: var(--color-text-secondary, #555);
  font-size: 0.95em;
}

.bib-link {
  font-size: 0.9em;
}

.bib-link a {
  color: var(--color-link, #2a6496);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bib-link a:hover {
  color: var(--color-link-hover, #1a4a6e);
}