/**
 * A5 Builder — Social Links (estrutural mínimo)
 *
 * Só estrutura: flex, alinhamento, gap, área clicável, tamanho do ícone,
 * foco e responsividade. Cor por currentColor (herda do contexto).
 * Header e Footer sobrescrevem as custom properties pelos seus Standards.
 * Não acopla aos nomes de token do Elementor. Sem estilos inline.
 *
 * @since 2.4.0
 */

/*
 * A cor NÃO é declarada em .a5-social-links de propósito: uma custom property
 * no próprio elemento venceria o valor herdado do wrapper (controles do widget
 * / custom CSS da instância), sombreando o override. Por isso o consumo usa
 * fallback: color: var(--a5-social-color, currentColor).
 */
.a5-social-links {
    --a5-social-icon-size: 1.25rem;
    --a5-social-hit-area: 2.5rem;
    --a5-social-gap: 0.75rem;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--a5-social-gap);
}

.a5-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--a5-social-hit-area);
    height: var(--a5-social-hit-area);
    color: var(--a5-social-color, currentColor);
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.a5-social-link:hover,
.a5-social-link:focus-visible {
    /* hover vazio mantém a cor normal (não volta ao currentColor do container). */
    color: var(--a5-social-hover-color, var(--a5-social-color, currentColor));
}

.a5-social-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

.a5-social-icon {
    width: var(--a5-social-icon-size);
    height: var(--a5-social-icon-size);
    display: block;
    fill: currentColor;
}

/* Diferenças estruturais entre Header e Footer (defaults sobrescrevíveis). */
.a5-social-links--header {
    --a5-social-icon-size: 1.25rem;
    --a5-social-gap: 0.6rem;
}

.a5-social-links--footer {
    --a5-social-icon-size: 1.4rem;
    --a5-social-gap: 0.9rem;
}

/* Responsividade básica: área de toque um pouco maior no mobile. */
@media (max-width: 767px) {
    .a5-social-links {
        --a5-social-hit-area: 2.75rem;
    }
}
