/* ⚠️  WHENEVER THIS FILE CHANGES, BUMP THE ?v= STRING IN **BOTH** TEMPLATES:
       themes/shenqit/lms/templates/header/header.html
       plugins/shenqit_admin/.../templates/shenqit_admin/_public_chrome.html

   Two templates link this stylesheet, and a visitor's browser keys its cache
   on the query string alone. Change the bytes without changing the string and
   the deploy looks perfect from curl — which fetches fresh — while every
   returning visitor keeps the old file. That happened on 2026-08-07: the
   level-page rules shipped, the served file contained them, and the browser
   held a 22,468-byte copy under the same URL that did not. It also happened
   the other way in July, when _public_chrome.html was left pinned at an old
   string and the level pages missed six weeks of fixes.

   Verify after deploying by fetching the versioned URL in a real browser, not
   with curl. */
/* Shenqit site chrome — the single source of truth for the public-facing
 * shell: font faces, the --shen-* palette tokens, the brand wordmark, the
 * global header/navbar, buttons, cards and the footer.
 *
 * This used to live as a 550-line inline <style> inside the Mako partial
 * header/header.html. That made it reachable ONLY by templates that render
 * through Mako. Anything rendered by a plain Django template -- the public
 * program page in the shenqit_admin app is the one that bit us -- could copy
 * the header markup but had no way to pick up the styles, so it fell back to
 * stock Open edX chrome: an unstyled two-span wordmark in link-blue instead of
 * the gold Maghribi one, a white left-aligned navbar, indigo auth buttons, and
 * the --shen-* variables resolving to their fallbacks.
 *
 * Both worlds now link this file:
 *   - Mako pages  -> header/header.html
 *   - Django pages -> shenqit_admin/templates/shenqit_admin/_public_chrome.html
 *
 * Keep it pure CSS. It is served as a static asset, so any Mako expression
 * added here would ship to the browser verbatim.
 */

/* Give the global header its own stacking context above page content so the
   mobile "Options"/hamburger dropdown (.mobile-menu, z-index 9999) is actually
   clickable. Positioned page heroes (.hero on the homepage, .catalog-hero on
   /courses, etc.) are painted after the header in the DOM and, being z-index
   auto, otherwise sit on top of the open dropdown and swallow the taps — the
   links looked present but navigated nowhere, on every page. Applied here (in
   the shared header partial) so the fix covers the whole site, not just index. */
.global-header { position: relative; z-index: 1000; }
.language-selector-nav {
  margin-right: 15px;
}
.language-selector-dropdown {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  min-width: 100px;
}
.language-selector-dropdown:hover {
  border-color: #559864;
}
.language-selector-dropdown:focus {
  outline: none;
  border-color: #559864;
  box-shadow: 0 0 0 2px rgba(85, 152, 100, 0.2);
}



/* ---- Mobile + RTL comprehensive fix v5 (Apr 2026) ---- */

/* RTL: right-align dropdowns + text direction */
body.rtl .language-selector-dropdown,
body.rtl select,
body.rtl .mobile-menu {
  direction: rtl;
  text-align: right;
}

/* Footer RTL on desktop */
body.rtl footer.tutor-container {
  text-align: right !important;
}
body.rtl .footer-top .powered-area {
  float: right !important;
}

/* Course cards RTL */
body.rtl .course-info,
body.rtl .course-name,
body.rtl .course-date {
  text-align: right;
  direction: rtl;
}

