/* HowServices — RTL overrides for Arabic.
   Imports the base LTR stylesheet and adjusts directional properties. */

/* All RTL-specific overrides go here. The base styles.css is loaded first,
   then this file adjusts directional properties for RTL layout. */

/* ─── Header ─── */
.site-header { direction: rtl; }
.header-inner { direction: rtl; }
.header-actions { flex-direction: row; }
@media (max-width: 767px) {
  .header-actions { gap: 8px; }
}

/* ─── Language switcher ─── */
.lang-menu {
  right: auto;
  left: 0;
}

/* ─── Nav underline ─── */
.main-nav a::after {
  left: auto;
  right: 0;
}

/* ─── Brand hover ─── */
.brand:hover .brand-mark {
  transform: translateX(-2px);
}

/* ─── Portfolio ─── */
.portfolio-info {
  flex-direction: row;
}

/* ─── Steps ─── */
.steps-grid { direction: rtl; }

/* ─── Price includes ─── */
.price-includes { text-align: right; }
.price-includes li {
  padding-left: 0;
  padding-right: 20px;
}
.price-includes li::before {
  left: auto;
  right: 0;
}

/* ─── Footer ─── */
.site-footer { direction: rtl; }
.footer-grid { direction: rtl; }
.footer-links { direction: rtl; }

/* ─── Hero ─── */
.hero { direction: rtl; }

/* ─── Sections ─── */
.section-head { direction: rtl; }

/* ─── Pricing ─── */
.pricing { direction: rtl; }
.price-card { direction: rtl; }

/* ─── Final CTA ─── */
.final-cta { direction: rtl; }

/* ─── Portfolio grid ─── */
.portfolio-grid { direction: rtl; }

/* ─── 404 page ─── */
.container { direction: rtl; }

/* ─── Numbers in Arabic context ─── */
.step-num {
  font-family: 'Fraunces', Georgia, serif;
  direction: ltr;
  display: inline-block;
  text-align: right;
  unicode-bidi: embed;
}

/* ─── How it works section ─── */
.how-it-works { direction: rtl; }

/* ─── Fade-in animations work the same in RTL ─── */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}