/* The top bar: a banner in the university's colours (deep blue, gold, deep blue), the
   app's name in bold capitals with its tagline below, left-aligned. Loaded after app.css.
   White text sits on the left, so the blue there is deep enough for 4.5:1 (a test checks
   it); the gold sits where only buttons with their own dark backing are. */
:root {
  --banner-a: #0a6a95;
  --banner-b: #0a7ba8;
  --banner-gold: #e9c46a;
  --banner-c: #0a7ba8;
  --banner-d: #0a5a80;
}
.topbar {
  height: var(--topbar); display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem;
  color: #fff; box-shadow: var(--shadow); position: relative; z-index: 8;
  /* Stops are measured from the left edge in pixels where text sits, so a long title
     never runs onto the gold; on a narrow screen the gold is simply off the end. */
  background: linear-gradient(90deg, var(--banner-a) 0, var(--banner-b) 520px, var(--banner-gold) max(62%, 800px), var(--banner-c) max(86%, 1100px), var(--banner-d) max(100%, 1300px));
}
@media (min-width: 1000px) {
  /* A soft sheen over the gold, as in the banner artwork; nothing white-on-light sits there. */
  .topbar {
    background:
      radial-gradient(ellipse 240px 160% at max(62%, 800px) 30%, rgb(255 255 255 / 45%), transparent 70%),
      linear-gradient(90deg, var(--banner-a) 0, var(--banner-b) 520px, var(--banner-gold) max(62%, 800px), var(--banner-c) max(86%, 1100px), var(--banner-d) max(100%, 1300px));
  }
}
.brand { margin: 0; display: flex; align-items: center; gap: 0.7rem; min-width: 0; font-size: 1.15rem; color: #fff; }
.brand-mark { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.brand-mark .icon { width: 1.4rem; height: 1.4rem; margin: 0; }
.brand-text { display: grid; line-height: 1.15; min-width: 0; }
.brand-title { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-subtitle { font-size: 0.82rem; font-weight: 400; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A dark blue backing, not a light one, so white text holds 4.5:1 on the blue and on the gold. */
.topbar .btn { background: rgb(8 40 70 / 72%); border-color: rgb(255 255 255 / 60%); color: #fff; }
.topbar .btn:hover { background: rgb(8 40 70 / 86%); }
.topbar .btn[aria-current="page"] { background: #fff; color: var(--banner-d); border-color: #fff; font-weight: 600; }
.topbar :focus-visible { outline-color: #fff; }
@media (max-width: 768px) {
  .brand-subtitle { display: none; }
  /* Wrap to two lines rather than cut a long name short. */
  .brand-title { font-size: 0.95rem; line-height: 1.1; white-space: normal; overflow: visible; }
  .topbar { padding: 0 0.6rem; gap: 0.5rem; }
  .topbar .btn.small { min-width: 44px; min-height: 44px; padding: 0.2rem 0.5rem; }
  .brand-mark { width: 2rem; height: 2rem; }
  .brand-mark .icon { width: 1.2rem; height: 1.2rem; }
  .brand { flex: 1 1 auto; gap: 0.4rem; }
}