/* Muhjee logo — canonical CSS. Source of truth for both the public
   website and the portal/app React frontends.
   See README.md in this directory for adoption + sync workflow.

   Self-contained — no dependency on consumer-defined CSS variables.
   Brand colors are inlined so a consumer-side theme switch never
   recolors the brand mark accidentally. */

.muh-logo-container {
  position: relative;
  color: #ffffff;
  width: 21em;
  height: 16em;
  border-radius: 3.5em;
  /* Whole-logo scaling via font-size: smaller viewport = smaller
     logo. ~210px on desktop, ~140px on mobile (see media query). */
  font-size: clamp(8px, 2vw, 20px);
  margin: 0 auto;
}

.muh-logo-stripe {
  width: 9.5em;
  height: 30em;
  position: absolute;
  background-color: #ffffff;
  transform-origin: bottom right;
  transform: rotate(34deg);
  bottom: 11.5em;
  margin-left: 3.5em;
  border-radius: 6em;
  border: solid .5em #E91E63;
  font-size: 0.4em;
  z-index: 2;
  box-shadow: 1.4em 0.8em 4em rgba(0, 0, 0, 0.2);
}

.muh-logo-stripe.muh-logo-stripe-2 {
  left: 12.1em;
  height: 24.6em;
}

.muh-logo-stripe.muh-logo-stripe-3 {
  left: 24em;
  height: 19.2em;
}

/* Note glyph inside each stripe: a head (_1) + a stem (_2) in
   Muhjee-pink. The head rounds the bottom of the stripe; the stem
   rises from it at the right edge. */
.muh-logo-stripe-inner_1 {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: calc(9em + 1px);
  height: calc(9em + 1px);
  background-color: #E91E63;
  border-radius: 5em;
}

.muh-logo-stripe-inner_2 {
  position: absolute;
  right: -.6px;
  bottom: 3.75em;
  width: 1.5em;
  background-color: #E91E63;
  border-radius: 1em;
}

/* Stem height drops per stripe so the rendered notes scale down
   visibly along with the parent stripe. */
.muh-logo-stripe-1 .muh-logo-stripe-inner_2 { height: 67%; }
.muh-logo-stripe-2 .muh-logo-stripe-inner_2 { height: 58%; }
.muh-logo-stripe-3 .muh-logo-stripe-inner_2 { height: 45%; }

@media (max-width: 480px) {
  .muh-logo-container {
    font-size: 7px;
  }
}