/* ============================================================================
   ornate.css — "Henna of gold" beautification layer (loads after styles.css)
   Gold-foil headings · girih medallion · mihrab arch covers · arabesque
   dividers · corner ornaments · deeper textures.
   ============================================================================ */

/* ---------- gold-foil shimmering text ---------- */
.foil{
  background:linear-gradient(96deg,#b78a2c 0%,#f4e6b0 22%,#e3c065 40%,#fff4cf 52%,#dcb44f 66%,#b78a2c 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:foilShine 7s linear infinite;
  filter:drop-shadow(0 2px 14px rgba(201,162,39,0.25));
}
@keyframes foilShine{to{background-position:220% center;}}

/* =========================================================================
   HERO — layered, cinematic
   ========================================================================= */
.hero{
  background:
    radial-gradient(90% 70% at 50% 18%,rgba(201,162,39,0.20),transparent 60%),
    radial-gradient(120% 90% at 82% -8%,rgba(201,162,39,0.16),transparent 55%),
    linear-gradient(160deg,#0d5a45 0%,var(--green-800) 45%,var(--green-900) 100%);
}
/* khanqah photo backdrop + green legibility veil */
.hero{overflow:hidden;}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0.5;filter:saturate(1.05) contrast(1.02);
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(85% 70% at 50% 32%,rgba(8,64,49,0.18),rgba(6,46,35,0.72) 80%),
    linear-gradient(180deg,rgba(6,46,35,0.62) 0%,rgba(6,46,35,0.30) 42%,rgba(5,40,30,0.88) 100%);
}
.hero::before{opacity:0.14;}   /* drop the heavy pattern now that a photo is behind */
/* soft golden glow disc behind text */
.hero-inner::before{
  content:'';position:absolute;top:42%;left:50%;width:620px;height:360px;
  transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,247,214,0.14),transparent 72%);
  pointer-events:none;
}
.hero h1{position:relative;}
/* arabesque flourishes flanking the H1 */
.hero h1::before,.hero h1::after{
  content:'';display:inline-block;width:46px;height:30px;vertical-align:middle;margin:0 18px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30' fill='none' stroke='%23e8d59a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 15 H30'/%3E%3Ccircle cx='2' cy='15' r='1.8' fill='%23e8d59a' stroke='none'/%3E%3Cpath d='M30 15 q7-9 13 0 q-7 9 -13 0z'/%3E%3Cpath d='M22 15 q5-7 9-2'/%3E%3C/svg%3E");
  opacity:.9;
}
.hero h1::after{transform:scaleX(-1);}
@media (max-width:560px){.hero h1::before,.hero h1::after{display:none;}}

.hero .estd{margin-top:14px;}

/* =========================================================================
   SECTION HEADINGS — arabesque divider + foil
   ========================================================================= */
.section-head{position:relative;}
.section-head::before{
  content:'';display:block;width:150px;height:18px;margin:0 auto 16px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 18' fill='none' stroke='%23b8932e' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M75 4 l5 5 -5 5 -5-5z'/%3E%3Cpath d='M70 9 H18'/%3E%3Cpath d='M80 9 H132'/%3E%3Ccircle cx='14' cy='9' r='2' fill='%23b8932e' stroke='none'/%3E%3Ccircle cx='136' cy='9' r='2' fill='%23b8932e' stroke='none'/%3E%3Cpath d='M58 9 q-5-6 -10 0 q5 6 10 0z'/%3E%3Cpath d='M92 9 q5-6 10 0 q-5 6 -10 0z'/%3E%3C/svg%3E");
}
.section-title{letter-spacing:.01em;}

/* =========================================================================
   BOOK COVERS — ornate mihrab (pointed-arch) panels
   ========================================================================= */
