/*
Theme Name: Islamic Hadith Ali Dynamic
Theme URI: https://voiceofali.store/
Author: OpenAI
Description:Hadith and article websites with dynamic homepage sections.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: islamic-hadith-ali-dynamic
*/

:root{
  --bg:#021f1c;
  --bg-2:#032a25;
  --surface:rgba(255,255,255,.08);
  --surface-2:rgba(255,255,255,.05);
  --text:#f5f3ea;
  --muted:#d7d1ba;
  --gold:#e5c76b;
  --line:rgba(229,199,107,.18);
  --shadow:0 12px 30px rgba(0,0,0,.22);
  --radius:26px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(229,199,107,.10), transparent 22%),
    radial-gradient(circle at 85% 18%, rgba(125,211,177,.10), transparent 20%),
    linear-gradient(180deg,#011816 0%, #032420 55%, #021512 100%);
  font-family: Georgia, "Times New Roman", serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(100% - 32px,var(--max));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(1,24,22,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0}
.branding h1,.branding p{margin:0}
.branding h1{font-size:clamp(28px,3.2vw,46px);line-height:1.05}
.branding p{margin-top:8px;color:var(--muted);font-size:17px}
.primary-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.primary-menu a{font-weight:700}
.hero{padding:56px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:26px;align-items:stretch}
.card{background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:32px;min-height:330px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:auto -120px -140px auto;width:260px;height:260px;background:radial-gradient(circle, rgba(229,199,107,.24), transparent 68%);transform:scale(1.2)}
.badge{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(229,199,107,.35);border-radius:999px;color:var(--gold);background:rgba(229,199,107,.07);font-weight:700;font-size:14px}
.hero-title{font-size:clamp(42px,6vw,84px);line-height:.95;margin:18px 0}
.hero-text{font-size:22px;line-height:1.55;color:var(--muted);max-width:760px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:16px;font-weight:700;border:1px solid rgba(255,255,255,.16);transition:.25s transform,.25s background,.25s border-color}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.btn-primary{background:linear-gradient(135deg,var(--gold),#f2dfa0);color:#15251f;border-color:transparent}
.btn-secondary{background:rgba(255,255,255,.04)}
.side-card{padding:26px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.side-card h3{margin:0 0 6px;font-size:34px}
.side-card p{margin:0;color:var(--muted);font-size:18px;line-height:1.65}
.section{padding:22px 0 10px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.section-title{font-size:clamp(30px,3.4vw,50px);margin:0}
.section-sub{margin:8px 0 0;color:var(--muted);font-size:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.topic-card,.post-card,.article-card{padding:24px;min-height:170px;transition:.28s transform,.28s border-color,.28s box-shadow}
.topic-card:hover,.post-card:hover,.article-card:hover{transform:translateY(-5px) scale(1.01);border-color:rgba(229,199,107,.35);box-shadow:0 18px 40px rgba(0,0,0,.24)}
.topic-card h3,.post-card h3,.article-card h3{font-size:34px;line-height:1.05;margin:0 0 12px}
.topic-card p,.post-card p,.article-card p{margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.inline-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid rgba(229,199,107,.18);background:rgba(125,211,177,.05);color:var(--muted);font-size:14px}
.hadith-arabic{font-size:clamp(28px,3.2vw,42px);line-height:1.8;text-align:right;margin:18px 0 8px;font-family: "Noto Naskh Arabic", serif}
.library-toolbar{display:grid;grid-template-columns:1.6fr .8fr;gap:14px;margin:24px 0}
.input,.select{width:100%;padding:15px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;color:var(--text);font:inherit}
.select option{color:#111}
.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.footer{margin-top:38px;border-top:1px solid var(--line);background:rgba(1,20,18,.55)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:28px;padding:34px 0}
.footer h4{margin:0 0 14px;font-size:28px}
.footer p,.footer li{color:var(--muted);font-size:17px;line-height:1.7}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.archive-grid,.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:28px 0}
.content-wrap{padding:36px 0}
.single-card{padding:30px}
.single-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px}
.entry-content{color:var(--muted);font-size:18px;line-height:1.8}
.page-header{padding:26px 0 0}
.empty-state{padding:24px}
@media (max-width: 980px){
  .hero-grid,.grid-3,.grid-2,.library-grid,.archive-grid,.blog-grid,.footer-grid,.library-toolbar{grid-template-columns:1fr}
  .header-inner{flex-direction:column;align-items:flex-start}
  .topic-card h3,.post-card h3,.article-card h3,.side-card h3{font-size:28px}
}