@import url('index.css');

/*
 * ========================================
 * 1. COVER PRINCIPAL
 * ========================================
 */
#about-cover-section {
    /* Ocupa a largura total (container já faz isso) */
    position: relative; 
    overflow: hidden; 
    
    /* Define 50% da altura da viewport para o COVER */
    height: 50vh;
}

#about-cover-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container do Título */
#cover-title-container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    /* Adiciona padding lateral igual ao do Bootstrap (container) */
    padding: 1.5rem; 
    max-width: 70%; /* Limita a largura do título */
    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.5);
}

/*
 * ========================================
 * 2. LOGO DINÂMICA COM PULSO
 * ========================================
 */

#solution {
    margin: 15rem 0 15rem 0;
}

@keyframes bright-pulse-white {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)); 
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); 
    }
}

@keyframes bright-pulse-green {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(1, 192, 151, 0.9)); 
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(1, 192, 151, 0.4)); 
    }
}

.logo-dynamic-bright {
    content: url('../images/logos/sigabem-light-mode-without-text.png');
    will-change: filter;
    animation-name: bright-pulse-green;
    animation-duration: 2s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
}

[data-bs-theme="dark"] .logo-dynamic-bright {
    content: url('../images/logos/sigabem-dark-mode-without-text.png');
    will-change: filter;
    animation-name: bright-pulse-white; 
    animation-duration: 2s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
}

/*
 * ========================================
 * 3. FLUXOGRAMAS
 * ========================================
 */
.fluxograma-dynamic {
    content: url('../images/about/fluxograma-light-mode.png');
}

/* 2. ESTILO DARK MODE */
[data-bs-theme="dark"] .fluxograma-dynamic {
    content: url('../images/about/fluxograma-dark-mode.png');
}

#fluxograma-servidor{
    margin: 5rem 0 5rem 0;
}

/*
 * ========================================
 * 4. SEÇÕES DOS MÓDULOS
 * ========================================
 */
.section-container{
    margin-bottom: 12rem;
}

#carouselExampleCaptions .carousel-control-prev,
#carouselExampleCaptions .carousel-control-next {
    display: none; /* Garante que os botões originais, se estiverem lá, sumam */
}

/* 2. Estiliza os novos botões laterais */
.btn-carousel-side {
    /* Faz com que se pareça com um botão simples (sem fundo) */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1; /* Alinha o ícone verticalmente */
}

/* 3. Estiliza o ícone (que está no <i>) */
.btn-carousel-side i {
    font-size: 2.5rem; /* Aumente o tamanho para ser visível fora */
    /* Adicione um hover para melhor UX */
    transition: color 0.2s ease;
}

.btn-carousel-side i {
    /* Use um cinza escuro que seja legível em fundos claros e escuros */
    color: var(--bs-body-color)
}

/* Garanta que o hover não mude para branco se o Bootstrap tentar */
.btn-carousel-side:hover i {
    color: var(--mint);
}

.list-unstyled li i {
    position: relative;
    top: -7px; /* Valor típico para compensar o line-height do texto */
    /* Você pode tentar -2px ou -4px. */
}