/* ==========================================
   Holy Quran Layout - Elegant Arabic Edition
   Author: Mr. Rajab Baig
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Noto+Nastaliq+Urdu&family=Scheherazade+New&display=swap');

body {
  background: #fff;
  direction: rtl;
  text-align: justify;
  font-family: "Traditional Arabic", "Amiri", "Noto Nastaliq Urdu", "Scheherazade New", serif;
  color: #8B4513; /* brown */
  margin: 20px;
  line-height: 2;
  font-size: 36pt;
  font-weight: bold;
}

/* --- Titles --- */
.part-title {
  font-size: 46pt;
  font-weight: bold;
  text-align: center;
  margin: 30px 0 20px;
  color: #8B4513;
}

.surah-title {
  font-size: 38pt;
  font-weight: bold;
  text-align: center;
  margin: 25px 0 12px;
  color: #8B4513;
}

/* --- Ayah text --- */
.ayah {
  font-size: 36pt;
  margin: 14px 0;
  display: block;
  text-align: justify;
  color: #8B4513;
}

/* --- Verse number --- */
.verse-num {
  font-size: 32pt;
  font-weight: bold;
  color: #8B4513;
  margin: 0 6px;
  display: inline-block;
}
/* --- Superscript & Subscript --- */
sup, sub {
  font-size: 70%;
  vertical-align: baseline;
  position: relative;
  color: #8B4513;
}

sup { top: -0.4em; }
sub { bottom: -0.3em; }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
  body { font-size: 24pt; margin: 10px; }
  .part-title { font-size: 34pt; }
  .surah-title { font-size: 30pt; }
  .ayah { font-size: 26pt; }
  .verse-num { font-size: 24pt; }
}