/* ══════════════════════════════════════════════════════════════════════
   AI ROBOTICS ACADEMY — UI v2
   The soft, rounded design system. Tokens, then shared components.

   SCOPED TO `body.ui2` ON PURPOSE.
   style.css is loaded by every page in this project, dashboards included.
   Redefining its tokens would re-skin the admin, instructor and student
   dashboards along with the homepage. So this file changes nothing until a
   page opts in by carrying `class="ui2"` on <body>, and it is loaded AFTER
   style.css so it wins on equal specificity.

   Every page of the live site now carries the class — the marketing pages,
   the course detail page, the three account pages, 404 and all three
   dashboards. What is left on the old layer is frontend/crm/, which is the
   legacy subdomain kept only until its DNS is retired, and logo-reveal.html,
   which is a one-off demo. When those two go, style.css's SHARP SYSTEM
   block can be deleted and these rules unscoped.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1 · TOKENS
   Layer 1 primitives are the brand colours plus the steps derived from
   them. Layers 2 and 3 are the only things dark mode overrides.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 {
  /* ── Layer 1 · primitives ─────────────────────────────────────────── */
  --royal-900: #0F2E5E;
  --royal-700: #1A4284;
  --royal:     #1F4E9C;   /* brand primary */
  --royal-500: #2B6CB0;   /* the darkest "sky-ish" that is still AA on white (5.4:1) */
  --royal-400: #3581CC;
  --sky:       #4A9BE8;   /* brand secondary — A FILL, never small text on white */
  --sky-300:   #7FBBF0;
  --sky-200:   #AFD6F6;
  --lightb:    #EAF3FC;   /* brand surface */
  --lightb-50: #F5F9FD;
  --navy:      #0B1F3A;   /* brand text / dark base */
  --navy-800:  #132B4A;
  --navy-700:  #1B3A5F;
  --sand:      #F2C49B;   /* the pencil tip — used sparingly */
  --sand-200:  #FBE8D6;
  --sand-ink:  #7A4A1E;   /* 5.2:1 on --sand-200 */
  --w:         #FFFFFF;
  --slate:     #44556E;   /* muted text — 7.6:1 on white */
  --slate-200: #D7E2EF;

  /* ── Layer 2 · semantic ───────────────────────────────────────────── */
  --bg: var(--lightb-50);
  --surface: var(--w);
  --surface-soft: var(--lightb);
  --text: var(--navy);
  --text-muted: var(--slate);
  --text-on-brand: var(--w);
  --brand: var(--royal);
  --brand-soft: var(--sky);
  --warm: var(--sand);
  /* Replaces every hard 1px border in the old system. */
  --line: rgba(11, 31, 58, .08);
  --line-strong: rgba(11, 31, 58, .14);

  /* ── Layer 3 · structure ──────────────────────────────────────────── */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Soft and layered — two stops, never a hard offset. */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .04), 0 2px 8px rgba(11, 31, 58, .05);
  --shadow:    0 2px 6px rgba(11, 31, 58, .05), 0 12px 28px rgba(11, 31, 58, .07);
  --shadow-lg: 0 4px 12px rgba(11, 31, 58, .06), 0 24px 56px rgba(11, 31, 58, .10);
  --shadow-brand: 0 10px 30px rgba(31, 78, 156, .22);

  /* Glass: navbar, floating chips, dropdowns and modals only. Content
     cards stay near-opaque so Arabic text never sits on a blur. */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-solid: rgba(255, 255, 255, .92);   /* the no-backdrop-filter fallback */
  --glass-stroke: rgba(255, 255, 255, .55);
  --glass-blur: blur(18px) saturate(170%);

  /* Motion. The built-in curves are too weak to read as deliberate. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-press: 140ms;
  --t-fast: 180ms;
  --t: 240ms;
  --t-slow: 420ms;

  /* The network/circuit pattern, as one reusable value. */
  --net-line: rgba(31, 78, 156, .045);
  --net-dot:  rgba(74, 155, 232, .20);

  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

