/* ==========================================================================
   BBM identity — truck mark sizing and behaviour
   --------------------------------------------------------------------------
   Loaded from includes/header.php so the mark keeps its proportions and
   spacing independently of the shared layout sheet. Scoped to .brand only;
   no global tokens, colours or layout rhythm are redefined here.

   The mark is a self-contained SVG (a flat truck with BBM reversed out of the
   cargo container), so it stays crisp at any size, needs no font or network
   request, and can be dropped into email, social cards or print unchanged.
   ========================================================================== */

.brand {
  gap: 12px;
}

/* The truck sits on the header surface with no tile, frame or tinted box. */
.brand__mark {
  width: 82px;
  height: 47.1px;
  display: block;
  flex: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.brand__mark img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .3s var(--ease-spring), filter .3s var(--ease-spring);
}

/* Keep the existing springy hover, but move the whole mark rather than
   snapping the tile's corner radius: a wordmark should not rotate. */
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  border-radius: 0;
  transform: none;
}

.brand:hover .brand__mark img,
.brand:focus-visible .brand__mark img {
  transform: translateY(-1.5px);
  filter: drop-shadow(0 6px 9px rgba(18, 40, 66, .18));
}

/* Compact slots: keep the truck silhouette readable, never a squeezed square. */
@media (max-width: 980px) {
  .brand__mark { width: 74px; height: 42.5px; }
}

@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand__mark { width: 64px; height: 36.7px; }
}

@media (max-width: 520px) {
  .brand { gap: 8px; }
}

@media (max-width: 360px) {
  .brand__mark { width: 60px; height: 34.4px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__mark img { transition: none; }
  .brand:hover .brand__mark img,
  .brand:focus-visible .brand__mark img { transform: none; }
}

/* Windows high contrast: keep a visible edge when the SVG tint is flattened. */
@media (forced-colors: active) {
  .brand__mark img { filter: none; }
  .brand__mark { outline: 1px solid CanvasText; outline-offset: 2px; }
}

/* ---------- Footer sign-off --------------------------------------------- */
/* A small one-colour truck mark beside the legal line, not a second home link. */
.site-footer__bottom {
  align-items: center;
}

.site-footer__signoff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer__mark {
  width: 56px;
  height: 32px;
  flex: none;
  opacity: .82;
}

@media (max-width: 520px) {
  .site-footer__mark { width: 48px; height: 27.5px; }
}