/* ═══════════════════════════════════════════════════════
   SEO Agency Qatar — RTL / Arabic overrides
   Loaded ONLY by /ar/ pages, always AFTER /css/style.css.
   Audit basis: every directional property in style.css that
   affects the homepage (nav, hero, services, why-us, CTA band,
   testimonials, FAQ, footer).
   ═══════════════════════════════════════════════════════ */

/* ─── Typography: Cairo, then Tajawal ─── */
:root {
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-sans:    'Cairo', 'Tajawal', sans-serif;
  --font-mono:    'Cairo', 'Tajawal', sans-serif;
}
html[dir="rtl"] { font-size: 110%; }            /* Arabic script ~10% larger */
html[dir="rtl"] body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.9;
}
html[dir="rtl"] p,
html[dir="rtl"] .hero .lead,
html[dir="rtl"] .section-header p,
html[dir="rtl"] .service-card p,
html[dir="rtl"] .diff-item p,
html[dir="rtl"] .cta-band p,
html[dir="rtl"] .faq-a,
html[dir="rtl"] .footer-tagline,
html[dir="rtl"] .testimonial-quote {
  line-height: 1.9;
  font-weight: 400;
}
html[dir="rtl"] h1 { line-height: 1.5;  font-size: clamp(2rem, 4.2vw, 3.6rem); }
html[dir="rtl"] h2 { line-height: 1.55; }
html[dir="rtl"] h3,
html[dir="rtl"] .service-card h3 { line-height: 1.6; }

/* Arabic letters join: any tracking breaks the script. Reset everywhere. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after { letter-spacing: 0; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .footer-heading,
html[dir="rtl"] .service-link,
html[dir="rtl"] .testimonial-type { text-transform: none; }
html[dir="rtl"] .eyebrow { font-size: 0.78rem; }
html[dir="rtl"] .footer-heading { font-size: 0.74rem; }
html[dir="rtl"] .service-link { font-size: 0.78rem; }

/* Italic Arabic is a faux slant and hurts legibility */
html[dir="rtl"] .testimonial-quote { font-style: normal; font-size: 1.1rem; }

/* ─── Latin runs, numbers and emails inside Arabic text ─── */
.ltr {
  direction: ltr;
  unicode-bidi: embed;
  white-space: nowrap;   /* brand names, emails and numbers never break across lines */
}

/* Brand mark keeps Latin reading order and the Latin display face */
html[dir="rtl"] .nav-logo,
html[dir="rtl"] .footer-logo {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
html[dir="rtl"] .footer-logo { text-align: right; }

/* ─── Positioning: left/right swapped ─── */
/* Lattice decoration: upper-right corner becomes upper-left, mirrored */
html[dir="rtl"] .hero-lattice {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}
/* Hero baseline gradient runs from the reading start (right) */
html[dir="rtl"] .hero::after {
  background: linear-gradient(
    to left,
    var(--accent-maroon)  0%,
    rgba(138,21,56,0.45) 45%,
    transparent          80%
  );
}

/* ─── Border / padding / margin swaps ─── */
html[dir="rtl"] .diff-item {
  border-left: 0;
  border-right: 2px solid var(--accent-maroon);
  padding-left: 0;
  padding-right: 1.5rem;
}
html[dir="rtl"] .stat-block {
  border-left: 0;
  border-right: 2px solid var(--accent-maroon);
  padding-left: 0;
  padding-right: 1.25rem;
}
html[dir="rtl"] .rule-maroon:not(.center) { margin-left: auto; margin-right: 0; }
html[dir="rtl"] .drop-caret { margin-left: 0; margin-right: 0.2em; }

/* ─── Arrows, chevrons, carets flip horizontally ─── */
html[dir="rtl"] .arr {
  display: inline-block;
  transform: scaleX(-1);
}
html[dir="rtl"] .drop-caret { transform: scaleX(-1); }
html[dir="rtl"] .has-dropdown.drop-open .drop-caret { transform: scaleX(-1) rotate(180deg); }

/* ─── Language switcher ─── */
html[dir="rtl"] .lang-switch a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; }

/* ─── Navigation dropdown ───
   Centred with left:50% + translateX(-50%). That transform is a centring
   offset, not a directional shift, so it is deliberately NOT negated:
   negating it would push the menu off its parent link. Grid columns and
   column-flow follow the document direction automatically. */
html[dir="rtl"] .nav-dropdown a { text-align: right; }

/* ─── Items that are intentionally symmetric (audited, no override needed) ───
   text-align:left/right ...... none used on homepage elements (centre only)
   float ...................... none used
   border-radius .............. single var(--radius) on all corners
   box-shadow ................. not used
   background-position ........ "center" only
   ::before / ::after ......... inset:0 / left:0;right:0 (symmetric)
   ─────────────────────────────────────────────────────────────────────── */

/* Nav links never wrap; Arabic labels + the language switcher need more room,
   so the hamburger menu takes over earlier than on the English site (960px). */
html[dir="rtl"] .nav-links a { white-space: nowrap; }
@media (max-width: 960px) {
  html[dir="rtl"] .nav-toggle { display: flex; }
  html[dir="rtl"] .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    top: 62px;
    background: var(--bg-deep);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem;
    border-top: 1px solid var(--border);
    overflow-y: auto;
  }
  html[dir="rtl"] .site-nav.nav-open .nav-links { display: flex; }
  html[dir="rtl"] .nav-links li { width: 100%; text-align: center; }
  html[dir="rtl"] .nav-links a { font-size: 1.05rem; color: var(--text-primary); }
  html[dir="rtl"] .nav-cta { display: block; padding: 0.9rem 2rem; }
  html[dir="rtl"] .nav-dropdown {
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    display: none;
    grid-template-columns: 1fr;
    white-space: normal;
  }
  html[dir="rtl"] .has-dropdown:hover .nav-dropdown { display: none; }
  html[dir="rtl"] .has-dropdown.drop-open .nav-dropdown { display: grid; }
  html[dir="rtl"] .nav-dropdown a {
    font-size: 0.9rem;
    color: rgba(245,243,239,0.6);
    padding: 0.35rem 0;
    text-align: center;
    border: none;
  }
  html[dir="rtl"] .hero-lattice { width: 200px; height: 200px; opacity: 0.16; }
}

@media (max-width: 768px) {
  html[dir="rtl"] .nav-links li { text-align: center; }
  html[dir="rtl"] .nav-dropdown a { text-align: center; }
  html[dir="rtl"] .hero-lattice { left: 0; right: auto; }
}