/* ── Dark: navy base. Only layers 2 and 3 move. ─────────────────────── */
html[data-theme="dark"] body.ui2 {
  --bg: #071526;
  --surface: var(--navy-800);
  --surface-soft: #0E2440;
  --text: #E8F1FB;                 /* 14.5:1 on --navy */
  --text-muted: #9FB6CE;           /* 7.9:1 on --navy */
  --brand: var(--sky);             /* royal is too dark to carry meaning here */
  /* …and the brand rule follows it: signal blue carries INK, never white.
     White on --sky measures 2.9:1; navy on it measures 5.3:1. Every brand
     fill in the dark theme reads this token, so this is the one place it
     has to be said. */
  --text-on-brand: var(--navy);
  --line: rgba(160, 200, 240, .12);
  --line-strong: rgba(160, 200, 240, .22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .28);
  --shadow:    0 2px 6px rgba(0, 0, 0, .34), 0 12px 28px rgba(0, 0, 0, .34);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .38), 0 24px 56px rgba(0, 0, 0, .44);
  --shadow-brand: 0 10px 30px rgba(10, 30, 60, .55);

  --glass-bg: rgba(19, 43, 74, .60);
  --glass-bg-solid: rgba(19, 43, 74, .94);
  --glass-stroke: rgba(160, 200, 240, .18);

  --net-line: rgba(160, 200, 240, .06);
  --net-dot:  rgba(74, 155, 232, .22);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════
   2 · BASE
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 {
  font-family: var(--font);
  line-height: 1.65;
  letter-spacing: 0;              /* the old layer tracked everything by -.005em */
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t) ease, color var(--t) ease;
}
body.ui2 h1, body.ui2 h2, body.ui2 h3, body.ui2 h4 {
  /* Tracking is size-specific: tighten only the display sizes. */
  letter-spacing: -.018em;
  line-height: 1.28;
  font-weight: 700;
}
body.ui2 h3, body.ui2 h4 { letter-spacing: -.008em; }
body.ui2 .container { width: min(1240px, 92%); }

/* The blanket `section { padding: 72px 0 }` in the marketing layer applies
   to every <section> on the page, including ones that set their own. */
body.ui2 section { padding: 0; }

/* ══════════════════════════════════════════════════════════════════════
   3 · SURFACE UTILITIES — blobs, glass, the network pattern
   A blurred brand-coloured blob behind a glass surface is what makes the
   blur visible at all. Glass over a flat background just looks like a
   slightly grey box.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
body.ui2 .net {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--net-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--net-line) 1px, transparent 1px),
    radial-gradient(circle, var(--net-dot) 1.5px, transparent 1.6px);
  background-size: 52px 52px, 52px 52px, 52px 52px;
}
/* On brand-filled surfaces the pattern has to be light, not dark. */
body.ui2 .net-on-brand {
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, .30) 1.5px, transparent 1.6px);
}

body.ui2 .glass {
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-stroke);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.ui2 .glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   4 · NAVBAR — floating, rounded, liquid glass
   The markup keeps .navbar / .nav-links / .nav-actions because main.js
   toggles .nav-links.open and auth.js mounts the login and account items
   into .nav-actions. This is a reskin, not a rewrite.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .navbar {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1320px, 94%);
  margin: 14px auto 0;
  padding: 10px 12px;
  padding-inline-start: 20px;
  min-height: 0;
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-stroke);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 12px 32px rgba(11, 31, 58, .10);
  transition: box-shadow var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.ui2 .navbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
/* The chamfer was painted on a ::before in the old system. Erase it. */
body.ui2 .navbar::before { content: none; display: none; }
/* Past the fold the bar thickens slightly — it is floating over content
   now, so it needs a touch more separation. */
body.ui2 .navbar.is-scrolled {
  box-shadow: 0 2px 6px rgba(11, 31, 58, .06), 0 18px 44px rgba(11, 31, 58, .16);
}
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .navbar.is-scrolled {
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
  html[data-theme="dark"] body.ui2 .navbar.is-scrolled { background: rgba(19, 43, 74, .74); }
}

body.ui2 .navbar .brand { gap: 10px; padding-inline: 0; color: var(--text); }
body.ui2 .navbar .brand .brand-mark {
  height: 40px; width: 40px;
  background: transparent;        /* the old bar needed a white plate; this one doesn't */
  padding: 0;
  border-radius: var(--r-sm);
}
body.ui2 .brand-name b { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
body.ui2 .brand-name span { font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--royal-500); }
html[data-theme="dark"] body.ui2 .brand-name span { color: var(--sky); }

body.ui2 .nav-links { gap: 2px; margin-inline-start: 8px; }
body.ui2 .nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
body.ui2 .nav-links a:hover { background: rgba(74, 155, 232, .12); color: var(--brand); }
body.ui2 .nav-actions { gap: 8px; }

