/* Magnet Studio M31 — unified brand identity across public, editor, account and admin. */

:root {
  --magnet-brand-mark: url('/assets/magnet/brand/magnet-studio-mark.svg');
}

.ms-brand__mark,
.m2-brand__mark,
.m27-admin-brand > span:first-child {
  background-image: var(--magnet-brand-mark) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  overflow: hidden;
}

.ms-brand__mark::after {
  content: '' !important;
  display: none !important;
}

.ms-brand__mark i,
.m2-brand__mark > * {
  display: none !important;
}

.m2-brand__mark {
  font-size: 0 !important;
  box-shadow: 0 10px 26px rgba(64, 72, 216, .24), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.m27-admin-brand > span:first-child {
  box-shadow: 0 12px 30px rgba(63, 72, 216, .22), inset 0 1px 0 rgba(255,255,255,.44) !important;
}

.m27-admin-brand > span:first-child svg {
  display: none !important;
}

.ms-brand,
.m2-brand,
.m27-admin-brand {
  text-wrap: nowrap;
}

/* Keep the wordmark optically balanced beside the richer symbol. */
.ms-brand > span:last-child,
.m2-brand > b,
.m27-admin-brand > span:last-child {
  transform: translateY(.5px);
}

@media (prefers-reduced-motion: no-preference) {
  .ms-header a:hover .ms-brand__mark,
  .m2-site-header > a:hover .m2-brand__mark,
  .m27-admin-brand:hover > span:first-child {
    transform: translateY(-1px) rotate(-1.5deg);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  }
}

@media (max-width: 520px) {
  .ms-brand__mark,
  .m2-brand__mark {
    border-radius: 13px !important;
  }
}