/*
 * Blog list pages — /blogs, /ar/blogs, /fa/blogs and /blogs/<category|tag|author|page>/… (static Zoho export).
 *
 * 2026-09-22 (UI/UX audit #16). The pages themselves now carry plain-text excerpts cut on a word, one
 * cover per post (its own picture, or the brand cover below when it has none) and no links to empty
 * categories or tags. This file styles what the theme left bare: the sidebar links (default underlined
 * text), the brand cover, the excerpt and the pager, which the card script turned into a photo card.
 * The card itself (white, rounded, gold "Read more") stays in dn-ui-audit.css.
 */

/* ── Sidebar: one link per line, a count pill, the site's ink/gold instead of browser blue ── */
/* Selectors carry the theme's own prefix: blog-style.css lays the list out as wrapping inline chips
   with (0,4,1) specificity. */
.theme-blog-category-column .theme-blog-category-container .theme-blog-category-list ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-blog-category-column .theme-blog-category-container .theme-blog-category-list ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
a.theme-blog-side-menu-link,
.theme-blog-category-column .theme-blog-category-container .theme-blog-category-list ul li .theme-blog-side-menu-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: #171717 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
  word-break: normal;
  transition: background-color .15s ease, color .15s ease;
}
a.theme-blog-side-menu-link:hover,
a.theme-blog-side-menu-link:focus-visible,
.theme-blog-category-column .theme-blog-category-container .theme-blog-category-list ul li .theme-blog-side-menu-link:hover {
  background: rgba(201, 168, 76, .14);
  color: #8d6a22 !important;
  outline: none;
}
.theme-blog-category-column .theme-blog-category-container .theme-blog-category-list ul li .theme-blog-count {
  flex: 0 0 auto;
  min-width: 30px;
  margin: 0 !important;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f4eee2;
  color: #6f5a24;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
/* Tag chips (none are linked today: every tag page is empty, so the pages dropped the list). */
a.theme-blog-category-tag-list-link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(201, 168, 76, .45);
  border-radius: 999px;
  color: #171717 !important;
  font-size: 13px;
  text-decoration: none !important;
}
a.theme-blog-category-tag-list-link:hover { border-color: #8d6a22; color: #8d6a22 !important; }
/* A sidebar with nothing left in it (the Persian blog: no posts, no categories yet) takes no room. */
.theme-blog-category-column:not(:has(.theme-blog-category-container)) { display: none !important; }
.theme-blog-part-row:not(:has(.theme-blog-category-container)) > .theme-blog-container-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ── Cards ────────────────────────────────────────────────────────────────────────────────── */
.dn-blog-excerpt {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
  /* Safety net only: the text is already cut at ~150 characters on a word. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A post without a picture of its own gets the brand mark, not another post's photo (the "Top
   Tourist Attractions" card used to show the Burj Al Arab article's image). */
a.dn-blog-cover.dn-blog-cover--brand {
  background:
    url("/IMG_1730.png?v=2") center / auto 58% no-repeat,
    radial-gradient(120% 95% at 50% 0%, #2a3441 0%, #111827 72%);
}
.theme-blog-date time { font-variant-numeric: tabular-nums; }

/* ── Pager: a centred ink+gold button, not a card with a photo ────────────────────────────── */
.dn-page-blog .theme-blog-container.theme-blog-prev-next {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 0 !important;
}
.theme-blog-prev-next > .dn-blog-cover { display: none !important; }
/* "No posts yet" (the Persian blog) is a message across the column, not a photo card. */
.dn-page-blog .theme-blog-container:has(.dn-blog-empty) { grid-column: 1 / -1; height: auto; }
.theme-blog-container:has(.dn-blog-empty) > .dn-blog-cover { display: none !important; }
.dn-blog-empty { padding: 28px 22px; text-align: center; }
.theme-blog-prev-next .zpbutton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(201, 162, 77, .7) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1f2937, #111827) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}