/* The bar's control family — language, theme, login, account, bell.
   One height, one radius, one hover, as the old BAR CONTROLS block did. */
body.ui2 .navbar #langToggle,
body.ui2 .navbar .theme-toggle,
body.ui2 .navbar a.nav-login-link,
body.ui2 .navbar .account-trigger,
body.ui2 .navbar .bell-trigger,
body.ui2 .navbar .nav-toggle {
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
body.ui2 .navbar .theme-toggle,
body.ui2 .navbar .bell-trigger,
body.ui2 .navbar .nav-toggle { width: 40px; padding: 0; font-size: 17px; }
/* The burger belongs to the control family visually, but it is still a
   phone-only control — home.css brings it back at the breakpoint. Without
   this the family rule's display:inline-flex would show it on desktop. */
body.ui2 .navbar .nav-toggle { display: none; }
body.ui2 .navbar a.nav-login-link { font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 0 18px; }
body.ui2 .navbar .account-trigger { padding-inline: 12px 6px; gap: 9px; }
body.ui2 .navbar #langToggle:hover,
body.ui2 .navbar .theme-toggle:hover,
body.ui2 .navbar a.nav-login-link:hover,
body.ui2 .navbar .account-trigger:hover,
body.ui2 .navbar .bell-trigger:hover,
body.ui2 .navbar .nav-toggle:hover {
  background: var(--surface-soft);
  color: var(--brand);
  border-color: var(--sky-200);
}
body.ui2 .navbar #langToggle:active,
body.ui2 .navbar .theme-toggle:active,
body.ui2 .navbar .nav-toggle:active { transform: scale(.97); }

/* The account dropdown is the one other glass surface in the bar. */
body.ui2 .navbar .account-menu {
  border-radius: var(--r);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-bg-solid);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .navbar .account-menu {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   5 · BUTTONS — pill, soft, with press feedback
   Nothing in the old system had an :active state. A button that does not
   answer the press feels dead however fast the page is.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  transform: none;
  transition: transform var(--t-press) var(--ease-out),
              box-shadow var(--t) var(--ease-out),
              background-color var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out),
              color var(--t) var(--ease-out);
}
body.ui2 .btn:active { transform: scale(.97); }

/* Filled. White on royal measures 8:1. */
body.ui2 .btn-primary,
body.ui2 .btn-accent,
body.ui2 .btn-brand {
  background: var(--royal);
  color: var(--w);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
body.ui2 .btn-primary:hover,
body.ui2 .btn-accent:hover,
body.ui2 .btn-brand:hover {
  background: var(--royal-700);
  box-shadow: 0 14px 36px rgba(31, 78, 156, .30);
  transform: none;
  translate: none;
}
html[data-theme="dark"] body.ui2 .btn-primary,
html[data-theme="dark"] body.ui2 .btn-accent,
html[data-theme="dark"] body.ui2 .btn-brand { background: var(--royal-500); }

/* Soft — a white pill with a hairline, not an outline box. */
body.ui2 .btn-outline,
body.ui2 .btn-ghost,
body.ui2 .btn-soft {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--slate-200);
  box-shadow: var(--shadow-sm);
}
body.ui2 .btn-outline:hover,
body.ui2 .btn-ghost:hover,
body.ui2 .btn-soft:hover {
  background: var(--surface-soft);
  color: var(--brand);
  border-color: var(--sky-200);
}
html[data-theme="dark"] body.ui2 .btn-outline,
html[data-theme="dark"] body.ui2 .btn-ghost,
html[data-theme="dark"] body.ui2 .btn-soft { border-color: var(--line-strong); color: var(--text); }
html[data-theme="dark"] body.ui2 .btn-outline:hover,
html[data-theme="dark"] body.ui2 .btn-ghost:hover,
html[data-theme="dark"] body.ui2 .btn-soft:hover { background: var(--surface-soft); color: var(--sky); }

/* On a brand-filled surface the primary button has to invert. */
body.ui2 .btn-white,
body.ui2 .btn-dark {
  background: var(--w);
  color: var(--royal);
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(6, 24, 52, .22);
}
body.ui2 .btn-white:hover,
body.ui2 .btn-dark:hover { background: var(--lightb); transform: none; }

body.ui2 .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   6 · PILLS — the brand's tag motif
   HARD RULE: --sky is a FILL. Sky text on white measures 2.9:1 and fails
   AA; navy on sky measures 5.6:1 and passes. Every pill variant below
   pairs a fill with a tested foreground.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .pill,
