/* ====================================================
   ESTILO GLOBAL CBSA - TEMPLATE OURO
   ==================================================== */

:root {
    /* Paleta Oficial CBSA */
    --cor-azul-cbsa: #002776;
    --cor-azul-escuro: #001a4f;
    --cor-verde-cbsa: #009c3b;
    --cor-amarelo-cbsa: #ffdf00;
    --cor-vermelho-alerta: #DB2E20;

    /* Tons de Base */
    --cor-texto-escuro: #333333;
    --cor-texto-cinza: #565657;
    --cor-fundo-claro: #f4f4f5;
    --cor-fundo-branco: #ffffff;

    /* Fontes */
    --fonte-titulos: 'Montserrat', sans-serif;
    --fonte-textos: 'Open Sans', sans-serif;
}

/* ====================================================
   1. RESET E SCROLLBAR GLOBAL
   ==================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--fonte-textos);
    color: var(--cor-texto-cinza);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
}

/* ====================================================
   2. HEADER E NAVEGAÇÃO (DESKTOP E MOBILE)
   ==================================================== */
.site-header-css {
    position: relative;
    width: 100%;
    height: 165px;
    background-color: var(--cor-azul-cbsa);
    z-index: 1001;
    transition: height 0.3s ease;
}

.faixa-branca {
    position: absolute; top: 0; left: 0; width: 100%; height: 52px; background-color: var(--cor-fundo-branco); z-index: 1;
}

.faixa-verde {
    position: absolute; top: 52px; left: 0; width: 100%; height: 7px; background-color: var(--cor-verde-cbsa); z-index: 1;
}

.caixa-logo {
    position: absolute; top: 0; left: 0; width: 260px; height: 165px;
    background-color: var(--cor-fundo-branco);
    -webkit-clip-path: polygon(0 0, 75% 0, 100% 45%, 70% 100%, 0 100%);
    clip-path: polygon(0 0, 75% 0, 100% 45%, 70% 100%, 0 100%);
    z-index: 3; display: flex; align-items: center; padding-left: 20px;
}

.caixa-logo img { height: 110px; width: auto; }

.linha-icones {
    height: 52px; display: flex; justify-content: flex-end; align-items: center; padding-right: 5%; gap: 20px; position: relative; z-index: 5;
}

.linha-icones a { color: var(--cor-texto-cinza); font-size: 1.4rem; transition: all 0.3s ease; }
.linha-icones a:hover { color: var(--cor-azul-cbsa); transform: translateY(-2px); }

.linha-menu {
    height: 106px; margin-top: 7px; display: flex; justify-content: center; align-items: center; padding-left: 10%; position: relative; z-index: 5;
}

ul.menu-first { display: flex; list-style: none; gap: 1.8rem; margin: 0; padding: 0; align-items: center; }
ul.menu-first > li > a {
    color: var(--cor-fundo-branco) !important;
    text-decoration: none !important;
    font-weight: 500; font-size: 0.9rem; text-transform: uppercase; transition: color 0.3s ease;
}
ul.menu-first > li > a:hover { color: var(--cor-amarelo-cbsa) !important; }

/* Submenu Desktop */
@media (min-width: 993px) {
    .navboard, .container-cover, #icon-menu { display: none !important; }
    .menu-item-has-children-first { position: relative; }
    ul.sub-menu-first {
        display: none !important; position: absolute !important; top: 100% !important; left: 0 !important;
        background: var(--cor-fundo-branco) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        padding: 10px 0 !important; min-width: 250px !important;
        border-radius: 0 0 8px 8px !important; border-top: 4px solid var(--cor-verde-cbsa) !important;
        list-style: none !important; z-index: 9999 !important; flex-direction: column !important;
    }
    .menu-item-has-children-first:hover > ul.sub-menu-first { display: flex !important; }
    ul.sub-menu-first li a {
        color: var(--cor-azul-cbsa) !important; padding: 12px 20px !important;
        font-family: var(--fonte-titulos) !important; font-size: 14px !important; font-weight: 600 !important;
        text-decoration: none !important; transition: all 0.2s !important; display: block !important;
    }
    ul.sub-menu-first li a:hover {
        background: #f0f4ff !important; color: var(--cor-verde-cbsa) !important; padding-left: 25px !important;
    }
}

