@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");

/* ============================= */
/* Variables */
/* ============================= */
:root {
  --green: #25652c;
  --text: #0c2710;
}

/* ============================= */
/* Page */
/* ============================= */
.news-article-page {
  background: var(--bg);
  min-height: 100vh;
  padding: 24px 0 50px;
  font-family: "Cairo", sans-serif;
}

/* ============================= */
/* Card */
/* ============================= */
.news-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}

/* ============================= */
/* Top Bar */
/* ============================= */
.news-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 20px;
}

.news-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: 0.2s;
}

.news-back-btn:hover {
  background: #ecf7ee;
}

html[dir="ltr"] .news-back-btn {
  transform: scaleX(-1);
}

.news-top-meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* اسم المقالة */
.news-top-title {
  font-size: 36px;
  font-weight: 700;
  color: #25652c;
}

/* اسم الكاتب */
.news-top-author {
  font-size: 26px;
  color: #25652c;
  white-space: nowrap;
}

/* ============================= */
/* Image */
/* ============================= */
.news-hero {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.news-hero img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* ============================= */
/* Meta Bar */
/* ============================= */
.news-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 2px;
}

.news-date {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.news-social {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

.social-btn.x {
  background: #000;
}

.social-btn.fb {
  background: #1877f2;
}

.social-btn.li {
  background: #0a66c2;
}

.social-btn.wa {
  background: #25d366;
}

/* ============================= */
/* Bottom Grid */
/* ============================= */
.news-body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  margin-top: 18px;
}

/* ============================= */
/* Content */
/* ============================= */
.news-content {
  font-size: 24px;
  line-height: 100%;
  color: #000000;
  font-weight: 400;
}

/* ============================= */
/* Sidebar */
/* ============================= */
.news-inline-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.sidebar-title {
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}

.sidebar-item {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 6px;
  border-radius: 10px;
}

.sidebar-item:hover {
  background: #f4faf6;
}

.sidebar-thumb {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-item-title {
  font-weight: 800;
  font-size: 12px;
}

.sidebar-item-date {
  font-size: 11px;
  color: var(--muted);
}

/* ============================= */
/*   Sidebar "اقرأ أيضًا" Style  */
/* ============================= */

/* Container box of the block */
.sideblock {
  background: transparent;
  border-radius: 14px;
}

/* Header row: title + orange icon */
.sideblock-head {
  display: flex;
  align-items: center;
  /* justify-content:space-between; */
  flex-direction: row;
}

.sideblock-title {
  margin-right: 14px;
  font-weight: 700;
  font-size: 36px;
  color: #25652c;
}

/* orange circle icon like screenshot */
.sideblock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
  margin: 5px;
}

.verified-icon {
  color: #f99d27;
  margin-right: 6px;
  font-size: 25px;
  vertical-align: middle;
}

/* List */
.sideblock-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The dark mini cards */
.mini-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

/* Card background like screenshot (dark green/gray) */
.mini-card-body {
  position: relative;
  padding: 12px 12px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2f3b33 0%, #1f281f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* subtle top highlight like screenshot */
.mini-card-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(255, 255, 255, 0.1),
    transparent 55%
  );
  pointer-events: none;
}

