/* ===================================================================
 * brand.css — the cyberMATI mark and the two-font wordmark
 * -------------------------------------------------------------------
 * The name is always set the same way: "cyber" in the sans, "MATI" in
 * Masterblast. Every occurrence goes through `.wm`, so there is one
 * place to change the lockup instead of a dozen inline styles that had
 * drifted (stray ` ` before commas, inconsistent spacing, one
 * heading still in the old single font).
 *
 * Colour: #ac145a is the brand pink and is applied to the wordmark only.
 * WCAG exempts logotypes and brand names from the contrast minimum, so
 * the exact brand colour beats the lighter tint here.
 * =================================================================== */

/* ---------------------------------------------------------------- */
/* the wordmark                                                     */
/* ---------------------------------------------------------------- */

.wm {
  white-space: nowrap;
  /* the name is always lower-case "cyber" + upper-case "MATI", even
     inside a heading that the template upper-cases */
  text-transform: none;
  color: var(--wm-color, #ac145a);
}

.wm__c {
  font-family: aptos, "metropolis-regular", system-ui, sans-serif;
  font-weight: 400;
  text-transform: lowercase;
}

.wm__m {
  font-family: masterblast, "metropolis-bold", sans-serif;
  font-weight: 400;
}

/* ---------------------------------------------------------------- */
/* mark + wordmark lockup                                           */
/* ---------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 1vw, 1.4rem);
  text-decoration: none;
  border-bottom: 0 !important;
}

.brand__mark {
  display: block;
  flex: none;
  width: auto;
  height: 4.4rem;
  filter: drop-shadow(0 0.6rem 1.8rem rgba(172, 20, 90, 0.28));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: translateY(-0.2rem);
  filter: drop-shadow(0 0.8rem 2.2rem rgba(255, 77, 157, 0.5));
}

.brand .wm {
  font-size: 2.05rem;
  line-height: 1;
}

/* ---------------------------------------------------------------- */
/* header placement — overrides .home-logo img from main.css        */
/* ---------------------------------------------------------------- */

.home-logo .brand {
  display: inline-flex;
}

.home-logo .brand__mark {
  width: auto;
  height: 4.4rem;
}

/* ---------------------------------------------------------------- */
/* footer                                                           */
/* ---------------------------------------------------------------- */

.footer-brand .brand {
  margin-bottom: 1.8rem;
}

.brand--footer .brand__mark {
  height: 5.4rem;
}

.brand--footer .wm {
  font-size: 2.6rem;
}

/* ---------------------------------------------------------------- */
/* small screens                                                    */
/* ---------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .home-logo .brand__mark {
    height: 3.4rem;
  }

  .brand {
    gap: 0.8rem;
  }

  .brand .wm {
    font-size: 1.6rem;
  }

  .brand--footer .brand__mark {
    height: 4.4rem;
  }

  .brand--footer .wm {
    font-size: 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__mark {
    transition: none;
  }

  .brand:hover .brand__mark,
  .brand:focus-visible .brand__mark {
    transform: none;
  }
}