/*
 * Overrides e componentes próprios do EuSindica.
 *
 * O visual base (cores, tipografia, botões, cards, header, footer) vem do
 * template original (public/template/css/theme.css, theme-elements.css e
 * do skin css/skins/skin-corporate-8.css). Este arquivo é apenas para
 * pequenos ajustes e para estilos de componentes que não existiam no
 * template original (ex: selo "Mais escolhido" nos planos).
 *
 * Desenvolvimento tradicional: edite este arquivo diretamente e recarregue
 * a página no navegador. Não há build, npm ou Vite envolvidos.
 */

/* Evita que o header fixo cubra o topo das seções ao navegar por âncoras (#recursos, #para-quem, #cta) */
section[id],
div[id] {
    scroll-margin-top: 140px;
}

/* Selo de destaque no card de plano recomendado */
.plan {
    position: relative;
}

.plan-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    white-space: nowrap;
}

/*
 * O tema destaca o plano "Mais escolhido" com "transform: scale(1.15)"
 * (ver .pricing-table .plan.plan-featured em theme-elements.css) — pensado
 * para 3 colunas com o destaque no meio, com espaço sobrando ao redor para
 * crescer. Nossa tabela de planos tem 4 colunas (mesmo produto, períodos
 * diferentes) e o destaque é a última: o "crescimento" empurrava o card
 * pra fora do container, por cima do menu e por cima da coluna vizinha.
 * Aqui trocamos o "crescer" por uma elevação leve + sombra mais forte, que
 * já basta pra destacar sem quebrar o alinhamento das colunas.
 */
.pricing-table .plan.plan-featured {
    transform: none;
    box-shadow: 0 25px 55px rgba(0, 0, 0, .16);
}

@media (min-width: 992px) {
    .pricing-table .plan.plan-featured {
        margin-top: -10px;
        margin-bottom: 25px;
    }
}

/* Breadcrumb sobre fundo colorido (page-header) */
.breadcrumb {
    background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .6);
}

/* Alinhamento vertical simples para os ícones de lista nos planos */
.plan-features ul li {
    display: flex;
    align-items: flex-start;
}

/* Pontinhos decorativos da barra do "mockup" de painel no Hero da Home */
.app-mock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    margin-right: 5px;
}

/* Imagem de placeholder (ver x-placeholder-image) — mesmo estilo do template original */
.placeholder-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e2e2;
    color: #969696;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Grade "colada" de recursos (mosaico branco / #f4f4f4, sem espaço entre os cards) */
.feature-tile {
    transition: background-color .15s ease;
}

.feature-tile:hover {
    background-color: var(--grey-200);
}

/* Cards com link (x-feature-card com prop "href") ganham leve destaque no hover */
a.feature-box-link {
    display: block;
    transition: box-shadow .15s ease, transform .15s ease;
}

a.feature-box-link:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

/*
 * Botões "Acessar Sistema" / "Cadastre-se" na barra superior do header.
 *
 * O tema estiliza qualquer <a> filho direto de <li> dentro de
 * ".header-nav-top .nav" como se fosse um link de menu (cor cinza,
 * padding e letter-spacing próprios, fundo transparente no hover) — regra
 * pensada para links de texto como "Sobre" / "Contato", não para botões.
 * Como essa regra tem mais especificidade que ".btn", ela sobrescrevia o
 * Bootstrap e deixava os dois botões com texto acinzentado, sem hover e
 * com altura/padding inconsistentes. Aqui devolvemos o visual de botão
 * só nesse contexto, sem mexer no restante do menu de texto do tema.
 */
#header .header-nav-top .nav > li > a.btn {
    display: inline-flex;
    align-items: center;
    padding: .25rem 1rem;
    font-size: .8125rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-decoration: none;
}

#header .header-nav-top .nav > li > a.btn-outline-light {
    color: #fff;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .85);
}

#header .header-nav-top .nav > li > a.btn-outline-light:hover,
#header .header-nav-top .nav > li > a.btn-outline-light:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--primary);
}

