/* Add custom CSS styles below */ 
/* ==================================================
   تفاحة ريان - تصميم المدونة فقط
   Scoped: لا يؤثر على الرئيسية أو المنتجات أو التصنيفات
   ================================================== */


/* ==============================
   BLOG INDEX
   ============================== */

.tr-blog-index {
  max-width: 1220px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.tr-blog-index > .center-between {
  margin-bottom: 0;
}


/* إخفاء تصميم رائد القديم للمدونة فقط */

.tr-blog-index .cat-filter,
.tr-blog-index #filters-menu,
.tr-blog-index #blog-home-slider {
  display: none !important;
}


/* ==============================
   HEADER / HUB
   ============================== */

.tr-hub {
  margin: 24px 0 18px;
}

.tr-hub-heading {
  margin-bottom: 18px;
}

.tr-hub-title {
  margin: 0;
  color: #687a4d;
  font-size: 34px;
  line-height: 1.45;
  font-weight: 800;
}


/* ==============================
   BLOG CATEGORIES
   ============================== */

.tr-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}

.tr-topic {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;

  border: 1px solid #eceae5;
  border-radius: 12px;

  background: #fff;

  color: #26312e;

  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;

  text-align: center;
  text-decoration: none;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.tr-topic:hover,
.tr-topic.is-active {
  border-color: rgba(104, 122, 77, 0.32);
  background: #fcfcf8;
  color: #4f603a;
}


/* ==============================
   MAIN BLOG AREA
   ============================== */

.tr-blog-index .grid.grid-cols-1 {
  display: block;
}

.tr-blog-index .main-content {
  width: 100%;
}


/* ==============================
   LATEST ARTICLES TITLE
   ============================== */

.tr-latest-title {
  margin: 0 0 8px;

  color: #254e45;

  font-size: 21px;
  line-height: 1.5;
  font-weight: 800;
}


/* ==============================
   ARTICLE LIST
   ============================== */

.tr-blog-index salla-infinite-scroll {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 0 42px !important;

  width: 100% !important;
}


/* البطاقة */

.tr-blog-index
[data-testid="store-blog-article-card"] {
  display: block !important;

  min-width: 0;
  min-height: 0 !important;

  padding: 0 !important;

  border: 0 !important;
  border-bottom: 1px solid #eceae5 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* إخفاء صورة بطاقة المقال */

.tr-blog-index
[data-testid="store-blog-article-card"]
> a:first-child {
  display: none !important;
}


/* إزالة المسافات الأصلية */

.tr-blog-index
[data-testid="store-blog-article-card"]
> .flex-1 {
  padding: 0 !important;
}


/* إخفاء التاريخ والمؤلف والوصف والإحصائيات والوسوم */

.tr-blog-index
[data-testid="store-blog-article-card"]
> .flex-1
> div:first-child,

.tr-blog-index
[data-testid="store-blog-article-card"]
.post-entry__title
~ p,

.tr-blog-index
[data-testid="store-blog-article-card"]
.post-entry__icons,

.tr-blog-index
[data-testid="store-blog-article-card"]
> .p-4 {
  display: none !important;
}


/* ==============================
   ARTICLE TITLE LINK
   ============================== */

.tr-blog-index .post-entry__title {
  margin: 0 !important;
}

.tr-blog-index .post-entry__title a {
  min-height: 58px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 11px 3px;

  color: #27312e !important;

  font-size: 16px;
  line-height: 1.65;
  font-weight: 700;

  text-decoration: none;
}


/* النقطة الذهبية */

.tr-blog-index .post-entry__title a::before {
  content: "";

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #b77a25;
}

.tr-blog-index .post-entry__title a:hover {
  color: #52633e !important;
}


/* ==============================
   SALLA LOAD MORE
   ============================== */

.tr-blog-index .s-infinite-scroll-wrapper {
  margin-top: 24px;
}

.tr-blog-index .s-infinite-scroll-btn {
  min-width: 180px;
  min-height: 42px;

  border: 1px solid rgba(104, 122, 77, 0.22);

  border-radius: 10px;

  background: #eef6f0;

  color: #274d41;

  font-size: 12px;
  font-weight: 800;

  box-shadow: none;
}


/* ==================================================
   SINGLE ARTICLE
   ================================================== */

.tr-blog-single {
  max-width: 1220px;

  margin: 0 auto 60px;

  padding: 0 24px;
}


/* ==============================
   ARTICLE LAYOUT
   ============================== */

.tr-article-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 816px)
    minmax(220px, 280px);

  justify-content: center;
  align-items: start;

  gap: 48px;
}


/* ==============================
   ARTICLE MAIN
   ============================== */

.tr-article-main {
  width: 100% !important;

  min-width: 0;

  padding: 0 !important;

  background: transparent !important;
}


/* عنوان المقال */

.tr-article-main > h1 {
  margin: 0 0 12px !important;

  color: #202724;

  font-size: 34px !important;
  line-height: 1.5 !important;

  font-weight: 800;
}


