@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;800;900&family=Noto+Naskh+Arabic:wght@400;600;700&display=swap');

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0e1116;
  --muted:#667085;
  --line:rgba(15,23,42,.10);
  --brand:#b32026; /* Hadeeth AlBalad main color */
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --r:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:14px}
.muted{color:var(--muted)}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}

/* Header */
.site-header{position:sticky;top:0;background:rgba(246,247,251,.9);backdrop-filter: blur(10px);border-bottom:1px solid var(--line);z-index:10}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:34px;height:34px;object-fit:contain}
.brand-name{font-weight:900;letter-spacing:.2px}
.top-nav{display:flex;gap:10px;flex-wrap:wrap}
/* Header links (incl. social icons): make them readable + finger-friendly */
.top-nav a{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  font-size:15px;
  line-height:1;
}
/* Support FontAwesome / SVG / IMG based icons */
.top-nav a i{font-size:20px;line-height:1}
.top-nav a svg{width:20px;height:20px}
.top-nav a img{width:20px;height:20px;object-fit:contain}
.top-nav a:hover{border-color:rgba(179,32,38,.35)}
.top-nav a:focus-visible{outline:3px solid rgba(179,32,38,.22);outline-offset:2px}
/* Header social icons (if they're not inside .top-nav) */
.site-header .social,
.site-header .social-icons,
.site-header .header-social{display:flex;gap:10px;align-items:center}
.site-header .social a,
.site-header .social-icons a,
.site-header .header-social a{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.site-header .social a i,
.site-header .social-icons a i,
.site-header .header-social a i{font-size:20px;line-height:1}
.site-header .social a svg,
.site-header .social-icons a svg,
.site-header .header-social a svg{width:20px;height:20px}
.site-header .social a img,
.site-header .social-icons a img,
.site-header .header-social a img{width:20px;height:20px;object-fit:contain}

@media(max-width:780px){
  .header-row{flex-wrap:wrap}
  .top-nav{flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;gap:8px;width:100%}
.top-nav a{white-space:nowrap;min-height:44px;font-size:16px}
.top-nav a i{font-size:22px}
.top-nav a svg{width:22px;height:22px}
.top-nav a img{width:22px;height:22px}
/* Bigger header social icons on mobile */
.site-header .social a,
.site-header .social-icons a,
.site-header .header-social a{width:44px;height:44px}
.site-header .social a i,
.site-header .social-icons a i,
.site-header .header-social a i{font-size:22px}
.site-header .social a svg,
.site-header .social-icons a svg,
.site-header .header-social a svg{width:22px;height:22px}
.site-header .social a img,
.site-header .social-icons a img,
.site-header .header-social a img{width:22px;height:22px}
}


/* Layout */
.main{padding-top:14px;padding-bottom:30px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad{padding:14px}

.h2{font-size:18px;margin:0 0 10px 0;font-weight:900;position:relative}

.h2::after{
  content:"";
  position:absolute;
  bottom:-6px;
  right:0;
  width:44px;
  height:3px;
  border-radius:999px;
  background:var(--brand);
  opacity:.85;
}

.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
.badge{border-color:rgba(179,32,38,.25)}

/* Buttons (minimal) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:900
}
.btn.primary{background:var(--brand);color:#fff;border-color:rgba(179,32,38,.4)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Ads */
.ad{margin:12px 0}
.ad.sidebar{position:sticky;top:84px}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fff}
.footer-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* ARTICLE */
.post-img{width:100%;height:320px;object-fit:cover}
@media(max-width:900px){.post-img{height:220px}}
.article-content{line-height:1.95;font-size:17px}
.article-content p{margin:0 0 12px 0}

/* HOME GRID (Hero full width, no Tweets—clean) */
.home-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-areas:
    "hero side"
    "slider side"
    "latest side";
  gap:14px;
}

/* RTL note: grid areas still work properly */
.hero{grid-area:hero;min-height:420px}
.slider{grid-area:slider}
.latest{grid-area:latest}
.side{grid-area:side}

@media(max-width:980px){
  .home-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "slider"
      "side"
      "latest";
  }
  .hero{min-height:340px}
}

