/* ================================================================
   ARABIC RTL STYLESHEET
   Translates LTR logic to RTL logic, applies Arabic typography
================================================================ */

/* Include a premium Arabic font (e.g., Cairo or Tajawal) via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --fb: 'Cairo', sans-serif;
  --fh: 'Cairo', sans-serif;
  --fm: 'Cairo', sans-serif; /* fallback */
}

/* Base Body Direction */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body {
  font-family: var(--fb);
  font-size: 1.05rem; /* Arabic often needs slightly more size for readability */
}

html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4, 
html[dir="rtl"] h5, 
html[dir="rtl"] h6 {
  font-family: var(--fh);
}

/* Navigation Overrides */
html[dir="rtl"] .nlogo {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] .nlinks {
  gap: 24px;
}

html[dir="rtl"] .hburg {
  margin-left: 0;
  /* Add some margin if sticking to edge */
}

/* Dropdowns RTL */
html[dir="rtl"] .ndropdown-menu {
  text-align: right;
}
html[dir="rtl"] .ndropdown-menu a {
  text-align: right;
  padding: 10px 16px 10px 24px;
}

/* Mobile Nav */
html[dir="rtl"] .mnav {
  right: auto;
  left: -100%;
}
html[dir="rtl"] .mnav.open {
  right: auto;
  left: 0;
}
html[dir="rtl"] .mclose {
  left: 30px;
  right: auto;
}

/* Buttons and Links */
html[dir="rtl"] .cta, 
html[dir="rtl"] .bcta, 
html[dir="rtl"] .hcta, 
html[dir="rtl"] .ncta {
  font-family: var(--fh);
  font-weight: 600;
}

/* Spacing and Alignment Overrides */

/* Contact Section */
html[dir="rtl"] .cgrid {
  /* Flex direction or grid placement if explicitly left-right */
}
html[dir="rtl"] .cleft {
  padding-right: 0;
  padding-left: 5vw;
}
html[dir="rtl"] .cright {
  /* Typically mirrors automatically on grid */
}

/* Forms */
html[dir="rtl"] .fgrp label {
  text-align: right;
  left: auto;
  right: 20px;
}
html[dir="rtl"] .fgrp input:focus ~ label,
html[dir="rtl"] .fgrp input:valid ~ label,
html[dir="rtl"] .fgrp textarea:focus ~ label,
html[dir="rtl"] .fgrp textarea:valid ~ label,
html[dir="rtl"] .fgrp select:focus ~ label,
html[dir="rtl"] .fgrp select:valid ~ label {
  transform: translateY(-24px) scale(0.85);
  transform-origin: right top;
}
html[dir="rtl"] .fgrp select {
  padding: 16px 20px 16px 40px; /* Swap padding for chevron */
  background-position: left 20px center;
}

/* Footer */
html[dir="rtl"] .footer-grid {
  /* Mirrors automatically */
}
html[dir="rtl"] .fsocials {
  gap: 12px;
}
html[dir="rtl"] .footer-contact-item .fci-icon {
  margin-right: 0;
  margin-left: 12px;
}

/* Ventures / Project Cards */
html[dir="rtl"] .vtag {
  left: auto;
  right: 24px;
}
html[dir="rtl"] .vlink svg {
  transform: rotate(-180deg); /* Mirror the arrow */
}
html[dir="rtl"] .vcard:hover .vlink svg {
  transform: rotate(-180deg) translateX(4px); /* Pushes arrow left instead of right */
}

/* Services */
html[dir="rtl"] .snum {
  font-family: var(--fm);
}

/* Walkthrough/Timeline (About Me) */
html[dir="rtl"] .abt-timeline::before {
  left: auto;
  right: 24px;
}
html[dir="rtl"] .abt-tm-item {
  padding-left: 0;
  padding-right: 64px;
}
html[dir="rtl"] .abt-tm-dot {
  left: auto;
  right: 20px;
}

/* Quotes/Testimonials */
html[dir="rtl"] .quote-card-q {
  left: auto;
  right: 24px;
}

/* Prompts */
html[dir="rtl"] .pc-icon {
  margin-right: 0;
  margin-left: 12px;
}

/* Language Switcher Button (Unique Class) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb);
  font-size: 0.9rem;
  color: var(--white);
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--ink2);
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.lang-switch:hover {
  background: var(--ink3);
  border-color: var(--lime);
}
.lang-switch svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* RTL MOBILE OPTIMIZATIONS (Post-Audit Additions) */
@media (max-width: 768px) {
  html[dir="rtl"] .abt-timeline::before { left: auto; right: 16px; }
  html[dir="rtl"] .abt-tm-dot { left: auto; right: 12px; }
  html[dir="rtl"] .abt-tm-item { padding-left: 0; padding-right: 48px; }
  html[dir="rtl"] .cleft, html[dir="rtl"] .cright { padding: 0 !important; }
  html[dir="rtl"] .fgrp label { right: 16px; }
  html[dir="rtl"] .fgrp input:focus ~ label, html[dir="rtl"] .fgrp input:valid ~ label, html[dir="rtl"] .fgrp textarea:focus ~ label, html[dir="rtl"] .fgrp textarea:valid ~ label { transform: translateY(-22px) scale(0.85); transform-origin: right top; }
  html[dir="rtl"] .hburg { margin-left: 0; margin-right: auto; }
}