@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap");

/* Mobile hamburger drawer + Services submenu live entirely in
   mobile-nav.css (loaded on every page). This file only handles
   language toggling and Arabic/RTL layout. */

/* ========== LANG TOGGLE BUTTON ========== */

.lang-toggle {
  background: rgba(34, 160, 6, 0.08);
  border: 1px solid rgba(34, 160, 6, 0.35);
  color: #fff;
  padding: 8px 18px;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    border-color 0.3s ease;
  font-family: "Inter", sans-serif;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.lang-toggle:hover {
  background: #22a006;
  border-color: #22a006;
  color: #000;
  transform: translateY(-1px);
}

/* ========== MOBILE HEADER LANG TOGGLE ========== */
/* Always visible in the mobile header bar, not hidden inside the hamburger menu */

.header-lang-toggle {
  display: none;
}

@media (max-width: 768px) {
  .header-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    padding: 6px 14px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    box-shadow: none;
  }
}

html.lang-transition {
  animation: langFade 0.35s ease forwards;
}

@keyframes langFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
  100% {
    opacity: 1;
  }
}

/* ========== ARABIC FONT ========== */

.ar,
.ar body {
  font-family: "Cairo", sans-serif;
}

/* Form controls (button/input/select/textarea) don't inherit font-family
   from the page by default in browsers — they fall back to the system's
   default UI font, which doesn't shape Arabic letters correctly. */
.ar button,
.ar input,
.ar select,
.ar textarea {
  font-family: "Cairo", sans-serif;
}

/* Arabic script is cursive — any non-zero letter-spacing breaks the joins
   between letters and makes words look chopped up. Several elements use
   letter-spacing for English uppercase tracking (kickers, nav links, etc.);
   neutralize it everywhere once a [data-ar] element renders Arabic text. */
.ar [data-ar] {
  letter-spacing: normal !important;
}

/* ========== GLOBAL RTL ========== */

.ar header {
  direction: ltr;
}

.ar section,
.ar footer,
.ar .contact-section {
  direction: rtl;
}

/* keep numbers / icons / socials LTR */
.ar .socials,
.ar .footer-socials,
.ar .mobile-socials {
  direction: ltr;
}

/* ========== NAVIGATION (desktop only — mobile drawer is RTL-handled
   entirely in mobile-nav.css, so this never needs to fight it) ========== */

@media (min-width: 769px) {
  .ar .main-nav {
    direction: ltr;
    justify-self: center;
    flex-direction: row-reverse;
  }

  .ar .main-nav a {
    font-size: 15.4px;
  }

  .ar .dropdown-content {
    left: auto;
    right: 0;
  }
}

/* ========== HERO ========== */

.ar #hero {
  justify-content: flex-end;
  padding-right: calc(10% - 10px);
}

.ar .hero-content {
  text-align: right;
  align-items: flex-end;
  padding-right: 0;
  padding-left: 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: 0;
}

.ar .hero-content h1,
.ar .hero-content span {
  text-align: right;
  display: block;
  width: 100%;
  margin: 0;
  font-weight: 700;
}

.ar .hero-content h1 {
  max-width: 100%;
  line-height: 1.45;
  font-size: clamp(2.08rem, 4.8vw, 4rem);
}

.ar .hero-content span {
  font-size: 0.72rem;
  letter-spacing: normal;
}

.ar .services-title {
  text-align: right;
}

.ar .services-title p {
  margin: 0;
  max-width: 620px;
}

.ar .logo {
  justify-self: start;
}

.ar .socials {
  justify-self: end;
}

/* ========== INTRO (index) ========== */

.ar #intro {
  text-align: center !important;
}

.ar #intro h2,
.ar #intro p {
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
  max-width: 760px;
  text-align: center !important;
}

.ar .type {
  border-left: none;
  border-right: 3px solid #22a006;
  padding-left: 0;
  padding-right: 24px;
  text-align: center;
}

