*{box-sizing:border-box}html{direction:ltr;scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;background:#f3f0e8;color:#222;font-family:"Noto Nastaliq Urdu","Noto Sans Arabic","Segoe UI",Arial,sans-serif}.urdu,[dir="rtl"]{direction:rtl;text-align:right}.english,[dir="ltr"]{direction:ltr;text-align:left}.page-wrapper{width:100%}
.main-header{direction:ltr;background:#fff;padding:18px 0 10px;border-bottom:4px solid #c9a44a;box-shadow:0 4px 12px rgba(0,0,0,.08)}.header-container{max-width:1300px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 24px;gap:24px}.social-icons{display:flex;align-items:center;gap:7px;flex:0 0 auto}.social-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;font-size:18px;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .18s ease}.social-icon:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 4px 11px rgba(0,0,0,.24)}.social-icon.facebook{background:#1877f2}.social-icon.x{background:#111}.social-icon.youtube{background:#ff0000}.social-icon.tiktok{background:#111}.social-icon.instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.header-right{display:flex;align-items:center;gap:18px;direction:ltr}.logo{width:220px;max-width:34vw;height:auto}.site-title{direction:rtl;text-align:right}.site-title h1{margin:0;font-size:38px;line-height:1.4}.site-title h3{direction:ltr;text-align:left;margin:2px 0 0;font-size:20px;color:#555;font-family:Arial,sans-serif}.main-nav{direction:rtl;text-align:center;margin-top:15px}.main-nav a{display:inline-block;margin:0 20px;padding:5px 2px;color:#a40000;font-size:21px;font-weight:700;text-decoration:none}.main-nav a:hover{border-bottom:2px solid #a40000}
.content{direction:rtl;text-align:right;width:90%;max-width:1100px;margin:35px auto}.content p{line-height:2}.content .english,.content [lang="en"]{direction:ltr;text-align:left}.main-footer{direction:ltr;text-align:center;width:100%;padding:24px 12px;background:#fff;border-top:2px solid #b00000;margin-top:40px}.main-footer p,.main-footer h3{margin:5px 0}.main-footer a{color:#a40000}
.articles-page{width:min(1320px,96%);margin:28px auto}.articles-heading{background:#fff;border-radius:12px;padding:18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.07)}.articles-heading h2{margin:0;color:#a40000;font-size:30px}.articles-heading p{margin:4px 0 14px}.article-search-wrap{position:relative;max-width:620px;margin-right:0;margin-left:auto}.article-search-wrap i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#777}.article-search-wrap input{width:100%;height:46px;border:1px solid #cfcfcf;border-radius:9px;padding:8px 42px 8px 12px;font-size:17px;direction:rtl;text-align:right;background:#fff}.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0}.category-card{border:1px solid #d7c89c;background:#fffaf0;border-radius:10px;padding:14px 10px;min-height:86px;cursor:pointer;font:inherit;color:#333;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.7;box-shadow:0 2px 7px rgba(0,0,0,.05);transition:.18s}.category-card span{font-size:17px;font-weight:700}.category-card small{color:#777;margin-top:3px}.category-card:hover,.category-card.active{background:#a40000;color:#fff;border-color:#a40000;transform:translateY(-1px)}.category-card:hover small,.category-card.active small{color:#f5e5e5}
.article-workspace{display:flex;flex-direction:row-reverse;direction:ltr;gap:18px;align-items:flex-start}.sidebar{flex:0 0 34%;direction:rtl;background:#fff;border:1px solid #ddd;border-radius:10px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.07);max-height:900px;overflow:auto}.sidebar-title-row{display:flex;direction:rtl;justify-content:space-between;align-items:center;gap:10px;border-bottom:2px solid #c9a44a;padding-bottom:10px;margin-bottom:8px}.sidebar-title-row h3{margin:0;font-size:21px;color:#a40000}.result-count{background:#f1e7cf;border-radius:999px;min-width:30px;padding:3px 8px;text-align:center;font-family:Arial,sans-serif}.article-list{display:flex;flex-direction:column;gap:7px}.article-link{width:100%;border:1px solid #e3e3e3;background:#fafafa;border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;direction:rtl;text-align:right;line-height:1.65;transition:.15s}.article-link span{display:block;font-size:16px;font-weight:650}.article-link small{display:block;color:#777;margin-top:2px}.article-link:hover,.article-link.active-article{border-color:#a40000;background:#fff4f4}.article-link.active-article{box-shadow:inset -4px 0 #a40000}.no-results{text-align:center;color:#777;padding:25px 5px}.viewer{flex:1;min-width:0;direction:ltr;background:#fff;border:1px solid #ddd;border-radius:10px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.07)}.article-intro{padding:12px 18px}.article-intro h2{color:#a40000}.article-intro hr{border:0;border-top:1px solid #ddd;margin:24px 0}.article-toolbar{display:flex;direction:ltr;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ddd}.current-article-title{font-size:20px;font-weight:700;flex:1}.article-actions{display:flex;gap:8px;flex:0 0 auto}.share-btn,.open-pdf-btn{border:0;border-radius:7px;padding:9px 12px;font:inherit;text-decoration:none;cursor:pointer}.share-btn{background:#a40000;color:#fff}.open-pdf-btn{background:#eee;color:#222}#pdfViewer{width:100%;height:760px;border:0;display:none;background:#f5f5f5}#pdfViewer.has-pdf{display:block}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-container{padding:0 15px}.logo{width:180px}.site-title h1{font-size:31px}.article-workspace{display:block}.sidebar{max-height:none;width:100%;margin-bottom:15px}.viewer{width:100%}#pdfViewer{height:72vh;min-height:520px}}
@media(max-width:768px){.main-header{padding-top:12px}.header-container{flex-direction:column-reverse;gap:10px}.header-right{width:100%;justify-content:center}.logo{width:130px;max-width:35vw}.site-title h1{font-size:27px}.site-title h3{font-size:15px}.social-icons{justify-content:center;gap:6px}.social-icon{width:34px;height:34px;font-size:16px}.main-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:10px;padding:0 8px}.main-nav a{margin:0;font-size:17px}.articles-page{width:94%;margin:16px auto}.articles-heading{padding:14px}.articles-heading h2{font-size:26px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.category-card{min-height:76px;padding:10px 7px}.category-card span{font-size:15px}.sidebar{padding:12px}.article-link{padding:11px}.article-link span{font-size:16px}.viewer{padding:11px}.article-toolbar{flex-direction:column;align-items:stretch}.current-article-title{text-align:right}.article-actions{width:100%}.share-btn,.open-pdf-btn{flex:1;text-align:center}#pdfViewer{height:68vh;min-height:480px}.content{width:92%!important;padding:18px!important;font-size:17px!important}.main-footer{font-size:14px}}
@media(max-width:430px){.category-grid{grid-template-columns:1fr 1fr}.category-card span{font-size:14px}.header-right{gap:9px}.logo{width:105px}.site-title h1{font-size:23px}.site-title h3{font-size:13px}.article-search-wrap input{font-size:16px}}

/* Mobile Articles refinement: compact categories and immediate full-width article list */
@media(max-width:768px){
  .articles-heading{padding:11px 12px}
  .articles-heading h2{font-size:23px}
  .articles-heading p{font-size:13px;margin:2px 0 9px}
  .article-search-wrap input{height:40px}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
  .category-card{min-height:58px;padding:6px 4px;border-radius:8px;line-height:1.35}
  .category-card span{font-size:12px;line-height:1.45}
  .category-card small{font-size:10px;margin-top:2px}
  .article-workspace{display:flex;flex-direction:column;gap:10px}
  .sidebar{order:1;width:100%;margin:0;max-height:none;padding:10px}
  .viewer{order:2;width:100%;padding:10px}
  .sidebar-title-row{padding-bottom:7px;margin-bottom:6px}
  .sidebar-title-row h3{font-size:19px}
  .article-list{gap:5px}
  .article-link{padding:9px 10px}
  .article-link span{font-size:15px}
  .article-link small{font-size:11px}
  .article-intro{display:none}
  .viewer:not(:has(#pdfViewer.has-pdf)){display:none}
}
@media(max-width:430px){
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-card{min-height:56px}
  .category-card span{font-size:11.5px}
}

/* Header date panel */
.header-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 0 auto}
.header-dates{font-size:12.5px;line-height:1.65;color:#555;white-space:nowrap}
.header-dates>div{min-height:18px}
.date-gregorian{direction:ltr;text-align:left;font-family:Arial,sans-serif;color:#444}
.date-shamsi,.date-hijri{direction:rtl;text-align:left;color:#555}

@media(max-width:768px){
  .header-left{align-items:center;width:100%;gap:5px}
  .header-dates{text-align:center;font-size:11.5px;line-height:1.55;white-space:normal}
  .date-gregorian,.date-shamsi,.date-hijri{text-align:center}
  /* Keep the category-to-list movement clear on phones. */
  .sidebar{scroll-margin-top:12px}
}
