/* =============================================================================
   SILSILA QADRIA — durood.css  (styles for durood.html only)
   Loaded AFTER styles.css, so it reuses the same pigments and components
   (nav, loader, buttons, sec-head, invocation, footer) and only adds what the
   Durood page needs.
   ============================================================================= */

:root{
  --arabic:"Amiri","Noto Naskh Arabic","Scheherazade New","Traditional Arabic",serif;
  --paper:#FBF7EE;
}

/* Arabic text is set in a Naskh face (not the Nastaliq used for Urdu) */
.d-arabic{
  font-family:var(--arabic);
  direction:rtl;
  unicode-bidi:isolate;
  font-weight:400
}
.sal{font-family:var(--arabic);font-size:1.05em;line-height:1}
html[lang="ur"] .en-only{display:none}

/* current page marker in the nav */
.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{width:100%}

/* =========================== HERO BANNER =========================== */
.d-hero{
  place-items:end center;
  padding-bottom:clamp(60px,9vh,108px)
}
.d-hero .pic{background-position:50% 36%}

/* keep the skyline bright in the upper half; deepen only where the words sit */
.d-hero .hero-veil{
  background:
    linear-gradient(180deg,
      rgba(6,13,31,.62) 0%,
      rgba(6,13,31,.05) 22%,
      rgba(6,13,31,.28) 42%,
      rgba(6,13,31,.70) 60%,
      rgba(6,13,31,.90) 78%,
      var(--lapis-ink) 100%)
}
.d-hero .hero-inner{max-width:860px}
.d-hero .bism{margin-bottom:14px;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.d-hero .note{text-shadow:0 1px 14px rgba(0,0,0,.85);color:rgba(244,239,230,.86)}
.d-hero h1{font-size:clamp(3.2rem,9vw,7rem)}
.d-hero .orn-rule{margin:18px auto 10px}
.d-hero .note{margin:8px auto 30px}

.d-salawat{
  font-size:clamp(1.55rem,4.2vw,3rem);
  line-height:1.9;
  color:var(--gold-pale);
  margin:0 0 6px;
  text-shadow:0 2px 34px rgba(0,0,0,.65);
  text-wrap:balance
}
/* the single orchestrated moment: word by word, right to left */
.d-salawat .w{
  display:inline-block;
  opacity:0;
  transform:translateY(12px);
  filter:blur(5px);
  animation:wordin 1s var(--ease) forwards;
  animation-delay:calc(var(--i) * .16s + .55s)
}
@keyframes wordin{to{opacity:1;transform:none;filter:none}}

.d-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn-solid{background:var(--gold);color:var(--lapis-ink);border-color:var(--gold);font-weight:600}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--gold-lt);border-color:var(--gold-lt)}

/* =========================== THE COMMAND =========================== */
.d-ayah{max-width:820px}
.d-ayah-ar{
  color:var(--gold-pale);
  font-size:clamp(1.4rem,3.4vw,2.2rem);
  line-height:2.3;
  margin:22px 0 4px
}
.d-ref{
  font-family:var(--display);
  color:var(--gold-lt);
  font-size:.95rem;
  margin:0 0 18px
}
html[lang="ur"] .d-ref{font-family:var(--urdu)}
.d-ayah .tr{font-size:1.02rem}
.d-hadith{
  margin:22px auto 0;
  max-width:56ch;
  color:rgba(244,239,230,.86);
  font-family:var(--display);
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  line-height:1.7
}
html[lang="ur"] .d-hadith{font-family:var(--urdu);line-height:2.3}

