/*
Theme Name: Supra.
Theme URI: https://suprasoft.net/
Author: PDAGFX (Bruno de Pádua Santos)
Author URI: https://pdagfx.com/
Description: Tema institucional block theme (FSE) da Supra. — ecossistema SupraMais, SupraStock e SupraWS. Desenvolvido por PDAGFX.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supra
Tags: full-site-editing, block-styles, custom-colors, custom-menu
*/

/* ==========================================================================
   Padronização Visual - Botões (CTAs)
   ========================================================================== */

/* Garante a mesma unidade visual e de tamanho em todas as páginas */
.wp-block-button .wp-block-button__link.wp-element-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Alinhamento de ícones dentro do botão */
.wp-block-button .wp-block-button__link.wp-element-button .supra-icon {
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   Alinhamento de Ícones (Wrappers)
   ========================================================================== */

/* Remove as margens do parágrafo interno que causam desalinhamento vertical */
.supra-icon-wrapper p {
    margin: 0 !important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Invólucro dos ícones de Segmentos (Pills)
   ========================================================================== */

/* Simula o invólucro (wrapper) vermelho escuro ao redor dos ícones nas pills */
.supra-pill .supra-icon {
    background-color: #331518;
    border-radius: 8px;
    padding: 4px;
    color: var(--wp--preset--color--vermelho) !important;
}

/* ==========================================================================
   Invólucros Nativos (Evita quebra do Gutenberg)
   ========================================================================== */

/* Aplica o visual de invólucro (wrapper) vermelho diretamente nos ícones
   e força o alinhamento correto das linhas via CSS, mantendo o HTML limpo */
.supra-card--produto h3,
.supra-card--diferencial h3,
.supra-card h3,
.supra-card--setor .supra-card__label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    width: 100%;
}

.supra-card--produto h3 .supra-icon,
.supra-card--diferencial h3 .supra-icon,
.supra-card h3 .supra-icon,
.supra-card--setor .supra-card__label .supra-icon {
    background-color: #331518;
    border-radius: 8px;
    padding: 4px; /* O padding de 4px que o cliente solicitou */
    color: var(--wp--preset--color--vermelho) !important;
    margin-right: 16px; /* Distância entre o ícone e o título */
}


/* Form elements */
.supra-form input,
.supra-form select,
.supra-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}


/* Form Select Options Contrast */
.supra-form select option {
    background-color: #1a1a1a;
    color: #ffffff;
}