/* ------------------------------------------------------------------
   Spiritual Socialist Party — the primer
   Read after style.css and party.css, by ila-allah-primer.html alone:
   ila Allah again, as six lessons rather than one page.
   ------------------------------------------------------------------ */

/* Like the readers, the primer is a long column, so it lets go of the
   centring every short page uses and runs down from the top. The name,
   the rule, the basmala and the six lesson names stay put; the lesson
   beneath them changes.                                               */

body.primer{
  height:auto;
  display:block;
  place-items:normal;
  padding:clamp(44px,9vh,96px) max(22px,env(safe-area-inset-right))
          clamp(56px,11vh,112px) max(22px,env(safe-area-inset-left));

  /* Arabic is set in Noto Sans Arabic, which carries the even stroke of
     Inter and of the front page's shahada sigil while keeping the letters
     of every mushaf. Inter has no Arabic, so naming the face after it
     lets each Arabic letter find it, alone or inside an English line. */
  font-family:Inter,"Noto Sans Arabic","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --soft:rgba(233,224,204,.74);       /* bone held back: meanings, notes  */
  --line:rgba(233,224,204,.10);       /* the hairline between steps       */
  --gold-faint:rgba(200,164,76,.26);  /* the site's resting link line     */
}

.primer main{gap:clamp(28px,4.6vh,46px)}

.primer p{margin:0}

[lang="ar"]{letter-spacing:0}

/* --- the opening -------------------------------------------------- */

.basmala{
  font-size:clamp(1.15rem,3.6vw,1.4rem);
  font-weight:300;
  line-height:1.9;
  color:var(--soft);
}

/* --- the six lesson names ----------------------------------------- */
/* Small capitals like "return", each with the gate's gold line drawn
   under the letters alone: full gold under the lesson being read, the
   faint resting line under the pointer, none otherwise.               */

.lessons ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px clamp(22px,3.4vw,38px);
}

.lessons a{
  position:relative;
  display:inline-block;
  padding:10px 0 12px;
  margin-right:-.3em;               /* the trailing letter-space, given back */
  font-size:clamp(.72rem,2vw,.84rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  transition:color 300ms ease;
}

.lessons a::after{
  content:"";
  position:absolute;
  left:0;
  right:.3em;
  bottom:4px;
  height:1px;
  background:transparent;
  transition:background-color 400ms ease;
}

.lessons a:hover,
.lessons a:focus-visible,
.lessons a[aria-current]{color:var(--bone)}

.lessons a:hover::after,
.lessons a:focus-visible::after{background:var(--gold-faint)}

.lessons a[aria-current]::after{background:var(--gold)}

/* three over three on a phone, the columns aligned */
@media (max-width:560px){
  .lessons ul{
    display:grid;
    grid-template-columns:repeat(3,auto);
    justify-content:center;
    justify-items:center;
    column-gap:clamp(18px,6vw,30px);
  }
}

/* --- a lesson ----------------------------------------------------- */

.lesson{
  width:100%;
  max-width:44rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,50px);
}

.lesson[hidden]{display:none}

.lesson.arriving{animation:arrive 700ms ease both}

@keyframes arrive{from{opacity:0}}

/* Its name in Arabic, in the large light hand of the Party pages' ways,
   with the English beneath in the small capitals of their lines. */

.lesson-head,
.sub-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-weight:300;
}

.lesson-head:focus{outline:none}

.lesson-ar{
  font-size:clamp(2.1rem,7.4vw,2.9rem);
  line-height:1.55;
  color:var(--bone);
}

.lesson-en,
.sub-en,
.stage-note,
.pos-term,
.kind,
.hour{
  font-size:clamp(.62rem,1.2vw,.72rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}

.lesson-en,
.sub-en,
.stage-note{text-indent:.32em}     /* centred: the trailing space balanced */

/* --- reading text ------------------------------------------------- */

.prose{
  max-width:34rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--soft);
}