/* =========================== DUROOD BE-ADDADI =========================== */
.lit-formula{
  max-width:900px;
  margin:0 auto clamp(30px,4vw,46px);
  text-align:center;
  padding:clamp(22px,3vw,34px) clamp(18px,3vw,40px);
  border-block:1px solid rgba(201,162,39,.3)
}
.lf-label{
  font-family:var(--display);
  color:var(--gold-lt);
  font-size:.95rem;
  margin:0 0 12px
}
html[lang="ur"] .lf-label{font-family:var(--urdu)}
.lf-line{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  line-height:1.9;
  color:rgba(244,239,230,.82)
}
html[lang="ur"] .lf-line{font-family:var(--urdu);line-height:2.4}
.lf-slot{
  display:inline-block;
  padding:0 14px;
  margin-inline:4px;
  color:var(--gold-lt);
  border:1px dashed rgba(227,199,103,.6);
  border-radius:2px
}

.lit-hint{
  text-align:center;
  color:rgba(244,239,230,.6);
  font-size:.9rem;
  margin:-14px 0 clamp(26px,3vw,38px)
}

.lit-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))
}
.lit-card{
  display:grid;
  gap:4px;
  width:100%;
  height:100%;
  text-align:start;
  padding:18px 20px 20px;
  border:1px solid rgba(201,162,39,.26);
  background:linear-gradient(180deg,rgba(38,64,111,.34),rgba(12,23,49,.12));
  transition:border-color .3s,background .3s
}
.lit-card:hover,.lit-card:focus-visible{
  border-color:rgba(227,199,103,.85);
  background:linear-gradient(180deg,rgba(38,64,111,.6),rgba(12,23,49,.22))
}
.lc-n{
  font-family:var(--display);
  font-style:italic;
  font-size:.95rem;
  color:var(--gold)
}
.lc-name{
  font-family:var(--display);
  font-weight:500;
  font-size:1.32rem;
  line-height:1.3;
  color:var(--bone);
  overflow-wrap:anywhere
}
.lc-gloss{font-size:.84rem;color:rgba(244,239,230,.62);line-height:1.5}
html[lang="ur"] .lc-name{font-family:var(--urdu);line-height:2;font-size:1.2rem}
html[lang="ur"] .lc-gloss{font-size:.95rem;line-height:2}
html[lang="ur"] .lc-n{font-family:var(--urdu);font-style:normal}

.lit-all{
  max-width:900px;
  margin:clamp(34px,5vw,56px) auto 0;
  padding:clamp(18px,3vw,34px);
  border:1px solid rgba(201,162,39,.3);
  background:rgba(12,23,49,.5)
}
.lit-all[hidden]{display:none}
.lit-lines{margin:0;padding-inline-start:2.2em}
.lit-lines li{
  padding:12px 0;
  border-bottom:1px solid rgba(201,162,39,.16);
  font-family:var(--display);
  font-size:1.05rem;
  line-height:1.75;
  color:rgba(244,239,230,.86)
}
.lit-lines li::marker{color:var(--gold);font-size:.9em}
.lit-lines li:last-child{border-bottom:0}
.ll-fixed{color:rgba(244,239,230,.55)}
.ll-name{color:var(--gold-lt);font-weight:600}
html[lang="ur"] .lit-lines li{font-family:var(--urdu);line-height:2.5}

/* =========================== THE RECITER =========================== */
.reciter{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(24px,4vw,44px) clamp(22px,5vw,64px);
  background:
    radial-gradient(ellipse at 50% 42%,rgba(38,64,111,.55),transparent 62%),
    var(--lapis-ink);
  color:var(--bone);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s
}
.reciter.on{opacity:1;visibility:visible}
.rc-frame{
  position:absolute;
  inset:clamp(12px,2vw,26px);
  border:1px solid rgba(201,162,39,.32);
  pointer-events:none
}
.rc-frame::before,.rc-frame::after{
  content:"";
  position:absolute;
  width:26px;height:26px;
  border:1px solid rgba(227,199,103,.65)
}
.rc-frame::before{top:-1px;inset-inline-start:-1px;border-width:1px 0 0 1px}
.rc-frame::after{bottom:-1px;inset-inline-end:-1px;border-width:0 1px 1px 0}
html[dir="rtl"] .rc-frame::before{border-width:1px 1px 0 0}
html[dir="rtl"] .rc-frame::after{border-width:0 0 1px 1px}

