/* ==========================================================================
   KRODRIGN — Assinatura de desenvolvimento (componente reutilizável)

   Uso:
   <div class="krodrign-signature krodrign-signature--light">
     <span class="krodrign-signature__label">Desenvolvido por</span>
     <a class="krodrign-signature__link" href="https://krodrign.com.br"
        target="_blank" rel="noopener noreferrer" aria-label="Site da KRODRIGN">
       KRODRIGN<span class="krodrign-signature__arrow" aria-hidden="true">↗</span>
     </a>
   </div>

   Tema (obrigatório escolher um):
   --light   assinatura ESCURA, para uso SOBRE fundos claros
   --dark    assinatura CLARA, para uso SOBRE fundos escuros

   Variante (opcional):
   (padrão)  tamanho de referência
   --compact versão reduzida, para rodapés muito densos

   A assinatura é neutra: nunca herda as cores da marca do cliente.
   ========================================================================== */

.krodrign-signature {
  /* tema light (padrão): assinatura escura sobre fundo claro */
  --ks-label-color: rgba(20, 20, 20, 0.45);
  --ks-link-color: rgba(20, 20, 20, 0.82);
  --ks-hover-color: #111111;
  --ks-label-size: 10px;
  --ks-link-size: 11px;
  --ks-gap: 8px;

  display: inline-flex;
  align-items: center;
  gap: var(--ks-gap);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}

.krodrign-signature--light {
  --ks-label-color: rgba(20, 20, 20, 0.45);
  --ks-link-color: rgba(20, 20, 20, 0.82);
  --ks-hover-color: #111111;
}

.krodrign-signature--dark {
  --ks-label-color: rgba(255, 255, 255, 0.5);
  --ks-link-color: rgba(255, 255, 255, 0.85);
  --ks-hover-color: #ffffff;
}

.krodrign-signature--compact {
  --ks-label-size: 9px;
  --ks-link-size: 10px;
  --ks-gap: 6px;
}

.krodrign-signature__label {
  font-size: var(--ks-label-size);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-label-color);
}

.krodrign-signature__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ks-link-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ks-link-color);
  transition: color 220ms ease, opacity 220ms ease;
}

.krodrign-signature__arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
  .krodrign-signature__link:hover { color: var(--ks-hover-color); }
  .krodrign-signature__link:hover .krodrign-signature__arrow { transform: translate(2px, -2px); }
}

.krodrign-signature__link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .krodrign-signature__link,
  .krodrign-signature__arrow { transition: none; }
}