/* 
 * Archive Blog Page Styles
 * این بخش شامل تمام استایل‌های صفحه آرشیو وبلاگ است
 * هر کلاس و المنت به صورت دقیق توضیح داده شده است
 */

/* کارت هر پست وبلاگ در آرشیو */
.archive-blog .ex-blog-card {
  /* پس‌زمینه کارت */
  background-color: var(--primary100);
  /* فاصله پایین هر کارت */
  margin-bottom: 32px;
  /* بوردر کارت */
  border: #a6810a 1px solid;
}

/* حذف pseudo-element قبل از کارت وبلاگ */
.archive-blog .ex-blog-card::before {
  content: none !important;
}

/* تاریخ پست وبلاگ (در لیست) */
.archive-blog li#ex-date-blog-card {
  /* جلوگیری از شکستن تاریخ در چند خط */
  white-space: nowrap;
}

/* کانتینر اصلی آرشیو وبلاگ */
.archive-blog {
  /* فاصله پایین کل آرشیو */
  margin-bottom: 40px;
}

/* عنوان هر پست وبلاگ (لینک) */
.archive-blog .ex-title a {
  height: 108px;
  font-size: 20px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* فرم جستجو در آرشیو وبلاگ */
.archive-blog #ex-search {
  /* نمایش افقی اجزای فرم */
  display: flex;
}

.archive-blog #ex-search button {
  /* دکمه جستجو */
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 400;
  background-color: #6ddbe8;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 1;
  width: 50px;
  height: 50px;
  border: 1px solid var(--primary500);
  justify-content: center;
  border-radius: 16px 0px 0px 16px;
  min-width: 50px;
}

.archive-blog #ex-search input[type="text"] {
  /* فیلد ورودی جستجو */
  height: 50px;
  background: #f5f2eb;
  font-size: 16px;
  width: 100px;
  padding-inline: 16px;
  text-align: right;
  border: 1px solid var(--secondary500);
  direction: rtl;
  color: var(--neutral700);
  border-radius: 0px 16px 16px 0px;
  flex: 1;
}

/* دکمه‌های عمومی در آرشیو وبلاگ */
.archive-blog .ex-button {
  padding: 2px 16px;
}

/* رنگ پس‌زمینه pseudo-element قبل از کارت وبلاگ (در صورت فعال بودن) */
.archive-blog .ex-blog-card:before {
  background: var(--primary700);
}

/* بخش اطلاعات کارت وبلاگ (تاریخ، نویسنده و ...) */
.archive-blog .ex-blog-card-info {
  gap: 10px;
  /* فاصله بین آیتم‌ها */
  justify-content: space-between;
  /* چیدمان دو طرفه */
}

/* کانتینر صفحه‌بندی آرشیو وبلاگ */
.archive-blog .ex-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* استایل هر لینک صفحه‌بندی و شماره صفحه */
.archive-blog .ex-pagination .page-numbers li a,
.archive-blog .ex-pagination .page-numbers li span {
  height: 40px;
  min-width: 40px;
  border-radius: 50px;
  border: 1px solid var(--primary700);
  text-decoration: none;
  color: var(--primary900);
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}

/* شماره صفحه فعال در صفحه‌بندی */
.archive-blog .ex-pagination .page-numbers .current {
  background: #6ddbe8;
  color: #fff;
  border-color: #6ddbe8;
}

/* افکت هاور روی لینک‌های صفحه‌بندی */
.archive-blog .ex-pagination .page-numbers li a:hover {
  background: var(--primary700);
  color: #fff;
}

/* دکمه‌های قبلی و بعدی در صفحه‌بندی */
.ex-pagination .prev,
.ex-pagination .next {
  border: 1px solid var(--primary700);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* افکت هاور روی دکمه‌های قبلی و بعدی */
.ex-pagination .prev:hover,
.ex-pagination .next:hover {
  background: var(--primary700);
  border-color: var(--primary700);
}

/* تغییر رنگ آیکون SVG در حالت هاور دکمه‌های قبلی و بعدی */
.ex-pagination .prev:hover svg path,
.ex-pagination .next:hover svg path {
  stroke: #fff;
}

/* سایدبار آرشیو وبلاگ */
.archive-blog aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* فاصله بین باکس‌های سایدبار */
}