.rc-top{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px
}
.rc-seal{width:26px;height:26px;color:var(--gold-lt);flex:0 0 auto}
.rc-top h3{
  color:var(--bone);
  font-size:1.15rem;
  letter-spacing:.06em;
  margin-inline-end:auto
}
html[lang="ur"] .rc-top h3{letter-spacing:0}
.rc-pos{font-family:var(--display);color:var(--gold-pale);font-size:1.05rem;letter-spacing:.08em}
.rc-auto{padding:6px 16px}
.rc-auto.on{background:var(--gold);color:var(--lapis-ink);border-color:var(--gold)}
.reciter .close{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.45);
  border-radius:50%;
  color:var(--bone)
}

.rc-stage{
  position:relative;
  align-self:center;
  justify-self:center;
  max-width:980px;
  text-align:center;
  padding:24px 0;
  transition:opacity .17s ease,transform .17s ease
}
.rc-stage.swap{opacity:0;transform:translateY(10px)}
.rc-pre,.rc-suf{
  margin:0;
  font-family:var(--display);
  font-size:clamp(.98rem,1.9vw,1.2rem);
  line-height:1.8;
  color:rgba(244,239,230,.62)
}
.rc-name{
  margin:clamp(14px,3vh,28px) 0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.2rem,8.2vw,5.6rem);
  line-height:1.1;
  color:var(--gold-lt);
  overflow-wrap:anywhere;
  text-shadow:0 4px 40px rgba(0,0,0,.45)
}
.rc-gloss{
  margin:-6px 0 clamp(14px,3vh,26px);
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1rem,2vw,1.3rem);
  color:var(--gold-pale)
}
.rc-gloss[hidden]{display:none}
html[lang="ur"] .rc-pre,html[lang="ur"] .rc-suf{font-family:var(--urdu);line-height:2.5}
html[lang="ur"] .rc-name{font-family:var(--urdu);line-height:1.9;font-size:clamp(2rem,7vw,4.6rem)}
html[lang="ur"] .rc-gloss{font-family:var(--urdu);font-style:normal}

.rc-controls{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw,30px);
  max-width:760px;
  width:100%;
  margin-inline:auto;
  padding-bottom:max(6px,env(safe-area-inset-bottom))
}
.rc-btn{
  width:56px;height:56px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.55);
  border-radius:50%;
  color:var(--gold-lt);
  transition:background .3s,color .3s,opacity .3s
}
.rc-btn:hover:not(:disabled),.rc-btn:focus-visible{background:var(--gold);color:var(--lapis-ink)}
.rc-btn:disabled{opacity:.3;cursor:default}
.rc-next{width:68px;height:68px;background:rgba(201,162,39,.14)}
html[dir="rtl"] .rc-btn svg{transform:scaleX(-1)}
.rc-progress{flex:1;height:2px;background:rgba(201,162,39,.2);overflow:hidden}
.rc-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width .35s var(--ease)}
html[dir="rtl"] .rc-progress span{margin-inline-start:auto}

/* =========================== THE COLLECTION (light manuscript pages) =========================== */
.d-collection{background:var(--bone);overflow:hidden}
.d-collection .tile-bg{opacity:.05}

.dp-index{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  max-width:900px;margin:0 auto clamp(34px,5vw,56px)
}
.d-chip{
  border:1px solid rgba(22,40,79,.3);
  padding:8px 18px;
  font-size:.86rem;
  color:var(--lapis);
  transition:background .3s,border-color .3s
}
.d-chip:hover,.d-chip:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--lapis-ink)}
html[lang="ur"] .d-chip{font-size:1rem}

