/*
	Theme name: Paróquia São José
	Theme URI: https://paroquiasaojosedetremembe.com
	Description: Site da Paróquia São José de Tremembé
	Author: Francisnei Ferrari
	Author URL: https://francisneiferrari.com.br
	Version: 1.0
*/

/* --- Configurações de Cores Gerais --- */
.bg-paroquia-verde {
    background-color: #19331D !important;
}
.bg-paroquia-bege {
    background-color: #e9e0a2 !important;
}

.navbar-principal {
	border-bottom: 1px solid #8C782E;
}

.btn-dizimista {
    background-color: #8C782E !important;
    color: #ffffff !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.btn-dizimista:hover {
    background-color: #726123 !important;
}

/* --- Menu Base --- */
.menu-principal {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
.menu-principal li a {
    display: block;
    padding: 1rem 0.75rem;
    color: #ffffff !important;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 0.3s ease;
}
.menu-principal li a:hover {
    color: #EFE6B4 !important;
}

/* Adiciona a setinha indicadora nos itens que têm filhos (Dropdown) - Compatível com Font Awesome v7 */
.menu-principal .menu-item-has-children > a::after {
    content: "\f107"; /* Código unicode para a setinha (caret-down) */
    font-family: "Font Awesome 7 Free"; /* Atualizado para a versão 7 */
    font-weight: 900; /* Garante que o peso da fonte puxe o ícone solid */
    margin-left: 0.5em;
    font-size: 0.8rem;
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================
   DESKTOP: Funcionalidade de Hover e Submenus Ocultos (Até 3 Níveis)
   ========================================================== */
@media (min-width: 992px) {
    /* Define todos os LIs como relativos para que os submenus se baseiem neles */
    .menu-principal li {
        position: relative;
    }

    /* ------------------------------------------------------
       SEGUNDO NÍVEL (O dropdown padrão abaixo do menu principal)
       ------------------------------------------------------ */
    .menu-principal ul.sub-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%); /* Centraliza o 2º nível embaixo do pai */
        background-color: #19331D;
        min-width: 220px;
        padding: 0.5rem 0;
        margin: 0;
        list-style: none;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
        border-radius: 0 0 4px 4px;
        border-top: 3px solid #8C782E;
        
        /* Estado inicial oculto */
        opacity: 0;
        visibility: hidden;
        display: block;
        transition: all 0.25s ease;
        z-index: 999;
    }

    /* Exibe o SEGUNDO nível ao passar o mouse no item do topo */
    .menu-principal > li:hover > ul.sub-menu {
        opacity: 1;
        visibility: visible;
    }

    /* ------------------------------------------------------
       TERCEIRO NÍVEL (Aparece ao lado do segundo nível)
       ------------------------------------------------------ */
    .menu-principal ul.sub-menu ul.sub-menu {
        top: -3px;       /* Alinha perfeitamente com o topo do item atual (descontando a borda) */
        left: 100%;      /* Força a abertura 100% para a DIREITA */
        transform: none; /* Reseta a centralização do nível anterior */
        border-top: none; 
        border-left: 3px solid #8C782E; /* Linha dourada charmosa agora na lateral esquerda */
        border-radius: 0 4px 4px 4px;
    }

    /* Garante que o terceiro nível continue oculto enquanto o mouse está apenas no segundo */
    .menu-principal ul.sub-menu li:hover > ul.sub-menu {
        opacity: 1;
        visibility: visible;
    }

    /* Estilização interna dos links dos submenus (2º e 3º níveis) */
    .menu-principal ul.sub-menu li a {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
        text-transform: none;
        letter-spacing: 0.02em;
        text-align: left;
    }
    
    .menu-principal ul.sub-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #EFE6B4 !important;
    }

    /* Se um item de segundo nível tiver um terceiro nível dentro, adiciona uma setinha para a DIREITA */
    .menu-principal ul.sub-menu .menu-item-has-children > a::after {
        content: "\f0da"; /* Unicode do Font Awesome v7 para caret-right */
        float: right;     /* Empurra a setinha para a extremidade direita do card */
        margin-top: 2px;
    }
}

/* ==========================================================
   MOBILE: Comportamento Responsivo Sanfona
   ========================================================== */
@media (max-width: 991.98px) {
    .menu-principal {
        padding: 1rem 0;
    }
    .menu-principal li a {
        padding: 0.75rem 1rem;
        text-align: left;
    }
    
    /* No mobile o submenu fica expandido de forma identada/recuada */
    .menu-principal ul.sub-menu {
        background-color: rgba(0, 0, 0, 0.15);
        list-style: none;
        padding-left: 1.5rem;
    }
    .menu-principal ul.sub-menu li a {
        padding: 0.5rem 1rem;
        border: none;
    }
}