.prose p{text-wrap:pretty}

.prose p + p{margin-top:.75em}

.translit{
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.02rem,2.8vw,1.12rem);
  line-height:1.5;
  color:var(--bone);
}

.meaning{
  font-size:.95rem;
  line-height:1.55;
  color:var(--soft);
}

.lesson b{font-weight:500}
.lesson i{font-weight:300}

/* a way to another lesson, inside a sentence */
.lesson p a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid var(--gold-faint);
  transition:border-color 300ms ease;
}

.lesson p a:hover,
.lesson p a:focus-visible{border-bottom-color:var(--gold)}

/* --- the Shahada, and the ayat of Al-Fatiha ----------------------- */
/* Each line as a stanza: the Arabic, how it sounds, what it says. */

.verses,
.ayat{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,46px);
}

.verse{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.verse p{text-wrap:balance}

.ayat{max-width:38rem}

/* an ayah's last word and its ring never part at a line's end */
.tail{white-space:nowrap}

.ar-display{
  font-size:clamp(1.75rem,6.4vw,2.4rem);
  font-weight:300;
  line-height:1.75;
  color:var(--bone);
}

.ar-verse{
  font-size:clamp(1.45rem,4.8vw,1.85rem);
  font-weight:400;
  line-height:2;
  color:var(--bone);
}

/* The end of each ayah, marked as a mushaf marks it: its number in a
   ring — here a ring of the gold hairline. */

.ayah-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9em;
  height:1.9em;
  margin-inline-start:.15em;
  border:1px solid rgba(200,164,76,.55);
  border-radius:50%;
  font-size:.56em;
  font-weight:400;
  line-height:1;
  color:var(--gold);
  vertical-align:middle;
}

/* --- Wudu and Ghusl: the steps ------------------------------------ */
/* In order, under one another. The obligatory steps carry gold
   numerals, so the fard at the centre of each can be seen at a glance;
   what each step is stands in its own column at the right.            */

.steps,
.positions{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:38rem;
  text-align:left;
  border-top:1px solid var(--line);
}

.steps li{
  display:grid;
  grid-template-columns:2.2rem 1fr auto;
  column-gap:clamp(12px,2.6vw,24px);
  align-items:baseline;
  padding:15px 0 16px;
  border-bottom:1px solid var(--line);
}

/* the numeral, the step, what it is; a note, if any, beneath the step */
.step-no{grid-column:1;grid-row:1}
.step-main{grid-column:2;grid-row:1;line-height:1.6}
.kind{grid-column:3;grid-row:1}
.steps .step-note{grid-column:2;grid-row:2}

.step-no{
  font-size:1.3rem;
  font-weight:300;
  line-height:1;
  text-align:center;
  color:var(--muted);
}

.fard .step-no{color:var(--gold)}

.steps .step-note{
  margin-top:4px;
  font-size:.92rem;
  color:var(--soft);
}

.kind{
  margin-right:-.32em;
  white-space:nowrap;
}

.fard .kind{color:var(--soft)}

/* on a phone the label drops beneath the step, still before its note */
@media (max-width:560px){
  .steps li{grid-template-columns:1.8rem 1fr}
  .kind{grid-column:2;grid-row:2;margin-top:8px}
  .steps .step-note{grid-row:3;margin-top:7px}
}

/* --- Salah -------------------------------------------------------- */
/* The five prayers through the day, one beside another. */

.prayers{
  list-style:none;
  margin:0;
  padding:22px 0;
  width:100%;
  max-width:38rem;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.prayers li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}

.prayer{
  font-size:clamp(1.15rem,2.6vw,1.4rem);
  font-weight:300;
  color:var(--bone);
}

.rakahs{
  font-size:.88rem;
  color:var(--soft);
}

.hour{text-indent:.32em}

