/* =====================================================================
   ASI Lab (asi.cs.cityu.edu.hk) — shared chrome (brandbar + top nav + footer)
   Single source of truth for the header/nav/footer used on EVERY page.
   Page-specific layout CSS stays inline in each page's own <style>.
   ===================================================================== */
:root {
  --cityu: #6b2c91;
  --cityu-dark: #4a1e66;
  --accent: #0f8f8f;
  --accent2: #38b2b2;
  --ink: #14202e;
  --muted: #5b6673;
  --bg: #f7f9fb;
  --card: #ffffff;
  --border: #e4e9ef;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20,32,46,.08);
  --max: 1160px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ===== CityU brand bar (logo header) ===== */
.site-brandbar { background: var(--cityu); color: #fff; }
.site-brandbar .brandbar-container {
  margin: 0 auto; max-width: var(--max); padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-brandbar .brandbar-link { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
.site-brandbar .brandbar-logo { display: block; height: 40px; width: auto; }
.site-brandbar .brandbar-note { font-size: .8rem; opacity: .85; }
@media (max-width: 600px) { .site-brandbar .brandbar-logo { height: 28px; } .site-brandbar .brandbar-note { display: none; } }

/* ===== Top navigation bar ===== */
.site-nav { background: #fff; border-bottom: 1px solid var(--border); }
.site-nav .wrap { display: flex; gap: 22px; align-items: center; padding-top: 14px; padding-bottom: 14px; font-size: .92rem; font-weight: 600; flex-wrap: wrap; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); text-decoration: none; }
.site-nav a.on { color: var(--cityu); }
@media (max-width: 760px) { .site-nav .wrap { gap: 12px; } }

/* ===== Footer ===== */
.site-footer { background: #131a24; color: #b7c0cc; padding: 34px 0; font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.site-footer .dot { color: var(--accent2); }
.site-footer a { color: #b7c0cc; }
.site-footer a:hover { color: #fff; }