/* ============ Design tokens ============ */
:root{
  --teal-deep:#0E3B36;
  --teal:#1B5E56;
  --teal-soft:#E7F0EC;
  --gold:#B8894A;
  --gold-soft:#F3E7D3;
  --paper:#FAF6EC;
  --card:#FFFFFF;
  --text:#1E2523;
  --muted:#68766F;
  --line:rgba(30,37,35,0.10);
  --radius:16px;
  --shadow:0 18px 40px rgba(14,59,54,0.10);
}

/* ============ Dark mode ============ */
[data-theme="dark"]{
  --teal-deep:#5AC8A8;
  --teal:#3DAD92;
  --teal-soft:#0D2922;
  --gold:#D4A853;
  --gold-soft:#3D2E14;
  --paper:#0F1A17;
  --card:#182420;
  --text:#E4EDE9;
  --muted:#8BA89F;
  --line:rgba(255,255,255,0.09);
  --shadow:0 18px 40px rgba(0,0,0,0.45);
}
[data-theme="dark"] header{background:rgba(15,26,23,0.96);}
[data-theme="dark"] .search-box input{background:var(--card); color:var(--text);}
[data-theme="dark"] .search-results{background:var(--card);}
[data-theme="dark"] .ayah-banner{background:linear-gradient(120deg,#062420,#0D3028);}
[data-theme="dark"] .mobile-menu{background:var(--card);}
[data-theme="dark"] .surah-card, [data-theme="dark"] .ayah-block,
[data-theme="dark"] .search-hit{background:var(--card);}
[data-theme="dark"] .book-card, [data-theme="dark"] .video-card,
[data-theme="dark"] .cat-card, [data-theme="dark"] .app-card,
[data-theme="dark"] .faq-item, [data-theme="dark"] .qa-article{background:var(--card);}
[data-theme="dark"] .toc-sidebar{background:var(--card);}
[data-theme="dark"] footer{background:var(--paper);}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal', sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.8;
  transition:background .25s, color .25s;
}
h1,h2,h3{font-family:'Cairo', sans-serif;}
.ayah{font-family:'Amiri', serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 26px;}

/* ============ Header ============ */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .25s;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Cairo'; font-weight:800; font-size:19px;
  color:var(--teal-deep); white-space:nowrap;
  cursor:pointer; transition:opacity .2s;
}
.logo:hover{opacity:0.82;}
.logo .mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--teal-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'Amiri'; font-size:19px; flex-shrink:0;
}
.nav-links{display:flex; gap:22px; font-size:14.5px; font-weight:700; color:var(--teal-deep);}
.nav-links a{opacity:0.75; transition:opacity .2s;}
.nav-links a.active, .nav-links a:hover{opacity:1;}
.nav-drop{position:relative;}
.nav-drop>a{opacity:0.75; transition:opacity .2s; cursor:pointer;}
.nav-drop:hover>a, .nav-drop>a.active{opacity:1;}
.nav-drop-menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; display:none; flex-direction:column; gap:2px; z-index:80; transition:background .25s;
}
.nav-drop:hover .nav-drop-menu{display:flex;}
.nav-drop-menu a{
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--teal-deep);
  opacity:0.85 !important; white-space:nowrap;
}
.nav-drop-menu a:hover{background:var(--teal-soft); opacity:1 !important;}
[data-theme="dark"] .nav-drop-menu{background:var(--card);}
.search-box{position:relative; flex:1; max-width:260px;}
.search-box input{
  width:100%; padding:9px 40px 9px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-family:'Tajawal'; font-size:13.5px; color:var(--text);
  transition:background .25s, color .25s;
}
.search-box input:focus{outline:none; border-color:var(--teal);}
.search-box .icon{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px;}
.search-results{
  position:absolute; top:calc(100% + 8px); right:0; left:0; background:#fff; border-radius:12px;
  box-shadow:var(--shadow); border:1px solid var(--line); max-height:340px; overflow-y:auto; display:none; z-index:70;
}
.search-results.show{display:block;}
.search-results a{display:block; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px;}
.search-results a:last-child{border-bottom:none;}
.search-results a:hover{background:var(--teal-soft);}
.search-results .sr-tag{font-size:11px; color:var(--gold); font-weight:800; display:block; margin-bottom:2px;}
.search-empty{padding:16px; font-size:13px; color:var(--muted); text-align:center;}
.menu-btn{display:none; font-size:24px; background:none; border:none; color:var(--teal-deep); cursor:pointer;}
.mobile-menu{display:none; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 26px 16px; transition:background .25s;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 0; font-weight:700; color:var(--teal-deep); border-bottom:1px solid var(--line);}
.mobile-menu a:last-child{border-bottom:none;}

/* ============ Dark mode toggle button ============ */
.theme-toggle{
  background:none; border:1px solid var(--line); color:var(--teal-deep);
  font-size:17px; padding:5px 9px; border-radius:999px; cursor:pointer; flex-shrink:0;
  transition:background .2s, border-color .2s; line-height:1;
}
.theme-toggle:hover{background:var(--teal-soft);}

