/**
 * M&W Heading Icons — styling for the mega menu icon shown on H1 headings.
 *
 * Everything is driven by CSS custom properties so the look can be tuned
 * per-theme without touching this file — just override the variables on
 * `.mwhi-heading` (or a more specific selector) in the theme's own CSS.
 */

.mwhi-heading {
  --mwhi-accent: #1f2937;       /* icon color */
  --mwhi-accent-soft: #eef1f5;  /* badge / outline background */
  --mwhi-size: 0.9em;           /* icon glyph size, relative to the H1 */
  --mwhi-box: 1.75em;           /* badge/outline box size, relative to the H1 */
  --mwhi-radius: 0.5em;
  --mwhi-gap: 0.45em;

  display: inline-flex;
  align-items: center;
  gap: var(--mwhi-gap);
  max-width: 100%;
}

.mwhi-heading .mwhi-text {
  display: inline;
}

.mwhi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  font-size: var(--mwhi-size);
  color: var(--mwhi-accent);

  animation: mwhi-pop 0.35s ease-out both;
}

/* --- Badge style: soft rounded square behind the icon --- */
.mwhi-style-badge .mwhi-icon {
  width: var(--mwhi-box);
  height: var(--mwhi-box);
  border-radius: var(--mwhi-radius);
  background: linear-gradient(155deg, var(--mwhi-accent-soft), color-mix(in srgb, var(--mwhi-accent-soft) 60%, white));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* --- Outline style: bordered circle --- */
.mwhi-style-outline .mwhi-icon {
  width: var(--mwhi-box);
  height: var(--mwhi-box);
  border-radius: 50%;
  border: 1.5px solid var(--mwhi-accent);
  background: transparent;
}

/* --- Plain style: icon only, no container --- */
.mwhi-style-plain .mwhi-icon {
  width: auto;
  height: auto;
}

@keyframes mwhi-pop {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mwhi-icon {
    animation: none;
  }
}

/* Keep things sane on small screens where H1 font-size shrinks a lot. */
@media (max-width: 480px) {
  .mwhi-heading {
    --mwhi-gap: 0.35em;
  }
}