.dp-list{display:grid;gap:clamp(28px,4vw,48px);max-width:980px;margin-inline:auto}
.dp{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(201,162,39,.55);
  padding:clamp(26px,4vw,52px) clamp(20px,4vw,56px);
  box-shadow:0 34px 70px -52px rgba(12,23,49,.7);
  scroll-margin-top:96px
}
.dp::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(201,162,39,.28);
  pointer-events:none
}
.dp-head{text-align:center;max-width:62ch;margin:0 auto clamp(20px,3vw,32px)}
.dp-title{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--lapis)}
.dp-sub{margin:12px 0 0;color:var(--slate);font-size:.96rem;line-height:1.7}
html[lang="ur"] .dp-sub{font-size:1rem;line-height:2.3}
.dp-ar{
  text-align:center;
  color:var(--lapis-deep);
  font-size:clamp(1.3rem,2.7vw,1.95rem);
  line-height:2.4;
  margin:0 auto clamp(22px,3vw,34px);
  padding-block:clamp(16px,2.4vw,26px);
  border-block:1px solid rgba(201,162,39,.4)
}
.dp-cols{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr}
@media(min-width:820px){.dp-cols:has(.dp-col + .dp-col){grid-template-columns:1fr 1fr}}
.dp-lbl{
  font-family:var(--display);
  font-size:.8rem;
  font-weight:500;
  color:var(--madder);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 10px
}
html[lang="ur"] .dp-lbl{font-family:var(--urdu);letter-spacing:0;text-transform:none;font-size:1.02rem}
.dp-tr{font-style:italic;color:var(--slate);margin:0;line-height:1.85}
.dp-mean{margin:0;color:var(--body-fg)}
html[lang="ur"] .dp-mean{max-width:none;line-height:2.5}
.dp-ur .dp-cols{max-width:760px;margin-inline:auto}

.dp-tools{
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
  margin-top:clamp(22px,3vw,34px);
  padding-top:18px;
  border-top:1px solid rgba(22,40,79,.14)
}
.dp-copy,.dp-reset{
  border:1px solid rgba(22,40,79,.3);
  padding:8px 20px;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lapis);
  transition:background .3s,border-color .3s
}
.dp-copy:hover,.dp-reset:hover{background:var(--gold);border-color:var(--gold);color:var(--lapis-ink)}
html[lang="ur"] .dp-copy,html[lang="ur"] .dp-reset{letter-spacing:0;text-transform:none;font-size:.95rem;padding:4px 20px}
.dp-counter{display:flex;align-items:center;gap:10px}
.dp-tap{
  display:flex;align-items:baseline;gap:10px;
  padding:6px 22px;
  background:var(--lapis);
  color:var(--bone);
  border:1px solid var(--lapis);
  transition:background .25s
}
.dp-tap:hover{background:var(--lapis-soft)}
.dp-tap:active{background:var(--lapis-ink)}
.dp-n{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--gold-lt);min-width:2ch;text-align:center;line-height:1.3}
.dp-tap span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
html[lang="ur"] .dp-tap span{letter-spacing:0;text-transform:none;font-size:.95rem}

.dp-note{
  display:block;
  text-align:center;
  max-width:64ch;
  margin:clamp(36px,5vw,56px) auto 0;
  color:var(--slate);
  font-size:.86rem;
  line-height:1.8
}

/* =========================== CLOSING =========================== */
.d-close{max-width:760px}
.d-close-ar{color:var(--gold-pale);font-size:clamp(1.3rem,3vw,1.9rem);line-height:2.4;margin:18px 0 10px}
.d-close .tr{margin-bottom:10px}

/* =========================== RTL, SMALL SCREENS, PRINT =========================== */
html[dir="rtl"] .lit-lines{padding-inline-start:2.4em}

@media(max-width:720px){
  .d-hero{padding-inline:calc(var(--rail) + 6px)}
  .d-cta .btn{flex:1 1 100%;justify-content:center;text-align:center;letter-spacing:.08em;padding-inline:18px}
  .rc-btn{width:50px;height:50px}
  .rc-next{width:60px;height:60px}
  .rc-auto{display:none}
}

@media print{
  .reciter,.dp-tools,.chain-tools,.dp-index,.d-hero,.d-cta{display:none !important}
  .lit-all[hidden]{display:block !important}
  .dp{box-shadow:none;break-inside:avoid}
}