/* jpmono.com — RTL overrides (enqueued on the /ar/ locale only)
 * The layout is flex/grid-heavy so most of it mirrors for free under
 * dir=rtl; this file flips the handful of physical (left/right)
 * properties and swaps in an Arabic-capable font stack.
 * Keep every selector scoped to html[dir="rtl"].
 */

/* ---- Arabic type: DM Sans/Cormorant have no Arabic glyphs ---- */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] textarea {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, var(--font-sans, sans-serif);
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .hero__title, html[dir="rtl"] .page-hero__title,
html[dir="rtl"] .single-article__title {
  font-family: "Noto Naskh Arabic", var(--font-serif, serif);
  letter-spacing: 0;
}
/* tracked-out uppercase eyebrows don't exist in Arabic — kill the spacing */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .site-logo__tag,
html[dir="rtl"] .hero__eyebrow, html[dir="rtl"] .hero__caption,
html[dir="rtl"] .article-card__label {
  letter-spacing: 0;
}

/* ---- Header / drawer / search ---- */
html[dir="rtl"] .site-search__icon { left: auto; right: 14px; }
html[dir="rtl"] .site-search input { padding: 10px 38px 10px 14px; }
html[dir="rtl"] .site-drawer__nav .site-nav__item { text-align: right; }
html[dir="rtl"] .skip-link { left: auto; right: var(--space-3); }

/* ---- Hero: mirror the copy block & caption to the right ---- */
html[dir="rtl"] .hero__copy { margin-left: 0; margin-right: var(--container-px); }
html[dir="rtl"] .hero__caption { left: auto; right: var(--container-px); }
@media (min-width: 768px) {
  html[dir="rtl"] .hero__copy {
    margin-left: 0;
    margin-right: max(var(--container-px), calc((100vw - var(--container-max)) / 2 + var(--container-px)));
  }
  html[dir="rtl"] .hero__caption {
    left: auto;
    right: max(var(--container-px), calc((100vw - var(--container-max)) / 2 + var(--container-px)));
  }
}
@media (max-width: 600px) {
  html[dir="rtl"] .hero__copy { padding-right: 0; padding-left: var(--container-px); }
}

/* ---- Prose / quotes / notes: flip the accent border ---- */
html[dir="rtl"] blockquote {
  padding: 0 var(--space-6) 0 0;
  border-left: 0;
  border-right: 2px solid var(--accent-red);
}
html[dir="rtl"] .prose blockquote {
  border-left: 0;
  border-right: 3px solid var(--accent-red);
}
html[dir="rtl"] .affiliate-note {
  border-left: 0;
  border-right: 2px solid var(--border-subtle);
}
html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol {
  margin-left: 0;
  margin-right: var(--space-6);
}
html[dir="rtl"] .region-card__name-ja { margin-left: 0; margin-right: var(--space-2); }