/* =========================================================
   ZOHO BLOG – FINAL SINGLE SOURCE (REPLACE ALL WITH THIS)
   - Categories: LI = pill (text + count inside same pill)
   - Count: small badge (no flex:1 stretching)
   - Tags: horizontal + wrap (fix Zoho width:100% / block wrappers)
   - Images: force show (img OR background thumbnails)
   - Excerpt: hide only description text, NOT image/title/meta
   ========================================================= */
    .theme-blog-part-row{padding-top:50px;}
/* -----------------------------
   0) Sidebar cleanup (remove dashed/boxes)
   ----------------------------- */
.theme-blog-category-column .theme-blog-category-container,
.theme-blog-category-column .theme-blog-tag-container,
.theme-blog-category-column .theme-blog-category-part,
.theme-blog-category-column .theme-blog-tag-list{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* =====================================================
   1) CATEGORIES: make LI the pill (so count doesn't break layout)
   DOM: <li><a>Title</a><p class="theme-blog-count">(2)</p></li>
   ===================================================== */

/* list layout */
.theme-blog-category-container ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

/* pill is LI */
.theme-blog-category-container ul > li{
  /* kill Zoho flex:1 on li */
  flex: 0 0 auto !important;
  width: 100% !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:10px 12px !important;       /* compact padding */
  border-radius:16px !important;
  border:1px solid rgba(17,19,24,.14) !important;
  background:#fff !important;
}

/* link text */
.theme-blog-category-container ul > li > a{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  text-decoration:none !important;
  color:#111318 !important;

  font-family: ui-sans-serif, system-ui !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.1 !important;
}

/* count badge */
.theme-blog-category-container ul > li > .theme-blog-count{
  flex: 0 0 auto !important;          /* ✅ stop stretching */
  margin:0 !important;

  padding:2px 8px !important;
  border-radius:999px !important;
  background:rgba(17,19,24,.08) !important;

  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.6 !important;
  color:#111318 !important;

  white-space:nowrap !important;
}

/* hover on whole pill */
.theme-blog-category-container ul > li:hover{
  background:#111318 !important;
  border-color:#111318 !important;
}
.theme-blog-category-container ul > li:hover > a,
.theme-blog-category-container ul > li:hover > .theme-blog-count{
  color:#fff !important;
}
.theme-blog-category-container ul > li:hover > .theme-blog-count{
  background:rgba(255,255,255,.22) !important;
}

/* =====================================================
   2) TAGS: force horizontal + wrap
   Zoho sometimes makes each li width:100% or puts a wrapper div.
   ===================================================== */

/* tag list container (ul) */
.theme-blog-tag-container ul,
.theme-blog-tag-list{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;          /* ✅ allow next line */
  gap:10px !important;
  align-items:center !important;
}

/* li: stop taking full width */
.theme-blog-tag-container li,
.theme-blog-tag-list li,
.theme-blog-tag-list ul li,
.theme-blog-tag-list li.theme-blog-category-tag-list{
  display:inline-flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;

  background: transparent !important;
  border:0 !important;
}

/* if Zoho wraps each tag inside a block div (grey box), remove wrapper effect */
.theme-blog-tag-container li > div,
.theme-blog-tag-list li > div{
  display:contents !important;
  background: transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* tag chip */
.theme-blog-tag-container a,
.theme-blog-tag-list a{
  display:inline-flex !important;
  align-items:center !important;

  padding:6px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(17,19,24,.14) !important;
  background:#fff !important;

  font-family: ui-sans-serif, system-ui !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;

  color:#111318 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.theme-blog-tag-container a:hover,
.theme-blog-tag-list a:hover{
  background:#111318 !important;
  border-color:#111318 !important;
  color:#fff !important;
}

/* =====================================================
   3) BLOG IMAGES: force show (img OR background thumb)
   IMPORTANT: Some Zoho templates use <img>, others use background-image on a div.
   ===================================================== */

/* common wrappers */
.theme-blog-post-image,
.theme-blog-post-media,
.theme-blog-post-thumb,
.theme-blog-post-thumbnail,
.zs-blog-post-image{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  height:auto !important;
  max-height:none !important;
}

/* if thumbnail is a background div, ensure it has a height */
.theme-blog-post-image,
.theme-blog-post-thumb,
.theme-blog-post-thumbnail{
  min-height:180px !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* img-based */
.theme-blog-post-image img,
.theme-blog-post-media img,
.theme-blog-post-thumb img,
.theme-blog-post-thumbnail img,
.zs-blog-post-image img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  max-width:100% !important;
  height:auto !important;
  border-radius:18px !important;
}

/* inline display:none overrides */
.theme-blog-post-image[style*="display:none"],
.theme-blog-post-media[style*="display:none"],
.theme-blog-post-thumb[style*="display:none"],
.theme-blog-post-thumbnail[style*="display:none"],
.zs-blog-post-image[style*="display:none"]{
  display:block !important;
}

/* =====================================================
   4) HIDE ONLY EXCERPT (keep title/meta/image)
   ===================================================== */
.theme-blog-post-excerpt,
.theme-blog-post-content,
.theme-blog-post-excerpt p,
.theme-blog-post-content p,
.theme-blog-post-desc,
.theme-blog-post-description{
  display:none !important;
}

/* never hide the main post wrapper (some themes put image inside it) */
.theme-blog-post-body,
.theme-blog-post-header,
.theme-blog-post-part{
  display:block !important;
}
/* =========================================================
   LAYOUT: md-5 -> md-3  |  md-7 -> md-9  (Desktop only)
   Mobile stays 12/12
   ========================================================= */

/* Desktop (>=768px typically) */
@media (min-width: 768px){

  /* Sidebar column: 5 -> 3 */
  .theme-blog-category-column.zpcol-md-5{
    flex: 0 0 25% !important;     /* 3/12 = 25% */
    max-width: 25% !important;
  }

  /* Main blog container: 7 -> 9 */
  .theme-blog-container-column.zpcol-md-7{
    flex: 0 0 75% !important;     /* 9/12 = 75% */
    max-width: 75% !important;
  }
}

/* Safety: on small screens keep full width */
@media (max-width: 767.98px){
  .theme-blog-category-column,
  .theme-blog-container-column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   BLOG IMAGE: force return (img OR background-thumb templates)
   ========================================================= */

/* Common wrappers (some themes use background-image, some use <img>) */
.theme-blog-post-image,
.theme-blog-post-media,
.theme-blog-post-thumb,
.theme-blog-post-thumbnail,
.zs-blog-post-image{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* If thumbnail is a DIV with background-image, ensure it has height */
.theme-blog-post-image,
.theme-blog-post-thumb,
.theme-blog-post-thumbnail{
  min-height: 180px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 18px !important;
  overflow:hidden !important;
}

/* If thumbnail is an IMG */
.theme-blog-post-image img,
.theme-blog-post-media img,
.theme-blog-post-thumb img,
.theme-blog-post-thumbnail img,
.zs-blog-post-image img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  max-width:100% !important;
  height:auto !important;
  border-radius:18px !important;
}

/* If Zoho injects inline display:none */
.theme-blog-post-image[style*="display:none"],
.theme-blog-post-media[style*="display:none"],
.theme-blog-post-thumb[style*="display:none"],
.theme-blog-post-thumbnail[style*="display:none"],
.zs-blog-post-image[style*="display:none"]{
  display:block !important;
}

/* =========================================================
   Hide ONLY excerpt/description (keep image/title/meta)
   (اگر قبلاً گذاشتی، همین رو نگه دار)
   ========================================================= */
.theme-blog-post-excerpt,
.theme-blog-post-content,
.theme-blog-post-excerpt p,
.theme-blog-post-content p,
.theme-blog-post-desc,
.theme-blog-post-description{
  display:none !important;
}

/* Never hide wrappers (sometimes image lives inside) */
.theme-blog-post-body,
.theme-blog-post-header,
.theme-blog-post-part{
  display:block !important;
}
/* =========================================================
   BLOG – MOBILE: WHITE TEXT ON BLACK + HORIZONTAL CATS/TAGS
   (Add at the END of your CSS)
   ========================================================= */
@media (max-width: 768px){

  /* 1) اگر روی موبایل بخش سایدبار/کانتینر رو مشکی می‌کنی */
  .theme-blog-category-column,
  .theme-blog-category-container,
  .theme-blog-tag-container{
    background:#000 !important;
  }

  /* 2) متن‌ها وقتی زمینه مشکیه سفید شوند */
  .theme-blog-category-column,
  .theme-blog-category-column *{
    color:#fff !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  /* تیترهای Categories / Tags (بعضی تم‌ها با h2/h3 میارن) */
  .theme-blog-category-column h1,
  .theme-blog-category-column h2,
  .theme-blog-category-column h3,
  .theme-blog-category-column .title,
  .theme-blog-category-column .theme-blog-category-title,
  .theme-blog-category-column .theme-blog-tag-title{
    color:#fff !important;
  }

  /* لینک‌های سایدبار */
  .theme-blog-category-container a,
  .theme-blog-tag-container a,
  .theme-blog-tag-list a{
    color:#fff !important;
  }

  /* 3) Categories افقی + wrap */
  .theme-blog-category-container ul{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  /* هر category مثل چیپ کنار هم */
  .theme-blog-category-container ul > li{
    width:auto !important;
    flex:0 0 auto !important;
    padding:8px 10px !important;
    border-radius:999px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  /* متن داخل چیپ */
  .theme-blog-category-container ul > li > a{
    font-size:11px !important;
    letter-spacing:.10em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    color:#fff !important;
  }

  /* count به صورت badge کوچیک کنار متن */
  .theme-blog-category-container ul > li > .theme-blog-count{
    background: rgba(255,255,255,.16) !important;
    color:#fff !important;
    border-radius:999px !important;
    padding:2px 7px !important;
    font-size:11px !important;
    line-height:1.6 !important;
  }

  /* Hover */
  .theme-blog-category-container ul > li:hover{
    background:#fff !important;
    border-color:#fff !important;
  }
  .theme-blog-category-container ul > li:hover > a{
    color:#000 !important;
  }
  .theme-blog-category-container ul > li:hover > .theme-blog-count{
    background: rgba(0,0,0,.12) !important;
    color:#000 !important;
  }

  /* 4) Tags افقی + wrap */
  .theme-blog-tag-container ul,
  .theme-blog-tag-list{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .theme-blog-tag-container li,
  .theme-blog-tag-list li{
    width:auto !important;
    flex:0 0 auto !important;
  }

  /* اگر Zoho wrapper div میذاره */
  .theme-blog-tag-container li > div,
  .theme-blog-tag-list li > div{
    display:contents !important;
  }

  /* چیپ‌های تگ */
  .theme-blog-tag-container a,
  .theme-blog-tag-list a{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
    border-radius:999px !important;
    padding:7px 12px !important;
    font-size:11px !important;
    letter-spacing:.10em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  .theme-blog-tag-container a:hover,
  .theme-blog-tag-list a:hover{
    background:#fff !important;
    border-color:#fff !important;
    color:#000 !important;
  }
}
.theme-blog-post-header{background:white;}
.theme-single-blog-header{background:white;}