/* Ajustes de direccion para la version arabe.
   Se carga solo desde /ar/, despues de styles.css, y no afecta a los idiomas
   latinos. Requiere una revision visual en navegador antes de publicar. */

@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700;800&display=swap");

html[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", Saira, ui-sans-serif, system-ui, sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .brand span,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn {
  font-family: "Noto Kufi Arabic", "Bruno Ace", Saira, ui-sans-serif, sans-serif;
  letter-spacing: 0;
}

/* Las flechas decorativas apuntan en el sentido de lectura. */
html[dir="rtl"] .audience-card-link span,
html[dir="rtl"] .hero-audience-links span {
  display: inline-block;
  transform: scaleX(-1);
}

/* Los bloques alineados a la izquierda pasan a la derecha. */
html[dir="rtl"] .skip-link,
html[dir="rtl"] .table-link,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .resource-notice,
html[dir="rtl"] .small-note,
html[dir="rtl"] .pdf-table th,
html[dir="rtl"] .pdf-table td {
  text-align: right;
}

/* El desplegable de "Para quien" y el selector de idioma crecen hacia la
   izquierda para no salirse de la ventana. */
html[dir="rtl"] .audience-nav-menu {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

html[dir="rtl"] .audience-nav-menu::before {
  transform: translateX(50%) rotate(45deg);
}