/* fan/islam.css: /worlds/islam/ only.

   The page loads al-islam.css for the mosque elevations, the prophet and
   scholar cards and the geometric backdrop, and fanpages.css for the section
   shell. This file is only the difference between the two: the green accent
   over the fan-page furniture, and the Arabic typography the ninety-nine names
   need. */

body[data-fan="islam"] { --a: var(--green-2); }

/* ── hero ── */
body[data-fan="islam"] .fan-title {
  background: linear-gradient(180deg, #eafff4, #3fd589 58%, #1f9d5c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the bismillah above the title, set properly rather than as a picture */
.isl-bismillah {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: clamp(1.5rem, 4.4vw, 2.6rem); line-height: 1.9;
  color: var(--green-2); opacity: .9; margin-bottom: 0.4rem;
  /* dir="rtl" would otherwise push it to the right edge of the hero; it is a
     display line sitting above the title, so it lines up with the title */
  text-align: left;
  text-shadow: 0 0 40px rgba(63,213,137,.28);
}

.isl-bismillah-en {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 1.4rem;
}

/* ── the ninety-nine names ──
   The tile `i` slot is mono by default, which is fine for a year and entirely
   wrong for a name of Allah. Amiri, at a size that can actually be read. */
body[data-fan="islam"] #names .fan-tiletext i {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 1.32rem; line-height: 1.6; letter-spacing: 0;
  direction: rtl; text-align: right; opacity: 1;
  color: var(--green-2); text-transform: none;
}

body[data-fan="islam"] #names .fan-tiletext b { font-size: 0.86rem; letter-spacing: -0.01em; }

body[data-fan="islam"] #names .fan-tiletext em { font-size: 0.7rem; color: var(--mute); }

body[data-fan="islam"] #names .fan-tiles { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

body[data-fan="islam"] #names .fan-tile { align-items: center; }

/* the same treatment for the six articles, which also carry Arabic in `sub` */
body[data-fan="islam"] #iman .fan-tiletext i {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 1.15rem; direction: rtl; letter-spacing: 0; text-transform: none;
  color: var(--a); opacity: 1;
}

/* ── the section headings on this page take the Arabic name as their note ── */
body[data-fan="islam"] .subsec--fan .subsec-yr {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 1.05rem; letter-spacing: 0; text-transform: none;
}

/* ── the blocks moved over from /al-islam/ ──
   They arrive with their own section padding from al-islam.css; these keep
   them on the same rhythm as the fan-page sections above them. */
body[data-fan="islam"] .mosques,
body[data-fan="islam"] .prophets,
body[data-fan="islam"] .scholars {
  padding-left: var(--gutter); padding-right: var(--gutter);
  max-width: var(--maxw); margin-bottom: 3.4rem;
}

body[data-fan="islam"] .isl-lede {
  max-width: 70ch; margin: -0.6rem 0 1.8rem;
  color: var(--ink-dim); font-size: 0.96rem; line-height: 1.75;
}

/* the verse plate under the hero */
.isl-verse {
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 3.4rem;
}

.isl-verse-in {
  padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 18px;
  border: 1px solid rgba(63,213,137,.22);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(63,213,137,.08), transparent 62%),
    rgba(8, 14, 11, 0.6);
  text-align: center;
}

.isl-verse-ar {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: clamp(1.3rem, 3.4vw, 2rem); line-height: 2.1;
  color: var(--ink); margin-bottom: 1rem;
}

.isl-verse-en {
  font-family: var(--serif); font-style: italic; font-size: clamp(0.98rem, 2vw, 1.2rem);
  line-height: 1.7; color: var(--ink-dim); max-width: 54ch; margin: 0 auto 0.9rem;
}

.isl-verse-ref {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-2); opacity: .85;
}

@media (max-width: 520px) {
  body[data-fan="islam"] #names .fan-tiles { grid-template-columns: 1fr 1fr; }
  body[data-fan="islam"] #names .fan-tiletext em { display: none; }
}