/* under one another on a phone, read across */
@media (max-width:560px){
  .prayers{
    grid-template-columns:1fr;
    padding:0;
    border-bottom:0;
  }
  .prayers li{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:baseline;
    padding:13px 0 14px;
    border-bottom:1px solid var(--line);
  }
  .prayer{justify-self:start}
  .hour{justify-self:end;text-indent:0;margin-right:-.32em}
}

.stage{
  width:100%;
  max-width:38rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,3vh,26px);
}

.stage-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:clamp(1.3rem,3.8vw,1.55rem);
  font-weight:300;
  line-height:1.2;
}

.positions li{
  display:grid;
  grid-template-columns:8.4rem 1fr;
  column-gap:clamp(14px,3vw,26px);
  padding:15px 0 16px;
  border-bottom:1px solid var(--line);
}

.pos-name{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:1.02rem;
  line-height:1.6;
}

.pos-body{line-height:1.6}

.pos-body p + p{margin-top:5px}

.pos-body .meaning{margin-top:2px}

@media (max-width:560px){
  .positions li{grid-template-columns:1fr;row-gap:8px}
  .pos-name{flex-direction:row;align-items:baseline;gap:14px}
}

/* --- the alphabet ------------------------------------------------- */
/* Read from the right, as the letters are. */

.letters{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:36rem;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(16px,2.8vh,26px) 6px;
}

.letters li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.glyph{
  font-size:clamp(1.9rem,6vw,2.35rem);
  font-weight:300;
  line-height:1.5;
  color:var(--bone);
}

.roman{
  font-size:.86rem;
  color:var(--soft);
}

.sub-ar{
  font-size:clamp(1.6rem,5vw,2rem);
  line-height:1.6;
  color:var(--bone);
}

.vowels{
  max-width:28rem;
  grid-template-columns:repeat(4,1fr);
}

.vowel{
  margin-top:2px;
  font-size:.8rem;
  line-height:1.4;
  color:var(--muted);
}

@media (max-width:480px){
  .letters{grid-template-columns:repeat(4,1fr)}
}

/* --- the way on --------------------------------------------------- */
/* The next lesson, set as islam.html sets its ways. */

.onward{margin-top:clamp(6px,2vh,18px)}

/* --- quiet motion, and paper -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .lesson.arriving{animation:none}
  .lessons a,.lessons a::after{transition:none}
}

/* Printed, the primer is all six lessons, dark on white. */

@media print{
  body.primer{
    --bone:#000;
    --muted:#555;
    --soft:#222;
    --line:#ccc;
    --gold:#8a6d1f;
    background:#fff;
    padding:0;
  }
  .primer main{animation:none}
  .lesson[hidden]{display:flex}
  .lesson + .lesson{break-before:page}
  .lessons,.onward,.return{display:none}
}


/* --- the Arabic, heavier ------------------------------------------ */
/* Every Arabic word on the page — the basmala, the lesson names, the
   Shahada, the ayat, the letters, the terms set inside English lines —
   is set at medium weight, so the script carries a fuller stroke than
   the light Latin around it. One number: change it here to retune all
   of it. The page loads Noto Sans Arabic from 300 to 700.              */

.primer [lang="ar"]{font-weight:500}


/* --- the stanzas, set as a column --------------------------------- */
/* Wherever a line comes as Arabic, transliteration and meaning — the
   Shahada and the ayat of Al-Fatiha — the three share one narrow
   column: the Arabic set from the right, where it begins, and how it
   sounds and what it says set from the left, where they begin.        */

.verses,
.ayat{
  max-width:30rem;
  align-items:stretch;
}

.verse{align-items:stretch}

.verse [lang="ar"]{text-align:right}

.verse .translit,
.verse .meaning{
  text-align:left;
  text-wrap:pretty;
}

.verse .translit{margin-top:4px}


/* a second recitation within one position — on the Tashahhud, the
   Shahada after the Tahiyyat — stands a little apart from the first */
.pos-body p.then{margin-top:14px}