/*!
 * ICONIK Architecture — RTL stylesheet
 * Automatically loaded by WordPress when site is in Arabic (is_rtl() === true)
 * Also loaded when body has class "rtl" (forced by language switcher)
 *
 * Miroir tous les layouts pour écriture de droite à gauche.
 * Ne change PAS les valeurs (couleurs, tailles, animations) — uniquement la direction.
 */

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL : direction + police arabe
   ═══════════════════════════════════════════════════════════════ */

html[dir="rtl"],
body.rtl {
  direction: rtl;
  text-align: right;
}

/* Police arabe pour le body — chargée depuis Google Fonts dans header.php */
body.rtl,
html[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', var(--font-body);
}

/* Titres en arabe : Cairo Bold remplace Bebas Neue (qui est latin-only) */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl .hero-headline,
body.rtl .services-heading,
body.rtl .faq-heading,
body.rtl .page-title,
body.rtl .section-label,
body.rtl [style*="font-family:var(--font-display)"],
body.rtl [style*="font-family: var(--font-display)"] {
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important; /* arabe = pas de letter-spacing */
  font-weight: 700;
}

/* Italiques "Playfair" → on garde mais sans italic en arabe (ça n'existe pas) */
body.rtl .italic-word,
body.rtl [style*="font-family:var(--font-italic)"],
body.rtl [style*="font-family: var(--font-italic)"] {
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  font-style: normal !important;
  font-weight: 400;
  color: var(--gold);
}

/* Numéros & dates restent en chiffres latins pour lisibilité (pas d'indo-arabes) */
body.rtl time,
body.rtl .stat-number,
body.rtl .hero-ghost-num {
  font-family: 'Cairo', sans-serif;
  direction: ltr;
  unicode-bidi: embed;
}

/* ═══════════════════════════════════════════════════════════════
   2. HEADER : logo à droite, menu à gauche (miroir)
   ═══════════════════════════════════════════════════════════════ */

body.rtl #site-header {
  flex-direction: row-reverse;
}

body.rtl .nav-right {
  flex-direction: row-reverse;
}

body.rtl #primary-menu {
  flex-direction: row-reverse;
}

body.rtl .header-search-toggle {
  margin-left: 0;
  margin-right: 1rem;
}

/* Menu mobile overlay : s'ouvre depuis la droite */
body.rtl .mobile-nav-overlay {
  transform-origin: right;
}

/* ═══════════════════════════════════════════════════════════════
   3. HERO : 2 colonnes inversées (scène à gauche, texte à droite)
   ═══════════════════════════════════════════════════════════════ */

body.rtl .hero-content {
  grid-template-areas:
    "scene text"
    "bottom bottom";
}

body.rtl .hero-eyebrow {
  flex-direction: row-reverse;
}

body.rtl .hero-headline {
  text-align: right;
}

body.rtl .hero-ghost-num {
  right: auto;
  left: 5vw;
}

body.rtl .hero-bottom {
  flex-direction: row-reverse;
}

body.rtl .hero-ctas {
  flex-direction: row-reverse;
}

/* ═══════════════════════════════════════════════════════════════
   4. SERVICES : grille 2×3 reste identique, textes alignés à droite
   ═══════════════════════════════════════════════════════════════ */

body.rtl .services-top {
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
}

body.rtl .service-card-number {
  right: auto;
  left: -15px;
}

body.rtl .service-card-inner {
  text-align: right;
}

body.rtl .service-card-arrow {
  align-self: flex-end;
  transform: translateX(0) scaleX(-1);
}

body.rtl .service-card:hover .service-card-arrow {
  transform: translateX(-8px) scaleX(-1);
}

body.rtl .service-card-cta {
  align-items: flex-end;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   5. SECTION FAQ : questions alignées à droite, icône à gauche
   ═══════════════════════════════════════════════════════════════ */

body.rtl .faq-eyebrow {
  flex-direction: row-reverse;
}

body.rtl .faq-heading {
  text-align: right;
}

body.rtl .faq-item summary {
  flex-direction: row-reverse;
  text-align: right;
}

body.rtl .faq-answer > div {
  padding-right: 0;
  padding-left: 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   6. BLOG + CATÉGORIE : grille + cartes miroirées
   ═══════════════════════════════════════════════════════════════ */

body.rtl .post-card-link .post-more .arr,
body.rtl .post-more .arr {
  display: inline-block;
  transform: scaleX(-1);
}

body.rtl .post-card-link:hover .post-more .arr,
body.rtl .post-more:hover .arr {
  transform: scaleX(-1) translateX(4px);
}

body.rtl .post-title,
body.rtl .post-excerpt,
body.rtl .post-body {
  text-align: right;
}

body.rtl #featured-post {
  grid-template-columns: 1fr 1.4fr; /* inverse les colonnes */
}

/* ═══════════════════════════════════════════════════════════════
   7. BLOG SEARCH : icône loupe à droite, bouton à gauche
   ═══════════════════════════════════════════════════════════════ */

body.rtl .blog-search-inner {
  flex-direction: row-reverse;
  padding: 6px 14px 6px 6px;
}

body.rtl .header-search-form {
  flex-direction: row-reverse;
}

body.rtl .header-search-close {
  right: auto;
  left: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   8. BREADCRUMBS : chevron inversé, items de droite à gauche
   ═══════════════════════════════════════════════════════════════ */

body.rtl .bc-list {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

body.rtl .bc-sep {
  transform: scaleX(-1);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   9. BENTO GRID (projets) : overlay et footer miroirés
   ═══════════════════════════════════════════════════════════════ */

body.rtl .bento-overlay {
  text-align: right;
}

body.rtl .bento-footer {
  flex-direction: row-reverse;
}

body.rtl .bento-footer .f-arrow {
  transform: translateX(0) scaleX(-1);
}

body.rtl .bento-cell-link:hover .f-arrow {
  transform: translateX(-6px) scaleX(-1);
}

/* ═══════════════════════════════════════════════════════════════
   10. SINGLE POST : sidebar passe à gauche, contenu à droite
   ═══════════════════════════════════════════════════════════════ */

body.rtl #articleGrid {
  grid-template-columns: 300px 1fr; /* sidebar passe à gauche */
}

body.rtl #articleContent {
  text-align: right;
}

body.rtl #articleContent ul,
body.rtl #articleContent ol {
  padding-left: 0;
  padding-right: 1.5rem;
}

body.rtl #articleContent blockquote {
  border-left: none;
  border-right: 2px solid var(--gold);
  padding-left: 0;
  padding-right: 2rem;
}