body.ui2 .chip,
body.ui2 .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
body.ui2 .pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex-shrink: 0;
}
body.ui2 .pill-soft { background: var(--surface-soft); color: var(--brand); }
body.ui2 .pill-warm { background: var(--sand-200); color: var(--sand-ink); }
body.ui2 .pill-ghost { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] body.ui2 .pill-soft,
html[data-theme="dark"] body.ui2 .pill-ghost { color: var(--sky); }
html[data-theme="dark"] body.ui2 .pill-warm { background: rgba(242, 196, 155, .18); color: var(--sand); }
/* .tag is generated by courses.js — no dot, smaller. */
body.ui2 .tag { background: var(--surface-soft); color: var(--brand); font-size: 12px; padding: 6px 12px; }
html[data-theme="dark"] body.ui2 .tag { color: var(--sky); }

/* ══════════════════════════════════════════════════════════════════════
   6b · NEWS KIND PILLS — one colour per kind, each pair contrast-tested.
   Shared: the news pages and the dashboard's News table both draw them.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .news-kind {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--surface-soft);
  color: var(--brand);
}
body.ui2 .news-kind-event { background: var(--sky); color: var(--navy); }
body.ui2 .news-kind-competition { background: var(--sand-200); color: var(--sand-ink); }
body.ui2 .news-kind-partnership { background: var(--navy); color: var(--w); }
html[data-theme="dark"] body.ui2 .news-kind-news { color: var(--sky); }
html[data-theme="dark"] body.ui2 .news-kind-competition { background: rgba(242, 196, 155, .18); color: var(--sand); }
html[data-theme="dark"] body.ui2 .news-kind-partnership { background: var(--lightb); color: var(--navy); }

/* ══════════════════════════════════════════════════════════════════════
   6c · FILTER CHIPS — a row of toggles over a list, with counts
   The News page filters by kind with them and the Courses page by track.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui2 .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
body.ui2 .filter-chip:active { transform: scale(.97); }
body.ui2 .filter-chip-n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--brand);
  font-size: 12px;
  text-align: center;
}
body.ui2 .filter-chip[aria-pressed="true"] { background: var(--brand); color: var(--text-on-brand); }
body.ui2 .filter-chip[aria-pressed="true"] .filter-chip-n { background: rgba(255, 255, 255, .22); color: inherit; }
@media (hover: hover) and (pointer: fine) {
  body.ui2 .filter-chip:not([aria-pressed="true"]):hover { background: var(--surface-soft); }
}
body.ui2 .filter-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* A monthly-subscription tag on a course card: warm, so it reads as "how
   you pay" rather than as one more fact about the course. */
body.ui2 .tag-sub { background: var(--sand-200); color: var(--sand-ink); }
html[data-theme="dark"] body.ui2 .tag-sub { background: rgba(242, 196, 155, .18); color: var(--sand); }

/* ══════════════════════════════════════════════════════════════════════
   7 · TILES & CARDS — radius and soft shadow, never a hard border
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .tile,
body.ui2 .card,
body.ui2 .course-card,
body.ui2 .faq-item {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
body.ui2 .tile { padding: 26px; }
/* Hover lift is gated: touch devices fire :hover on tap and the card
   sticks in the lifted state. */
@media (hover: hover) and (pointer: fine) {
  body.ui2 .tile:hover,
  body.ui2 .card:hover,
  body.ui2 .course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
  }
}

/* ── courses.js renders .course-card > .thumb + .body ───────────────── */
/* auto-FIT, not auto-fill: the homepage shows three courses, and auto-fill
   keeps a fourth empty column reserved at desktop width. */
