/*
 * MAXMEDIA — right-to-left overrides.
 *
 * Loaded after theme.css whenever is_rtl(), i.e. on the Arabic side of the
 * site. Registered from functions.php with wp_style_add_data( …, 'rtl', true )
 * for the front end; the Site Editor picks it up on its own, because
 * add_editor_style() looks for the -rtl companion of every file it is given.
 *
 * Deliberately an override file, not a mirrored copy of theme.css. Almost all
 * of theme.css is flexbox and grid with symmetric spacing, which flips by
 * itself — border radii are uniform, padding shorthands are symmetric, and the
 * marquee's fade mask is already left/right symmetric. What is left is the
 * handful of things below, which are genuine mirrors rather than mechanical
 * left/right swaps, plus the Arabic typography, which is not a mirroring
 * question at all. Anything that was a pure logical-property equivalent has
 * been fixed in theme.css itself instead of duplicated here.
 */

/* ---------------------------------------------------------------- direction */

/* The nav underline grows from the start edge; in RTL that is the right. */
.mm-nav .wp-block-navigation-item__content::after {
	transform-origin: right;
}

/*
 * The CTA arrow. .mm-arrow is an inline-flex row, so the glyph already moves to
 * the left of its label without help — only the glyph itself points the wrong
 * way. The :hover gap animation is direction-neutral and needs nothing.
 */
.mm-arrow::after {
	content: "←";
}

/*
 * Carousel chevrons. Flipping the rendered SVG beats maintaining a second set
 * of mirrored path data in featured-projects.php and services.php.
 */
.mm-carousel__btn svg {
	transform: scaleX(-1);
}

/*
 * The client-logo marquee. The track is printed twice and translated by half
 * its width to loop; reversing the sign sends it the other way, so it travels
 * with the reading direction rather than against it.
 */
@keyframes mm-scroll-rtl {
	to {
		transform: translateX(50%);
	}
}

.mm-marquee__track {
	animation-name: mm-scroll-rtl;
}

/* --------------------------------------------------------------- typography */

/*
 * Cairo carries the Arabic. It is declared as its own family in theme.json
 * rather than appended to the Karu stack, for the reason spelled out in
 * maxmedia_karu_font_faces(): WP_Font_Face_Resolver renames every face to the
 * first name in its family's stack, so folding it in would have registered
 * Cairo under the name "Karu".
 *
 * Latin runs inside Arabic copy — MAXMEDIA, client names — fall through to
 * Cairo's own Latin cut, so no unicode-range split is needed.
 */
body {
	font-family: "Cairo", "Noto Sans Arabic", "Segoe UI", sans-serif;
}

/*
 * theme.json's type is tuned for Latin display setting and is actively wrong
 * for Arabic: negative tracking breaks cursive joining, and 1.04 leaves no room
 * for ascenders, descenders or diacritics.
 */
body {
	letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0;
	line-height: 1.35;
}

/*
 * Cairo's letterforms run visually larger than Karu/Figtree at the same
 * font-size — taller x-height, plus room for ascenders, descenders and
 * diacritics — so the Latin display sizes read oversized in Arabic. Scale
 * the four heading presets actually used at title sizes (h1–h4) down by
 * ~20%, keeping the same fluid clamp() shape theme.json generates so they
 * still respond to viewport width the same way.
 */
:root {
	--wp--preset--font-size--x-large: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.522), 1.4rem);
	--wp--preset--font-size--xx-large: clamp(1.6rem, 1.6rem + ((1vw - 0.2rem) * 1.391), 2.4rem);
	--wp--preset--font-size--huge: clamp(2rem, 2rem + ((1vw - 0.2rem) * 2.087), 3.2rem);
	--wp--preset--font-size--display: clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 3.826), 4.4rem);
}

/*
 * text-transform: uppercase is a no-op in Arabic, so every place the design
 * leaned on it for weight loses that weight. Give the micro-type back a little
 * size and tracking to compensate.
 */
.mm-eyebrow,
.mm-pill,
.mm-stat__label {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

/*
 * The stat figures stay in whatever numerals the translation chose, but the
 * tight Latin tracking has to go either way.
 */
.mm-stat__num {
	letter-spacing: 0;
}