/* HERO */
.hero-link{display:block;position:relative;height:100%}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img--placeholder{background:linear-gradient(135deg,#eee,#ddd)}
.hero-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;
  background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.08));
  color:#fff;
}
.hero-meta .badge{background:rgba(255,255,255,.95);color:#111;border-color:rgba(255,255,255,.45)}
.hero-title{margin:10px 0 6px 0;font-weight:900;font-size:26px;line-height:1.25}
.hero-excerpt{margin:0;color:rgba(255,255,255,.90);line-height:1.65;max-width:70ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{margin-top:12px}
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  background:var(--brand);
  color:#fff;font-weight:900;
  box-shadow:0 10px 24px rgba(179,32,38,.25);
}
.hero-cta::after{content:"\2190"; /* left arrow */ font-weight:900}

@media(max-width:520px){
  .hero-title{font-size:22px}
  .hero-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-cta{padding:9px 12px;font-size:13px}
}

/* SLIDER (fade, full height inside box) */
.slider-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.slider-fade{
  position:relative;
  height:420px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
@media(max-width:980px){ .slider-fade{height:340px} }
@media(max-width:520px){ .slider-fade{height:280px} }

.s-slide{
  position:absolute;inset:0;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.s-slide.active{opacity:1;pointer-events:auto}
.s-img{width:100%;height:100%;object-fit:cover;display:block}
.s-img--placeholder{background:linear-gradient(135deg,#eee,#ddd)}
.s-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;
  background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.10));
  color:#fff;
}
.s-overlay .badge{background:rgba(255,255,255,.95);color:#111;border-color:rgba(255,255,255,.45)}
.s-title{margin-top:8px;font-weight:900;line-height:1.25;font-size:18px}
.s-read{
  margin-top:10px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(179,32,38,.95);
  color:#fff;font-weight:900;
  width:max-content;
}
.s-read::after{content:"\2190"; font-weight:900}

.slider-dots{display:flex;gap:6px}
.dot{
  width:8px;height:8px;border-radius:999px;border:1px solid rgba(179,32,38,.25);
  background:rgba(15,23,42,.18);cursor:pointer
}
.dot.active{background:var(--brand);border-color:rgba(179,32,38,.4)}


/* MINI FEATURE GRID */
.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:12px;
}
.mini-card{
  display:block;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.mini-card:hover{border-color:rgba(179,32,38,.22);transform:translateY(-1px)}
.mini-img{width:100%;height:160px;object-fit:cover;display:block}
.mini-img--placeholder{background:linear-gradient(135deg,#eee,#ddd)}
.mini-body{padding:10px}
.mini-title{margin-top:8px;font-weight:900;line-height:1.45}
.mini-meta{gap:8px}
.mini-cta{
  margin-top:10px;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand);font-weight:900;font-size:13px;
}
.mini-cta::after{content:"\2190";font-weight:900}

@media(max-width:980px){
  .mini-grid{grid-template-columns:1fr}
  .mini-img{height:210px}
}

/* LATEST LIST */
.list{display:flex;flex-direction:column;gap:12px}
.item{display:flex;gap:12px;align-items:stretch;padding:10px;border-radius:16px;border:1px solid rgba(15,23,42,.08);background:#fff}
.item:hover{border-color:rgba(179,32,38,.22);transform:translateY(-1px)}
.thumb{width:140px;min-width:140px;height:96px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#eee}
.item-body{flex:1;min-width:0}
.item-title{margin:0;font-weight:900;line-height:1.4}
.excerpt{color:var(--muted);margin:8px 0 0 0;line-height:1.65}
.item-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.read-mini{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand);
  font-weight:900;
  font-size:13px;
}
.read-mini::after{content:"\2190"; font-weight:900}

@media(max-width:520px){
  .item{flex-direction:column}
  .thumb{width:100%;height:190px;min-width:0}
  .item-footer{gap:6px}
}

/* SIDEBAR custom upload + google ad */
.sponsor-box{border:1px dashed rgba(179,32,38,.28);border-radius:16px;padding:10px;background:#fff}
.sponsor-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.sponsor-placeholder{padding:18px;border-radius:12px;background:rgba(179,32,38,.04);text-align:center}

/* PRINT */
@media print {
  .site-header,.site-footer,.ad,.top-nav{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:0}
  .container{max-width:100%;padding:0}
  .post-img{height:auto}
}

/* CP (English) – keep minimal */
.cp-wrap{max-width:980px;margin:0 auto;padding:16px}
.cp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.cp-top a{color:#0A84FF;font-weight:900}
.cp-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.cp-grid{display:grid;grid-template-columns:1fr;gap:12px}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){.cp-row{grid-template-columns:1fr}}
label{font-weight:900;font-size:13px;color:#111}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  font-family:inherit;font-size:14px;background:#fff
}
textarea{min-height:160px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{background:#f7f7fb}
.small{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}


/* CP Dashboard KPIs */
.kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:12px;
}
.kpi{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.kpi .n{
  font-weight:900;
  font-size:22px;
  line-height:1.1;
  color:var(--brand);
}
.kpi .t{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* Sidebar: Most Read (minimal, by category) */
.mr-wrap{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.mr-cat{padding:10px;border:1px solid rgba(15,23,42,.08);border-radius:16px;background:#fff}
.mr-cat-title{font-weight:900;margin:0 0 8px 0}
.mr-list{display:flex;flex-direction:column;gap:8px}
.mr-item{
  display:flex;gap:10px;align-items:center;
  padding:8px;border-radius:12px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(179,32,38,.03);
  transition:transform .12s ease,border-color .12s ease;
}
.mr-item:hover{border-color:rgba(179,32,38,.22);transform:translateY(-1px)}
.mr-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:#eee;flex:0 0 52px}
.mr-thumb--placeholder{background:linear-gradient(135deg, rgba(179,32,38,.10), rgba(15,23,42,.05))}
.mr-title{
  font-weight:800;line-height:1.35;font-size:13px;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Sidebar: Latest News (under ads) */
.side-latest{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.side-latest a{
  display:flex;gap:10px;align-items:center;
  padding:10px;border-radius:14px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(179,32,38,.03);
  transition:transform .12s ease,border-color .12s ease;
}
.side-latest a:hover{border-color:rgba(179,32,38,.22);transform:translateY(-1px)}
.side-thumb{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:#eee;flex:0 0 56px}
.side-thumb--placeholder{background:linear-gradient(135deg, rgba(179,32,38,.10), rgba(15,23,42,.05))}
.side-latest .side-title{
  font-weight:900;line-height:1.35;font-size:13px;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.side-latest .side-time{margin-top:4px;font-size:12px;color:var(--muted)}

/* =====================================================================
   Hadeeth AlBalad — Editorial Pro Theme (2026)
   هدفه: يرفع إحساس (مؤسسة إعلامية عريقة) بدون ما نغيّر الـstructure
   ===================================================================== */

:root{
  /* tighter, more editorial */
  --bg:#f3f5f8;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#6b7280;
  --line:rgba(15,23,42,.12);
  --brand:#b32026;
  --shadow:0 10px 26px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
  --r:14px;
  --container:1240px;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-rendering:optimizeLegibility;
}

/* global links: slightly more newsroom */
a{transition:color .12s ease, background-color .12s ease}
a:hover{color:var(--brand)}

.container{max-width:var(--container);padding:18px}
@media(max-width:520px){.container{padding:14px}}

/* Header: clean newsroom bar (no pill look) */
.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 20px rgba(15,23,42,.05);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;
  height:3px;
  background:var(--brand);
}
.header-row{padding:10px 0}
.brand-name{font-weight:900;font-size:20px;letter-spacing:0}

.top-nav{gap:6px}
.top-nav a{
  border:0;
  background:transparent;
  border-radius:12px;
  padding:10px 10px;
  min-height:40px;
  font-weight:900;
  color:rgba(11,18,32,.84);
}
.top-nav a:hover{background:rgba(179,32,38,.06);color:var(--brand)}
.top-nav a:focus-visible{outline:3px solid rgba(179,32,38,.22);outline-offset:2px}

@media(max-width:780px){
  .header-row{padding:8px 0}
  .top-nav a{min-height:44px}
}

/* Cards: less "app" shadow, more "newspaper" lines */
.card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
}
.card-pad{padding:18px}
@media(max-width:520px){.card-pad{padding:14px}}

/* Section titles: editorial underline */
.h2{
  font-size:17px;
  margin:0 0 12px 0;
  font-weight:900;
  padding-bottom:10px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.h2::after{
  bottom:-2px;
  width:52px;
  height:3px;
  opacity:1;
}

/* Meta + badges: more official, less bubbly */
.meta{font-size:12px;gap:8px;color:var(--muted)}
.badge{
  border-radius:10px;
  padding:6px 10px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(15,23,42,.02);
  color:rgba(11,18,32,.86);
  font-weight:900;
}
.meta .badge{background:rgba(179,32,38,.06);border-color:rgba(179,32,38,.18);color:var(--brand)}

/* Fix: badge + brand combo inside post.php should behave like a badge */
.badge.brand{display:inline-flex;align-items:center;gap:6px}

/* Buttons: no jumpy hover */
.btn{border-radius:12px;transition:background-color .12s ease,border-color .12s ease,color .12s ease, box-shadow .12s ease}
.btn:hover{transform:none;box-shadow:0 10px 20px rgba(15,23,42,.06)}
.btn:active{transform:none}
.btn.primary{box-shadow:0 12px 24px rgba(179,32,38,.22)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* HOME: tone down CTAs (institutional vibe) */
.hero-actions{display:none}

/* HERO: stronger title + cleaner overlay */
.hero{min-height:460px}
.hero-overlay{
  padding:22px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.06));
}
.hero-title{font-size:30px;line-height:1.22}
.hero-excerpt{max-width:68ch}
@media(max-width:980px){.hero{min-height:360px}.hero-title{font-size:26px}}
@media(max-width:520px){.hero-title{font-size:22px}}

/* Slider: keep it, but quieter */
.s-read{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.s-slide:hover .s-read{opacity:1;transform:translateY(0)}

/* Tone down "اقرأ" CTAs — show on hover (keeps structure) */
.mini-cta,
.read-mini{opacity:0;transition:opacity .12s ease}
.mini-card:hover .mini-cta,
.item:hover .read-mini{opacity:1}
@media(max-width:780px){
  .mini-cta,
  .read-mini{opacity:1}
}

/* Mini + list items: remove bouncy motion, keep premium hover */
.mini-card:hover,
.item:hover,
.mr-item:hover,
.side-latest a:hover{
  transform:none;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

.item{
  border-radius:14px;
  padding:12px;
}
.item-title{font-size:17px}
.excerpt{font-size:14px}

/* Sidebar: more neutral background blocks */
.mr-item,
.side-latest a{background:#fff}

/* ARTICLE / PAGE typography: "newspaper" reading column */
article.card .card-pad,
.post-body{font-family:"Noto Naskh Arabic","Tajawal",serif}

.post-body{
  line-height:1.9;
  font-size:18px;
  color:rgba(11,18,32,.92);
}
.post-body p{margin:0 0 14px 0}
.post-body h2,
.post-body h3,
.post-body h4{
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:900;
  line-height:1.35;
  margin:20px 0 10px 0;
}
.post-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.post-body blockquote{
  margin:16px 0;
  padding:12px 14px;
  border-right:4px solid rgba(179,32,38,.55);
  background:rgba(179,32,38,.06);
  border-radius:12px;
}

article.card .card-pad > .meta,
article.card .card-pad > h1,
article.card .card-pad > .excerpt,
article.card .card-pad > .btnrow,
article.card .article-content{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

article.card .card-pad > h1{
  font-size:34px !important;
  margin-top:12px !important;
}
@media(max-width:900px){
  article.card .card-pad > h1{font-size:28px !important}
}

.post-img{height:420px}
@media(max-width:900px){.post-img{height:260px}}

.article-content{
  line-height:1.9;
  font-size:18px;
  color:rgba(11,18,32,.92);
}
.article-content p{margin:0 0 14px 0}

.article-content h2,
.article-content h3,
.article-content h4{
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:900;
  line-height:1.35;
  margin:20px 0 10px 0;
}

.article-content a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article-content a:hover{opacity:.9}

.article-content blockquote{
  margin:16px 0;
  padding:12px 14px;
  border-right:4px solid rgba(179,32,38,.55);
  background:rgba(179,32,38,.06);
  border-radius:12px;
}

.article-content img,
.post-body img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
}

/* Footer: cleaner */
.site-footer{background:#fff;border-top:1px solid rgba(15,23,42,.10)}
.footer-row{padding:14px 0}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}