.book .cover{
  background:
    radial-gradient(80% 60% at 50% 22%,rgba(232,213,154,0.18),transparent 60%),
    linear-gradient(165deg,#12694f 0%,var(--green-800) 55%,var(--green-900) 100%);
  box-shadow:0 16px 34px rgba(6,45,34,0.30);
}
.book .cover .cover-deco{
  background:no-repeat center 6%/86% auto
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' fill='none' stroke='%23ecd9a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 148 V58 Q18 20 50 9 Q82 20 82 58 V148' opacity='0.55'/%3E%3Cpath d='M25 148 V60 Q25 30 50 20 Q75 30 75 60 V148' opacity='0.32'/%3E%3Ccircle cx='50' cy='9' r='2.6' fill='%23ecd9a0' stroke='none'/%3E%3Cpath d='M50 20 V30' opacity='0.7'/%3E%3Cpath d='M45 31 Q50 27 55 31 Q56 41 50 46 Q44 41 45 31z' opacity='0.9'/%3E%3Ccircle cx='50' cy='49' r='1.5' fill='%23ecd9a0' stroke='none'/%3E%3Cpath d='M30 92 h40 M34 104 h32 M38 116 h24' opacity='0.4'/%3E%3C/svg%3E");
}
.book .cover .cover-deco svg{display:none;}     /* arch art replaces the plain book icon */
/* gold double-frame */
.book .cover::after{
  inset:7px;box-shadow:inset 0 0 0 1px rgba(236,217,160,0.55), inset 0 0 0 4px rgba(236,217,160,0.14);
  border-radius:9px;
}
.book .cover .cover-cap{
  background:linear-gradient(transparent,rgba(5,40,30,0.5) 42%,rgba(4,32,24,0.94));
  font-size:14.5px;letter-spacing:.01em;
}
.book{padding:12px 12px 16px;}
.book:hover .cover{box-shadow:0 22px 44px rgba(6,45,34,0.40);}

/* =========================================================================
   CARDS — gold corner ornaments + warmer surface
   ========================================================================= */
.card{background:linear-gradient(180deg,var(--paper),#fffaf0);}
.book .cover,.article .thumb{display:block;}
.feature,.contact-card{position:relative;}
.feature::before,.feature::after,
.ayah-inner::before,.ayah-inner::after{
  content:'';position:absolute;width:26px;height:26px;pointer-events:none;z-index:2;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23c9a227' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M3 3 L3 13 M3 3 L13 3'/%3E%3Cpath d='M3 3 q9 1 10 10' opacity='0.7'/%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23c9a227' stroke='none'/%3E%3C/svg%3E");
}
.feature::before{top:10px;inset-inline-start:10px;}
.feature::after{top:10px;inset-inline-end:10px;transform:scaleX(-1);}
.ayah-inner::before{top:18px;inset-inline-start:18px;width:34px;height:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23e8d59a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 4 L4 17 M4 4 L17 4'/%3E%3Cpath d='M4 4 q12 1 13 13' opacity='0.7'/%3E%3Ccircle cx='4' cy='4' r='1.8' fill='%23e8d59a' stroke='none'/%3E%3C/svg%3E");}
.ayah-inner::after{top:18px;inset-inline-end:18px;width:34px;height:34px;transform:scaleX(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23e8d59a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 4 L4 17 M4 4 L17 4'/%3E%3Cpath d='M4 4 q12 1 13 13' opacity='0.7'/%3E%3Ccircle cx='4' cy='4' r='1.8' fill='%23e8d59a' stroke='none'/%3E%3C/svg%3E");}

.feature .ic{
  background:radial-gradient(circle at 35% 30%,#13694f,var(--green-800));color:var(--gold-300);
  border:1px solid var(--gold-500);box-shadow:0 6px 16px rgba(8,56,43,0.25);
}

/* =========================================================================
   ARTICLE THUMBS — arch + glow
   ========================================================================= */
.article .thumb{
  background:
    radial-gradient(70% 80% at 50% 0%,rgba(232,213,154,0.18),transparent 60%),
    linear-gradient(160deg,#12694f,var(--green-900));
}
.article .thumb .thumb-deco svg{width:46px;height:46px;opacity:.92;}
.article .thumb .thumb-deco::after{
  content:'';position:absolute;inset:14px;border:1px solid rgba(236,217,160,0.4);border-radius:10px;
  -webkit-mask:linear-gradient(#000,#000);
}

/* =========================================================================
   PAGE HEROES — match the cinematic hero
   ========================================================================= */
.page-hero{
  background:
    radial-gradient(80% 90% at 50% 0%,rgba(201,162,39,0.18),transparent 60%),
    linear-gradient(160deg,#0d5a45,var(--green-900));
}
.page-hero h1{position:relative;display:inline-block;
  background:linear-gradient(96deg,#b78a2c 0%,#f4e6b0 26%,#fff4cf 52%,#dcb44f 72%,#b78a2c 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:foilShine 7s linear infinite;
}
.page-hero h1::before,.page-hero h1::after{
  content:'';display:inline-block;width:34px;height:22px;vertical-align:middle;margin:0 14px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22' fill='none' stroke='%23e8d59a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 11 H20'/%3E%3Ccircle cx='2' cy='11' r='1.6' fill='%23e8d59a' stroke='none'/%3E%3Cpath d='M20 11 q6-7 11 0 q-6 7 -11 0z'/%3E%3C/svg%3E");opacity:.85;
}
.page-hero h1::after{transform:scaleX(-1);}

/* =========================================================================
   BUTTONS — richer gold
   ========================================================================= */
.btn-gold{
  background:linear-gradient(180deg,#f0d989 0%,#d9b94f 45%,#b8902e 100%);
  box-shadow:0 8px 22px rgba(176,128,34,0.4),inset 0 1px 0 rgba(255,255,255,0.45);
}

/* ribbon a touch deeper + cornered */
.ribbon{box-shadow:0 20px 50px rgba(6,45,34,0.30);}
.ayah-band{box-shadow:inset 0 0 70px rgba(0,0,0,0.18);}

/* =========================================================================
   DETAIL / READING PAGE
   ========================================================================= */
.back-link{
  display:inline-flex;align-items:center;gap:7px;color:var(--green-700);font-size:15px;
  margin-bottom:24px;padding:8px 16px;border:1px solid var(--line-gold);border-radius:var(--r-pill);
  background:var(--paper);transition:background .2s,color .2s;
}
.back-link:hover{background:var(--green-mist);}
.back-link svg{width:16px;height:16px;}
[dir="rtl"] .back-link svg{transform:scaleX(-1);}
.detail-grid{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;}
/* ---- detail: info band on top ---- */
.detail-band{display:flex;gap:26px;align-items:flex-start;background:var(--paper);border:1px solid var(--line-gold);
  border-radius:var(--r-card);padding:24px 26px;margin-bottom:26px;box-shadow:var(--shadow-sm);}
.db-cover{position:relative;flex:none;width:150px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--green-mist),var(--cream-2));box-shadow:0 8px 20px rgba(8,56,43,.16);display:block;}
.db-cover img{width:100%;height:100%;object-fit:cover;}
.db-cover .cover-deco{position:absolute;inset:0;display:grid;place-items:center;color:var(--green-600);opacity:.35;}
.db-cover .cover-deco svg{width:48px;height:48px;}
.db-cover .cover-cap{position:absolute;inset-inline:0;bottom:0;padding:18px 10px 10px;font-family:var(--ur);font-size:13px;
  color:#fff;text-align:center;background:linear-gradient(transparent,rgba(6,46,35,.82));}
.db-info{flex:1;min-width:0;}
.db-info .cat-chip{margin-bottom:10px;}
.db-info .detail-desc{margin:0 0 16px;}
.db-acts{display:flex;gap:10px;flex-wrap:wrap;}
.detail-audio{margin-top:16px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;}
.detail-audio-h{display:flex;gap:8px;align-items:center;color:var(--gold-700);font-size:14px;letter-spacing:.06em;margin-bottom:4px;}
.detail-desc{font-size:16px;color:var(--ink-2);line-height:2;}

/* ---- detail: read grid (key points + pdf side by side) ---- */
.read-grid{display:grid;grid-template-columns:minmax(320px,0.82fr) 1.18fr;gap:24px;align-items:start;}
.read-grid.no-points{grid-template-columns:1fr;}

.keypoints{background:var(--paper);border:1px solid var(--line-gold);border-radius:var(--r-card);
  padding:26px 28px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;position:sticky;top:92px;}
.keypoints::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;width:4px;height:100%;
  background:linear-gradient(var(--gold-400),var(--green-600));}
.keypoints-h{display:flex;gap:10px;align-items:center;font-family:var(--ur);font-size:22px;color:var(--green-800);
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.keypoints-h svg{width:24px;height:24px;color:var(--gold-600);}
.keypoints ul{display:flex;flex-direction:column;gap:16px;}
.keypoints li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:15.5px;line-height:1.95;}
.kp-mark{flex:none;margin-top:2px;}
.kp-mark svg{width:18px;height:18px;color:var(--gold-600);}
html.lang-en .keypoints-h{font-family:var(--latin);}

.viewer{background:var(--paper);border:1px solid var(--line-gold);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-gold);background:var(--paper-2);}
.viewer-bar .t{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--green-800);}
.viewer-bar .t svg{width:18px;height:18px;color:var(--gold-600);}
.viewer-body{display:flex;align-items:center;justify-content:center;min-height:300px;background:var(--paper-2);padding:24px;}
.viewer-body.loaded{min-height:0;background:#fff;padding:0;}
.viewer-body iframe{width:100%;height:84vh;min-height:620px;border:none;background:#fff;display:block;}
@media (max-width:900px){
  .read-grid{grid-template-columns:1fr;gap:20px;}
  .keypoints{position:static;}
  .viewer-body iframe{height:78vh;min-height:480px;}
}
@media (max-width:560px){
  .detail-band{flex-direction:column;align-items:center;text-align:center;padding:22px;}
  .db-cover{width:130px;}
  .db-info .cat-chip{margin-inline:auto;}
  .db-acts{justify-content:center;}
}

/* nav active underline visible on detail too */

/* =========================================================================
   PAGE INTRO · CATEGORY CHIPS · CARD CATEGORIES · BOOK DESCRIPTIONS
   ========================================================================= */
.page-intro{text-align:center;max-width:700px;margin:0 auto 24px;color:var(--muted);font-size:16px;line-height:1.95;}
.chip-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 36px;}
.chip{font-family:var(--ur);font-size:15px;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line-gold);border-radius:var(--r-pill);padding:8px 18px;transition:all .2s ease;}
.chip:hover{color:var(--green-700);border-color:var(--gold-400);transform:translateY(-1px);}
.chip.on{background:linear-gradient(180deg,var(--green-600),var(--green-800));color:var(--gold-300);
  border-color:var(--green-700);box-shadow:0 6px 16px rgba(8,56,43,.22);}

.book-body{padding:2px 6px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.book-desc{font-size:13px;color:var(--muted);line-height:1.75;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.book .acts{margin-top:2px;}

.cat-chip{display:inline-block;font-family:var(--ur);font-size:12px;letter-spacing:.02em;color:var(--gold-700);
  background:var(--gold-100);border:1px solid var(--line-gold);border-radius:var(--r-pill);padding:3px 13px;}
.article .cat-chip{align-self:flex-start;margin-bottom:6px;}

.audio-eyebrow{display:flex;gap:8px;align-items:center;color:var(--gold-700);font-size:13px;letter-spacing:.04em;}
.audio-eyebrow svg{width:18px;height:18px;}

html.lang-en .chip,html.lang-en .cat-chip{font-family:var(--latin-body);}

/* ===== "new" book/article highlight ===== */
.card.is-new{box-shadow:0 12px 30px rgba(147,73,57,0.10), 0 0 0 2px var(--gold-400);}
.card.is-new:hover{box-shadow:0 18px 40px rgba(147,73,57,0.16), 0 0 0 2px var(--gold-500);}
.new-ribbon{
  position:absolute;z-index:4;top:14px;inset-inline-start:-4px;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-600));color:var(--green-900);
  font-family:var(--ur);font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:5px 16px 5px 14px;border-radius:0 var(--r-pill) var(--r-pill) 0;
  box-shadow:0 4px 10px rgba(8,56,43,0.22);
}
.new-ribbon::before{
  content:'';position:absolute;inset-inline-start:0;bottom:-6px;border:3px solid var(--gold-700);
  border-inline-end-color:transparent;border-bottom-color:transparent;
}
html.lang-en .new-ribbon{font-family:var(--latin);font-size:11px;letter-spacing:.08em;padding:5px 14px;}
@media (max-width:560px){
  .new-ribbon{font-size:12px;padding:4px 13px;top:10px;}
}
@media (max-width:560px){
  .chip{font-size:14px;padding:7px 14px;}
  .chip-bar{gap:8px;margin-bottom:28px;}
}

/* =========================================================================
   TIMELINE · CHAIN · DONATION · FAQ (About / Khanqah / Contact)
   ========================================================================= */
.timeline{position:relative;max-width:760px;margin:0 auto;}
.timeline::before{content:'';position:absolute;top:6px;bottom:6px;inset-inline-start:9px;width:2px;
  background:linear-gradient(var(--gold-400),var(--line-gold));}
.tl-item{position:relative;padding-inline-start:42px;padding-bottom:26px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;inset-inline-start:1px;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--paper);border:2px solid var(--gold-500);box-shadow:0 0 0 4px var(--cream);}
.tl-year{font-family:var(--latin);font-size:18px;letter-spacing:.04em;color:var(--gold-700);}
.tl-text{color:var(--ink-2);font-size:15px;margin-top:3px;line-height:1.85;}

.chain{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:820px;margin:0 auto;}
.chain .node{background:var(--green-mist);border:1px solid var(--line-gold);border-radius:var(--r-pill);
  padding:6px 15px;font-size:14px;color:var(--green-800);}
.chain .arr{color:var(--gold-600);font-size:14px;}

.donate-box{background:linear-gradient(160deg,var(--green-700),var(--green-900));color:var(--cream);
  border-radius:var(--r-card);padding:30px 32px;border:1px solid var(--gold-600);position:relative;overflow:hidden;}
.donate-box::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23d9b94f' stroke-width='1' opacity='0.12'%3E%3Cpath d='M35 5 L65 35 L35 65 L5 35 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:70px;}
.donate-box>*{position:relative;}
.donate-box h3{color:#fff;font-size:24px;margin-bottom:6px;}
.donate-box .sub{color:rgba(255,253,246,.82);font-size:15px;margin-bottom:18px;line-height:1.9;}
.donate-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(217,185,79,.22);font-size:15px;}
.donate-row:last-child{border-bottom:none;}
.donate-row .k{color:rgba(255,253,246,.72);}
.donate-row .v{color:var(--gold-300);font-family:var(--latin-body);font-weight:600;direction:ltr;}

.faq-item{background:var(--paper);border:1px solid var(--line-gold);border-radius:16px;padding:20px 24px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.faq-item h4{color:var(--green-800);font-size:18px;margin-bottom:6px;display:flex;gap:10px;align-items:flex-start;}
.faq-item h4 svg{width:20px;height:20px;color:var(--gold-600);flex:none;margin-top:3px;}
.faq-item p{color:var(--muted);font-size:15px;line-height:1.95;}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.week-list{max-width:560px;margin:0 auto;}
.week-row{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;background:var(--paper);
  border:1px solid var(--line-gold);border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.week-row .d{color:var(--gold-700);font-size:15px;}
.week-row .t{color:var(--ink-2);font-size:15px;text-align:start;}
.icon-btn:hover{box-shadow:0 6px 16px rgba(8,56,43,0.25);}