/* باکس‌های داخل سایدبار */
.archive-blog .sidebar-box {
  border: 1px solid var(--secondary500);
  padding: 14px;
  border-radius: 20px;
  background-color: #fff;
  width: 100%;
}

/* تصاویر داخل سایدبار */
.archive-blog .sidebar-box img {
  border-radius: 20px;
}

/* تصویر هر پست وبلاگ در کارت */
.archive-blog .ex-blog-card img {
  border-radius: 16px;
  width: fit-content;
  height: auto;
  align-self: center;
}

/* عنوان اصلی آرشیو وبلاگ */
.archive-blog .blog-title {
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

/* محتوای عنوان آرشیو وبلاگ */
.archive-blog .blog-title-content {
  padding: 15px;
  border: 1px var(--secondary500) solid;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}

/* دکمه نمایش سایدبار در موبایل (در حالت پیش‌فرض مخفی است) */
.archive-blog .sidebar-button {
  display: none;
}

@media (max-width: 1199px) {
  .archive-blog h4 {
    font-size: 16px;
    line-height: 32px;
  }

  .archive-blog .ex-title a {
    height: 70px;
    font-size: 16px;
    line-height: 32px;
  }

  .archive-blog h1 {
    font-size: 32px;
    line-height: 32px;
  }

  .archive-blog .ex-button span {
    font-size: 12px;
  }

  .archive-blog #ex-date-blog-card {
    font-size: 11px;
  }

  .archive-blog aside {
    align-items: center;
  }
}

/* نمایش در صفحه‌های متوسط (تا ۹۹۱px) */
@media (max-width: 991px) {
  .archive-blog #ex-search input[type="text"] {
    font-size: 14px;
  }

  .archive-blog #ex-search button {
    width: 30px;
    height: 50px;
    max-width: 30px;
  }

  .archive-blog .ex-title a {
    height: 60px;
    font-size: 18px;
    line-height: 30px;
  }

  .archive-blog aside {
    display: flex;
    justify-content: space-between;
    align-items: revert;
  }

  /* سایدبار موبایل */
  .archive-blog .sidebar-col {
    position: fixed;
    right: -300px;
    transition: 0.3s;
    z-index: 14;
    background: #fff6d9;
    height: 100%;
    top: 0;
    width: 300px;
    padding-block: 16px;
  }

  .archive-blog .sidebar-col.show-sidebar {
    right: 0px;
  }

  .archive-blog .sidebar-button {
    display: flex;
  }

  /* لایه تارکننده پشت سایدبار */
  .archive-blog .bac-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgb(0 0 0 / 0.3);
    z-index: 13;
    backdrop-filter: blur(2px);
    display: none;
  }

  .archive-blog .sidebar-button {
    margin-bottom: 10px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 10px;
  }
}

/* نمایش در صفحه‌های کوچک (تا ۷۶۷px) */
@media (max-width: 767px) {
  .archive-blog h4 {
    font-size: 24px;
    line-height: 30px;
  }

  .archive-blog .ex-title a {
    height: 70px;
    font-size: 20px;
    line-height: 35px;
  }

  .archive-blog li#ex-date-blog-card {
    font-size: 16px;
  }

  .archive-blog .ex-button span {
    font-size: 16px;
  }

  .archive-blog li .page-numbers-current {
    padding: 6px 12px;
  }

  .archive-blog .ex-pagination .page-numbers li :not(.page-numbers-current) {
    padding: 5px 10px;
  }
}

/* نمایش در صفحه‌های خیلی کوچک (تا ۵۷۵px) */
@media (max-width: 575px) {
  .archive-blog .ex-blog-card img {
    width: 100%;
  }

  .archive-blog h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .archive-blog h4 {
    font-size: 17px;
  }

  .archive-blog .ex-title a {
    height: 60px;
    font-size: 16px;
    line-height: 30px;
  }

  .archive-blog li#ex-date-blog-card {
    font-size: 13px;
  }

  .archive-blog .ex-button span {
    font-size: 13px;
  }

  .archive-blog aside {
    align-items: revert;
  }
}

