/* MMVI brands.css — override every LinkStack brand button
   to the same gray → indigo-on-hover treatment. */


/* Rounded avatars (LinkStack default) */
.rounded-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--image-border-color);
  background-color: transparent !important;
  width: var(--image-width);
  height: var(--image-height);
}


/* --- Base button: flex layout, icon + label centered as a group. --- */
.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-family) !important;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--button-text-color) !important;
  background: var(--button-background-color) !important;
  border: none !important;
  border-radius: var(--mmvi-radius) !important;
  width: 100%;
  max-width: 500px;
  min-height: 46px;
  line-height: 1.2;
  padding: 10px 16px !important;
  margin: 0 auto .5rem !important;
  cursor: pointer;
  box-shadow: none !important;
  text-transform: none !important;
  transition: background-color .18s ease, color .18s ease, filter .18s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--mmvi-accent) !important;
  color: var(--button-text-hover-color) !important;
  filter: none !important;
  /* No scale/translate on hover — pure color change to avoid layout jitter. */
}

/* Icon: static flex item, sized 20×20, monochrome. */
.button .icon {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  vertical-align: middle;
  filter: grayscale(100%) brightness(0);
  transition: filter .18s ease;
}
.button:hover .icon,
.button:focus-visible .icon {
  filter: grayscale(100%) brightness(0) invert(1);
}

/* Two-tone icons (their SVG has explicit black + white fills — MMVI-shipped).
   Skip monochrome filter, invert on hover. */
.button-youtube-music .icon,
.button-amazon-music .icon {
  filter: none !important;
}
.button-youtube-music:hover .icon,
.button-youtube-music:focus-visible .icon,
.button-amazon-music:hover .icon,
.button-amazon-music:focus-visible .icon {
  filter: invert(1) !important;
}

/* --- Force every per-brand override to our palette.
   [class*="button-"] wins over LinkStack's central brands.css
   because of its extra attribute-selector specificity component
   combined with !important. --- */
.button[class*="button-"] {
  background: var(--button-background-color) !important;
  background-image: none !important;
  color: var(--button-text-color) !important;
  border: none !important;
}
.button[class*="button-"]:hover,
.button[class*="button-"]:focus-visible {
  background: var(--mmvi-accent) !important;
  background-image: none !important;
  color: var(--button-text-hover-color) !important;
  filter: none !important;
}

/* --- Mobile: shrink buttons so a short page fits above the fold --- */
@media (max-width: 480px) {
  .button {
    font-size: .93rem !important;
    min-height: 42px;
    padding: 8px 14px !important;
    margin-bottom: .4rem !important;
    border-radius: 8px !important;
  }
  .button .icon {
    width: 18px !important;
    height: 18px !important;
  }
}