/* path: public_html/assets/css/compartilhar.css
   status: NEW (criar)
   entregue em: 23/07/2026 23:55 (Fortaleza, UTC-3)
   alteracao: [23/07] barra de compartilhamento da materia.
   ============================================================
   Alvos de toque de 40px, que e o minimo confortavel no celular sem virar uma
   fileira de botoes gigante. A cor da marca de cada rede so aparece no estado
   pressionado e no foco: em repouso os icones ficam neutros, para nao competir
   com a manchete logo abaixo.
   ============================================================ */

.compartilhar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.compartilhar-rotulo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave, #6b655f);
  font-weight: 600;
}

.compartilhar-lista {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2dccc;
  background: #fff;
  color: #4a4540;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.cp-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}

/* Cor da marca no toque, no passar do mouse e no foco por teclado */
.cp-whatsapp:hover,  .cp-whatsapp:focus-visible,  .cp-whatsapp:active  { background: #25d366; border-color: #25d366; color: #fff; }
.cp-telegram:hover,  .cp-telegram:focus-visible,  .cp-telegram:active  { background: #229ed9; border-color: #229ed9; color: #fff; }
.cp-instagram:hover, .cp-instagram:focus-visible, .cp-instagram:active { background: #d6249f; border-color: #d6249f; color: #fff; }
.cp-facebook:hover,  .cp-facebook:focus-visible,  .cp-facebook:active  { background: #1877f2; border-color: #1877f2; color: #fff; }
.cp-email:hover,     .cp-email:focus-visible,     .cp-email:active     { background: #0e0d0b; border-color: #0e0d0b; color: #fff; }
.cp-copiar:hover,    .cp-copiar:focus-visible,    .cp-copiar:active    { background: #0e0d0b; border-color: #0e0d0b; color: #fff; }

.cp-btn:focus-visible {
  outline: 2px solid var(--acento, #c8362a);
  outline-offset: 2px;
}

/* Recado curto depois de copiar o link ou de abrir o Instagram */
.compartilhar-aviso {
  font-size: 12px;
  color: var(--tinta-suave, #6b655f);
  background: #f1ede3;
  border: 1px solid #e2dccc;
  border-radius: 999px;
  padding: 4px 12px;
}

/* ============================================================
   VERSAO COMPACTA (linha dos metadados da materia)
   Fica na mesma linha da categoria e da data, encostada na direita. Em tela
   estreita ela desce sozinha para a linha de baixo, ainda pela direita, em vez
   de espremer a data.
   ============================================================ */
.meta .compartilhar-compacta {
  margin-left: auto;
}

.compartilhar-compacta .cp-btn {
  width: 34px;
  height: 34px;
}
.compartilhar-compacta .cp-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .compartilhar-compacta .cp-btn {
    width: 40px;
    height: 40px;
  }
  .compartilhar-compacta .cp-btn svg {
    width: 18px;
    height: 18px;
  }
  .compartilhar-compacta .compartilhar-lista {
    gap: 8px;
  }
}

/* Muito estreito: a barra ganha a linha inteira, centralizada */
@media (max-width: 420px) {
  .meta .compartilhar-compacta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    padding-top: 4px;
  }
}

/* ============================================================
   BARRA DO FIM DA MATERIA
   Depois de ler e quando a vontade de compartilhar aparece, entao ela se
   repete ali, dessa vez com rotulo e um pouco mais de respiro.
   ============================================================ */
.compartilhar-fim {
  margin: 32px auto 8px;
  padding: 16px 0;
  border-top: 1px solid #e8e2d2;
  border-bottom: 1px solid #e8e2d2;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .cp-btn { transition: none; }
}