/* Hafzah logo */
.mh-logo {
  --mh-dur: 340ms;
  --mh-ease: cubic-bezier(.2, .75, .2, 1);

  /* active colour set: light by default */
  --mh-first-c: var(--mh-first-l);
  --mh-lastb-c: var(--mh-lastb-l);
  --mh-lasta-c: var(--mh-lasta-l);
  --mh-dot-c: var(--mh-dot-l);
  --mh-suffix-c: var(--mh-suffix-l);

  display: inline-block;
  font-family: var(--wp--preset--font-family--manrope, "Manrope"), system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  white-space: nowrap;
  color: inherit;
  text-decoration: none !important;
}

/* dark colour set */
.mh-logo[data-mode="dark"],
.mh-dark .mh-logo,
.mh-logo.mh-force-dark {
  --mh-first-c: var(--mh-first-dk);
  --mh-lastb-c: var(--mh-lastb-dk);
  --mh-lasta-c: var(--mh-lasta-dk);
  --mh-dot-c: var(--mh-dot-dk);
  --mh-suffix-c: var(--mh-suffix-dk);
}
@media (prefers-color-scheme: dark) {
  .mh-logo[data-mode="auto"] {
    --mh-first-c: var(--mh-first-dk);
    --mh-lastb-c: var(--mh-lastb-dk);
    --mh-lasta-c: var(--mh-lasta-dk);
    --mh-dot-c: var(--mh-dot-dk);
    --mh-suffix-c: var(--mh-suffix-dk);
  }
}
/* "Match the site": follow the header's Light / Dark / Auto switch */
:root[data-theme="dark"] .mh-logo[data-mode="site"] {
  --mh-first-c: var(--mh-first-dk);
  --mh-lastb-c: var(--mh-lastb-dk);
  --mh-lasta-c: var(--mh-lasta-dk);
  --mh-dot-c: var(--mh-dot-dk);
  --mh-suffix-c: var(--mh-suffix-dk);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .mh-logo[data-mode="site"] {
    --mh-first-c: var(--mh-first-dk);
    --mh-lastb-c: var(--mh-lastb-dk);
    --mh-lasta-c: var(--mh-lasta-dk);
    --mh-dot-c: var(--mh-dot-dk);
    --mh-suffix-c: var(--mh-suffix-dk);
  }
}
.mh-light .mh-logo,
.mh-logo.mh-force-light {
  --mh-first-c: var(--mh-first-l);
  --mh-lastb-c: var(--mh-lastb-l);
  --mh-lasta-c: var(--mh-lasta-l);
  --mh-dot-c: var(--mh-dot-l);
  --mh-suffix-c: var(--mh-suffix-l);
}

.mh-word { display: inline-block; }

/* one token = one letter slot; its width animates between states */
.mh-t {
  display: inline-block;
  position: relative;
  white-space: pre;
  width: var(--wb);
  clip-path: inset(-.35em -.02em -.35em -.02em);
  transition-property: width, opacity, transform;
  transition-duration: var(--mh-dur);
  transition-timing-function: var(--mh-ease);
  transition-delay: var(--dout);
}
.mh-logo.is-alt .mh-t { width: var(--wa); transition-delay: var(--din); }

.mh-g {
  display: inline-block;
  color: var(--cb);
  font-weight: var(--fb);
  transition-property: color, font-weight, opacity, transform;
  transition-duration: var(--mh-dur);
  transition-timing-function: var(--mh-ease);
  transition-delay: var(--dout);
}
.mh-logo.is-alt .mh-g { color: var(--ca); font-weight: var(--fa); transition-delay: var(--din); }

/* letters that leave */
.mh-logo.is-alt .mh-del { opacity: 0; transform: translateY(-.2em); }

/* letters that arrive */
.mh-ins { opacity: 0; transform: translateY(.25em); }
.mh-logo.is-alt .mh-ins { opacity: 1; transform: none; }

/* shared letters that change case roll over */
.mh-roll .mh-ga { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(.35em); }
.mh-logo.is-alt .mh-roll .mh-gb { opacity: 0; transform: translateY(-.35em); }
.mh-logo.is-alt .mh-roll .mh-ga { opacity: 1; transform: none; }

/* star dot */
.mh-star svg {
  width: .42em;
  height: .42em;
  margin: 0 .04em 0 .06em;
  fill: currentColor;
  vertical-align: -.02em;
  transition: transform calc(var(--mh-dur) * 2) var(--mh-ease) var(--dout);
}
.mh-logo.is-alt .mh-star svg { transform: rotate(90deg); transition-delay: var(--din); }

.mh-logo:focus-visible {
  outline: 2px solid var(--mh-dot-c);
  outline-offset: 4px;
  border-radius: 2px;
}

/* measuring pass */
.mh-logo.mh-measuring .mh-t { width: auto !important; }
.mh-logo.mh-measuring,
.mh-logo.mh-measuring * { transition: none !important; }

.mh-fallback { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .mh-logo, .mh-logo * { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}