/* =========================================================
   components - botao e alertas
   Usados por mais de um bloco.
   ========================================================= */

.btn {
    background: var(--color-accent);
    color: #1B1200;
    border: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    padding: 16px 34px;
    cursor: pointer;
    margin-left: 35px;
}

.btn:hover {
    background: #FFB63F;
}

.alert {
    padding: 16px 20px;
    margin: 0 0 24px;
    border-left: 4px solid var(--color-primary);
    background: var(--surface-soft);
    font-size: 16px;
}

.alert-error {
    border-left-color: #C0392B;
    background: #FDECEA;
    color: #7A241A;
}

.alert-success {
    border-left-color: #1E7A4B;
    background: #E8F5EE;
    color: #14532D;
}

/* =========================================================
   Redes sociais - icones
   Acrescente ao fim de components.css, ou carregue como
   arquivo proprio. Usado no bloco de enderecos e no rodape.
   ========================================================= */

.social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid;
    border-radius: 50%;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.social svg {
    width: 20px;
    height: 20px;
}

/* ---------- sobre fundo claro ---------- */

.social--claro a {
    border-color: var(--line);
    background: var(--surface);
    color: var(--color-primary);
}

.social--claro a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--surface);
}

/* ---------- sobre fundo escuro ---------- */

.social--escuro a {
    border-color: rgba(247, 254, 255, .28);
    background: transparent;
    color: var(--on-dark-soft);
}

.social--escuro a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #1B1200;
}

/* Alvo de toque confortavel no celular. */
@media (max-width: 900px) {
    .social {
        gap: 12px;
    }

    .social a {
        width: 44px;
        height: 44px;
    }
}