/* Persian / RTL adaptation layer.
   Only direction, font-family and text-alignment are touched here.
   All original colors and variables in templatemo-topic-listing.css are untouched. */

:root {
  --body-font-family: 'Vazirmatn', 'Open Sans', sans-serif;
  --title-font-family: 'Vazirmatn', 'Montserrat', sans-serif;
}

html, body {
  direction: rtl;
  text-align: right;
}

.navbar-brand span,
.navbar-brand {
  font-family: var(--title-font-family);
}

.navbar-brand img.brand-logo {
  height: 40px;
  width: auto;
  margin-inline-end: 8px;
}

.breadcrumb {
  direction: rtl;
}

/* Bootstrap's breadcrumb divider ("/") uses float:left, which is a
   physical (non-direction-aware) property and doesn't flip for RTL.
   That pushes the divider to the wrong side and collapses the gap
   between items ("خانه" sticking to the next word). Float it right
   instead, and move its spacing to the correct side. */
.breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-right: 0;
  padding-left: var(--bs-breadcrumb-item-padding-x);
}

.dropdown-menu {
  text-align: right;
}

/* This navbar disables Bootstrap's Popper-based positioning for
   in-navbar dropdowns, so the browser falls back to the CSS spec's
   default abs-position rule for RTL elements, which anchors the
   menu's RIGHT edge to the toggle and grows it LEFTWARD - covering
   the neighbouring nav item instead of opening cleanly under the
   toggle. Anchor the LEFT edge instead so the menu grows away from
   the other nav items, toward the open space near the logo. */
.navbar-nav .dropdown-menu {
  left: 0;
  right: auto;
}

blockquote {
  border-inline-start: 3px solid currentColor;
  border-inline-end: none;
  padding-inline-start: 1rem;
  padding-inline-end: 0;
}

.accordion-button::after {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.form-floating > label {
  right: 0;
  left: auto;
}

.social-share p {
  margin-inline-end: 1rem;
}

.hero-desc, .site-footer p, .accordion-body {
  line-height: 2;
}

/* Live search suggestions dropdown under the homepage search box */
.search-suggestions {
  display: none;
  position: fixed;
  z-index: 2000;
  background-color: #fff;
  border-radius: var(--border-radius-small, 10px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  text-align: right;
  max-height: 360px;
}

.search-suggestions.show {
  display: block;
}

.search-suggestions .search-suggestions-label {
  padding: 0.6rem 1rem 0.25rem;
  font-size: 0.8rem;
  color: #8a8a8a;
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  cursor: pointer;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
  background-color: var(--section-bg-color, #f0f8ff);
}

.search-suggestion-item img {
  width: 34px;
  height: 46px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.search-suggestion-item .search-suggestion-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--section-bg-color, #f0f8ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.search-suggestion-item .search-suggestion-title {
  font-size: 0.92rem;
  margin-bottom: 0.1rem;
}

.search-suggestion-item .search-suggestion-meta {
  font-size: 0.78rem;
  color: #8a8a8a;
}

.search-suggestion-empty {
  padding: 0.75rem 1rem;
  color: #8a8a8a;
  font-size: 0.88rem;
}