/**
 * Design system base SOPAES — cores e utilitários compartilhados (pt-BR).
 */
:root {
    --cor-verde-agua: #2D93AD;
    --cor-verde-agua-claro: #eaf4f6;
    --cor-laranja: #F2994A;
    --cor-laranja-hover: #d9843c;
}

.text-verde {
    color: var(--cor-verde-agua) !important;
}

.bg-verde {
    background-color: var(--cor-verde-agua) !important;
    color: white;
}

.bg-verde-claro {
    background-color: var(--cor-verde-agua-claro) !important;
}

.text-laranja {
    color: var(--cor-laranja) !important;
}

.bg-laranja {
    background-color: var(--cor-laranja) !important;
    color: white;
}

.btn-laranja {
    background-color: var(--cor-laranja);
    color: white;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-laranja:hover {
    background-color: var(--cor-laranja-hover);
    color: white;
    transform: translateY(-2px);
}

.btn-verde {
    background-color: var(--cor-verde-agua);
    color: white;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-verde:hover {
    background-color: #247a91;
    color: white;
    transform: translateY(-2px);
}

/**
 * Logomarca institucional (navbar + rodapé): mesmas dimensões máximas.
 *
 * Na navbar Bootstrap, o `.navbar-brand` é filho flex do `.container` e vem com
 * `white-space: nowrap` + `min-width: auto`, o que mantém a largura no tamanho
 * intrínseco da imagem — a marca fica “gigante”. Forçamos o bloco da marca a
 * poder encolher e a quebrar o nowrap só onde precisamos.
 */
.navbar > .container > .navbar-brand,
.navbar > .container-fluid > .navbar-brand {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    /* sem !important: filhos podem usar white-space: nowrap (razão) */
    white-space: normal;
    max-width: min(260px, 64vw) !important;
}

@media (min-width: 576px) {
    .navbar > .container > .navbar-brand,
    .navbar > .container-fluid > .navbar-brand {
        max-width: min(340px, 68vw) !important;
    }
}

@media (min-width: 768px) {
    .navbar > .container > .navbar-brand,
    .navbar > .container-fluid > .navbar-brand {
        max-width: min(520px, 92vw) !important;
    }
}

@media (min-width: 992px) {
    .navbar > .container > .navbar-brand,
    .navbar > .container-fluid > .navbar-brand {
        max-width: min(600px, 96vw) !important;
    }
}

/*
 * Nome + razão + CNPJ: caixa com altura fixa = logomarca (52px).
 * min-height:0 no filho flex evita o conteúdo ignorar max-height.
 * Razão na barra: uma linha + reticências (texto integral no rodapé); title via JS.
 */
.sopaes-navbar-institutional {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    height: 52px;
    max-height: 52px;
    min-height: 0;
    min-width: 0;
    flex: 1 1 0;
    line-height: 1.1;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    gap: 0.1875rem;
}

.sopaes-navbar-institutional #cms-navbar-inst-nome {
    flex-shrink: 0;
    font-size: 1.0625rem;
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
}

.sopaes-navbar-institutional #cms-navbar-inst-razao {
    flex-shrink: 1;
    min-height: 0;
    font-size: 0.875rem;
    line-height: 1.06;
    font-weight: 700 !important;
    margin: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sopaes-navbar-institutional .sopaes-navbar-inst-cnpj-line {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1.06;
    margin: 0;
}

/* Telemóvel: só nome + CNPJ (2 linhas) — preencher verticalmente os 52px */
@media (max-width: 767.98px) {
    .sopaes-navbar-institutional {
        gap: 0.3125rem;
    }

    .sopaes-navbar-institutional #cms-navbar-inst-nome {
        font-size: 1.125rem;
        line-height: 1.05;
    }

    .sopaes-navbar-institutional .sopaes-navbar-inst-cnpj-line {
        font-size: 0.9375rem;
        line-height: 1.08;
    }
}

.sopaes-logo-institutional {
    display: block !important;
    max-height: 52px !important;
    max-width: 170px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Rodapé: caixa rígida evita a coluna `.row`/flex herdar largura intrínseca da imagem */
.sopaes-footer-logo-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(170px, 100%) !important;
    height: 52px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .sopaes-footer-logo-shell {
        justify-content: flex-start !important;
    }
}

.sopaes-footer-logo-shell .sopaes-logo-institutional {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

footer .row > .col-md-4 {
    min-width: 0 !important;
}

/* Reforço topo / rodapé */
#cms-navbar-logo.sopaes-logo-institutional,
#cms-footer-logo.sopaes-logo-institutional {
    max-height: 52px !important;
    max-width: 170px !important;
}