/* Hamburger: show on mobile, let JS hide via .hidden class when no nav items */
@media (max-width: 991.98px) {
  .global-header .hamburger-menu {
    display: block;
  }
  .global-header .hamburger-menu.hidden {
    display: none;
  }
  /* Auth buttons: visible on mobile (flex layout + spacing handled by
     _header.scss .nav-links/.secondary; just keep them showing). */
  .global-header .mobile-auth-buttons {
    display: flex !important;
  }
  .global-header .mobile-auth-buttons .btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
    border: 1px solid #15376D !important;
    border-radius: 4px !important;
  }
  /* Tighter inter-button gap so the Arabic register/sign-in pair fits
     beside the logo on 390px-wide phones (Arabic strings are ~30% wider
     than the English equivalents). */
  .global-header .mobile-auth-buttons {
    gap: 4px !important;
  }
  .global-header .mobile-auth-buttons .register-btn {
    background: transparent !important;
    color: #15376D !important;
  }
  .global-header .mobile-auth-buttons .sign-in-btn {
    background: #15376D !important;
    color: #fff !important;
  }
  /* Compact language + theme toggle */
  .language-selector-dropdown {
    min-width: 0 !important;
    max-width: 80px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  .theme-toggle-button #toggle-switch .switch {
    width: 36px !important;
    height: 20px !important;
  }
  .theme-toggle-button #toggle-switch .switch .slider:before {
    height: 14px !important;
    width: 14px !important;
  }
  /* Hamburger flows in the flex order; RTL reverses the visual order
     automatically via the parent flex container (no override needed). */
  /* Logo inline-start clearance is handled by margin-inline-start in
     _header.scss; no RTL override needed here. */
  /* Mobile menu RTL */
  body.rtl .mobile-menu {
    text-align: right;
  }
  body.rtl .mobile-menu .mobile-nav-link a {
    text-align: right;
  }
}
@media (max-width: 480px) {
  .language-selector-nav { display: none !important; }
  .theme-toggle-button .light-theme-icon,
  .theme-toggle-button .dark-theme-icon { display: none !important; }
}

/* ---- Theme polish (Apr 2026) ---- */

/* Gold accent for CTAs — matches arabesque course art */
body.rtl .learn-more,
body.rtl .btn-primary,
body.rtl a.register-btn {
  border-color: #C9A46B !important;
}
body.rtl .learn-more:hover,
body.rtl .btn-primary:hover {
  background-color: #C9A46B !important;
  color: #fff !important;
}

