/* Quran MP3 design system: one visual identity, scoped to shared site chrome. */
:root {
  --qmp3-deep:#183b31;
  --qmp3-deep-2:#245a4b;
  --qmp3-green:#0f766e;
  --qmp3-gold:#b78b40;
  --qmp3-gold-light:#e5ca83;
  --qmp3-paper:#f6f8f3;
  --qmp3-surface:#fff;
  --qmp3-border:#d9e6dc;
  --qmp3-ink:#18332d;
  --qmp3-muted:#546c60;
  --qmp3-radius:12px;
}
.qmp3-site-page{color-scheme:light;overflow-x:clip}
.qmp3-site-page:not(.dark){background:var(--qmp3-paper)}
.qmp3-site-page button,.qmp3-site-page a,.qmp3-site-page input,
.qmp3-site-page select{touch-action:manipulation}
.qmp3-site-page :is(button,a,input,select,textarea):focus-visible{
  outline:3px solid var(--qmp3-gold);outline-offset:3px
}
body .qmp3-site-header{
  position:sticky!important;inset-block-start:0;top:0;z-index:1100;
  background:rgba(246,248,243,.97)!important;border-bottom:1px solid var(--qmp3-border);
  backdrop-filter:blur(12px);color:var(--qmp3-ink)
}
body .qmp3-site-header .header-inner{
  position:relative;box-sizing:border-box;width:min(1520px,calc(100% - 32px));
  max-width:1520px;margin-inline:auto;padding-block:8px;
  height:auto!important;min-height:64px!important;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:clamp(8px,1vw,16px)
}
.qmp3-site-header .brand{display:inline-flex;gap:9px;align-items:center;min-width:0;
  flex:0 0 auto;color:var(--qmp3-ink);text-decoration:none}
