/* Fahim's look on top of the learning app, added to every page by syria_edu.web.patch_html.
   Visual identity = Siro's (sirobusiness.com): same colours, fonts and button style. */

/* Fonts, self-hosted (OFL): Arabic and Latin files split by unicode-range, so a page loads only
   what it shows; font-display: swap shows the text at once on a slow connection. */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(/assets/syria_edu/fonts/plex-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(/assets/syria_edu/fonts/plex-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(/assets/syria_edu/fonts/plex-600-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(/assets/syria_edu/fonts/plex-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Reem Kufi";font-weight:700;font-display:swap;src:url(/assets/syria_edu/fonts/kufi-700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Reem Kufi";font-weight:700;font-display:swap;src:url(/assets/syria_edu/fonts/kufi-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root {
	--fahim-ground: #eef2ee;
	--fahim-paper: #ffffff;
	--fahim-ink: #16201b;
	--fahim-muted: #5f6b64;
	--fahim-line: #d5ddd7;
	--fahim-olive: #2f5d3a;
	--fahim-olive-deep: #23472c;
	--fahim-tint: #dfe8e1;
	--fahim-tile: #0b3d2e;
	--fahim-gold: #c8a45c;
	--fahim-stamp: #c0392b;
}

html, body, button, input, textarea, select {
	font-family: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
}
/* Page and lesson titles in Siro's headline face. */
h1, .text-3xl-semibold, .text-2xl-semibold {
	font-family: "Reem Kufi", "IBM Plex Sans Arabic", sans-serif;
	font-weight: 700;
}

/* Main buttons: Siro's olive with a darker bottom edge (pressable look). */
:is(button, a).bg-surface-gray-10 {
	background-color: var(--fahim-olive);
	box-shadow: inset 0 -3px 0 var(--fahim-olive-deep);
	color: #fff;
}
:is(button, a).bg-surface-gray-10:hover { background-color: var(--fahim-olive-deep); }
:is(button, a).bg-surface-gray-10:active { box-shadow: none; }

/* RTL: direction arrows are drawn for left-to-right; mirror them. Icons the app already
   rotates for RTL (chapter and sidebar toggles) carry a rotate class and are left alone. */
[dir="rtl"] :is(.lucide-chevron-left, .lucide-chevron-right, .lucide-arrow-left, .lucide-arrow-right, .lucide-chevrons-left, .lucide-chevrons-right):not([class*="rotate"]) {
	scale: -1 1;
}

/* Video controls keep the universal left-to-right timeline (0:00 / 0:20, progress fills to the right). */
.video-block > .absolute.bottom-0 {
	direction: ltr;
}

/* Muted grey text was 4.2:1 on white; WCAG AA needs 4.5:1 for small text. */
:root:not([data-theme="dark"]) {
	--ink-gray-5: oklch(52% 0 0);
	--ink-gray-4: oklch(56% 0 0);
}

/* Who created a course is not shown (the lessons are by the Fahim team): the «Course creator» card
   on the course page, the author line under titles, and the avatar on subject cards. */
div.border-2.rounded-5:has(> a[href^="/lms/user/"]),
div.flex.items-center:has(> span > .avatar):has(a[href^="/lms/user/"]),
span.lucide-dot:has(~ div.flex.items-center > span > .avatar),
div.mt-auto:has(> .avatar-group) {
	display: none !important;
}

/* The sidebar's lightning icon links to the vendor's website. */
span.lucide-zap.cursor-pointer {
	display: none;
}

/* Keyboard users must always see where they are. */
:focus-visible {
	outline: 2px solid var(--fahim-olive);
	outline-offset: 2px;
}

/* A phone turned sideways keeps the phone layout (head_fixes.js §4); the lesson's desktop grid
   (70% content, 30% for a side panel the phone layout doesn't draw) would leave an empty column. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 639px) {
	.grid.md\:grid-cols-\[70\%\2c 30\%\] { grid-template-columns: 1fr; }
	.grid.md\:grid-cols-\[70\%\2c 30\%\] > * { border-inline-end: 0; }
}