body.ui2 .courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
body.ui2 .course-card { display: flex; flex-direction: column; }
body.ui2 .course-card .thumb {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: linear-gradient(150deg, var(--surface-soft) 0%, #DCEAF9 100%) center / cover;
}
html[data-theme="dark"] body.ui2 .course-card .thumb {
  background: linear-gradient(150deg, var(--surface-soft) 0%, #0A1E36 100%) center / cover;
}
body.ui2 .course-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
body.ui2 .course-card h3 { font-size: 18px; }
body.ui2 .course-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.8; }
body.ui2 .course-card .meta { display: flex; gap: 8px; flex-wrap: wrap; }
body.ui2 .course-card .btn { margin-top: auto; }

/* ── image slot — a card you drop a photo into later ────────────────── */
body.ui2 .ph {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-soft) 0%, #DCEAF9 100%);
  display: grid;
  place-items: center;
  isolation: isolate;
}
html[data-theme="dark"] body.ui2 .ph { background: linear-gradient(150deg, var(--surface-soft) 0%, #0A1E36 100%); }
body.ui2 .ph::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--r-lg) - 4px);
  border: 2px dashed rgba(31, 78, 156, .18);
}
html[data-theme="dark"] body.ui2 .ph::before { border-color: rgba(160, 200, 240, .2); }
/* Once a real <img> is dropped in, the dashes and the label get out of
   the way on their own — no markup change needed beyond adding the img. */
body.ui2 .ph:has(img)::before { display: none; }
body.ui2 .ph:has(img) .ph-label { display: none; }
body.ui2 .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ui2 .ph-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--royal-500);
  background: var(--glass-bg-solid);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
