/* mfa-core quran-page.css — styling for [mfa_quran_page], the /quran/
   landing page. Plain HTML, no Kadence blocks, so no !important needed
   anywhere here (nothing else generates competing CSS for these classes).
   The two-column row now comes from global-v3.css; this file keeps only
   what is specific to /quran/. */

.mfa-quran-page { font-family: var(--mfa-font, "Lato", sans-serif); max-width: var(--mfa-container-max); margin: 0 auto; }

.mfa-quran-header {
  text-align: center;
  padding: 48px 24px 36px;
  background: linear-gradient(150deg, var(--mfa-ink) 0%, var(--mfa-green-dark) 100%);
  color: var(--mfa-mint-bg);
  border-radius: 0;
  margin-bottom: 32px;
}
@media (min-width: 901px) {
  .mfa-quran-header { border-radius: 16px; }
}
.mfa-quran-header h1,
.mfa-quran-header h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--mfa-white);
}
.mfa-quran-tagline {
  max-width: 640px;
  margin: 0 auto 14px;
  font-size: 16px;
  line-height: 1.6;
  color: #cfe3e0;
}
.mfa-quran-steps {
  font-size: 18px;
  color: #5cfce8;
  margin: 0;
}

/* ---------- Ad column, mobile ----------
   The row itself now comes from global-v3.css (.mfa-row / .mfa-row-main /
   .mfa-row-side); this file's own copy of it was removed when the page was
   converted. What is genuinely local is the treatment below: on a phone the
   ad rail sits under a long article, so it is set off with a tint and a gap
   rather than running straight on from the text. Scoped to this page so it
   does not follow .mfa-row-side everywhere. */
@media (max-width: 900px) {
  .mfa-quran-page .mfa-row-side {
    margin-top: var(--mfa-space-9);
    padding: var(--mfa-space-6) var(--mfa-space-5);
    background-color: var(--mfa-mint-bg);
  }
}

/* ---------- Surah selector (centered within its column) ---------- */
.mfa-quran-page .m4a-surah-selector-wrapper {
  margin: 0 auto 32px;
}

/* ---------- Article ---------- */
.mfa-quran-article-post {
  border-top: 1px solid var(--mfa-border);
  padding-top: 28px;
  margin-top: 28px;
}
.mfa-quran-article h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--mfa-ink);
  margin: 0 0 16px;
}
/* #25988b was 3.53:1 against white - fails 4.5:1 at this size/weight
   (regular, not "large text"). var(--mfa-teal-dark) clears it (~4.96:1). */
.mfa-quran-article a {
  color: var(--mfa-teal-dark);
  text-decoration: underline;
}
.mfa-quran-article h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--mfa-ink);
  margin: 28px 0 12px;
}
.mfa-quran-article p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #3d4a45;
  margin: 0 0 14px;
}
.mfa-quran-article ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.mfa-quran-article li {
  font-size: 15.5px;
  line-height: 1.75;
  color: #3d4a45;
  margin-bottom: 6px;
}
.mfa-quran-article strong { color: var(--mfa-ink); }
.mfa-quran-article hr {
  border: none;
  border-top: 1px solid var(--mfa-border);
  margin: 28px 0;
}

/* ---------- Ad column ---------- */
.mfa-quran-ad-heading {
  text-align: center;
  font-size: 14.5px;
  font-style: italic;
  font-weight: 600;
  color: #56655f;
  margin: 0 0 16px;
}