/* ============================================================
   ColorMag Child — RTL + Uyghur (Arabic-script) font
   ------------------------------------------------------------
   Loaded (from functions.php) ONLY when the page direction is
   RTL — i.e. the Uyghur (Traditional) language. It never loads
   on English, Chinese, or Latin/Cyrillic Uyghur pages.
   ============================================================ */


/* 1) UYGHUR ARABIC FONT ------------------------------------- */

@font-face {
	font-family: 'UKIJ Ekran';
	src:
		/* url('fonts/UKIJEkran.woff2') format('woff2'), */
		url('fonts/UKIJEkran.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Apply the Uyghur font ONLY to text-bearing content areas.
   IMPORTANT: do NOT target `body` or menus/icons — ColorMag uses
   icon fonts (e.g. the dropdown arrows, meta icons, social icons)
   and overriding their font-family turns them into giant raw
   glyphs. Listing content containers keeps icons untouched.       */
.rtl .site-title,
.rtl .site-title a,
.rtl .site-description,
.rtl .entry-title,
.rtl .entry-title a,
.rtl .entry-content,
.rtl .entry-content p,
.rtl .entry-content li,
.rtl .entry-summary,
.rtl .cm-entry-summary,
.rtl .widget,
.rtl .widget-title,
.rtl .widget ul li a,
.rtl .single .entry-content,
.rtl .comment-content,
.rtl p, .rtl li, .rtl a, .rtl span, .rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 {
	font-family: 'UKIJ Ekran', 'Tahoma', sans-serif !important;
}


/* 2) RTL LAYOUT TOUCH-UPS ----------------------------------- */

/* ColorMag ships its own style-rtl.css, so most layout is already
   mirrored. Keep this minimal — add rules only for specific things
   you see on the wrong side. */

.entry-content ul,
.entry-content ol {
	margin-right: 20px;
	margin-left: 0;
}

/* ---- Add your own inspected fixes below this line ---------- */

/* 3) FIX OVERSIZED SVG ICONS -------------------------------- */
/* ColorMag renders menu arrows / meta icons as inline <svg class="cm-icon">.
   If unconstrained they blow up to fill their container. Constrain them. */
.cm-icon,
svg.cm-icon {
	width: 16px;
	height: 16px;
	max-width: 16px;
	max-height: 16px;
	display: inline-block;
	vertical-align: middle;
}