/* Menu Mobile */
@media (max-width: 992px) {
    .site-header-css { height: 80px !important; }
    .faixa-branca, .faixa-verde, .linha-icones, .linha-menu { display: none !important; }
    .caixa-logo {
        height: 80px; width: 140px; padding-left: 10px;
        clip-path: polygon(0 0, 80% 0, 100% 40%, 75% 100%, 0 100%);
    }
    .caixa-logo img { height: 60px; }
    
    .container-cover {
        display: flex !important; position: absolute !important; right: 0 !important; top: 0 !important;
        height: 80px !important; align-items: center !important; z-index: 10005 !important;
    }
    #icon-menu {
        width: 35px !important; height: 35px !important; cursor: pointer !important;
        filter: brightness(0) invert(1) !important; margin-right: 15px;
    }
    .navboard {
        position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh;
        background-color: var(--cor-azul-cbsa); display: flex !important; flex-direction: column;
        padding-top: 80px; z-index: 10004; transition: right 0.4s ease;
        overflow-y: auto; overflow-x: hidden;
    }
    .navboard.grid-display { right: 0 !important; }
    .navboard a {
        color: var(--cor-fundo-branco) !important; padding: 15px 25px !important;
        font-size: 1.1rem !important; border-bottom: 1px solid rgba(255,255,255,0.1);
        text-decoration: none; display: block;
    }
    .navboard a:hover { background-color: rgba(255,255,255,0.1) !important; }
}

/* ====================================================
   3. FOOTER GLOBAL
   ==================================================== */
footer.bg-navy {
    background-color: var(--cor-azul-cbsa) !important;
    border-top: 7px solid var(--cor-verde-cbsa) !important;
}
footer.bg-navy h5.text-white {
    color: var(--cor-amarelo-cbsa) !important; font-weight: 700 !important;
}
footer.bg-navy .nav-link {
    color: rgba(255, 255, 255, 0.85) !important; transition: all 0.3s ease !important;
}
footer.bg-navy .nav-link:hover {
    color: var(--cor-amarelo-cbsa) !important; transform: translateX(5px) !important;
}
#btn-media-footer {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 45px !important; height: 45px !important; border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.15) !important; color: var(--cor-fundo-branco) !important;
    transition: all 0.3s ease !important; border: none !important;
}
#btn-media-footer:hover {
    background-color: var(--cor-amarelo-cbsa) !important; color: var(--cor-azul-cbsa) !important; transform: translateY(-4px) !important;
}

/* ====================================================
   4. COMPONENTES: MODAL, NOTÍCIAS E BOTÕES
   ==================================================== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 9998; backdrop-filter: blur(6px);
}
.modal-box {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 9999; width: 95%; max-width: 580px; background: var(--cor-fundo-branco); 
    padding: 30px 20px 25px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
.btn-acao {
    display: block; width: 100%; padding: 14px; color: var(--cor-fundo-branco); text-align: center; 
    border-radius: 8px; font-weight: 700; margin-top: 20px; 
    font-family: var(--fonte-titulos); font-size: 15px; transition: all 0.3s ease; text-transform: uppercase;
}
.btn-verde { background: var(--cor-verde-cbsa); }
.btn-verde:hover { background: #007d2f; transform: translateY(-2px); }
.btn-azul { background: var(--cor-azul-cbsa); }
.btn-azul:hover { background: var(--cor-azul-escuro); transform: translateY(-2px); }

/* Template Dinâmico de Notícias */
.news-article-title { 
    font-family: var(--fonte-titulos); font-weight: 800; color: var(--cor-azul-cbsa); 
    font-size: 32px; margin-bottom: 15px; text-transform: uppercase;
}
.news-category-badge { 
    background-color: var(--cor-verde-cbsa); color: var(--cor-fundo-branco); padding: 5px 12px; 
    border-radius: 4px; font-weight: 700; font-size: 12px; text-transform: uppercase;
}
.news-article-lead { 
    font-size: 18px; font-weight: 600; color: var(--cor-azul-cbsa); font-style: italic; 
    background: #f0f4ff; border-left: 5px solid var(--cor-amarelo-cbsa); padding: 20px; margin: 30px 0; 
}
.sidebar-title { 
    font-family: var(--fonte-titulos); font-size: 20px; font-weight: 800; 
    color: var(--cor-azul-cbsa); border-bottom: 3px solid var(--cor-amarelo-cbsa); 
    padding-bottom: 10px; margin-bottom: 25px; display: inline-block;
}
.fias-news-title:hover { color: var(--cor-verde-cbsa); }