/* استایل‌های صفحه درباره ما */

/* ردیف اصلی درباره ما (دو ستون کنار هم) */
.about-us-page .about-us-row {
  display: flex;
  /* نمایش دو ستون کنار هم */
  flex-direction: row;
  margin-bottom: 40px;
  /* فاصله پایین کل ردیف */
  gap: 60px;
  /* فاصله بین ستون‌ها */
}

/* ستون سمت راست (معمولا تصویر یا اطلاعات) */
.about-us-page .right-div {
  width: 50%;
  /* نصف عرض ردیف */
}

/* ستون سمت چپ (معمولا متن یا توضیحات) */
.about-us-page .left-div {
  display: flex;
  flex-direction: column;
  margin: auto;
  /* وسط‌چین کردن محتوا */
}

/* واکنش‌گرایی برای صفحه درباره ما */
@media (max-width: 1199px) {
  .about-us-page .about-us-row {
    display: flex;
    flex-direction: column;
    /* تبدیل به یک ستون در موبایل */
  }

  .about-us-page .right-div {
    width: 100%;
    /* عرض کامل برای ستون راست */
  }
}

/* استایل‌های صفحه تماس با ما */

/* ردیف اصلی درباره ما (دو ستون کنار هم) */
.contact-us-page .contact-us-row {
  display: flex;
  /* نمایش دو ستون کنار هم */
  flex-direction: column;
  margin-bottom: 60px;
}

/* ستون سمت راست (معمولا تصویر یا اطلاعات) */
.contact-us-page .right-div {
  width: 50%;
  /* نصف عرض ردیف */
  gap: 30px;
  display: flex;
  flex-direction: column;
}

.contact-us-page .buttom-div {
  display: flex;
  gap: 30px;
}

/* ستون سمت چپ (معمولا متن یا توضیحات) */
.contact-us-page .left-div {
  display: flex;
  flex-direction: column;
  margin: auto;
  /* وسط‌چین کردن محتوا */
  gap: 30px;
  width: 50%;
}

.contact-us-page .contact-form {
  display: flex;
  flex-direction: column;
}

.contact-us-page .form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-us-page .form-group {
  flex: 1;
}

.contact-us-page .form-group label {
  display: block;
  font-weight: bold;
}

.contact-us-page .form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #6ddbe8;
  transition: border-color 0.5s ease;
  border-radius: 14px;
  background-color: #f5f2eb;
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
  border-color: var(--primary500);
  /* تغییر رنگ بوردر هنگام فوکوس */
  outline: none;
  /* حذف حالت پیش‌فرض outline */
}

/* فقط دکمه داخل فرم تماس رو استایل می‌ده */
.contact-us-page .contact-form button {
  align-items: center;
  color: #fff;
  font-weight: 400;
  background-color: #6ddbe8;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.5s ease;
  z-index: 1;
  height: 50px;

  justify-content: center;
  border-radius: 14px;
  min-width: 50px;
}

.contact-us-page .contact-form button:hover {
  background-color: var(--primary500);
}

.contact-us-page select#departman {
  padding: 10px;
  border-radius: 14px;
  background-color: #f5f2eb;
  border: 1px solid #6ddbe8;
  width: 100%;
  margin-top: 5px;
}

.contact-us-page .social-media-icon a>svg {
  border: 1px solid var(--secondary500);
  margin: 5px;
  background-color: #f5f2eb;
  border-radius: 50%;
  padding: 5px;
  width: 40px;
  height: 40px;
}

.contact-us-page .top-div {
  margin-bottom: 30px;
}

/* واکنش‌گرایی برای صفحه درباره ما */
@media (max-width: 1199px) {
  .buttom-div {
    flex-direction: column;
  }

  .contact-us-page .right-div {
    width: 100%;
    /* عرض کامل برای ستون راست */
  }

  .contact-us-page .left-div {
    width: 100%;
  }
}