/*
 * Botões "inclinados" da BGS: o texto fica num bloco com borda (::before)
 * e há uma "sombra" deslocada de outra cor (::after). No hover as cores trocam;
 * no clique o bloco desce até a sombra.
 */

/* Base comum */
.btn-orange-black,
.btn-white-orange {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
    padding: 0.75rem 2rem;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transform: skewX(-5deg);
    cursor: pointer;
}

.btn-orange-black::before,
.btn-white-orange::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--bgs-preto);
    z-index: 0;
}

.btn-orange-black::after,
.btn-white-orange::after {
    content: "";
    position: absolute;
    inset: 8px -8px -8px 8px;
    z-index: -1;
}

.btn-orange-black span,
.btn-white-orange span {
    position: relative;
    z-index: 1;
    transform: skewX(5deg);
}

.btn-orange-black:active::before,
.btn-white-orange:active::before {
    inset: 8px -8px -8px 8px;
}

.btn-orange-black:active span,
.btn-white-orange:active span {
    transform: skewX(5deg) translate(8px, 8px);
}

.btn-orange-black:disabled {
    cursor: wait;
    opacity: 0.8;
}

/* Laranja com sombra preta */
.btn-orange-black::before { background-color: var(--bgs-laranja); border-color: var(--bgs-grafite); }
.btn-orange-black::after { background-color: var(--bgs-grafite); }
.btn-orange-black span { color: var(--bgs-branco); }
.btn-orange-black:hover::before,
.btn-orange-black:active::before { background-color: var(--bgs-preto); }
.btn-orange-black:hover::after { background-color: var(--bgs-laranja); }

/* Branco com sombra laranja */
.btn-white-orange::before { background-color: var(--bgs-branco); }
.btn-white-orange::after { background-color: var(--bgs-laranja); }
.btn-white-orange span { color: var(--bgs-preto); }
.btn-white-orange:hover::before,
.btn-white-orange:active::before { background-color: var(--bgs-laranja); }
.btn-white-orange:hover::after { background-color: var(--bgs-branco); }
.btn-white-orange:hover span,
.btn-white-orange:active span { color: var(--bgs-branco); }

/*
 * Botões grandes de chamada (home e páginas): bloco colorido com borda preta e
 * sombra preta deslocada. O texto vai num <span> (no site antigo era um <h5>).
 */
.bgs-button-orange-black,
.bgs-button-blue-black {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
    padding: 1rem 2rem;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    text-decoration: none;
    transform: skewX(-5deg);
    cursor: pointer;
}

.bgs-button-orange-black::before,
.bgs-button-blue-black::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--bgs-preto);
    z-index: -1;
}

.bgs-button-orange-black::after,
.bgs-button-blue-black::after {
    content: "";
    position: absolute;
    inset: 10px -5px -5px 10px;
    background-color: var(--bgs-preto);
    z-index: -2;
}

.bgs-button-orange-black span,
.bgs-button-blue-black span {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--bgs-branco);
    font-family: var(--bgs-fonte-titulo);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    transform: skewX(5deg);
}

.bgs-button-orange-black::before { background-color: var(--bgs-laranja); }
.bgs-button-blue-black::before { background-color: var(--bgs-azul); }

.bgs-button-orange-black:hover::before,
.bgs-button-blue-black:hover::before,
.bgs-button-orange-black:active::before,
.bgs-button-blue-black:active::before {
    background-color: var(--bgs-preto);
}

.bgs-button-orange-black:hover::after { background-color: var(--bgs-laranja); }
.bgs-button-blue-black:hover::after { background-color: var(--bgs-azul); }

.bgs-button-orange-black:active::before,
.bgs-button-blue-black:active::before {
    inset: 10px -5px -5px 10px;
}

.bgs-button-orange-black:active span,
.bgs-button-blue-black:active span {
    transform: skewX(5deg) translate(10px, 10px);
}

/* Botão quadrado de ícone (redes sociais do rodapé) */
.bgs-button {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    min-height: 45px;
    font-size: 1.75rem;
    text-decoration: none;
    transform: skewX(-5deg);
}

.bgs-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bgs-branco);
    z-index: 0;
}

.bgs-button::after {
    content: "";
    position: absolute;
    inset: 5px -5px -5px 5px;
    background-color: var(--bgs-laranja);
    z-index: -1;
}

.bgs-button i {
    position: relative;
    z-index: 1;
    color: var(--bgs-preto);
    transform: skewX(5deg);
}

.bgs-button:hover::before { background-color: var(--bgs-laranja); }
.bgs-button:hover::after { background-color: var(--bgs-branco); }
.bgs-button:hover i { color: var(--bgs-branco); }
.bgs-button:active::before { inset: 5px -5px -5px 5px; background-color: var(--bgs-laranja); }
.bgs-button:active i { color: var(--bgs-branco); transform: skewX(5deg) translate(5px, 5px); }

.bgs-button--sm {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .bgs-button {
        min-width: 40px;
        min-height: 40px;
        font-size: 1.3rem;
    }

    .bgs-button--sm {
        font-size: 1.1rem;
    }
}