/* ============ Ayah / dhikr banner ============ */
.ayah-banner{
  background:linear-gradient(120deg, var(--teal-deep), var(--teal));
  color:#fff; text-align:center; padding:34px 26px;
  position:relative; overflow:hidden; transition:background .25s;
}
.ayah-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 200px at 85% 0%, rgba(184,137,74,0.28), transparent 60%);
}
.ayah-banner p{font-family:'Amiri', serif; font-size:22px; position:relative; z-index:1; max-width:760px; margin:0 auto 8px;}
.ayah-banner span{font-size:12.5px; color:var(--gold-soft); opacity:0.85; position:relative; z-index:1;}

/* ============ Hero ============ */
.hero{padding:70px 0 56px; text-align:center;}
.hero .eyebrow{color:var(--gold); font-weight:800; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:14px;}
.hero h1{font-size:36px; font-weight:800; color:var(--teal-deep); line-height:1.5; margin-bottom:16px;}
.hero p{color:var(--muted); max-width:560px; margin:0 auto 30px; font-size:15.5px;}
.hero-search{max-width:520px; margin:0 auto;}
.hero-search .search-box{max-width:100%;}
.hero-search input{padding:16px 50px 16px 18px; font-size:14.5px; box-shadow:var(--shadow);}

/* ============ Sections ============ */
section{padding:64px 0;}
.section-head{max-width:600px; margin:0 auto 42px; text-align:center;}
.section-head span.eyebrow{color:var(--gold); font-weight:800; font-size:12.5px; letter-spacing:1px; text-transform:uppercase;}
.section-head h2{font-size:28px; color:var(--teal-deep); margin-top:10px;}
.section-head p{color:var(--muted); margin-top:12px; font-size:14.5px;}

/* ============ Cards / grids ============ */
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; transition:transform .2s, box-shadow .2s, background .25s; display:block;
}
.cat-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.cat-card .cat-icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px; background:var(--teal-soft); color:var(--teal-deep);
}
.cat-card h3{font-size:16.5px; color:var(--teal-deep); margin-bottom:8px;}
.cat-card p{font-size:13px; color:var(--muted); margin-bottom:12px;}
.cat-card .count{font-size:12px; font-weight:800; color:var(--gold);}

