/* Compartilhar (cabeçalho) e redes sociais (rodapé). Aprovado em 22/09/2026. */
.share-button,
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--control-line);
  border-radius: var(--kn-radius-control, 7px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: var(--kn-weight-label, 500);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.share-button svg,
.social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-button:hover,
.social-link:hover {
  background: var(--surface-2);
}
.social-link:hover {
  border-color: var(--accent);
}
.share-button.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}
.social-link[hidden] {
  display: none;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 650px) {
  .share-button {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .share-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .footer-social {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
@media (max-width: 480px) {
  .share-button {
    width: 38px;
    min-height: 38px;
  }
}