/* =====================================================
   CABEÇALHO
   SIDNEI INFORMÁTICA
===================================================== */


/* =====================================================
   HEADER PRINCIPAL
===================================================== */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        999;

    width:
        100%;

    background:
        rgba(255, 255, 255, 0.97);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.05);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        box-shadow 0.25s ease,
        background 0.25s ease;

}


/*
 * Ajuste quando a barra administrativa
 * do WordPress estiver visível.
 */

.admin-bar .site-header {

    top:
        32px;

}


/* =====================================================
   HEADER AO ROLAR
===================================================== */

.site-header.header-compacto {

    background:
        rgba(255, 255, 255, 0.985);

    box-shadow:
        0 7px 24px rgba(0, 0, 0, 0.07);

}


/* =====================================================
   CONTAINER
===================================================== */

.header-container {

    width:
        min(
            calc(100% - 48px),
            var(--largura-site)
        );

    min-height:
        92px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    transition:
        min-height 0.25s ease;

}


.header-compacto
.header-container {

    min-height:
        74px;

}


/* =====================================================
   LOGO
===================================================== */

.site-logo {

    flex-shrink:
        0;

    display:
        block;

}


.site-logo img {

    width:
        185px;

    height:
        auto;

    transition:
        width 0.25s ease,
        transform 0.2s ease;

}


.site-logo:hover img {

    transform:
        translateY(-1px);

}


.header-compacto
.site-logo img {

    width:
        158px;

}


/* =====================================================
   MENU
===================================================== */

.menu-principal {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        32px;

}


.menu-principal
.menu-link {

    position:
        relative;

    padding:
        34px 0;

    color:
        var(--preto);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color 0.2s ease,
        padding 0.25s ease;

}


.header-compacto
.menu-principal
.menu-link {

    padding:
        25px 0;

}


/* =====================================================
   LINHA ABAIXO DO LINK
===================================================== */

.menu-principal
.menu-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        24px;

    width:
        0;

    height:
        2px;

    border-radius:
        10px;

    background:
        #d9272b;

    transform:
        translateX(-50%);

    transition:
        width 0.22s ease,
        bottom 0.25s ease;

}


.header-compacto
.menu-principal
.menu-link::after {

    bottom:
        17px;

}


/* =====================================================
   HOVER
===================================================== */

.menu-principal
.menu-link:hover {

    color:
        var(--vermelho);

}


.menu-principal
.menu-link:hover::after {

    width:
        24px;

}


/* =====================================================
   LINK ATIVO
===================================================== */

.menu-principal
.menu-link.is-active {

    color:
        var(--vermelho);

}


.menu-principal
.menu-link.is-active::after {

    width:
        24px;

}


/* =====================================================
   WHATSAPP DESKTOP
===================================================== */