/* التاريخ والمؤلف */

.tr-article-main
> .mb-10.text-gray-500 {
  margin-bottom: 22px !important;

  color: #626b65 !important;

  font-size: 12px !important;
}


/* ==============================
   ARTICLE COVER IMAGE
   ============================== */

.tr-article-main > img {
  display: block;

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 16 / 9;

  margin: 0 0 24px !important;

  border-radius: 14px !important;

  object-fit: cover;
}


/* ==============================
   LIKE
   ============================== */

.tr-article-main #blog-like {
  border: 0;
  background: transparent;
}


/* ==============================
   ARTICLE BODY
   ============================== */

.tr-article-body {
  margin-bottom: 30px !important;

  color: #343a34;

  font-size: 17px !important;

  line-height: 1.95 !important;
}

.tr-article-body p {
  margin: 0 0 15px;

  font-size: 17px;

  line-height: 1.95;
}


/* H2 */

.tr-article-body h2 {
  margin: 38px 0 14px;

  color: #5b6c43;

  font-size: 27px;

  line-height: 1.55;

  font-weight: 800;
}


/* H3 */

.tr-article-body h3 {
  margin: 28px 0 11px;

  color: #5b6c43;

  font-size: 22px;

  line-height: 1.6;

  font-weight: 800;
}


/* Links */

.tr-article-body a {
  color: #9a4337;

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 3px;
}


/* ==============================
   LISTS
   ============================== */

.tr-article-body ul,
.tr-article-body ol {
  margin: 10px 0 20px;

  padding-inline-start: 24px;
}

.tr-article-body ul {
  list-style: disc outside;
}

.tr-article-body ol {
  list-style: decimal outside;
}

.tr-article-body li {
  margin: 6px 0;

  line-height: 1.9;
}

.tr-article-body li::marker {
  color: #9a4337;

  font-weight: 700;
}


/* ==============================
   ARTICLE IMAGES
   ============================== */

.tr-article-body img {
  display: block;

  width: auto;

  max-width: 100%;

  height: auto;

  margin: 20px auto 8px;

  border-radius: 14px;

  object-fit: contain;
}


/* ==============================
   TABLES
   ============================== */

.tr-article-body table {
  width: 100%;

  max-width: 100%;

  table-layout: fixed;

  border-collapse: collapse;

  background: #fff;

  font-size: 14px;
}

.tr-article-body th,
.tr-article-body td {
  padding: 12px 14px;

  border: 1px solid rgba(104, 122, 77, 0.12);

  overflow-wrap: anywhere;

  text-align: start;

  vertical-align: top;
}

.tr-article-body th {
  color: #4f5f3b;

  background: #f6f8f1;

  font-weight: 800;
}


/* ==============================
   RELATED ARTICLES
   ============================== */

.tr-related {
  position: sticky !important;

  top: 96px !important;

  width: 100% !important;

  margin: 0 !important;

  padding-bottom: 0 !important;
}

.tr-related > h2 {
  margin: 0 0 10px;

  color: #303630;

  font-size: 20px;

  font-weight: 800;
}

.tr-related > div {
  display: block !important;

  margin-top: 0 !important;

  padding: 13px 0 !important;

  border-bottom: 1px solid #eceae5;

  border-radius: 0 !important;

  background: transparent !important;
}


/* نخفي صور related */

.tr-related > div .shrink-0 {
  display: none !important;
}

.tr-related > div > div:last-child {
  margin: 0 !important;
}

.tr-related > div h3 {
  margin: 0;
}

.tr-related > div h3 a {
  color: #303630;

  font-size: 13px;

  line-height: 1.7;

  font-weight: 700;

  text-decoration: none;
}

.tr-related > div h3 a:hover {
  color: #4f603a;
}

.tr-related > div time {
  color: #626b65;

  font-size: 11.5px;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 991px) {

  .tr-topics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .tr-article-layout {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .tr-related {
    position: static !important;

    max-width: 816px;
  }
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 767px) {

  .tr-blog-index,
  .tr-blog-single {
    padding: 0 16px;
  }

  .tr-hub {
    margin-top: 14px;
  }

  .tr-hub-title,
  .tr-article-main > h1 {
    font-size: 27px !important;
  }

  .tr-topics {
    gap: 8px;
  }

  .tr-topic {
    min-height: 64px;

    padding: 10px;

    font-size: 12.5px;
  }

  .tr-blog-index salla-infinite-scroll {
    grid-template-columns: 1fr !important;
  }

  .tr-blog-index .post-entry__title a {
    min-height: 54px;

    font-size: 14px;
  }

  .tr-article-body,
  .tr-article-body p {
    font-size: 16px !important;
  }

  .tr-article-body h2 {
    margin-top: 30px;

    font-size: 22px;
  }

  .tr-article-body h3 {
    margin-top: 23px;

    font-size: 18px;
  }
}