/* =========================================================
   LOGO.CSS
   Premium textual wordmark: "BMI" (dark blue) + "4U" (red
   gradient accent with a thin underline mark). Same markup
   and colors in both the header and footer.
   ========================================================= */

.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #123a7a;
  text-decoration: none;
  user-select: none;
}

.logo-accent {
  position: relative;
  margin-left: 1px;
  font-weight: 800;
  background: linear-gradient(135deg, #e6483a 0%, #ff6f5e 45%, #c22a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo-accent::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(135deg, #e6483a 0%, #c22a1f 100%);
  opacity: 0.9;
}

@media (max-width: 480px) {
  .logo {
    font-size: 1.45rem;
  }
}