.header-whatsapp {

    min-height:
        47px;

    padding:
        0 19px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid #d9272b;

    border-radius:
        8px;

    color:
        var(--branco);

    background:
        var(--vermelho);

    font-size:
        13.5px;

    font-weight:
        700;

    letter-spacing:
        0.1px;

    white-space:
        nowrap;

    box-shadow:
        0 4px 12px rgba(217, 39, 43, 0.12);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.header-whatsapp:hover {

    color:
        var(--branco);

    background:
        #bd1f23;

    border-color:
        #bd1f23;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px rgba(189, 31, 35, 0.16);

}


.header-whatsapp-icone {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =====================================================
   BOTÃO HAMBÚRGUER
===================================================== */

.menu-mobile-botao {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border:
        1px solid var(--cinza-borda);

    border-radius:
        8px;

    cursor:
        pointer;

    background:
        var(--branco);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


.menu-mobile-botao:hover {

    border-color:
        rgba(239, 43, 45, 0.40);

    background:
        #fffafa;

}


.menu-mobile-botao span {

    width:
        20px;

    height:
        2px;

    display:
        block;

    border-radius:
        5px;

    background:
        var(--preto);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease,
        background 0.2s ease;

}


/* =====================================================
   HAMBÚRGUER ABERTO
===================================================== */

.menu-mobile-botao.menu-aberto
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-mobile-botao.menu-aberto
span:nth-child(2) {

    opacity:
        0;

}


.menu-mobile-botao.menu-aberto
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


.menu-mobile-botao.menu-aberto span {

    background:
        var(--vermelho);

}


/* =====================================================
   WHATSAPP DENTRO DO MENU MOBILE
===================================================== */

.menu-mobile-whatsapp {

    display:
        none;

}


/* =====================================================
   DESKTOP INTERMEDIÁRIO
===================================================== */

@media (max-width: 1100px) {

    .header-container {

        gap:
            20px;

    }


    .menu-principal {

        gap:
            20px;

    }


    .menu-principal
    .menu-link {

        font-size:
            12.5px;

    }


    .site-logo img {

        width:
            160px;

    }


    .header-whatsapp {

        padding:
            0 14px;

        font-size:
            11.5px;

    }

}


/* =====================================================
   MOBILE / TABLET
===================================================== */

@media (max-width: 850px) {

    .site-header {

        overflow:
            visible;

    }


    .header-container {

        position:
            relative;

        min-height:
            74px;

        gap:
            15px;

    }


    .header-compacto
    .header-container {

        min-height:
            68px;

    }


    /* LOGO */

    .site-logo img,
    .header-compacto
    .site-logo img {

        width:
            145px;

    }


    /* ESCONDE WHATSAPP DESKTOP */

    .header-whatsapp {

        display:
            none;

    }


    /* MOSTRA HAMBÚRGUER */

    .menu-mobile-botao {

        display:
            flex;

        margin-left:
            auto;

    }


    /* MENU MOBILE */

    .menu-principal {

        position:
            absolute;

        top:
            calc(100% + 1px);

        left:
            0;

        right:
            0;

        width:
            100%;

        padding:
            12px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        visibility:
            hidden;

        opacity:
            0;

        transform:
            translateY(-8px);

        pointer-events:
            none;

        border:
            1px solid var(--cinza-borda);

        border-top:
            0;

        border-radius:
            0 0 14px 14px;

        background:
            rgba(255, 255, 255, 0.99);

        box-shadow:
            0 15px 30px rgba(0, 0, 0, 0.09);

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;

    }


    .menu-principal.menu-aberto {

        visibility:
            visible;

        opacity:
            1;

        transform:
            translateY(0);

        pointer-events:
            auto;

    }


    .menu-principal
    .menu-link {

        width:
            100%;

        padding:
            13px 15px;

        border-radius:
            7px;

        font-size:
            13px;

        color:
            var(--preto);

    }


    .header-compacto
    .menu-principal
    .menu-link {

        padding:
            13px 15px;

    }


    .menu-principal
    .menu-link::after {

        display:
            none;

    }


    .menu-principal
    .menu-link:hover {

        color:
            var(--vermelho);

        background:
            #fff5f5;

    }


    .menu-principal
    .menu-link.is-active {

        color:
            var(--vermelho);

        background:
            rgba(239, 43, 45, 0.06);

    }


    /* WHATSAPP MOBILE */

    .menu-mobile-whatsapp {

        min-height:
            46px;

        margin-top:
            6px;

        padding:
            0 15px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            9px;

        border-radius:
            7px;

        color:
            var(--branco);

        background:
            #d9272b;

        font-size:
            12.5px;

        font-weight:
            700;

        letter-spacing:
            0.1px;

    }


    .menu-mobile-whatsapp:hover {

        color:
            var(--branco);

        background:
            #bd1f23;

    }


    .menu-mobile-whatsapp svg {

        width:
            18px;

        height:
            18px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.6;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;

    }

}


/* =====================================================
   WORDPRESS ADMIN BAR MOBILE
===================================================== */

@media (max-width: 782px) {

    .admin-bar
    .site-header {

        top:
            46px;

    }

}


/* =====================================================
   MOBILE PEQUENO
===================================================== */

@media (max-width: 480px) {

    .header-container {

        width:
            calc(100% - 30px);

    }


    .site-logo img,
    .header-compacto
    .site-logo img {

        width:
            125px;

    }


    .menu-mobile-botao {

        width:
            41px;

        height:
            41px;

    }

}