/* ==========================================================================
   Socequi — header/nav
   --------------------------------------------------------------------------
   Extraido de socequi.pt/media/css/custom.css (linhas 1-300 + responsive),
   para que blog.socequi.pt reproduza o header do site principal tal e qual.

   Cores da marca:
     #003E7E  azul (barra de navegacao)
     #C2D500  lima  (destaques, underline do hover)

   NOTA: o custom.css do site principal declara .submenu, .productMenuImg,
   .secondLevelMenu e .thirdLevelMenu DUAS vezes cada. A segunda declaracao
   ganha em cascata; so essa foi mantida aqui. As diferencas eram:
     .submenu        margin -5px 0 0 0  ->  0
     .productMenuImg padding-left/bottom -> padding 20px + text-align center
   ========================================================================== */

/* --- barra de topo (paginas CMS) ---------------------------------------- */

.containerFooterTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.menusFooterTop {
    display: flex;
    gap: 40px;
    font-family: 'Montserrat', sans-serif;
    align-items: center;
}

.logoHeaderImg {
    height: 50px;
    width: auto;
}

/* entrada destacada da barra de topo — marcada por cms_pagina.popup = 1 */
.destaqueCampanha {
    background-color: #C2D500;
    color: black;
    padding: 7px 20px;
    border-radius: 20px;
}

/* --- barra de navegacao (categorias de catalogo) ------------------------ */

.fluidFooterBottom {
    background-color: #003E7E;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
}

.containerFooterBottom {
    margin-top: 20px;
    margin-bottom: 20px;
}

.menusHeaderTop2 {
    display: flex;
    justify-content: space-between;
    color: black;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    gap: 60px;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    padding-right: 20px;
    position: relative;
}

.menusHeaderTop2 ul {
    list-style: none;
}

.firstLevelMenu {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    text-align: center;
}

.firstLevelMenu:hover,
.firstLevelMenu.active {
    color: white;
}

.firstLevelMenu::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #C2D500;
    transition: width 0.3s ease, right 0.3s ease;
}

.firstLevelMenu:hover::after,
.firstLevelMenu.active::after {
    width: 100%;
    right: 0;
}

/* --- dropdown (2o e 3o nivel) ------------------------------------------- */

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 35px;
    width: 100%;
    z-index: 100;
}

.submenu > li {
    padding: 10px;
    white-space: nowrap;
}

.headerBottomRight .submenu {
    width: 100%;
    position: absolute;
    left: 0;
    box-sizing: border-box;
}

.menusHeaderTop2 > li:hover .submenu {
    display: block;
    width: 100%;
    left: 0;
    box-sizing: border-box;
}

.productMenuImg {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
}

.productMenuImg ul {
    padding: 0;
}

.secondLevelMenu {
    color: #353535;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.thirdLevelMenu {
    color: #636363;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
}

/* --- mobile -------------------------------------------------------------- */

.containerFooterMobile {
    margin-top: 15px;
    margin-bottom: 15px;
}

.firstLevelMenusMobile {
    color: #353535;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 0;
}

.secondLevelMenusMobile { padding: 5px 0; }
.thirdLevelMenusMobile  { padding: 5px 0; }

.slide-down {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.slide-down.expanded {
    height: auto;
}

.icon-close::before {
    content: '\f00d';
    font-family: 'Font Awesome 5 Free';
}

.icon-bars::before {
    content: '\f0c9';
    font-family: 'Font Awesome 5 Free';
}

.expanded .icon-bars  { display: none; }
.expanded .icon-close { display: block; }

/* --- overlay de pesquisa ------------------------------------------------- */

.popPesquisa {
    display: none;
    height: 100vh;
    width: 100%;
    position: fixed;
    background-color: rgba(0, 62, 126, 0.7);
    top: 0;
    z-index: 10;
}

.inputPesquisaGeral {
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    color: white;
    padding: 5px;
    font-size: 40px;
}

.inputPesquisaGeral:focus {
    outline: none;
    border-bottom: 1px solid white;
}

.inputPesquisaGeral::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.closePesquisa {
    color: white;
    font-size: 30px;
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
}

/* --- scroll-to-top ------------------------------------------------------- */

#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 80px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.circle-progress {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.circle-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #C2D500;
    clip: rect(0px, 60px, 60px, 30px);
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.1s linear;
}

.circle-progress i {
    color: #C2D500;
    font-size: 24px;
    z-index: 1;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
    .inputPesquisaGeral { font-size: 30px; }
}

@media (max-width: 768px) {
    .inputPesquisaGeral { font-size: 25px; }
}

/* --------------------------------------------------------------------------
   Botao de pesquisa

   Era um <a href="#"> — os validadores de SEO acusam-no como ligacao vazia, e
   de facto nao e uma ligacao: abre o overlay de pesquisa. Passou a <button>,
   e este bloco limpa o aspecto nativo para ficar visualmente igual ao anterior.
   -------------------------------------------------------------------------- */
.search-icon .botaoPesquisa {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}