html[data-theme="dark"] body.ui2 .ph-label { color: var(--sky); }
body.ui2 .ph-label svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   8 · SECTION HEADS
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .sec { padding: clamp(52px, 6vw, 84px) 0; position: relative; }
body.ui2 .sec-alt { background: var(--surface-soft); }
body.ui2 .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: none;
  margin-bottom: clamp(26px, 3.4vw, 38px);
}
body.ui2 .sec-head.center { text-align: center; justify-content: center; }
body.ui2 .sec-head.center .sec-title { margin-inline: auto; }
body.ui2 .sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0;
}
html[data-theme="dark"] body.ui2 .sec-label { color: var(--sky); }
body.ui2 .sec-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sky);
  flex-shrink: 0;
}
body.ui2 .sec-title {
  font-size: clamp(25px, 3.1vw, 37px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.014em;
  margin-top: 12px;
  max-width: 640px;
}
body.ui2 .sec-lead {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.9;
  max-width: 620px;
}

/* ══════════════════════════════════════════════════════════════════════
   9 · FAQ — native <details>, no JS
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
body.ui2 .faq-item { border-radius: var(--r-lg); }
@media (hover: hover) and (pointer: fine) { body.ui2 .faq-item:hover { transform: none; box-shadow: var(--shadow); } }
body.ui2 .faq-item summary {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}
body.ui2 .faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
  transition: transform var(--t) var(--ease-out);
}
body.ui2 .faq-item[open] summary::after { transform: rotate(45deg); }
body.ui2 .faq-item p { padding: 0 24px 22px; color: var(--text-muted); font-size: 15px; line-height: 1.9; }

/* ══════════════════════════════════════════════════════════════════════
   10 · FOOTER
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .footer {
  background: var(--navy);
  color: rgba(232, 241, 251, .72);
  padding: clamp(44px, 5vw, 64px) 0 28px;
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
}
body.ui2 .footer-top { border-bottom: 1px solid rgba(160, 200, 240, .12); }
body.ui2 .footer-brand .brand-mark { background: transparent; padding: 0; border-radius: var(--r-sm); }
body.ui2 .footer-brand .brand-name b { color: var(--w); }
body.ui2 .footer-brand .brand-name span { color: var(--sky); }
body.ui2 .footer-col h4 { color: var(--w); font-size: 13px; letter-spacing: .1em; font-weight: 600; }
body.ui2 .footer-col a:hover { color: var(--sky); }
body.ui2 .social a {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: var(--w);
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
body.ui2 .social a:hover { background: var(--sky); color: var(--navy); }
body.ui2 .social a:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════════════════════
   11 · THE WHATSAPP BUTTON — a platform mark, so it stays a circle
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .wa-float { box-shadow: 0 6px 18px rgba(37, 211, 102, .32), 0 18px 40px rgba(11, 31, 58, .14); }
body.ui2 .wa-float:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════════════════════
   12 · MOTION
   Scroll reveal is retuned, not replaced: reveal.js already adds .in.
   The old values (28px, 600ms) read as slow; 16px and 420ms read as the
   content settling rather than travelling.
   ══════════════════════════════════════════════════════════════════════ */
html.js-reveal body.ui2 .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
html.js-reveal body.ui2 .reveal.in { opacity: 1; transform: none; }
body.ui2 .reveal.d1 { transition-delay: 60ms; }
body.ui2 .reveal.d2 { transition-delay: 120ms; }
body.ui2 .reveal.d3 { transition-delay: 180ms; }

/* The headline, word by word. home-motion.js wraps each word in a .w and
   stamps it with its index. */
body.ui2 .hero h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: ui2WordIn var(--t-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes ui2WordIn { to { opacity: 1; transform: none; } }

/* Text for a screen reader and nobody else. `display:none` would take it out
   of the accessibility tree too, which is the opposite of the point. */
body.ui2 .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Accessibility: gentler, not absent ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal body.ui2 .reveal { opacity: 0; transform: none; transition: opacity 200ms ease; }
  html.js-reveal body.ui2 .reveal.in { opacity: 1; }
  body.ui2 .hero h1 .w { animation: ui2WordFade 240ms ease forwards; transform: none; }
  @keyframes ui2WordFade { to { opacity: 1; } }
  body.ui2 .btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body.ui2 .navbar,
  body.ui2 .glass,
  body.ui2 .navbar .account-menu,
  body.ui2 .ph-label {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.ui2 .blob { display: none; }
}
@media (prefers-contrast: more) {
  body.ui2 .tile, body.ui2 .card, body.ui2 .course-card, body.ui2 .faq-item { border: 1px solid var(--line-strong); }
  body.ui2 .navbar { background: var(--surface); border-color: var(--line-strong); }
}

/* ══════════════════════════════════════════════════════════════════════
   INSTRUCTORS — portrait tiles, filled by team.js. Shared: the homepage
   shows the first four (.team-grid-4), /team shows everyone.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
/* Four a row on both pages: the homepage's four fill exactly one, and
   /team reads in even rows rather than leaving a fifth column half-empty. */
body.ui2 .team-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  body.ui2 .team-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Two portraits a row: one per row made a team of eight a long scroll. */
  body.ui2 .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.ui2 .team-body { padding: 12px 12px 14px; }
  body.ui2 .team-body h3 { font-size: 15px; }
  body.ui2 .team-role, body.ui2 .team-bio { font-size: 13px; }
}
body.ui2 .team-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
body.ui2 .team-card .team-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-soft);
}
body.ui2 .team-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .team-card:hover .team-photo img { transform: scale(1.03); }
}
/* No photo: initials on the brand-tinted block every imageless tile uses. */
body.ui2 .team-card .team-photo-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--surface-soft) 0%, #DCEAF9 100%);
  color: var(--brand);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
}
html[data-theme="dark"] body.ui2 .team-card .team-photo-empty {
  background: linear-gradient(150deg, var(--surface-soft) 0%, #0A1E36 100%);
  color: var(--sky);
}
body.ui2 .team-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 16px 18px 18px;
}
body.ui2 .team-body h3 { margin: 0; font-size: 17px; line-height: 1.45; }
body.ui2 .team-role { margin: 0; color: var(--brand); font-size: 14px; font-weight: 600; }
html[data-theme="dark"] body.ui2 .team-role { color: var(--sky); }
body.ui2 .team-bio {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.ui2 .team-branch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
}
html[data-theme="dark"] body.ui2 .team-branch { color: var(--sky); }
body.ui2 .team-bio + .team-branch,
body.ui2 .team-role + .team-branch { margin-top: 8px; }
body.ui2 .team-branch svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  body.ui2 .team-card .team-photo img { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE CTA — the booking bar that stays on a phone's screen (mobile-cta.js)
   Phones only. It slides up once the hero is behind, and back down when the
   closing card or the footer comes in (they have their own buttons). While
   it is up the floating WhatsApp button steps aside: the bar carries
   WhatsApp itself, so the two never stack in the same corner.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .mcta { display: none; }
@media (max-width: 760px) {
  body.ui2 .mcta {
    position: fixed;
    z-index: 59;                    /* under the WhatsApp float's 60, above the page */
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: var(--r-pill);
    background: var(--glass-bg-solid);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
  }
  @supports (backdrop-filter: blur(1px)) {
    body.ui2 .mcta { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  }
  body.ui2 .mcta.is-up { transform: none; opacity: 1; }
  body.ui2 .mcta-main {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--text-on-brand);
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    transition: transform var(--t-press) var(--ease-out);
  }
  body.ui2 .mcta-wa {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #25D366;            /* WhatsApp's own mark colour, as on .wa-float */
    transition: transform var(--t-press) var(--ease-out);
  }
  body.ui2 .mcta-wa svg { width: 26px; height: 26px; }
  body.ui2 .mcta-main:active, body.ui2 .mcta-wa:active { transform: scale(.97); }
  body.ui2 .mcta a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
  /* The floating WhatsApp button steps aside while the bar is up. */
  body.ui2 .wa-float { transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out); }
  body.ui2.has-mcta .wa-float { opacity: 0; transform: scale(.9); pointer-events: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.ui2 .mcta, body.ui2 .wa-float { transition: none; }
}

/* «من شركاتنا: Qodeva AI» under the social icons of every footer. The mark
   sits on white: its navy disappears on the footer's dark ground. */
body.ui2 .footer-family {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: inherit;
  opacity: .9;
  text-decoration: none;
}
body.ui2 .footer-family:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
body.ui2 .footer-family img {
  width: 26px; height: 26px;
  padding: 3px;
  border-radius: 8px;
  background: var(--w);
}

/* ══════════════════════════════════════════════════════════════════════
   NEWS TICKER — the moving line under the navbar (js/ticker.js)
   Only the words: no band, no border, no label. They fade in at one edge
   of the content column and out at the other, exactly like the topic
   pills under the hero, centred in the gap between the floating navbar
   and the first block. The hero and the page heads already leave that gap
   (their negative top margin lets the navbar float over them); with a
   ticker on the page they leave exactly enough for it — 24px, the line,
   24px — instead of pushing everything down. The words slide in from the
   side a reader starts at (left-to-right in Arabic), pause while hovered
   or focused, and stand still for anyone who asked for reduced motion.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .ticker {
  position: relative;
  z-index: 2;                       /* above the hero, which rises under it */
  display: flex;
  align-items: center;
  width: min(1240px, 92%);          /* the .container width */
  height: 40px;
  margin: 24px auto 0;
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
html[data-theme="dark"] body.ui2 .ticker { color: var(--sky); }
body.ui2.has-ticker .hero,
body.ui2.has-ticker .page-head,
body.ui2.has-ticker .detail-hero { padding-top: 92px; }
body.ui2 .ticker-view {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* the lines fade in and out at the edges rather than being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
body.ui2 .ticker-track { display: flex; width: max-content; }
body.ui2 .ticker-run { display: flex; flex: 0 0 auto; }
body.ui2 .ticker-copy { display: contents; }
body.ui2 .ticker-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline-end: 48px;
}
/* a small sky dot between lines */
body.ui2 .ticker-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  margin-inline-end: 16px;
  flex: 0 0 auto;
}
body.ui2 .ticker-item a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
}
body.ui2 .ticker-item a:hover { text-decoration: underline; }
body.ui2 .ticker-item a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

