/* Arabic pages only (loaded by the site plugin's inc/arabic.php): the Arabic font and the right-to-left fixes. */

/* IBM Plex Sans Arabic, self-hosted, SIL Open Font License. Latin words still use Inter. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

/* Arabic letters come from Plex through the unicode-range above; everything set in the theme's font follows. */
:root { --wp--preset--font-family--inter: "IBM Plex Sans Arabic", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.as-ar, .as-ar button, .as-ar input, .as-ar select, .as-ar textarea { font-family: var(--wp--preset--font-family--inter); }

/* Letter spacing breaks the joins between Arabic letters. */
.as-ar *, .as-ar *::before, .as-ar *::after { letter-spacing: 0 !important; }

/* Arabic needs more room between lines than Latin. */
.as-ar h1, .as-ar h2, .as-ar h3 { line-height: 1.3; }

/* The logo strip scrolls the same way as in English: logos have no reading direction. */
.as-ar .as-marquee { direction: ltr; }

/* The whole Arabic result sits in the figure's span, so it wraps at a smaller size instead of being clipped. */
.as-ar .as-proof__metric .as-fig, .as-ar .as-proof__metric span { white-space: normal; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.3; }

/* Arrows drawn by the stylesheet point the way Arabic reads. */
.as-ar .as-tile h3 a::after { content: "\00a0\2190"; }
.as-ar .as-practice .as-practice__label::before, .as-ar .as-iloop__step:not(:last-child)::after { content: "\2190"; }

/* Hover nudges move towards the reading direction. */
.as-ar a:is(:hover, :focus-visible) [class*="__go"], .as-ar a:is(:hover, :focus-visible) [class*="__arrow"] { transform: translateX(-3px); }

/* A customer's own words, with the Arabic beneath them until the customer approves it. */
.as-ar-quote { display: block; text-align: start; unicode-bidi: isolate; }
.as-ar-quote__ar { display: block; margin-block-start: 0.5em; }

/* Pricing intro: the sentence already says "i" in its Arabic, so the little round "i" would stand empty after it. */
.as-ar .as-prcompare__head .as-prtip__dot { display: none; }

/* Paper quotes: the theme's space for the big quote mark is on the left; here the mark is on the right. */
.as-ar .as-prose .as-paperquote { padding-inline-start: 3.75rem; padding-inline-end: 0; }

/* Guidebook key figures on phones: stacked, the figure starts at the right edge like its label. */
@media (max-width: 600px) {
	.as-ar .as-gbfacts__list li { align-items: flex-start; }
	.as-ar .as-prose .as-paperquote { padding-inline-start: 2.75rem; }
	/* Blog stats: "5 minutes" is a whole word in Arabic, so it needs a smaller size to stay on one line. */
	.as-ar .as-blogstats__nums > div:last-child dd { font-size: 1.25rem; white-space: nowrap; }
}
