/*
 Theme Name:   Digidox Child
 Template:     hello-elementor
*/

/* =========================================
   Breadcrumbs Digidox - Versão Forçada
   ========================================= */

/* 1. O Container define a cor do SEPARADOR (>) */
/* Usamos ID e !important para garantir que fique AZUL */
p#breadcrumbs, 
.yoast-breadcrumb {
    color: #29C2E1 !important;  /* Azul Ciano para o > */
    font-size: 15px;
    font-family: inherit;
}

/* 2. O Link "Página Inicial" */
/* Forçamos para cobrir o rosa do tema e ficar CINZA ESCURO */
p#breadcrumbs a,
.yoast-breadcrumb a {
    color: #45505b !important;  /* Cinza Escuro */
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Efeito ao passar o mouse no link */
p#breadcrumbs a:hover,
.yoast-breadcrumb a:hover {
    color: #29C2E1 !important;  /* Fica azul quando passa o mouse */
    opacity: 1 !important;
}

/* 3. A Página Atual "Quem Somos" */
/* Forçamos para ficar CINZA CLARO */
p#breadcrumbs .breadcrumb_last, 
p#breadcrumbs strong {
    color: #b0b0b0 !important;  /* Cinza Claro */
    font-weight: 400 !important;
}

/* 4. Ajuste de espaçamento do ícone */
/* Como mudamos a cor do container, o ">" já ficou azul. 
   Aqui só damos um respiro nele */
p#breadcrumbs span {
    /* O Yoast às vezes aninha spans, isso garante alinhamento */
}

/* Responsividade para Mobile (Opcional mas recomendado) */
@media (max-width: 768px) {
    p#breadcrumbs, 
    .yoast-breadcrumb {
        font-size: 12px;       /* Texto menor no celular */
        white-space: nowrap;   /* Evita quebra de linha estranha */
        overflow: hidden;      
        text-overflow: ellipsis; /* Adiciona "..." se for muito longo */
    }
}



/* =================================================
   DIGIDOX - Correção Definitiva Abas Verticais
   ================================================= */

/* 1. A COLUNA DO MENU (A Caixa de 200px) */
/* Aqui definimos a largura e o buraco (gap) para o conteúdo */
.digidox-abas-verticais .e-n-tabs-heading {
    width: 200px !important;
    min-width: 200px !important;
    margin-right: 40px !important; /* O Gap entre menu e conteúdo */
    background: transparent !important;
    border: none !important;
    padding: 0 !important; /* Remove padding da coluna */
}

/* 2. OS BOTÕES (Cada item clicável) */
/* É aqui que o fundo branco estava escondido! */
.digidox-abas-verticais .e-n-tab-title {
    background-color: transparent !important; /* Remove o fundo branco/cinza */
    border: none !important;
    box-shadow: none !important;
    
    /* Espaçamento Interno do Botão */
    /* Topo 12 | Dir 0 | Baixo 12 | Esq 20 (Espaço para a bolinha) */
    padding: 12px 0 12px 20px !important; 
    
    /* Alinhamento */
    justify-content: flex-start !important; /* Alinha texto à esquerda */
    text-align: left !important;
    position: relative !important; /* Necessário para a bolinha */
    overflow: visible !important; /* Deixa a bolinha aparecer */
    transition: all 0.3s ease !important;
}

/* 3. O TEXTO (Estilo da Fonte) */
.digidox-abas-verticais .e-n-tab-title-text {
    color: #394356 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3em !important;
    white-space: normal !important; /* Permite quebrar linha se o texto for longo */
}

/* 4. ESTADO ATIVO (Quando selecionado) */
/* Usamos [aria-selected="true"] que é o que o seu HTML mostrou */
.digidox-abas-verticais .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
    font-weight: 700 !important;
}

/* =================================================
   5. CONFIGURAÇÃO DAS BOLINHAS (Indicadores)
   ================================================= */

/* BOLINHA PADRÃO (Inativa) - Aparece em todos os itens */
.digidox-abas-verticais .e-n-tab-title::before {
    content: '';
    position: absolute;
    
    /* Posicionamento */
    left: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Tamanho e Forma */
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: block !important;
    z-index: 10 !important;
    
    /* COR INATIVA (A "cor normal" solicitada) */
    background-color: #EBFAFF !important; 
    transition: background-color 0.3s ease !important; /* Transição suave de cor */
}

/* BOLINHA ATIVA (Quando selecionado) */
/* Apenas mudamos a cor de fundo para o azul mais forte */
.digidox-abas-verticais .e-n-tab-title[aria-selected="true"]::before {
    background-color: #8DE2FC !important; 
}


/* Muda o Texto para Negrito e Cor Escura */
.digidox-abas-verticais .e-n-tab-title:hover .e-n-tab-title-text {
    font-weight: 700 !important;
    color: #45505b !important; /* Garante a mesma cor do ativo */
    transition: all 0.2s ease;
}

/* Muda a Bolinha para a cor #8DE2FC */
.digidox-abas-verticais .e-n-tab-title:hover::before {
    background-color: #8DE2FC !important;
}

/* 6. RESPONSIVIDADE (Celular) */
/* No celular, removemos a largura fixa para não quebrar */
@media (max-width: 768px) {
    .digidox-abas-verticais .e-n-tabs-heading {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important;
    }
}