/*
 * "Cadastre-se" usa ".btn-light" (fundo branco) em vez de ".btn-primary".
 *
 * A barra de cima é "bg-color-primary" — ou seja, ela usa a MESMA cor que
 * ".btn-primary" pinta o botão. Como a cor primária do site é o verde
 * (var(--primary), definida em skin-corporate-8.css), um botão
 * ".btn-primary" ali dentro ficava verde sobre uma barra também verde:
 * sem contraste nenhum, dava pra confundir com o próprio fundo. Um botão
 * claro/branco garante que o "Cadastre-se" sempre se destaque da barra,
 * qualquer que seja a cor primária escolhida.
 */
#header .header-nav-top .nav > li > a.btn-light {
    color: var(--primary);
    border-color: transparent;
}

#header .header-nav-top .nav > li > a.btn-light:hover,
#header .header-nav-top .nav > li > a.btn-light:focus {
    background-color: var(--light-200);
    color: var(--primary-100);
}

/*
 * Utilitários usados no herói da Home e nos cabeçalhos internos (herói escuro
 * "section-angled" inspirado no layout do próprio template Porto). São
 * pequenos ajustes que no template original vinham do CSS de demonstração
 * "demo-landing.css" (não usado no restante do site) — trazemos só o
 * necessário para cá em vez de carregar o arquivo inteiro.
 */
.custom-letter-spacing-1 {
    letter-spacing: 5px;
}

.custom-font-size-1 {
    font-size: 1.1rem;
    line-height: 1.8rem;
}

.custom-counter-1 h3 {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: bold;
}

.custom-counter-1 p {
    margin: 5px 0 0;
    font-weight: 600;
    line-height: 1.2rem;
    color: var(--light);
    opacity: .7;
    letter-spacing: -.02em;
    text-transform: uppercase;
    font-size: .8125rem;
}

/* Ícones circulares de destaque (ex: seção "Acesse de qualquer lugar" da Home) */
.feature-box-style-3 .feature-box-icon.rounded-circle {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-box-style-3 .feature-box-icon.rounded-circle i {
    font-size: 1.75rem;
    margin: 0;
}

/*
 * Navegação rápida por módulo no topo de /recursos ("Financeiro e
 * Cobranças", "Moradores e Unidades" etc.). Antes eram botões pequenos em
 * formato de pílula (rounded-pill); trocamos por cards quadrados (sem
 * borda arredondada), com ícone em destaque e um hover mais evidente, para
 * ficar claro que são links clicáveis para cada módulo abaixo.
 */
.recursos-quicknav-item {
    border: 2px solid var(--grey-300);
    border-radius: 0;
    background-color: var(--light);
    color: var(--dark);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.recursos-quicknav-item i {
    color: var(--primary);
    transition: color .2s ease;
}

.recursos-quicknav-item:hover,
.recursos-quicknav-item:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--light);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
    text-decoration: none;
}

.recursos-quicknav-item:hover i,
.recursos-quicknav-item:focus i {
    color: var(--light);
}

/*
 * "Acessar Sistema" / "Cadastre-se" no menu mobile.
 *
 * A versão original desses links vive em ".custom-header-1-extra-links",
 * escondida abaixo do breakpoint lg (classe "d-none d-lg-flex" no Bootstrap)
 * porque não cabe ao lado do menu completo do site — no celular eles
 * simplesmente sumiam. Uma primeira tentativa colocou uma versão compacta
 * ao lado do botão de menu (hambúrguer), mas isso disputava espaço na
 * mesma linha e chegava a empurrar o próprio botão de menu para fora da
 * tela. Agora os dois links entram como os últimos itens do menu mobile
 * (dentro do "hambúrguer"), sem ocupar espaço nenhum na barra do topo.
 */
.header-mobile-cta-item {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.header-mobile-cta-signup {
    display: block;
    text-align: center;
    font-weight: 600;
    border-radius: 0;
}

/*
 * Logo própria da EuSindica (ver x-brand), enviada pelo usuário em
 * docs/logo_eusindica.svg e copiada para public/img/logo-eusindica.svg.
 * O arquivo original tem viewBox 620x160 (proporção ~3.9:1); sem uma
 * altura fixa o SVG tentaria renderizar no tamanho intrínseco (620x160px),
 * grande demais para o header e o footer.
 */
.brand-logo-image {
    height: 56px;
    width: auto;
}