body.rtl #toc {
  text-align: right;
}

body.rtl #toc .toc-h3 {
  padding-left: 0;
  padding-right: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   11. SINGLE PROJECT : meta, galerie, sidebar détails
   ═══════════════════════════════════════════════════════════════ */

body.rtl .project-single {
  text-align: right;
}

body.rtl [class*="project-meta"] {
  flex-direction: row-reverse;
}

/* ═══════════════════════════════════════════════════════════════
   12. CONTACT : info à droite, form à gauche (inversé)
   ═══════════════════════════════════════════════════════════════ */

body.rtl .contact-grid {
  direction: ltr; /* on remet LTR pour préserver la grille */
}

body.rtl .contact-grid > * {
  direction: rtl;
}

body.rtl .contact-circle-1,
body.rtl .contact-circle-2 {
  right: auto;
  left: -20%;
}

/* ═══════════════════════════════════════════════════════════════
   13. FOOTER : colonnes miroirées
   ═══════════════════════════════════════════════════════════════ */

body.rtl #site-footer {
  text-align: right;
}

body.rtl .footer-grid {
  direction: ltr;
}

body.rtl .footer-grid > * {
  direction: rtl;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   14. BOUTONS & FLÈCHES : miroir des icônes directionnelles
   ═══════════════════════════════════════════════════════════════ */

body.rtl .btn-gold::after,
body.rtl .btn-ghost-dark::after {
  transform: scaleX(-1);
}

/* Toutes les flèches → deviennent ← */
body.rtl [class*="-arrow"]:not([class*="compass"]),
body.rtl .f-arrow,
body.rtl .search-project-arrow {
  transform: scaleX(-1);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   15. LANGUAGE SWITCHER : styles cohérents avec le design
   ═══════════════════════════════════════════════════════════════ */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.8rem;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(245, 242, 236, 0.15);
}

body.rtl .lang-switcher {
  margin-left: 0;
  margin-right: 0.8rem;
  padding-left: 0;
  padding-right: 0.8rem;
  border-left: none;
  border-right: 1px solid rgba(245, 242, 236, 0.15);
}

.lang-switcher a {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.45);
  text-decoration: none;
  padding: 4px 6px;
  transition: color 0.3s ease;
}

.lang-switcher a.is-active {
  color: var(--gold);
}

.lang-switcher a:hover {
  color: var(--chalk);
}

.lang-switcher .lang-sep {
  color: rgba(245, 242, 236, 0.2);
  font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════
   16. SR-ONLY reste identique (accessibilité SEO H1 invisible)
   ═══════════════════════════════════════════════════════════════ */

/* (rien à override — .sr-only fonctionne pareil en RTL) */

/* ═══════════════════════════════════════════════════════════════
   17. SWAP DES ANIMATIONS DIRECTIONNELLES
   Les animations slideUp/fadeSlide qui translatent vers la droite
   doivent être miroirées
   ═══════════════════════════════════════════════════════════════ */

@keyframes slideUpRTL {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

body.rtl .hero-headline .row span {
  animation-name: slideUpRTL; /* même animation, compatible RTL */
}

/* Cursor custom : inversé pour que le cercle suive bien la direction */
body.rtl .cursor-ring {
  /* rien à faire, position:fixed basée sur coords souris absolues */
}

/* ═══════════════════════════════════════════════════════════════
   18. RESPONSIVE RTL — mobile & tablette
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  body.rtl .hero-content {
    grid-template-areas:
      "text"
      "scene"
      "bottom";
  }
  body.rtl .services-top {
    grid-template-columns: 1fr;
  }
  body.rtl #articleGrid {
    grid-template-columns: 1fr;
  }
  body.rtl .blog-search-inner {
    flex-direction: row-reverse;
  }
}

@media (max-width: 600px) {
  body.rtl .bc-list {
    justify-content: flex-end;
  }
}