/* ==========================================================================
   hz-studio - RTL & Language Specific Styling
   ========================================================================== */

/* 1. Typography / Web Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');

[dir="rtl"] {
  --sans: 'IBM Plex Sans Arabic', sans-serif;
  --serif: 'Noto Naskh Arabic', serif;
  --mono: 'IBM Plex Sans Arabic', sans-serif;
  line-height: 1.7;
}

[dir="rtl"] h1, 
[dir="rtl"] h2, 
[dir="rtl"] h3, 
[dir="rtl"] h4, 
[dir="rtl"] h5, 
[dir="rtl"] h6 {
  line-height: 1.4;
  letter-spacing: 0px !important; /* Cancel tracking for Arabic script */
}

/* 2. Bespoke RTL Positioning & Layout Overrides */
[dir="rtl"] .timeline article::before {
  left: auto;
  right: -5px;
}

[dir="rtl"] .timeline article {
  transform: translateX(40px);
}

[dir="rtl"] .timeline::before {
  left: auto;
  right: 15px;
}

/* Flip the timeline container and spacing for RTL pages so the vertical
   line appears on the right and items have a comfortable gap from the dots. */
[dir="rtl"] .timeline {
  border-left: 0;
  border-right: 1px solid var(--gold-border);
  margin-left: 0;
  margin-right: clamp(12px, 4vw, 64px);
}

[dir="rtl"] .timeline article {
  /* padding: top right bottom left */
  padding: 0 56px 48px 0; /* increase right padding to add gap between text and dots */
}

/* Transform Directional Vector UI Graphics */
[dir="rtl"] .btn-arrow,
[dir="rtl"] svg.arrow-icon,
[dir="rtl"] .icon-forward {
  transform: scaleX(-1);
  transform-origin: center;
}

[dir="rtl"] .btn-primary:hover .btn-arrow,
[dir="rtl"] .btn-secondary:hover .btn-arrow {
  transform: scaleX(-1) translateX(-4px);
}

[dir="rtl"] .mobile-menu a:hover {
  padding-inline-start: 8px;
}

[dir="rtl"] .hero-pull {
  border-inline-end: 2px solid var(--gold);
  border-left: 0;
  padding-inline-end: 32px;
  padding-left: 0;
}

[dir="rtl"] .scroll-progress {
  transform-origin: right;
}

[dir="rtl"] .cs-trigger {
  text-align: right;
}

/* Standardizing alignments and asymmetrical borders */
[dir="rtl"] blockquote,
[dir="rtl"] .quote-block {
  border-inline-start: 4px solid var(--accent-color, #000);
  border-inline-end: 0;
  padding-inline-start: 1.5rem;
  padding-inline-end: 0;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}