.qmp3-site-header .qmp3-brand-icon{
  width:38px!important;height:38px!important;flex:none;object-fit:contain;
  border-radius:9px;filter:none
}
.qmp3-site-header .brand-text{
  font-family:Tajawal,Arial,sans-serif;font-size:clamp(.88rem,1.15vw,1.02rem);
  line-height:1.35;font-weight:800;white-space:nowrap;color:var(--qmp3-ink)
}
.qmp3-site-header .brand-text b{color:var(--qmp3-green)}
.qmp3-site-header #mainNav{
  display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;
  flex-wrap:nowrap;gap:1px;min-width:0;visibility:visible;opacity:1;
  transform:none;pointer-events:auto
}
.qmp3-site-header #mainNav a{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;min-height:40px;padding:7px 8px;white-space:nowrap;
  font:700 .79rem/1.4 Tajawal,Arial,sans-serif;color:#335849;
  border-radius:10px;text-decoration:none
}
.qmp3-site-header #mainNav a:is(:hover,:focus-visible,[aria-current="page"]){
  background:#e3f3ed;color:#0c695a
}
.qmp3-site-header #mainNav .nav-icon{
  display:inline-flex!important;min-width:18px;align-items:center;
  justify-content:center;font:1rem/1 Arial,sans-serif
}
.qmp3-site-header .header-tools{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.qmp3-site-header #navToggle{
  box-sizing:border-box;display:none;place-items:center;align-items:center;
  justify-content:center;flex:0 0 43px;width:43px;height:43px;
  padding:0;margin:0;border:1px solid var(--qmp3-border);border-radius:11px;
  background:#fff;color:var(--qmp3-deep);font:700 1.15rem/1 Tajawal,Arial,sans-serif;
  box-shadow:none;cursor:pointer
}
.qmp3-site-header #navToggle:is(:hover,:focus-visible){border-color:var(--qmp3-gold);background:#faf8ef}
/* The same green hero applies to every page; preserves the page's own contents. */
main .qmp3-unified-hero{
  box-sizing:border-box;position:relative;isolation:isolate;
  width:min(1180px,calc(100% - 32px));max-width:1180px;
  min-height:0!important;height:auto!important;
  margin:18px auto 24px!important;padding:clamp(22px,3.5vw,42px)!important;
  border:1px solid #327260;border-radius:20px!important;
  background:linear-gradient(125deg,var(--qmp3-deep),var(--qmp3-deep-2))!important;
  color:#fff!important;box-shadow:0 12px 32px rgba(24,55,43,.12);
  overflow:hidden
}
main .qmp3-unified-hero :is(h1,.qmp3-hero-title){
  margin:0 0 10px!important;font:700 clamp(1.85rem,3.6vw,3rem)/1.4 Amiri,Tajawal,serif;
  color:#fff!important;overflow-wrap:anywhere
}
main .qmp3-unified-hero :is(p,.hero-sub,small,.eyebrow,.rq-eyebrow,.stat span){
  color:#e3f2e9!important
}
main .qmp3-unified-hero .eyebrow{color:var(--qmp3-gold-light)!important}
main .qmp3-unified-hero p{max-width:780px;line-height:1.85}
main .qmp3-unified-hero .hero-inner{padding:0}
main .qmp3-unified-hero .container{max-width:100%}
main .qmp3-unified-hero .hero-stats{gap:clamp(10px,2vw,22px);margin-top:22px}
main .qmp3-unified-hero .stat b{color:var(--qmp3-gold-light)!important}
main .qmp3-unified-hero .stat-sep{background:#ffffff66}
main .qmp3-unified-hero .search-box{width:min(690px,100%);color:var(--qmp3-ink)}
main .qmp3-unified-hero .search-box input{color:var(--qmp3-ink)}
main .qmp3-unified-hero .search-box input::placeholder{color:#71887d}
main .qmp3-unified-hero .search-icon{color:var(--qmp3-green)}
main .qmp3-unified-hero :is(.back,.rq-button,.rq-primary){position:relative}
main .qmp3-unified-hero::before,main .qmp3-unified-hero::after{pointer-events:none}
main .qmp3-generated-hero{display:block}
main .qmp3-generated-hero + section{margin-top:20px}
main .qmp3-unified-hero:has(.back){align-items:center}
/* Shared breadcrumbs: one quiet surface above the page contents. */
body .qmp3-breadcrumb{
  box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;
  gap:7px 9px;max-width:1180px;width:calc(100% - 32px);
  min-height:46px;margin:13px auto 16px;padding:9px 14px;
  border:1px solid var(--qmp3-border);border-radius:12px;
  background:#f7faf6;color:var(--qmp3-muted);
  font:500 .87rem/1.6 Tajawal,Arial,sans-serif;direction:rtl
}
.qmp3-breadcrumb a{
  display:inline-flex;align-items:center;min-height:28px;
  color:#216149;font-weight:750;text-decoration:none
}
.qmp3-breadcrumb a:hover{text-decoration:underline}
.qmp3-breadcrumb [aria-current="page"]{color:#243e31;font-weight:800;overflow-wrap:anywhere}
.qmp3-breadcrumb .bc-separator{color:#91a99b;user-select:none}
/* Buttons and link actions share dimensions and the gold outline, not blanket button resets. */
body.qmp3-site-page :is(.chip-btn,.back-link,.nav-back,.adhkar-return,.rq-button,
 .prayer-btn,.directory-nav a,.back,.qmp3-action){
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;width:auto;max-width:100%;min-height:44px;
  padding:10px 16px;border:1.5px solid #c4a362;border-radius:var(--qmp3-radius);
  background:#fff;color:var(--qmp3-deep);font-family:Tajawal,Arial,sans-serif;
  font-weight:750;line-height:1.45;text-decoration:none;text-align:center;
  white-space:normal;overflow-wrap:anywhere;box-shadow:0 2px 8px rgba(15,55,43,.05);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease
}
body.qmp3-site-page :is(.chip-btn,.back-link,.nav-back,.adhkar-return,.rq-button,
 .prayer-btn,.directory-nav a,.back,.qmp3-action):not(:disabled):hover{
  background:#eaf4ee;color:var(--qmp3-deep);border-color:var(--qmp3-gold)
}
body.qmp3-site-page :is(.rq-primary,.prayer-btn:not(.prayer-btn-light),
 .qmp3-action-primary){background:var(--qmp3-deep);color:#fff;border-color:var(--qmp3-gold)}
body.qmp3-site-page :is(.rq-primary,.prayer-btn:not(.prayer-btn-light),
 .qmp3-action-primary):not(:disabled):hover{background:var(--qmp3-deep-2);color:#fff}
body.qmp3-site-page :is(.review-actions button,.rq-card-actions button,.rq-card-actions a,
 .controls > button,.reading-foot button){
  min-height:44px;border-radius:var(--qmp3-radius);
  border-color:var(--qmp3-gold);white-space:normal;
  line-height:1.5;text-align:center
}
body.qmp3-site-page .review-actions button{gap:7px;max-width:100%}
body.qmp3-site-page .review-actions button#startReview{background:var(--qmp3-deep);color:#fff}
body.qmp3-site-page :is(button,a)[disabled]{cursor:not-allowed;opacity:.5}
@media(max-width:1480px){
  body .qmp3-site-header .header-inner{min-height:60px!important}
  .qmp3-site-header #navToggle{display:inline-flex!important}
  body .qmp3-site-header #mainNav{
    box-sizing:border-box;display:none!important;position:absolute!important;
    inset-inline:0!important;top:calc(100% + 5px)!important;
    width:100%!important;max-height:min(72dvh,540px)!important;
    overflow-y:auto;overscroll-behavior:contain;z-index:1150;
    padding:10px!important;margin:0!important;border:1px solid var(--qmp3-border);
    border-radius:14px;background:#fff;box-shadow:0 17px 32px rgba(16,54,39,.17);
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:none!important;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;justify-content:stretch;gap:5px!important
  }
  body .qmp3-site-header #mainNav:is(.open,.qmp3-open){
    display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important
  }
  body .qmp3-site-header #mainNav a{width:100%;min-width:0;min-height:44px;
    justify-content:flex-start;padding:10px 12px;white-space:normal;font-size:.9rem}
}
@media(max-width:700px){
  body .qmp3-site-header .header-inner{width:calc(100% - 24px);min-height:58px!important;gap:8px}
  .qmp3-site-header .qmp3-brand-icon{width:34px!important;height:34px!important}
  .qmp3-site-header .brand-text{font-size:clamp(.77rem,3vw,.91rem)}
  body .qmp3-site-header #mainNav{grid-template-columns:repeat(2,minmax(0,1fr))}
  main .qmp3-unified-hero{width:calc(100% - 24px);margin:12px auto 18px!important;
    padding:20px 16px!important;border-radius:16px!important}
  main .qmp3-unified-hero h1{font-size:clamp(1.75rem,6vw,2.25rem)!important}
  main .qmp3-unified-hero .hero-stats{gap:9px;flex-wrap:wrap}
  body .qmp3-breadcrumb{width:calc(100% - 24px);min-height:44px;
    margin:10px auto 14px;padding:8px 11px;font-size:.82rem}
  body.qmp3-site-page :is(.chip-btn,.back-link,.nav-back,.adhkar-return,
    .rq-button,.prayer-btn,.directory-nav a,.back,.qmp3-action){
    padding:10px 12px;min-width:0;flex-shrink:1
  }
}
@media(max-width:380px){
  .qmp3-site-header #mainNav a{font-size:.82rem}
  .qmp3-site-header .brand-text{font-size:.76rem}
  body .qmp3-site-header #mainNav{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  body.qmp3-site-page :is(.chip-btn,.back-link,.nav-back,.adhkar-return,
    .rq-button,.prayer-btn,.directory-nav a,.back,.qmp3-action){transition:none}
}

/* Keep return links visible after their old standalone headers become shared. */
main .qmp3-unified-hero > .qmp3-hero-return{
  display:flex;align-items:center;justify-content:center;
  width:fit-content;max-width:100%;margin:18px auto 0;
  padding:10px 20px;background:rgba(12,43,33,.18);
  color:#fff;border:1.5px solid var(--qmp3-gold-light);
  border-radius:12px;line-height:1.5;font-weight:800;
  text-decoration:none
}
main .qmp3-unified-hero > .qmp3-hero-return:is(:hover,:focus-visible){
  color:var(--qmp3-deep);background:var(--qmp3-gold-light)
}

/* Dynamic detail pages replace their hero HTML; return actions stay outside that region. */
main .details-hero + .qmp3-hero-return{
  display:flex;align-items:center;justify-content:center;
  width:fit-content;max-width:100%;margin:0 auto 20px;
  padding:10px 20px;background:#fff;color:var(--qmp3-deep);
  border:1.5px solid var(--qmp3-gold);border-radius:12px;
  text-align:center;font-weight:800;text-decoration:none
}
main .details-hero + .qmp3-hero-return:hover{
  background:#eaf4ee;border-color:var(--qmp3-gold)
}
main #detailsHero.qmp3-unified-hero:empty{
  min-height:138px!important
}


/* Homepage header share: compact gold action with contextual encouragement. */
body .qmp3-site-header .home-share{
  position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
}
body .qmp3-site-header .home-share-button{
  display:inline-grid;place-items:center;flex:0 0 42px;
  width:42px;height:42px;min-width:42px;padding:0;
  border:1.5px solid var(--qmp3-gold);border-radius:12px;
  background:#fffaf0;color:var(--qmp3-deep);cursor:pointer;
  box-shadow:0 2px 8px rgba(183,139,64,.13);
  transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s;
}
body .qmp3-site-header .home-share-button svg{width:20px;height:20px;display:block;pointer-events:none}
body .qmp3-site-header .home-share-button:is(:hover,:focus-visible){
  background:#f7ecd1;border-color:#a6782c;
  box-shadow:0 0 0 3px rgba(183,139,64,.13),0 4px 13px rgba(22,70,55,.12);
}
body .qmp3-site-header .home-share-button:active{transform:scale(.96)}
body .qmp3-site-header .home-share-tooltip,
body .qmp3-site-header .home-share-status{
  box-sizing:border-box;position:absolute;z-index:1250;
  top:calc(100% + 11px);left:0;width:min(285px,calc(100vw - 26px));
  padding:11px 13px;text-align:right;direction:rtl;
  border:1px solid #c5aa71;border-radius:12px;
  background:#fffdf6;color:#214438;
  font:700 .82rem/1.8 Tajawal,Arial,sans-serif;
  box-shadow:0 10px 25px rgba(15,55,43,.15);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;
}
body .qmp3-site-header .home-share:is(:hover,:focus-within) .home-share-tooltip,
body .qmp3-site-header .home-share-status.is-visible{
  opacity:1;visibility:visible;transform:translateY(0)
}
body .qmp3-site-header .home-share.is-copied .home-share-tooltip{opacity:0;visibility:hidden}
body .qmp3-site-header .home-share-status{background:#e9f5ed;border-color:#8db69d}
@media(hover:none){
 body .qmp3-site-header .home-share-tooltip{display:none}
}
@media(max-width:480px){
 body .qmp3-site-header .brand{flex:0 1 auto;min-width:0}
 body .qmp3-site-header .brand-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
 body .qmp3-site-header .header-tools{gap:4px}
}
@media(max-width:380px){
 body .qmp3-site-header .brand{gap:5px}
 body .qmp3-site-header .brand-text{max-width:clamp(60px,calc(100vw - 248px),125px)}
 body .qmp3-site-header .qmp3-brand-icon{width:30px!important;height:30px!important}
 body .qmp3-site-header .header-tools{gap:3px}
 body .qmp3-site-header .home-share-button{width:38px;min-width:38px;height:38px;flex-basis:38px}
 body .qmp3-site-header #themeToggle{width:37px;height:38px}
 body .qmp3-site-header #navToggle{width:40px;height:40px;flex-basis:40px}
 body .qmp3-site-header .install-toggle{padding-inline:6px;font-size:.64rem;min-height:38px}
}
@media(prefers-reduced-motion:reduce){
 body .qmp3-site-header .home-share-button,
 body .qmp3-site-header .home-share-tooltip,
 body .qmp3-site-header .home-share-status{transition:none}
}