/* Estado Original: Fixo e Transparente */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    z-index: 9999;
}

/* Classe dinâmica ativada via JS (Scroll ou Submenu Aberto) */
.site-header.header-bg-branco {
    background-color: #F4F4F4;
    /* Sombra opcional para destacar o header quando estiver branco */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}



/* Anula o delay da transição quando a mudança for ativada pelo submenu */
.site-header.submenu-ativo {
    transition: background-color 0s, box-shadow 0s;
}

/* =========================================
   1. ESTADO INICIAL (Transparente no Topo)
   ========================================= */

/* TEMA ESCURO: Fundo da página é escuro -> Texto/Links precisam ser CLAROS */
.header-tema-escuro .menu-link {
    color: #ffffff;
    transition: color 0.3s ease-in-out;
}

/* TEMA CLARO: Fundo da página é claro -> Texto/Links precisam ser ESCUROS */
.header-tema-claro .menu-link {
    color: #1b182b; /* Um tom grafite escuro garante alto contraste e um visual clean */
    transition: color 0.3s ease-in-out;
}

/* =========================================
   2. ESTADO ATIVO (Com fundo branco ativado pelo JS)
   ========================================= */

/* Independente de como a página começou (clara ou escura), 
   se o header ganhou fundo branco (scroll ou submenu), o texto DEVE ser escuro.
*/
.site-header.header-bg-branco .menu-link {
    color: #1b182b ; 
}