/* ============================================================================
   Vanta AI — canonical brand lockup
   ONE nav brand for every screen, logged in or out. Markup lives in
   templates/_brand.html; do not hand-roll a logo + wordmark anywhere else.

   Usage:  {% include '_brand.html' %}            (defaults to href="/")
           {% with brand_href='/home' %}{% include '_brand.html' %}{% endwith %}

   Approved look (from the landing page): cloud-icon mark + "Vanta AI" in
   Baloo 2 extra-bold cream, one centred unit, stepping down on small screens.
   ============================================================================ */

.vbrand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.vbrand:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.vbrand__mark {
  display: block;
  height: 56px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(30, 18, 48, 0.5);
}

.vbrand__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--space-cloud);
  white-space: nowrap;
}

/* In-app chrome sits tighter than the marketing header. */
.vbrand--compact { gap: var(--space-2); }
.vbrand--compact .vbrand__mark { height: 44px; border-radius: 10px; }
.vbrand--compact .vbrand__wordmark { font-size: 1.25rem; }

@media (max-width: 640px) {
  .vbrand__mark { height: 44px; border-radius: 10px; }
  .vbrand__wordmark { font-size: 1.25rem; }
}
@media (max-width: 430px) {
  .vbrand { gap: var(--space-2); }
  .vbrand__mark { height: 40px; }
  .vbrand__wordmark { font-size: 1.15rem; }
}

@media (hover: hover) and (pointer: fine) {
  .vbrand[href]:hover .vbrand__mark { animation: vbrand-bounce 0.5s var(--ease-out); }
}
@keyframes vbrand-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-8px); }
  55%  { transform: translateY(0); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vbrand[href]:hover .vbrand__mark { animation: none; }
}