/* SafeBridge wordmark - the one logo for safebridge.io, the portal, help and sb-admin.
   sb-admin/public/brand.css is a copy of this file: keep the two in sync.

   <a class="sb-logo" href="/">
     <svg class="sb-logo-mark" viewBox="0 0 512 512" aria-hidden="true"><path d="..."/></svg>
     <span class="sb-logo-word">Safe<b>Bridge</b></span>
     <span class="sb-logo-suffix">Admin</span>   (optional product name)
   </a>

   Size with --sb-logo-size (the wordmark's font size); everything else scales from it. */
.sb-logo {
  --sb-logo-size: 26px;
  --sb-logo-blue: #007bff;
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--sb-logo-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.sb-logo:hover, .sb-logo:focus { color: #fff; text-decoration: none; }
.sb-logo-mark { width: 0.92em; height: 0.92em; flex: none; fill: var(--sb-logo-blue); }
.sb-logo-word b { font-weight: inherit; color: var(--sb-logo-blue); }
.sb-logo-suffix {
  margin-left: 0.2em;
  padding-left: 0.55em;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}