/* Title inside dark card */
.mini-card-title {
  position: relative;
  z-index: 1;
  color: #eaf6ee;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* small sub text under title */
.mini-card-sub {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(234, 246, 238, 0.72);
}

/* Hover */
.mini-card:hover .mini-card-body {
  transform: translateY(-1px);
  transition: 0.15s ease;
  border-color: rgba(249, 157, 39, 0.35);
}

/* "more" link like screenshot */
.sideblock-more {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 24px;
  color: #0c2710;
  text-decoration: underline;
}

.sideblock-more:hover {
  text-decoration: underline;
  color: #25652c;
}

/* ============================= */
/* Responsive */
/* ============================= */
@media (max-width: 992px) {
  .news-body-grid {
    grid-template-columns: 1fr;
  }

  .news-hero img {
    height: 240px;
  }

  .news-top-meta,
  .news-top-bar {
    align-items: flex-start;
  }
  .news-top-meta {
    flex-direction: column;
  }

  .news-top-title {
    font-size: 24px;
  }

  .news-top-author {
    font-size: 20px;
  }

  .container-fluid {
    padding: 0 !important;
  }
}

/* ===== Read Also New Design ===== */

.readalso-grid {
  display: grid;
  gap: 14px;
  padding-top: 12px;
}

.readalso-card {
  position: relative;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: block;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
}

/* طبقة غامقة */
.readalso-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* السهم */
.readalso-arrow {
  position: absolute;
  left: 14px;
  top: 80%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* background: rgba(0,0,0,.55); */
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.readalso-arrow i {
  color: #fff;
  font-size: 15px;
}

/* المحتوى */
.readalso-content {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 70px;
  z-index: 3;
  direction: rtl;
}

.readalso-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 6px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.readalso-date {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* حركة لطيفة */
.readalso-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.readalso-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.25);
}

.author-green {
  color: #1f8f3a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.author-verified {
  color: #f99d27;
  font-size: 40px;
  position: relative;
  top: -1px;
}

/* قلب أيقونة sideblock في EN/FR فقط */
html[dir="ltr"] .sideblock-icon svg {
  transform: scaleX(-1);
  transform-origin: center;
}

/* بالعربي (RTL) خليها طبيعية */
html[dir="rtl"] .sideblock-icon svg {
  transform: scaleX(1);
}
:root {
  --orange: #f99d27;
  --green: #25652c;
  --ink: #0b1b0e; /* نص غامق */
  --muted: #516a57; /* نص ثانوي */
  --card: #ffffff;
  --bg: #f2fbf3;
  --line: rgba(37, 101, 44, 0.18);
}

/* منطقة المقال */
.news-article-page {
  background: var(--bg);
}

/* كرت المقال */
.news-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* العنوان بالأعلى */
.news-top-title {
  color: var(--green);
  font-weight: 900;
  letter-spacing: 0;
}

/* تاريخ/ميتا */
.news-date {
  color: var(--muted);
  font-weight: 700;
}

/* ===== محتوى المقال ===== */
.news-content {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.95;
  text-align: justify;
  text-justify: inter-word;
}

/* فقرات */
.news-content p {
  margin: 0 0 14px;
}

/* روابط داخل المحتوى */
.news-content a {
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-content a:hover {
  color: var(--orange);
}

/* عناوين داخل المحتوى */
.news-content h1,
.news-content h2,
.news-content h3,
.news-content h4 {
  color: var(--green);
  font-weight: 900;
  line-height: 1.25;
  margin: 18px 0 10px;
}
.news-content h2 {
  font-size: 24px;
}
.news-content h3 {
  font-size: 20px;
}
.news-content h4 {
  font-size: 18px;
}

/* اقتباس */
.news-content blockquote {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(37, 101, 44, 0.06);
  border-inline-start: 5px solid var(--orange);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 600;
}

/* صور داخل المحتوى */
.news-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 10px 0;
}

/* فاصل */
.news-content hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}
/* قوائم داخل محتوى المقال */
.news-content ul,
.news-content ol {
  margin: 10px 0 16px;
  padding-inline-start: 0; /* إحنا رح نتحكم بالمسافة */
}

.news-content li {
  list-style: none; /* نلغي النقاط الافتراضية */
  position: relative;
  padding-inline-start: 46px; /* مساحة للأيقونة */
  margin: 10px 0;
}

