/**
* CGAAT - Multilingual & Blog additions
* Loaded after main.css on every page.
*/

/*--------------------------------------------------------------
# Language switcher (header)
--------------------------------------------------------------*/
.lang-switch {
  color: var(--nav-color);
  font-family: var(--nav-font);
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--accent-color);
  border-radius: 50px;
  padding: 5px 14px;
  margin: 0 10px;
  white-space: nowrap;
  transition: 0.3s;
  line-height: 1.2;
}

.lang-switch:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@media (max-width: 1200px) {
  .lang-switch {
    order: 2;
    margin: 0 15px;
    padding: 4px 12px;
  }
}

/*--------------------------------------------------------------
# Articles / Blog Section
--------------------------------------------------------------*/
.articles .article-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.articles .article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.articles .article-img {
  overflow: hidden;
  height: 200px;
}

.articles .article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.articles .article-card:hover .article-img img {
  transform: scale(1.06);
}

.articles .article-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.articles .article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.articles .article-meta .category {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-radius: 50px;
  padding: 3px 12px;
  font-weight: 600;
  white-space: nowrap;
}

.articles .article-meta .date {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.articles .article-body h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 10px 0;
}

.articles .article-body h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.articles .article-body h3 a:hover {
  color: var(--accent-color);
}

.articles .article-body p {
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 15px;
  flex: 1;
}

.articles .read-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.articles .read-more i {
  transition: transform 0.3s;
}

.articles .read-more:hover i {
  transform: translateX(4px);
}

/* RTL: flip arrow direction and hover motion */
[dir="rtl"] .articles .read-more:hover i {
  transform: translateX(-4px);
}

/* Breadcrumbs in RTL: separator slash already flips via dir, fix padding side */
[dir="rtl"] .page-title .breadcrumbs ol li+li {
  padding-left: 0;
  padding-right: 10px;
}

[dir="rtl"] .page-title .breadcrumbs ol li+li::before {
  padding-right: 0;
  padding-left: 10px;
}

/* RTL: mirror purecounter icon margins, info items, and chevrons where main.css assumes LTR */
[dir="rtl"] .contact .info-item i {
  margin-right: 0;
  margin-left: 15px;
}

[dir="rtl"] .footer .footer-links ul i {
  margin-right: 0;
  margin-left: 3px;
}

[dir="rtl"] .footer .social-links a {
  margin-right: 0;
  margin-left: 10px;
}

/* RTL: keep phone numbers / emails readable */
[dir="rtl"] .footer-contact span[dir="ltr"],
[dir="rtl"] .info-item p[dir="ltr"] {
  display: inline-block;
  unicode-bidi: embed;
}

/* Arabic font handling: Cairo for Arabic pages */
[dir="rtl"] body {
  --default-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --heading-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --nav-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Arabic headings: no uppercase transform exists in Arabic, reduce tracking issues */
[dir="rtl"] .section-title h2,
[dir="rtl"] .section-title span,
[dir="rtl"] .page-title h1 {
  letter-spacing: 0;
}