/* Tajawal font globally for Arabic pages */
body.rtl,
body.rtl *,
body.lang_ar,
body.lang_ar * {
  font-family: 'Tajawal', 'rtl-font-family', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
/* Preserve monospace for code blocks */
body.rtl code, body.rtl pre, body.rtl kbd,
body.lang_ar code, body.lang_ar pre, body.lang_ar kbd {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

/* Load Tajawal (UI), Amiri (Naskh manuscript display) and Aref Ruqaa (the
 * decorative bismillah/seal lettering) if not already loaded. The landing
 * page uses Amiri/Aref Ruqaa for ornament; course pages use Tajawal only,
 * so swap-display means a missing CDN never blocks rendering. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Amiri:ital,wght@0,400;0,700;1,400&family=Aref+Ruqaa:wght@400;700&display=swap');

/* Larger course card images */
.courses-listing .course .course-image .cover-image {
  height: 180px;
  overflow: hidden;
}
.courses-listing .course .course-image .cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Course card title emphasis */
.course-name .course-title {
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.4;
}

/* Mobile header height bump for better tap targets */
@media (max-width: 991.98px) {
  .global-header .main-header {
    height: 50px !important;
  }
}

/* Smoother course card hover */
.courses-listing .course {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.courses-listing .course:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* ============================================================
   V4 design system — consolidated theme overlay
   Reference: /
   Loaded on every page (header.html is included site-wide), so the
   V4 vocabulary (palette tokens, fonts, navbar, course cards, CTAs,
   footer) is consistent everywhere. Per-page hero + motion-layer
   markup still lives in the individual page templates.
   ============================================================ */
/* Tajawal — the interface face the whole site ASKS for and never declared.
   Every rule here and in the page templates says `font-family: Tajawal, …`,
   and until now nothing told the browser where Tajawal is: the two files have
   been shipped in the theme and served from /static/shenqit/fonts/ all along,
   simply never referenced. So the site rendered in whatever Arabic face each
   visitor's device happened to carry, and it disagreed with the applications
   (sign-in, learning) which do load it. 60KB apiece, once, then cached.
   `swap` so the text is readable in the device's face while ours arrives —
   never invisible.
   Only 400 and 700 exist; a rule asking for 500 gets the 400 file, which is
   the correct fallback and not a synthetic weight. */
@font-face {
  font-family: 'Tajawal';
  src: url('/static/shenqit/fonts/Tajawal-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('/static/shenqit/fonts/Tajawal-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('/static/shenqit/fonts/Tajawal-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maghribi Khouaja';
  src: url('/static/shenqit/fonts/samir-khouaja-maghribi.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'A Thuluth';
  src: url('/static/shenqit/fonts/a-thuluth-regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Aga Andalus';
  src: url('/static/shenqit/fonts/aga-andalus.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'ArabSwell';
  src: url('/static/shenqit/fonts/arabswell.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Adarghal';
  src: url('/static/shenqit/fonts/adarghal.ttf') format('truetype');
  font-display: swap;
}
:root {
  /* Mirror / exactly */
  --shen-teal: #264240;
  --shen-teal-d: #1a2f2d;
  --shen-gold: #C9A46B;
  --shen-gold-d: #8a6a2f;   /* text gold: 3.21 contrast -> 4.69 */
  --shen-amber: #f59e0b;
  --shen-cream: #faf7f0;
  --shen-paper: #ffffff;
  --shen-line: #e8e6e0;
  --shen-muted: #5b5b66;
  --shen-ink: #0f1011;
  /* Saffron alias retained so older selectors still resolve, but every
     primary CTA below uses --shen-gold to match v4. */
  --shen-saffron: #C9A46B;
  --shen-saffron-d: #8a6a2f;
}

/* Pale cream body — matches v4-arabesque background. The Indigo theme
   paints white on several wrapping containers (`.content-wrapper`,
   `.main-container`, `.window-wrap`); we override them all to transparent
   so the body cream shows through consistently. */
html, body, body.rtl, body.lang_ar { background: var(--shen-cream) !important; color: var(--shen-ink); }
.window-wrap,
.content-wrapper,
.main-container,
.content-wrapper.main-container,
#content,
main#main,
.find-courses,
.course-info.about,
.course-body,
.dashboard {
  background: transparent !important;
}

/* ===== V4 navbar reskin =====
   Translucent cream backdrop, gold hairline border, saffron CTAs. */

.global-header {
  background: rgba(250, 247, 240, 0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(201, 164, 107, 0.28) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.global-header .main-header {
  background: transparent !important;
}

/* Match v4 preview's nav-inner layout exactly: brand at start, link list
   centered in the remaining space, auth pair at end (RTL: brand on the
   right, auth on the left). */
.global-header .main-header {
  display: flex !important;
  align-items: center;
  gap: 16px;
}
.global-header .header-logo { flex-shrink: 0; }
.global-header > .header-container > .main-header > .nav-links,
.global-header .nav-links {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  margin: 0;
}
.global-header .nav-links .main {
  flex: 1 1 auto;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.global-header .nav-links .main .nav-item,
.global-header .nav-links .main .nav-tab {
  display: inline-flex; align-items: center;
}
.global-header .nav-links .secondary { flex-shrink: 0; }
@media (max-width: 991.98px) {
  /* On mobile the desktop nav links collapse into the hamburger;
     re-allow .secondary (auth pills) to wrap as before. */
  .global-header .nav-links .main { display: none !important; }
}

/* Brand wordmark — mirrors v4-arabesque preview's two-line brand exactly:
     "شنقيط"        in Maghribi Khouaja, teal, ~30px
     "رواق المحظرة"  in Tajawal, gold-d, 12px sub-line */
.global-header .header-logo .brand-shenqit {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;     /* RTL anchors at start (the right edge) */
  line-height: 1;
  text-decoration: none;
  padding: 6px 0;
}
.global-header .brand-main {
  font-family: 'Maghribi Khouaja', 'A Thuluth', Amiri, serif !important;
  font-size: 30px;
  color: var(--shen-teal) !important;
  line-height: 1;
}
.global-header .brand-sub {
  font-family: Tajawal, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px;
  color: var(--shen-gold-d) !important;
  letter-spacing: .04em;
  margin-top: 4px;
  line-height: 1;
}
.global-header .header-logo img.logo { display: none; }   /* hide stock platform logo if any */

/* Wherever the brand name "شنقيط" appears in visible text, render it in
   Maghribi Khouaja — same face as the navbar wordmark. The wrapping is
   done by a tiny DOM walker further below. */
.shen-name {
  font-family: 'Maghribi Khouaja', 'A Thuluth', Amiri, serif !important;
  font-weight: 400;
  letter-spacing: 0;
}

/* Top-level nav links → teal at rest, gold on hover, no underline. */
.global-header .nav-links a,
.global-header .main-nav a,
.global-header .nav-courses a,
.global-header .nav-item a {
  color: var(--shen-teal) !important;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.global-header .nav-links a:hover,
.global-header .main-nav a:hover,
.global-header .nav-courses a:hover,
.global-header .nav-item a:hover {
  color: var(--shen-gold-d) !important;
}

/* Auth pair — v4 gold primary + teal-outline secondary, pill-shaped. */
.global-header a.register-btn,
.global-header .mobile-auth-buttons .register-btn {
  /* White on the bright gold measured 2.33 — the lowest contrast on the whole
     site, on the one button we most want a visitor to press, and present on
     every page. The deep gold keeps it unmistakably the primary button and
     reads at 5.02. Its hover state was already this colour, so the button now
     simply starts where it used to arrive. */
  background: var(--shen-gold-d) !important;
  color: #fff !important;
  border: 1.5px solid var(--shen-gold-d) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  transition: background .2s ease, color .2s ease;
}
.global-header a.register-btn:hover,
.global-header .mobile-auth-buttons .register-btn:hover {
  background: var(--shen-teal) !important;
  color: #fff !important;
}
.global-header a.sign-in-btn,
.global-header .mobile-auth-buttons .sign-in-btn {
  background: transparent !important;
  color: #264240 !important;
  border: 1.5px solid #264240 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  transition: background .2s ease, color .2s ease;
}
.global-header a.sign-in-btn:hover,
.global-header .mobile-auth-buttons .sign-in-btn:hover {
  background: #264240 !important;
  color: #fff !important;
}

/* Hamburger lines → teal so they read on the cream backdrop. */
.global-header .hamburger-menu .line {
  background: #264240 !important;
}

/* Language + theme-toggle widgets — soft cream pills with gold border. */
.language-selector-dropdown {
  background: rgba(255, 253, 246, 0.95) !important;
  border: 1px solid rgba(201, 164, 107, 0.45) !important;
  color: #264240 !important;
}
.language-selector-dropdown:hover,
.language-selector-dropdown:focus {
  border-color: #d99820 !important;
  box-shadow: 0 0 0 2px rgba(217, 152, 32, 0.18) !important;
}

/* User-menu dropdown panel — cream paper + gold accent rule. */
.global-header .user-dropdown-menu,
.global-header .nav-item .dropdown-menu {
  background: #fffdf6 !important;
  border: 1px solid rgba(230, 220, 185, 0.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(38, 66, 64, 0.10) !important;
}

/* Mobile menu sheet inherits the same paper feel. */
.mobile-menu {
  background: rgba(250, 247, 240, 0.97) !important;
  border-bottom: 1px solid rgba(201, 164, 107, 0.25) !important;
}

/* ===== V4 generic CTA buttons (site-wide) =====
   Mirrors v4-arabesque .btn-gold + .btn-outline exactly. */
.btn-primary,
button.btn-primary,
input.btn-primary,
.action-primary,
a.action-primary,
.btn-gold {
  /* Same fault as the register button, on the homepage's own primary call to
     action: white on the bright gold is 2.33. The deep gold reads at 5.02 and
     is still unmistakably the gold button. */
  background: var(--shen-gold-d) !important;
  color: #fff !important;
  border: 1.5px solid var(--shen-gold-d) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  transition: background .2s ease, transform .15s ease;
}
.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.action-primary:hover,
a.action-primary:hover,
.btn-gold:hover {
  background: var(--shen-teal) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-secondary,
.action-secondary,
a.action-secondary {
  background: transparent !important;
  color: var(--shen-teal) !important;
  border: 1.5px solid var(--shen-teal) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: background .2s ease, color .2s ease;
}
.btn-secondary:hover,
.action-secondary:hover,
a.action-secondary:hover {
  background: var(--shen-teal) !important;
  color: #fff !important;
}

/* ===== V4 course-card manuscript style ===== */
.courses-listing-item .course,
.course-card,
.dashboard .my-courses .course-item .course-container {
  background: var(--shen-paper) !important;
  border: 1px solid var(--shen-line) !important;
  border-inline-start: 4px solid var(--shen-gold) !important;
  border-radius: 0 14px 14px 0 !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.courses-listing-item .course:hover,
.course-card:hover,
.dashboard .my-courses .course-item .course-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-inline-start-color: var(--shen-gold-d) !important;
}
body.rtl .courses-listing .course-name .course-title,
body .courses-listing .course-name .course-title,
.course-card__title {
  font-family: 'Maghribi Khouaja', 'A Thuluth', Amiri, serif !important;
  font-weight: 400 !important;
  color: var(--shen-teal) !important;
  letter-spacing: 0;
}
.courses-listing .course-info { color: var(--shen-muted) !important; }

/* ===== V4 footer — pale cream with gold border-top, teal links ===== */
.wrapper-footer,
footer.tutor-container,
#footer {
  background: var(--shen-cream) !important;
  border-top: 1px solid rgba(201, 164, 107, 0.28) !important;
  color: var(--shen-muted) !important;
  padding-top: 32px;
  padding-bottom: 24px;
  font-size: 0.95em;
}
.wrapper-footer .footer-top,
footer.tutor-container .footer-top,
#footer .footer-top {
  display: flex; justify-content: center; flex-wrap: wrap;
}
.wrapper-footer .nav-colophon ol,
footer.tutor-container .nav-colophon ol,
#footer .nav-colophon ol {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  list-style: none; padding: 0; margin: 0; justify-content: center;
}
.wrapper-footer .nav-colophon a,
footer.tutor-container .nav-colophon a,
#footer .nav-colophon a {
  color: var(--shen-teal) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
.wrapper-footer .nav-colophon a:hover,
footer.tutor-container .nav-colophon a:hover,
#footer .nav-colophon a:hover {
  color: var(--shen-saffron-d) !important;
}
.wrapper-footer .copyright-site,
footer.tutor-container .copyright-site,
#footer .copyright-site {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--shen-muted) !important;
  font-family: 'Maghribi Khouaja', 'Aref Ruqaa', Amiri, serif !important;
  font-size: 1.1em;
}
.wrapper-footer .copyright-site::before,
footer.tutor-container .copyright-site::before,
#footer .copyright-site::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto 12px;
  background: var(--shen-gold);
  opacity: .55;
}


/* Footer social icons. Previously an inline <style> in footer.html, which left
 * the same markup in the Django-rendered public pages showing full-size raw
 * SVGs. Same rules, one home. */
.footer-social { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--shen-gold); border: 1px solid rgba(201,164,107,.45);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--shen-gold); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Authenticated user box = the same pill as the public "sign-in-btn" ──
   haj asked for the /courses top-left username box to look like the /program/
   pill (transparent, green outline, fully rounded). Only the dropdown trigger
   is restyled; its menu (Dashboard / Account / Sign Out) is unchanged. The
   caret is kept, recoloured, so it still reads as a menu. */
.global-header .toggle-user-dropdown {
  background: transparent !important;
  color: #264240 !important;
  border: 1.5px solid #264240 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  transition: background .2s ease, color .2s ease;
}
.global-header .toggle-user-dropdown .username { color: inherit !important; font: inherit !important; }
.global-header .toggle-user-dropdown:after { border-color: #264240 !important; }
.global-header .toggle-user-dropdown:hover { background: #264240 !important; color: #fff !important; }
.global-header .toggle-user-dropdown:hover .username { color: #fff !important; }
.global-header .toggle-user-dropdown:hover:after { border-color: #fff !important; }

/* ===== Static pages: reading typography (site-wide) =====
   Every footer page — المساعدة, شروط الاستخدام, سياسة الخصوصية, تواصل معنا,
   المدونة, الدعم — shares the wrapper `.container.about`, and every one of
   them was setting prose across the full viewport in the platform's greys.
   Measured at 1440px before this rule: شروط الاستخدام ran 234 characters to a
   line, المساعدة 218, سياسة الخصوصية 183, الدعم 157, المدونة 126. Comfortable
   reading is 65–75; past about 75 the eye loses its way back to the start of
   the next line, and at 234 it is reading a wall.

   This is why «من نحن» looked like a different site — not because it lacked
   pictures. It was the mildest case of a fault every static page had.

   Typography only: no page's words, order or structure are touched here. */
.container.about {
  max-width: 46rem;                    /* ≈ 65–75 characters a line in Tajawal */
  margin-inline: auto;
  padding-block: 40px 64px;
  padding-inline: 20px;
}
.container.about h1 {
  color: var(--shen-teal) !important;
  font-size: clamp(1.8rem, 4.4vw, 2.4rem);
  line-height: 1.3;
  margin: 0 0 18px;
  /* The platform pins `text-align:left` on this h1, and only on the h1 — the
     h2s below it resolve to `start` and sit correctly on the right. So on six
     Arabic pages (المدونة، تواصل معنا، ادعمنا، المساعدة، الخصوصية، شروط
     الاستخدام) the page's largest word stood on the wrong side of the screen
     while everything under it was correctly aligned. Yahya asked whether that
     was normal; it is not. `start` rather than `right` so an English page is
     left alone. */
  text-align: start !important;
}
.container.about h2 {
  color: var(--shen-teal) !important;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.35;
  margin: 34px 0 12px;
}
.container.about h3 {
  color: var(--shen-teal) !important;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 8px;
}
/* Latin is narrower than Arabic, so the column that gives Arabic a comfortable
   66 characters gives English about 100. Measured on شروط الاستخدام after the
   column landed: Arabic median 66, English median 101. The English half gets a
   narrower measure of its own. */
.container.about [lang="en"],
.container.about [dir="ltr"] { max-width: 36rem; }

.container.about p,
.container.about li {
  line-height: 1.85;
  color: var(--shen-ink);
}
.container.about li { margin-bottom: 6px; }

/* Arabic headings in the display face, as on every other page. The blanket
   `body.rtl * { font-family: Tajawal !important }` above forces the body face
   on to everything, so this has to answer it in kind. English headings stay
   in Tajawal deliberately — Maghribi carries no Latin glyphs. */
body.rtl .container.about h1,
body.rtl .container.about [lang="ar"] h2,
body.lang_ar .container.about h1,
body.lang_ar .container.about [lang="ar"] h2 {
  font-family: 'Maghribi Khouaja', 'A Thuluth', Amiri, serif !important;
  font-weight: 400;
}

/* ===== Level pages (/program/…): headings in the site's own voice =====
   These pages are authored in the programs database, styling and all — the
   overview HTML carries its own <style> block, which is why the repo has no
   file to edit for them. Measured: twelve headings and not one in the display
   face, in #1F3D34 and #2C5747, two greens near our #264240 without being it.

   Overriding here rather than editing the authored HTML fixes all three
   levels at once and touches nobody's words. The authored rules carry no
   !important, so ours wins on weight alone.

   Only the heading face and colour are taken back. The page's own layout,
   spacing and cards are left exactly as their author built them — the aim is
   one voice across the site, not one skin over every page. */
.shq-program-overview .pm-hero h1,
.shq-program-overview .section-header h2,
.shq-program-overview h2 {
  color: var(--shen-teal) !important;
}
.shq-program-overview .info-card__body h3,
.shq-program-overview h3 {
  color: var(--shen-teal) !important;
}
body.rtl .shq-program-overview .pm-hero h1,
body.rtl .shq-program-overview .section-header h2,
body.lang_ar .shq-program-overview .pm-hero h1,
body.lang_ar .shq-program-overview .section-header h2 {
  font-family: 'Maghribi Khouaja', 'A Thuluth', Amiri, serif !important;
  font-weight: 400 !important;
}

/* «دروسي» — the same gold pill the study screen gives it.
   The legacy course pages (the books tab is one) load THIS stylesheet and not
   the MFE brand override, so without this rule the tab is a plain link there
   and a pill two clicks away — the inconsistency a student would notice first.
   Markup: <ol class="tabs course-tabs"><li class="tab"><a href="/dashboard">. */
.course-tabs a[href$="/dashboard"] {
  background: #8a6d2f !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.course-tabs a[href$="/dashboard"]:hover {
  background: #6f5726 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Secondary text at Medium, not Regular.

   Students on laptops reported the small text hard to read (Yahya, 2026-08-10).
   Measured on the homepage at 1366px before changing anything: the contrast is
   NOT the problem — every small run sits at 4.69–6.70 against its background,
   above the 4.5 that AA asks. What is thin is the STROKE: 43 of the small runs
   are Tajawal Regular (400) at 14.4–15.5px, and Arabic connecting strokes at
   that weight disappear on a low-DPI laptop panel.

   The site had asked for Medium in places for a fortnight and never received
   it: only 400 and 700 were ever loaded, so `font-weight:500` silently rendered
   as Regular — measured, 400 and 500 gave the identical 602px string width
   while 600/700 gave 644.9px. Tajawal Medium (usWeightClass 500, the same OFL
   family already shipped) now ships beside Regular and Bold, so every
   `font-weight:500` already written — including every lesson تلخيص — starts
   doing what it says.

   Headings, buttons and `strong` set their own weights and are left alone. */
body,
p, li, dd, dt,
.lede, .sub, .role, .muted, small,
.ins .role, .path li, .card p, .fact .lbl {
  font-weight: 500;
}