/* أيقونة الورقة كنقطة */
.news-content ul > li::before,
.news-content ol > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  /* SVG كـ Data URI (نفس اللي بعثته) */
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2754%27%20height%3D%2754%27%20viewBox%3D%270%200%2054%2054%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Ccircle%20cx%3D%2727%27%20cy%3D%2727%27%20r%3D%2727%27%20fill%3D%27%23F99D27%27/%3E%3Cpath%20d%3D%27M21.9102%2025.2275C22.0085%2025.1232%2022.1263%2025.0392%2022.2569%2024.9804C22.3876%2024.9216%2022.5286%2024.8891%2022.6718%2024.8848C22.815%2024.8805%2022.9577%2024.9045%2023.0916%2024.9553C23.2256%2025.0062%2023.3482%2025.0829%2023.4525%2025.1811C28.4727%2029.9102%2033.51%2032.7875%2039.4377%2034.2541C40.2375%2032.0723%2040.3084%2029.6709%2039.6177%2027.3282C38.7014%2024.2198%2036.5673%2021.5116%2033.448%2019.4968C30.6634%2017.6982%2027.8802%2017.2298%2025.1877%2016.777C21.7909%2016.2057%2018.5823%2015.6657%2015.5202%2012.4236C15.1793%2012.065%2014.715%2011.9211%2014.2711%2012.0377C13.7639%2012.1741%2013.4236%2012.575%2013.2607%2013.2377C12.8789%2014.7889%2013.1243%2019.1361%2014.1982%2023.7254C15.9225%2031.0986%2018.6743%2034.8295%2020.6796%2036.6616C23.2705%2039.0268%2026.6536%2040.3366%2030.0157%2040.3366C30.6494%2040.3376%2031.2823%2040.2911%2031.9091%2040.1975C34.753%2039.7666%2037.1202%2038.3382%2038.4546%2036.26C32.353%2034.6727%2027.1405%2031.6543%2021.9546%2026.7718C21.8501%2026.6734%2021.766%2026.5554%2021.7072%2026.4245C21.6484%2026.2935%2021.616%2026.1523%2021.6119%2026.0088C21.6078%2025.8654%2021.632%2025.7225%2021.6832%2025.5884C21.7344%2025.4544%2021.8116%2025.3317%2021.9102%2025.2275ZM42.7793%2034.9223C41.6318%2034.7457%2040.5205%2034.5241%2039.4384%2034.2561C39.216%2034.8635%2038.9392%2035.4495%2038.6114%2036.007C38.5616%2036.0923%2038.5091%2036.1768%2038.4552%2036.26C39.7713%2036.6007%2041.104%2036.8738%2042.448%2037.0782C42.591%2037.1033%2042.7376%2037.0996%2042.8791%2037.0674C43.0207%2037.0351%2043.1544%2036.9749%2043.2724%2036.8903C43.3904%2036.8057%2043.4904%2036.6984%2043.5664%2036.5747C43.6424%2036.451%2043.6929%2036.3133%2043.715%2036.1698C43.7371%2036.0263%2043.7303%2035.8798%2043.6951%2035.7389C43.6598%2035.5981%2043.5968%2035.4657%2043.5098%2035.3495C43.4227%2035.2333%2043.3133%2035.1357%2043.188%2035.0623C43.0627%2034.9889%2042.924%2034.9413%2042.78%2034.9223H42.7793Z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
/* الوضع الطبيعي (عربي / RTL): الورقة كما هي */
[dir="rtl"] .news-content ul > li::before,
[dir="rtl"] .news-content ol > li::before {
  transform: scaleX(1);
}

/* إنجليزي / LTR: اقلب الورقة */
[dir="ltr"] .news-content ul > li::before,
[dir="ltr"] .news-content ol > li::before {
  transform: scaleX(-1);
}
/* مسافة داخلية لنص المقال */
.news-main-content {
  padding: 0 12px; /* يمين ويسار */
}

.news-content {
  padding: 8px 12px; /* فوق/تحت + يمين/يسار */
}
/* إخفاء أول عنوان داخل محتوى المقال (العنوان المكرر) */
.news-content h1:first-child {
  display: none;
}