.book-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; gap:16px; align-items:flex-start; transition:background .25s;}
.book-cover{width:56px; height:72px; border-radius:8px; flex-shrink:0; background:linear-gradient(160deg, var(--teal), var(--teal-deep));}
.book-info h3{font-size:15.5px; color:var(--text); margin-bottom:4px;}
.book-info .author{font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.book-info .dl{
  display:inline-flex; align-items:center; gap:6px; background:var(--teal-soft); color:var(--teal-deep);
  font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:20px;
}
.book-info .dl:hover{background:var(--teal); color:#fff;}

.video-card{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:background .25s;}
.video-embed{position:relative; padding-top:56.25%; background:#0b1f1c;}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-meta{padding:18px 20px;}
.video-meta .sheikh{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.video-meta .sheikh .avatar{width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-family:'Amiri'; font-weight:700; flex-shrink:0;}
.video-meta h3{font-size:15.5px; margin-bottom:6px;}
.video-meta p{font-size:13px; color:var(--muted);}

/* ---- video channel link card (when no embed available) ---- */
.video-link-card{
  background:linear-gradient(135deg, var(--teal-deep), var(--teal));
  border-radius:16px; padding:32px 24px; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:200px;
}
.video-link-card .yt-icon{font-size:40px;}
.video-link-card p{font-size:14px; color:rgba(255,255,255,0.85); max-width:240px; line-height:1.7;}
.video-link-card a{
  background:var(--gold); color:#0E3B36; font-weight:800; font-size:13px;
  padding:10px 22px; border-radius:22px; display:inline-block; transition:opacity .2s;
}
.video-link-card a:hover{opacity:0.85;}

.app-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; text-align:center; transition:background .25s;}
.app-card .app-icon{width:56px; height:56px; border-radius:14px; margin:0 auto 16px; background:var(--teal-soft); display:flex; align-items:center; justify-content:center; font-size:26px;}
.app-card h3{font-size:16px; margin-bottom:8px;}
.app-card p{font-size:13px; color:var(--muted); margin-bottom:16px;}
.app-card .links{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.app-card .links a{font-size:12px; font-weight:800; padding:7px 14px; border-radius:20px; background:var(--teal-soft); color:var(--teal-deep); transition:background .2s;}
.app-card .links a:hover{background:var(--teal); color:#fff;}

/* ============ Quick-answer articles ============ */
.quick-answer{margin-bottom:20px;}
.quick-answer .qa-label{font-size:12px; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; display:block;}
.qa-article{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:14px; transition:background .25s;}
.qa-article h4{font-size:14.5px; color:var(--teal-deep); margin-bottom:8px;}
.qa-article p{font-size:14px; line-height:1.85; color:var(--text);}
.best-book{
  background:linear-gradient(120deg, var(--teal-deep), var(--teal)); color:#fff;
  border-radius:14px; padding:20px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.best-book .icon{font-size:26px;}
.best-book h4{font-size:14px; color:var(--gold-soft); margin-bottom:4px;}
.best-book p{font-size:13.5px; color:rgba(255,255,255,0.85); margin-bottom:0;}
.best-book a{background:var(--gold); color:#0E3B36; font-weight:800; font-size:13px; padding:8px 16px; border-radius:20px; margin-right:auto; white-space:nowrap;}

.fatwa-cat{margin-bottom:34px;}
.fatwa-cat > h3{font-size:18px; color:var(--teal-deep); margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.fatwa-cat > h3::before{content:""; width:6px; height:18px; background:var(--gold); border-radius:4px; display:inline-block;}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; transition:background .25s;}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; cursor:pointer; font-weight:700; font-size:14.5px; color:var(--text);}
.faq-q .plus{font-size:20px; color:var(--gold); transition:transform .2s; flex-shrink:0; margin-right:10px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 20px 18px; font-size:14px; color:var(--muted); line-height:1.9;}
.faq-a .source{font-size:12px; color:var(--gold); font-weight:700; margin-top:8px; display:block;}
.faq-item.open .faq-a{max-height:400px;}

/* ---- Fatwa sites section ---- */
.fatwa-sites{background:var(--teal-soft); border-radius:16px; padding:28px 26px; margin-top:40px;}
.fatwa-sites h3{font-size:17px; color:var(--teal-deep); margin-bottom:18px;}
.fatwa-sites-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.fatwa-site-card{
  background:var(--card); border-radius:12px; padding:16px 14px; text-align:center;
  border:1px solid var(--line); transition:transform .2s, box-shadow .2s;
}
.fatwa-site-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.fatwa-site-card .site-icon{font-size:26px; margin-bottom:10px;}
.fatwa-site-card h4{font-size:13.5px; color:var(--teal-deep); margin-bottom:6px; font-family:'Cairo';}
.fatwa-site-card p{font-size:11.5px; color:var(--muted); margin-bottom:12px; line-height:1.7;}
.fatwa-site-card a{
  font-size:12px; font-weight:800; padding:7px 14px; border-radius:20px;
  background:var(--teal-deep); color:#fff; display:inline-block; transition:opacity .2s;
}
.fatwa-site-card a:hover{opacity:0.85;}
@media(max-width:900px){.fatwa-sites-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.fatwa-sites-grid{grid-template-columns:1fr;}}

/* ============ TOC sidebar ============ */
.toc-sidebar{
  position:fixed; left:18px; top:50%; transform:translateY(-50%);
  width:190px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px; z-index:50;
  font-size:12.5px; max-height:68vh; overflow-y:auto;
  box-shadow:var(--shadow); display:none;
  transition:background .25s;
}
.toc-sidebar h4{
  font-size:11px; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;
  font-family:'Cairo';
}
.toc-sidebar a{
  display:block; padding:5px 0; color:var(--muted);
  border-bottom:1px solid var(--line); transition:color .2s; line-height:1.5;
}
.toc-sidebar a:last-child{border-bottom:none;}
.toc-sidebar a:hover,.toc-sidebar a.toc-active{color:var(--teal-deep); font-weight:700;}
.toc-sidebar .toc-h3{padding-right:10px; font-size:11.5px;}

/* ============ Breadcrumb / back link ============ */
.crumb{font-size:13px; color:var(--muted); margin-bottom:20px; display:block;}
.crumb a{color:var(--teal); font-weight:700;}

/* ============ btn-calc shared ============ */
.btn-calc{
  background:linear-gradient(120deg,var(--teal-deep),var(--teal)); color:#fff;
  font-family:'Cairo'; font-weight:700; font-size:14px;
  padding:12px 28px; border-radius:999px; border:none; cursor:pointer;
  transition:opacity .2s; display:inline-block; margin-top:8px;
}
.btn-calc:hover{opacity:0.88;}

/* ============ Footer ============ */
footer{padding:50px 0 30px; border-top:1px solid var(--line); margin-top:30px; transition:background .25s;}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:24px;}
.footer-links{display:flex; gap:24px; font-size:13.5px; font-weight:600; flex-wrap:wrap;}
.footer-bottom{font-size:12.5px; color:var(--muted); text-align:center;}

/* ============ Responsive ============ */
@media(max-width:1400px){.toc-sidebar{display:none !important;}}
@media(max-width:900px){
  .nav-links, .search-box{display:none;}
  .menu-btn{display:block;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:27px;}
  .ayah-banner p{font-size:18px;}
}
@media(max-width:620px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .book-card{flex-direction:row;}
}
@media(prefers-reduced-motion: reduce){*{transition:none !important;}}