/* ── Ashaar.js — default stylesheet ─────────────────────────────────────── */

/* Custom properties — override to theme */
.ashaar {
  --ashaar-font-family: "Noto Nastaliq Urdu", "Scheherazade New", "Amiri", serif;
  --ashaar-font-size:   1.4rem;
  --ashaar-line-height: 2.4;
  --ashaar-color:       inherit;
  --ashaar-refrain-color: #b00;
  --ashaar-gap-width:   3%;
  --ashaar-gap-color:   currentColor;
  --ashaar-gap-symbol-size: 0.8em;
  --ashaar-stanza-gap:  1.8em;
  --ashaar-poem-gap:    3em;
  --ashaar-stack-indent: 1.75em;
  --ashaar-stack-measure: 62%;
  --ashaar-stack-vertical-alternate-measure: 75%;
  --ashaar-stack-offset-alternate-measure: 44%;
  --ashaar-stack-offset-alternate-clearance: 10%;
  --ashaar-stack-alternate-gap: 0.85em;
  --ashaar-bayt-gap:    0;

  font-family: var(--ashaar-font-family);
  font-size:   var(--ashaar-font-size);
  line-height: var(--ashaar-line-height);
  color:       var(--ashaar-color);
  direction:   rtl;
  text-align:  right;
}

/* ── Poem ─────────────────────────────────────────────────────────────── */

.ashaar-poem + .ashaar-poem {
  margin-top: var(--ashaar-poem-gap);
}

/* ── Stanza ───────────────────────────────────────────────────────────── */

.ashaar-stanza {
  display: flex;
  flex-direction: column;
}

.ashaar-stanza + .ashaar-stanza {
  margin-top: var(--ashaar-stanza-gap);
}

/* ── Bayt ─────────────────────────────────────────────────────────────── */

.ashaar-bayt {
  display:         flex;
  flex-direction:  row;         /* RTL: first child → right, last → left  */
  align-items:     baseline;
  width:           100%;
  margin-block:    var(--ashaar-bayt-gap);
}

/* Solo misra — full-width centred */
.ashaar-bayt--solo {
  justify-content: center;
}

.ashaar-misra-row {
  display:      flex;
  direction:    rtl;
  align-items:  baseline;
  width:        100%;
}

/* ── Hemistiches ──────────────────────────────────────────────────────── */

.ashaar-misra {
  flex:                1 1 0;
  min-width:           0;
  text-align:          center;
  /* Enable contextual alternates (includes kashida glyphs in Amiri/Scheherazade) */
  font-feature-settings: "calt" 1, "kern" 1;
}

/* Sadr appears on the right in RTL row (first DOM child) */
.ashaar-misra--sadr {
  text-align: left;
}

/* Ajuz appears on the left (last DOM child) */
.ashaar-misra--ajuz {
  text-align: right;
}

/* Full-width solo misra */
.ashaar-misra--solo {
  flex:       none;
  text-align: center;
  width:      100%;
}

.ashaar-misra--row {
  flex:       1 1 0;
  min-width:  0;
  text-align: center;
}

/* ── CSS-native justification (opt-in via class or init({justify:'css'})) ─ */
/* Uses browser's built-in kashida justification for RTL Arabic text.        */

.ashaar--justify .ashaar-misra--sadr,
.ashaar--justify .ashaar-misra--ajuz {
  text-align:   justify;
  text-justify: auto;   /* modern browsers use kashida for RTL Arabic */
}

/* ── Gap between the two hemistiches ─────────────────────────────────── */

.ashaar-gap {
  display:         flex;
  flex:            0 0 var(--ashaar-gap-width);
  align-items:     baseline;
  justify-content: center;
  min-width:       0.5em;
  color:           var(--ashaar-gap-color, currentColor);
  white-space:     nowrap;
}

.ashaar-gap-symbol {
  font-size:   var(--ashaar-gap-symbol-size, 0.8em);
  line-height: 1;
}

/* ── Stacked bayt layout: sadr above, ajuz slightly indented ─────────── */

.ashaar--stacked .ashaar-bayt {
  flex-direction: column;
  align-items:    flex-end;
}

.ashaar--stacked .ashaar-bayt:not(.ashaar-bayt--solo) {
  width: var(--ashaar-stack-measure);
  margin-inline: auto;
}

.ashaar--stacked .ashaar-misra--sadr,
.ashaar--stacked .ashaar-misra--ajuz {
  flex:       none;
  width:      100%;
  text-align: right;
}

.ashaar--stacked .ashaar-misra--ajuz {
  transform: translateX(calc(-1 * var(--ashaar-stack-indent)));
}

.ashaar--stacked.ashaar--stack-vertical .ashaar-misra--ajuz {
  transform: none;
}

.ashaar--stacked .ashaar-gap {
  display: none;
}

.ashaar--stacked.ashaar--stack-right .ashaar-bayt:not(.ashaar-bayt--solo) {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.ashaar--stacked.ashaar--stack-alternate .ashaar-bayt:not(.ashaar-bayt--solo) {
  margin-block: var(--ashaar-stack-alternate-gap);
}

.ashaar--stacked.ashaar--stack-vertical.ashaar--stack-alternate {
  --ashaar-stack-measure: var(--ashaar-stack-vertical-alternate-measure);
}

.ashaar--stacked.ashaar--stack-offset.ashaar--stack-alternate {
  --ashaar-stack-measure: min(
    var(--ashaar-stack-offset-alternate-measure),
    calc((100% - var(--ashaar-stack-offset-alternate-clearance)) / 2)
  );
}

.ashaar--stacked.ashaar--stack-alternate .ashaar-bayt:not(.ashaar-bayt--solo):nth-child(odd) {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.ashaar--stacked.ashaar--stack-alternate .ashaar-bayt:not(.ashaar-bayt--solo):nth-child(even) {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.ashaar--stacked.ashaar--stack-alternate .ashaar-bayt--solo {
  width: 100%;
}

/* ── Refrain colouring ────────────────────────────────────────────────── */

.ashaar-misra--refrain {
  color: var(--ashaar-refrain-color);
}

/* ── Responsive: collapse to single column on narrow screens ─────────── */

@media (max-width: 36em) {
  .ashaar-bayt {
    flex-direction: column;
    align-items:    center;
  }

  .ashaar-misra-row {
    flex-direction: column;
    align-items: center;
  }

  .ashaar-misra--sadr,
  .ashaar-misra--ajuz,
  .ashaar-misra--row {
    text-align: center;
    width:      100%;
    flex:       none;
  }

  .ashaar-gap {
    display: none;
  }
}