body.ui2 .ticker.is-moving .ticker-track {
  animation: tickerLtr var(--ticker-dur, 30s) linear infinite;
}
html[dir="rtl"] body.ui2 .ticker.is-moving .ticker-track { animation-name: tickerRtl; }
body.ui2 .ticker.is-moving:hover .ticker-track,
body.ui2 .ticker.is-moving:focus-within .ticker-track { animation-play-state: paused; }
@keyframes tickerLtr { to { transform: translateX(calc(-1 * var(--ticker-shift, 50%))); } }
@keyframes tickerRtl { to { transform: translateX(var(--ticker-shift, 50%)); } }

/* Standing still, the lines are read by scrolling the strip sideways. */
body.ui2 .ticker.is-still .ticker-view { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scrollbar-width: none; }
@media (prefers-reduced-motion: reduce) {
  body.ui2 .ticker .ticker-track { animation: none !important; }
}
@media (max-width: 560px) {
  body.ui2 .ticker { font-size: 14px; height: 36px; margin-top: 18px; }
  body.ui2.has-ticker .hero,
  body.ui2.has-ticker .page-head,
  body.ui2.has-ticker .detail-hero { padding-top: 86px; }
}

/* ══════════════════════════════════════════════════════════════════════
   13 · ARABIC TYPOGRAPHY GUARD

   Arabic is cursive. Tracking it — in either direction — pulls the joins
   between letters apart or overlaps them, and the word stops reading as a
   word. style.css carries `html[lang="ar"] * { letter-spacing: normal }`
   for exactly this, but every tracked rule in THIS file is more specific
   than that one selector, so the guard lost on 32 headings and labels of
   the Arabic homepage alone.

   One rule that outranks them all, then the exceptions — which are only
   ever strings that are Latin in BOTH languages. A new tracked label goes
   in the list below it or nowhere.
   ══════════════════════════════════════════════════════════════════════ */
