// Arabic (RTL) overrides. Layout uses logical properties throughout, so this
// file only covers typography and the few things that cannot be mirrored
// automatically.
$font-arabic-heading: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
$font-arabic-body: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;

html[dir='rtl'] {
	// Arabic script is connected: letter-spacing and uppercase break shaping
	letter-spacing: 0;

	body {
		font-family: $font-arabic-body !important;
	}

	* {
		letter-spacing: 0 !important;
		text-transform: none !important;
	}

	// Headings and display labels
	h1,
	h2,
	h3,
	.preloader-text,
	.home-label,
	.project-title,
	.about-label {
		font-family: $font-arabic-heading !important;
		font-weight: 300 !important;
		line-height: 1.5;
	}

	// Body copy needs more leading than Latin text for Arabic ascenders/diacritics
	p,
	.content-info-text,
	.navigation-item-link,
	.contact,
	.language-switch {
		font-family: $font-arabic-body !important;
		line-height: 1.8;
	}

	// Directional icons flip with the layout; brand/social glyphs do not
	.arrow,
	.icon-directional {
		transform: scaleX(-1);
	}
}

// Language switcher (both directions)
.language-switch {
	position: absolute;
	inset-inline-end: 18rem;
	top: 3.9rem;
	font-size: 1.6rem;
	pointer-events: auto;
	opacity: 0.8;
	transition: opacity 0.3s ease;

	&:hover,
	&:focus-visible {
		opacity: 1;
	}

	@include media('<phone') {
		inset-inline-end: 14rem;
		top: 4.4rem;
		font-size: 3rem;
	}
}