/* ==========================================================================
   PLONE CUSTOM CSS - MENU TOTALMENTE NA DIREITA (SEM TRAVAS)
   ========================================================================== */

/* ==========================================================================
   2. HEADER (CABEÇALHO)
   ========================================================================== */

header[role="banner"], #portal-header {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
    
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/82/Foz_do_Igua%C3%A7u_-_Vista_a%C3%A9rea_da_usina_de_Itaipu.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #1a3a64 !important;
    
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    z-index: 100;
}

header[role="banner"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(37, 82, 140, 0.5) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Wrapper Interno */
#header-banner {
    position: static !important; /* Permite que o menu ignore este container */
    width: 100% !important;
    max-width: 1400px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* --- LOGOTIPO (Esquerda) --- */
#portal-logo {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
    transform: translateY(-50%) !important;
    z-index: 10;
    display: block !important;
}

#portal-logo img {
    height: 140px !important;
    width: auto !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

/* --- BUSCA (Topo Direita) --- */
#search, #portal-searchbox {
    left: auto !important;
    transform: none !important;
    width: 350px !important;
    z-index: 25;
}

#search form, #portal-searchbox form {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 40px !important;
    padding: 5px 15px !important;
    display: flex !important;
    align-items: center !important;
    backdrop-filter: blur(5px);
}

#search input.searchField, #portal-searchbox input.searchField {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    width: 100% !important;
    outline: none !important;
}

#search input.searchButton, #portal-searchbox input.searchButton {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
}

/* --- LINKS DE TOPO --- */
.top-links-container, #user, #siteactions {
    position: absolute !important;
    top: 10px !important;
    right: 40px !important;
    z-index: 20;
    display: flex !important;
    gap: 15px !important;
    list-style: none !important;
}
#user a, #siteactions a, .top-links-container a {
    color: rgba(255,255,255,0.8) !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* --- SELO DIAMANTE --- */
header[role="banner"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 60%;
    right: 40px; 
    transform: translateY(-50%);
    width: 250px; 
    height: 250px;
    background-image: url('https://www.defensoria.se.def.br/wp-content/uploads/2025/12/image.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* ==========================================================================
   3. MENU PRINCIPAL - EXTREMA DIREITA (SEM RESTRIÇÃO)
   ========================================================================== */

#portal-globalnav, #main-navigation {
    position: absolute !important;
    bottom: 0 !important;
    
    /* Força ocupar toda a largura da tela */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    
    height: 45px !important; 
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    
    display: flex !important;
    
    /* ALINHA TUDO PARA A DIREITA */
    justify-content: flex-end !important; 
    align-items: center !important;
    
    /* APENAS UMA MARGEM PEQUENA PARA NÃO COLAR NA BORDA */
    padding-right: 20px !important; 
    
    box-sizing: border-box !important;
    z-index: 30;
}

#portal-globalnav ul, #main-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    /* Garante que os itens dentro da lista também vão para a direita */
    justify-content: flex-end !important;
    width: 100% !important;
}

#portal-globalnav li, #main-navigation li {
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    background: none !important;
    border: none !important;
}

/* Remove bolinhas */
#portal-globalnav li::before, #main-navigation li::before { content: ""; display: none !important; }

/* Separador Vertical */
#portal-globalnav li::after, #main-navigation li::after {
    content: ""; display: block !important; position: absolute !important;
    right: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
    height: 18px !important; width: 1px !important;
    background-color: rgba(255,255,255,0.3) !important; z-index: 5;
}
#portal-globalnav li:last-child::after, #main-navigation li:last-child::after { display: none !important; }

/* Links */
#main-navigation a, #portal-globalnav li a {
    display: block !important;
    padding: 0 25px !important;
    line-height: 45px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s;
}

#main-navigation a:hover, #portal-globalnav li a:hover { background-color: rgba(255,255,255,0.1) !important; }
#main-navigation li.selected a, #portal-globalnav li.selected a { background-color: rgba(37, 82, 140, 0.8) !important; box-shadow: inset 0 -3px 0 #62b1f6 !important; }

/* Submenu - Abre para a esquerda no último item */
#portal-globalnav li:last-child ul, #main-navigation li:last-child ul {
    left: auto !important; right: 0 !important; border-radius: 0 0 0 4px !important;
}

#portal-globalnav li ul, #main-navigation li ul, #main-navigation .submenu {
    display: none !important; opacity: 0 !important; visibility: hidden !important;
    position: absolute !important; top: 100% !important; left: 0 !important;
    min-width: 250px !important;
    background-color: #1a3a64 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    padding: 0 !important; margin: 0 !important; z-index: 9999 !important;
    border-top: 3px solid #62b1f6 !important; border-radius: 0 0 4px 4px !important;
}

#portal-globalnav li:hover > ul, #main-navigation li:hover > ul, #main-navigation li:focus-within > ul {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    animation: fadeIn 0.2s ease-in-out;
}

#portal-globalnav li ul li, #main-navigation li ul li {
    display: block !important; width: 100% !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-right: none !important;
}
#portal-globalnav li ul li::after, #main-navigation li ul li::after { display: none !important; }

#portal-globalnav li ul li a, #main-navigation li ul li a {
    padding: 15px 20px !important; 
    text-transform: none !important; 
    text-align: left !important;
    width: auto !important;
}
#portal-globalnav li ul li a:hover, #main-navigation li ul li a:hover { background-color: #25528c !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   4. RESPONSIVIDADE (CELULAR)
   ========================================================================== */
@media (max-width: 1024px) {
    header[role="banner"] { height: auto !important; min-height: auto !important; padding-bottom: 70px !important; }
    #header-banner { padding-top: 20px !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    
    #search, #portal-searchbox { position: relative !important; top: auto !important; right: auto !important; margin-bottom: 15px !important; width: 90% !important; order: 1; }
    #portal-logo { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin-bottom: 15px !important; order: 2; }
    
    header[role="banner"]::after { /* Selo mobile */
        position: relative !important; top: auto !important; right: auto !important; transform: none !important;
        margin: 10px auto 20px auto !important; width: 100px !important; height: 100px !important; order: 3;
    }
    
    .top-links-container, #user, #siteactions { position: relative !important; top: auto !important; right: auto !important; justify-content: center !important; margin-bottom: 15px !important; order: 0; }

    /* MENU MOBILE */
    #main-navigation, #portal-globalnav {
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; height: 60px !important;
        background: #1a252f !important; border-top: 3px solid #62b1f6 !important;
        display: flex !important; justify-content: flex-start !important; padding-right: 0 !important;
        overflow-x: auto !important; z-index: 9999 !important;
    }
    #main-navigation ul, #portal-globalnav ul {
        justify-content: flex-start !important; flex-wrap: nowrap !important; /* Importante para rolagem */
    }
    #main-navigation li, #portal-globalnav li { flex: 0 0 auto !important; border-right: 1px solid rgba(255,255,255,0.1) !important; }
    #main-navigation a, #portal-globalnav li a { padding: 0 15px !important; font-size: 0.75rem !important; line-height: 1.1 !important; min-width: 80px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
    #portal-globalnav li::after, #main-navigation li::after { display: none !important; }
    
    #main-navigation li ul, #main-navigation .submenu {
        position: fixed !important; bottom: 60px !important; top: auto !important;
        left: 0 !important; width: 100% !important; border-radius: 0 !important; border-bottom: 3px solid #62b1f6 !important;
    }
}