/* decorative images swap sides */
.ar #intro::before {
  left: auto;
  right: 0;
  transform: translateX(30px) scaleX(-1);
}

.ar #intro::after {
  right: auto;
  left: 0;
  transform: translateX(-30px) scaleX(-1);
}

/* ========== SERVICES (index cards) ========== */

.ar .services-title,
.ar .services-head {
  text-align: right;
}

.ar .service-content {
  text-align: right;
  left: auto;
  right: 36px;
}

/* ========== FEATURED WORK ========== */

.ar .section-head {
  text-align: right;
  margin-left: auto;
  margin-right: 10%;
  max-width: 760px;
}

.ar .section-head h2,
.ar .section-head p,
.ar .video-info {
  text-align: right;
}

/* ========== TEAM ========== */

.ar .team-header {
  text-align: center;
}

.ar .member-info {
  left: auto;
  right: 24px;
  text-align: right;
}

/* ========== WHY / CTA ========== */

.ar #why {
  text-align: right;
}

.ar #cta {
  text-align: center;
}

/* ========== ABOUT PAGE ========== */

.ar #hero {
  justify-content: flex-end;
  padding-right: 10%;
  padding-left: 0;
}

.ar #hero .content {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.ar .block {
  text-align: right;
  direction: rtl;
}

.ar .block h2,
.ar .block p {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.ar .divider {
  margin-left: auto;
  margin-right: 0;
}

.ar .video {
  direction: ltr;
}

/* ========== SERVICES PAGE ========== */

.ar .technical-box {
  text-align: right;
}

.ar .technical-box h3::after {
  left: auto;
  right: 0;
}

.ar .approach-section {
  direction: rtl;
}

.ar .approach-content {
  text-align: right;
}

.ar .approach-kicker {
  text-align: right;
}

.ar .approach-points li {
  padding-left: 0;
  padding-right: 28px;
  text-align: right;
}

.ar .approach-points li::before {
  left: auto;
  right: 0;
}

/* ========== WORK PAGE ========== */

.ar .hero-content p {
  text-align: right;
}

/* ========== CONTACT PAGE ========== */

.ar .contact-left {
  text-align: right;
}

.ar .contact-right {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 0;
  padding-right: 70px;
  text-align: right;
}

.ar .contact-item span,
.ar .contact-item strong {
  display: block;
}

.ar .modal {
  direction: rtl;
  text-align: right;
}

.ar .modal input,
.ar .modal textarea {
  text-align: right;
}

/* ========== SERVICE PAGES ========== */

.ar .service-hero-content {
  text-align: right;
}

.ar .service-description,
.ar .service-approach,
.ar .service-examples {
  text-align: right;
}

.ar .service-approach ul {
  padding-right: 20px;
  padding-left: 0;
}

.ar .lets-create {
  text-align: center;
}

/* ========== FOOTER ========== */

.ar .footer-brand {
  text-align: right;
}

.ar .footer-links,
.ar .footer-services,
.ar .footer-contact {
  text-align: right;
}

.ar .footer-bottom {
  direction: rtl;
}

/* mobile drawer RTL handling lives in mobile-nav.css */

@media (max-width: 768px) {
  .ar .contact-right {
    border-right: none;
    padding-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
  }

  /* .ar #intro::before/::after (above) sets a translateX(+-30px) + scaleX(-1)
     flip for desktop. It has higher specificity than index.css's own
     "#intro::before { transform: none }" mobile reset, so on mobile that
     reset was silently losing to this rule, leaving the 30px translateX
     in place - which pushed the decorative image past the viewport edge
     and was the actual source of the horizontal page overflow on mobile
     in Arabic (the header's gradient looked "short" because of this, not
     because of the header itself). */
  .ar #intro::before,
  .ar #intro::after {
    transform: none;
  }
}

@media (max-width: 900px) {
  .ar .contact-right {
    border-right: none;
    padding-right: 0;
  }
}