/* Skila bilingual UI foundation. User-authored values keep dir="auto". */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/inter-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/cairo-arabic-variable.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
	--sk-font-en: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sk-font-ar: "Cairo", "Inter", Tahoma, Arial, sans-serif;
	--sk-ui-font: var(--sk-font-en);
}

html[lang^="ar"] {
	--sk-ui-font: var(--sk-font-ar);
}

body.skila-ui-language-en :where(.skila-ui, .skila-site-header, .skila-workspace-sidebar, .skila-teacher-shell, .skila-acp-app),
body.skila-ui-language-en.wp-admin {
	font-family: var(--sk-font-en) !important;
}

body.skila-ui-language-ar :where(.skila-ui, .skila-site-header, .skila-workspace-sidebar, .skila-teacher-shell, .skila-acp-app, .academy-frontend-dashboard, .academy-dashboard-entry-content, .components-modal__screen-overlay),
body.skila-ui-language-ar.wp-admin {
	font-family: var(--sk-font-ar) !important;
}

/* Academy's React components set their own font on buttons, fields, tables,
 * tabs, and modal portals. Re-apply the shared Arabic stack at the component
 * edge; Cairo's unicode range handles Arabic while Latin glyphs fall through
 * to Inter, so authored English content keeps the approved Latin face. */
body.skila-ui-language-ar :where(.academy-frontend-dashboard, .academy-dashboard-entry-content, .components-modal__screen-overlay) *,
body.skila-ui-language-ar :where(.academy-frontend-dashboard, .academy-dashboard-entry-content, .components-modal__screen-overlay) :where(button, input, select, textarea, [contenteditable="true"]),
body.skila-ui-language-ar :where([class^="academy-"], [class*=" academy-"]) {
	font-family: var(--sk-font-ar) !important;
}

/* Academy renders interface icons from its own font. The broad typography
 * normalization above must not replace that font, including multi-path icon
 * spans, otherwise glyphs become missing-character boxes on Arabic screens. */
body.skila-ui-language-ar :where(.academy-icon, .academy-icon *),
body.skila-ui-language-ar :where(.dashicons, [class^="dashicons-"], [class*=" dashicons-"]) {
	font-family: "academy-icon" !important;
}

body.skila-ui-language-ar :where(.dashicons, [class^="dashicons-"], [class*=" dashicons-"]) {
	font-family: dashicons !important;
}

body.skila-ui-language-ar :where(.skila-ui, .skila-site-header, .skila-workspace-sidebar, .skila-teacher-shell, .skila-acp-app, .academy-frontend-dashboard, .academy-dashboard-entry-content, .components-modal__screen-overlay) {
	letter-spacing: normal;
}

body.skila-ui-language-ar :where(.academy-frontend-dashboard, .academy-dashboard-entry-content, .components-modal__screen-overlay) :where(input:not([type="date"]):not([type="time"]), textarea, [contenteditable="true"]) {
	unicode-bidi: plaintext;
	text-align: start;
}

[dir="auto"] {
	unicode-bidi: plaintext;
}

.skila-ui-technical,
[data-skila-technical] {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

.skila-language-switch {
	display: inline-flex;
	direction: ltr;
	align-items: center;
	gap: 3px;
	min-height: 38px;
	margin: 0;
	padding: 3px;
	border: 1px solid rgba(17, 37, 87, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 8px 20px rgba(8, 20, 47, .08);
}

.skila-language-switch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 32px;
	margin: 0;
	padding: 5px 11px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #394760;
	font-family: var(--sk-font-en);
	font-size: 12px;
	font-weight: 750;
	line-height: 1;
	cursor: pointer;
}

.skila-language-switch button[lang="ar"] {
	font-family: var(--sk-font-ar);
}

.skila-language-switch button:hover,
.skila-language-switch button:focus-visible {
	background: #edf2f7;
	color: #112557;
}

.skila-language-switch button:focus-visible {
	outline: 3px solid rgba(49, 95, 219, .28);
	outline-offset: 2px;
}

.skila-language-switch button.is-current,
.skila-language-switch button[aria-pressed="true"] {
	background: #112557;
	color: #fff;
}

.skila-language-switch--sidebar {
	width: 100%;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0 0 12px;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

.skila-language-switch--sidebar button {
	flex: 1 1 50%;
	color: #dbe4f6;
}

.skila-language-switch--sidebar button:hover,
.skila-language-switch--sidebar button:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.skila-language-switch--sidebar button.is-current,
.skila-language-switch--sidebar button[aria-pressed="true"] {
	background: #fff;
	color: #112557;
}

@media (max-width: 782px) {
	.skila-language-switch button {
		min-height: 38px;
		min-width: 52px;
	}
}

/* Public discovery and Skila-owned application screens share the same
 * language contract as Academy: interface chrome mirrors, centered content
 * remains centered, while authored titles retain dir="auto". */
html[dir="rtl"] body.skila-ui-language-ar :where(.skila-home, .skila-sd-wrap, .skila-ca-front, .skila-agb-wrap, .skila-md-wrap) {
	direction: rtl;
	font-family: var(--sk-font-ar) !important;
	text-align: right;
}

html[dir="rtl"] body.skila-ui-language-ar .skila-home-heading:not(.is-left),
html[dir="rtl"] body.skila-ui-language-ar :where(.skila-home-empty, .skila-td-empty) {
	text-align: center;
}

html[dir="rtl"] body.skila-ui-language-ar .skila-home-heading.is-left {
	margin-right: 0;
	margin-left: auto;
	text-align: right;
}

html[dir="rtl"] body.skila-ui-language-ar .skila-home-cta a {
	right: auto;
	left: 48px;
}

html[dir="rtl"] body.skila-ui-language-ar .skila-home-cta .skila-home-shell > div {
	padding: 46px 48px 46px 260px;
}

@media (max-width: 680px) {
	html[dir="rtl"] body.skila-ui-language-ar .skila-home-cta a {
		position: static;
	}

	html[dir="rtl"] body.skila-ui-language-ar .skila-home-cta .skila-home-shell > div {
		padding: 34px 26px;
	}
}