html[lang="ar"] body.ui2 * { letter-spacing: normal; }

/* The brand lockup reads "AI ROBOTICS / ACADEMY" on an Arabic page too. */
html[lang="ar"] body.ui2 .brand-name b { letter-spacing: .04em; }
html[lang="ar"] body.ui2 .brand-name span { letter-spacing: .2em; }
/* The language button says "EN" when the page is Arabic. */
html[lang="ar"] body.ui2 #langToggle { letter-spacing: .06em; }

/* ══════════════════════════════════════════════════════════════════════
   14 · RESPONSIVE — last in the file, as the project requires

   The bar, the drawer, the footer and the course grid are SHARED, so their
   breakpoints belong here rather than in one page's layout file. They lived
   in home.css until the other pages were brought onto this system and came
   up 43px wide on a phone: they were getting the desktop bar and nothing
   else, because the only mobile rules for it were in a stylesheet only the
   homepage loads.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* The mobile drawer: a rounded sheet, not a square panel. main.js still
     toggles .open — this only restyles it. */
  body.ui2 .nav-links {
    top: calc(100% + 10px);
    inset-inline: 0;
    padding: 14px;
    gap: 4px;
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    background: var(--glass-bg-solid);
    box-shadow: var(--shadow-lg);
  }
  body.ui2 .nav-links a { padding: 12px 14px; font-size: 15px; }
  body.ui2 .navbar .nav-toggle { display: inline-flex; }
  body.ui2 .sec-head { align-items: flex-start; }
}
@supports (backdrop-filter: blur(1px)) {
  @media (max-width: 820px) {
    body.ui2 .nav-links {
      background: var(--glass-bg);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
    }
  }
}
@media (max-width: 640px) {
  /* One row the thumb can scroll, rather than rows of chips pushing the
     first card off the screen. */
  body.ui2 .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 8px; margin: -4px -2px 0; scrollbar-width: none; }
  body.ui2 .filter-chips::-webkit-scrollbar { display: none; }
  body.ui2 .filter-chip { flex-shrink: 0; }
  body.ui2 .courses-grid { grid-template-columns: 1fr; }
  body.ui2 .footer-top { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  body.ui2 .navbar { padding: 8px; padding-inline-start: 14px; gap: 10px; }
  body.ui2 .nav-actions { gap: 6px; }
  body.ui2 .navbar .brand .brand-mark { height: 34px; width: 34px; }
  /* auth.js injects the login link (or the account chip) into .nav-actions
     at runtime, so the bar carries one more control on a real page than the
     markup shows. At 390px that pushed it 77px past the viewport. The
     wordmark is the redundant part next to the mark — it goes, the entry
     point stays. */
  body.ui2 .navbar .brand .brand-name { display: none; }
  body.ui2 .navbar a.nav-login-link { padding: 0 12px; font-size: 12px; }
  body.ui2 .navbar .account-trigger { padding-inline: 8px 4px; gap: 6px; }
  body.ui2 .navbar .account-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.ui2 .btn { padding: 13px 22px; font-size: 14px; }
}
/* 320px — the narrowest phone still in use. Five controls plus a brand
   mark do not fit at 40px each, so the family steps down to 36. */
@media (max-width: 380px) {
  body.ui2 .navbar { gap: 6px; padding: 7px; padding-inline-start: 10px; }
  body.ui2 .nav-actions { gap: 4px; }
  body.ui2 .navbar #langToggle,
  body.ui2 .navbar .theme-toggle,
  body.ui2 .navbar a.nav-login-link,
  body.ui2 .navbar .account-trigger,
  body.ui2 .navbar .nav-toggle { height: 36px; min-height: 36px; min-width: 36px; }
  body.ui2 .navbar .theme-toggle,
  body.ui2 .navbar .nav-toggle { width: 36px; font-size: 15px; }
  body.ui2 .navbar #langToggle { padding: 0 9px; font-size: 11px; }
  body.ui2 .navbar a.nav-login-link { padding: 0 9px; font-size: 11px; }
  body.ui2 .navbar .brand .brand-mark { height: 30px; width: 30px; }
}

/* The footer's contact line, with «كل روابطنا» (→ /links.html) after it. */
body.ui2 .footer-contact a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
body.ui2 .footer-contact a:hover { color: var(--w); }