/*
Theme Name: Info Solutions
Author: Luis Neri
Description: Tema criado exclusivamente para o site da Info Solutions
*/

* {
    font-family: "Open Sans";
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}
body >
header {
    /* height: 131px; */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    transition: 0.8s;

    #pre-header {
        background-color: #289db5;
        li {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            a {
                text-decoration: none;
                font-size: 12px;
                font-weight: bold;
            }
        }
    }

    img {
        max-width: 260px;
        transition: 0.8s;
    }

    #main-header {
        transition: 0.8s;
    }

    #menu-menu-principal {
        padding-top: 30px;
        li {
            padding-bottom: 30px;
            a {
                text-decoration: none;
                font-size: 16px;
                font-weight: 600;
                color: rgba(0,0,0,.6);
                font-family: 'Ubuntu';
            }

            &.current-menu-item a {
                color: #289db5  ;
            }
        }

        .menu-item-has-children > a::after {
            content: "\F0140";
            font-size: 17px;
            margin-left: 5px;
            font-family: "Material Design Icons";
            line-height: 0;
            display: inline-flex;
            align-items: center;
            height: 100%;
        }

        /* dropdown */
        .sub-menu {
            display: none;
            position: absolute;
            top: 54px;
            left: 0;
            background: #fff;
            padding: 10px 0;
            list-style: none;
            /* border: 1px solid #ddd; */
            border-top: 3px solid #289db5;
            z-index: 999;
            text-align: left !important;
        }

        /* itens */
        .sub-menu li {
            padding: 0 !important;
            a {
                display: block;
                padding: 7.5px 25px !important;
                color: #333;
                text-decoration: none;
            }

            &.current-menu-item a {
                color: #289db5  ;
            }
        }
        .menu-item-has-children {
            position: relative;
        }

        /* hover */
        .menu-item-has-children:hover > .sub-menu {
            display: block;
        }
    }

    &.fixed {
        position: fixed;
        width: 100%;
        z-index: 9999;
        top: 0;

        #main-header {
            padding-top: 10px !important;
            /* padding-bottom: 10px !important; */
        }

        img {
            max-width: 200px;
        }

        #menu-menu-principal {
            padding-top: 10px;
            li {
                padding-bottom: 20px;
            }

            .sub-menu {
                top: 44px;
            }
        }
    }
}


#featured {
    padding: 150px 0;
    position: relative;
    background-color: rgba(0, 0, 0, 0);

    h1 {
        font-family: "Share Tech";
        font-size: 80px;
    }

    h6 {
        font-family: "Open Sans";
        font-size: 22px;
    }
}

.page-template-page-blog, .single-servicos {
    #featured {
        padding: 200px 0;
    }
}

.single-servicos {
    #featured {
        padding: 230px 0;
    }

    .service-list {
        li {
            font-size: 24px;
            font-family: "Share Tech";
            color: #333; 
            i {
                font-size: 28px !important;
                color: #FFA728;
            }
        }
    }
}


#solutions {
    h1 {
        font-family: "Share Tech";
        font-size: 48px;
        line-height: 67px;
        color: #212529;
    }

    h6 {
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 16px;
        line-height: 31px;
    }
}

#services {
    h1 {
        font-family: "Share Tech";
        font-size: 48px;
        line-height: 67px;
    }
    .servico-item-inner {
        border: 1px solid #eee;
        padding: 16px;
        border-radius: 6px;
        /* height: 100%; */

        h3 {
            height: 48px;
        }
    }

    .servico-icone img {
        max-width: 60px;
    }

    .servico-box {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.35s ease;

        p {
        color: #666;
        }
    }

    h3 a {
        color: #000;
    }

    .servico-box.aberto {
        max-height: 300px; /* ajuste conforme o texto */
    }

    .leia-mais {
        cursor: pointer;
        color: #666;
    }

    a {
        text-decoration: none;
    }

    a.btn {
        background: #15314e;
    }

    .icone.mdi {
        font-size: 100px;
        color: #289db5;
    }

    .laranja {
        background: #ff8a3d;

        .leia-mais, h3 a, .icone.mdi, p {
            color: #fff;
        }
    }

    .cinza {
        background: #f1f1f1;
    }

    .azul {
        background: #15314e;

        .leia-mais, h3 a, .icone.mdi, p {
            color: #fff;
        }
    }

    .laranjaClaro {
        background: #ffa727;
        .leia-mais, h3 a, .icone.mdi, p {
            color: #fff;
        }
    }

}


#blog {
    h1 {
        font-family: "Share Tech";
        font-size: 48px;
        color: #212529;
    }
    a {
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 18px;
        color: #666;
    }

    a.btn {
        background: #15314e;
    }

    a.page-link.current {
        color: #fff;
        border-color: #289db5;
        background-color: #289db5;
    }
}


#contact {
    background-image: linear-gradient(140deg, #004872 0%, rgba(41, 17, 96, 0.8) 100%), url('assets/img/background-footer.jpg') !important;


    .whatsapp-button {
        position: fixed;
        bottom: 40px;
        right: 40px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #25D366;
        color: #fff !important;
        z-index: 1000;
        transition: background-color 0.3s ease;
        color: #fff;

        span {
            color: #fff !important;
            font-size: 48px;
        }

        &:hover {
            background-color: #1DA851;
        }
    }

    ::placeholder {
        color: #fff;
        opacity: 1; /* importante no Firefox */
    }

    input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea {
        border: 0;
        border-bottom: 3px solid #fff;
        border-radius: 0;
        padding-left: 15px;
        color: #FFF;
    }

    .mdi {
        color: #ffa727;
        font-size: 28px;
    }

    .titulo-contato {
        font-size: 24px;
    }

    .descricao-contato {
        font-size: 16px;
    }

    input[type="submit"] {
        color: #ffffff;
        border-width: 10px;
        border-color: #ffa727;
        border-radius: 100px;
        font-size: 15px;
        font-family: 'Open Sans';
        font-weight: 700;
        text-transform: uppercase;
        background-color: #ffa727;
    }

    .wpcf7-response-output {
        color: #fff !important;    
    }
}

/* Container */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Links das tags */
.tag-cloud a {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-radius: 50rem; /* pill */
    font-size: .875rem !important;
    text-decoration: none;
    transition: all .2s ease;
    border: 1px solid var(--bs-border-color);
}

/* Hover */
.tag-cloud a:hover {
    background-color: #289db5;
    color: #fff;
    border-color: #289db5;
}

/* Tag ativa (quando estiver no archive da tag) */
.tag-cloud a.current-tag,
.tag-cloud a[aria-current="page"] {
    background-color: #289db5;
    color: #fff;
    border-color: #289db5;
    font-weight: 500;
}

footer {
    background-color: #222;

    a {
        text-decoration: none !important;
    }

    .lista-marcador-azul {
        padding-left: 1.25rem;
    }

    .lista-marcador-azul li::marker {
        color: #289db5;
        font-size: 1em;
    }

    .lista-marcador-azul li a {
        color: inherit;
        text-decoration: none;
    }

    .lista-marcador-azul li a:hover {
        text-decoration: underline;
    }

    #pos-footer {
        background-color: rgba(0, 0, 0, .32);
        p, a {
            color:#666;
        }

        a {
            font-weight: bold;
        }
    }

    h5 {
        color: #289db5;
    }

    .tag-clouds {
        a {
            text-decoration: none !important;
            padding: 0.35em 0.65em;
            color: #fff;
            font-weight: 400;
            font-size: 12px !important;
        }
    }

    img {
        max-width: 100%;
    }
}

/* ===========================
   BASE DO CONTEÚDO
=========================== */

.post-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bs-body-color);
}

.post-content > * {
    margin-bottom: 1.25rem;
}

/* ===========================
   TÍTULOS
=========================== */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.75rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }

/* ===========================
   PARÁGRAFOS & LINKS
=========================== */

.post-content p {
    margin-bottom: 1.25rem;
}

.post-content a {
    color: var(--bs-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #289db5;
}

.post-content a:hover {
    text-decoration: none;
}

/* ===========================
   LISTAS
=========================== */

.post-content ul,
.post-content ol {
    padding-left: 1.25rem;
}

.post-content li {
    margin-bottom: .5rem;
}

/* ===========================
   IMAGENS
=========================== */

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}

/* Imagem centralizada */
.post-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Imagem à esquerda */
.post-content .alignleft {
    float: left;
    margin: .5rem 1.25rem 1rem 0;
}

/* Imagem à direita */
.post-content .alignright {
    float: right;
    margin: .5rem 0 1rem 1.25rem;
}

/* Limpa floats */
.post-content::after {
    content: "";
    display: block;
    clear: both;
}

/* ===========================
   FIGURE & LEGENDA
=========================== */

.post-content figure {
    margin: 2rem 0;
    text-align: center;
}

.post-content figcaption,
.post-content .wp-caption-text {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    margin-top: .5rem;
}

/* ===========================
   CITAÇÕES
=========================== */

.post-content blockquote {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* ===========================
   CÓDIGO
=========================== */

.post-content pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: .5rem;
    overflow-x: auto;
}

.post-content code {
    background: #f1f1f1;
    padding: .2rem .4rem;
    border-radius: .25rem;
    font-size: .875rem;
}

/* ===========================
   TABELAS
=========================== */

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.post-content table th,
.post-content table td {
    border: 1px solid #dee2e6;
    padding: .75rem;
}

.post-content table th {
    background-color: #f8f9fa;
}

/* ===========================
   EMBEDS (iframe, video)
=========================== */

.post-content iframe,
.post-content embed,
.post-content video {
    max-width: 100%;
}

.post-meta  a{
    color: #289db5;
    text-decoration: none;
}

/* Container geral */
#comments {
  border-top: 1px solid #e5e7eb;
  padding-top: 2rem;
    a {
        color: #289db5;
    }

    .form-submit {
        text-align: right;

        #submit {
            background-color: #ffF;
            border: 2px solid #289db5;
            color: #289db5;
            padding: 15px 20px;

            &:hover {
                border-color: transparent;
                background-color: #ddd;
            }
        }
    }
}

/* Cada comentário */
#comments .comment {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  border-radius: .5rem;
  border: 1px solid #e9ecef;
}

/* Avatar */
#comments .comment-author img {
  border-radius: 50%;
}

/* Conteúdo do comentário */
#comments .comment-body {
  flex: 1;
}

/* Autor */
#comments .comment-author .fn {
  font-weight: 600;
  color: #212529;
}

/* Data */
#comments .comment-meta {
  font-size: .875rem;
  color: #6c757d;
  margin-bottom: .5rem;
}

/* Texto */
#comments .comment-content {
  font-size: .95rem;
  line-height: 1.6;
  color: #343a40;
}

/* Link de resposta */
#comments .reply a {
  font-size: .875rem;
  text-decoration: none;
  color: #289db5;
  font-weight: 600;
}

#comments .reply a:hover {
  text-decoration: underline;
}

/* Comentários aninhados */
#comments ul.children {
  margin-top: 1.5rem;
  padding-left: 2.5rem;
  border-left: 2px solid #dee2e6;
}

/* Comentário do autor do post */
#comments .bypostauthor {
  background-color: #eef6ff;
  border-color: #cfe2ff;
}

/* Comentário aguardando moderação */
#comments .comment-awaiting-moderation {
  font-size: .875rem;
  color: #dc3545;
  margin-bottom: .5rem;
}

/* Paginação */
#comments .pagination {
  gap: .5rem;
}

#comments .pagination a {
  text-decoration: none;
}

/* Formulário */
#respond {
  margin-top: 3rem;
}

#respond textarea {
  resize: vertical;
}

#comments {
    input, textarea {
        background-color: #EEE;
    }

    input {
        max-width: 350px;
    }
}

#avaliacoes {
    h1 {
        font-family: "Share Tech";
        font-size: 48px;
        color: #212529;
    }
}

/* Mobile */
@media (max-width: 576px) {
  #comments .comment {
    flex-direction: column;
  }

  #comments ul.children {
    padding-left: 1rem;
  }
}

/* ===========================
   RESPONSIVO
=========================== */

@media (max-width: 768px) {
    .post-content .alignleft,
    .post-content .alignright {
        float: none;
        margin: 1rem auto;
        display: block;
    }
}

aside {
    form {
        button.btn,
        button.btn:hover {
            color: #666;
            background: #ddd;
        }
    }

    .recent-posts {
        a {
            color: #289db5;
            font-weight: 600;
        }
    }
}

/* .single-post {
    article {
        border-right: 1px solid #ddd;
    }
} */



#contact-page {
    i {
        font-size: 75px;
    }

    .laranja {
        background-color: #ff8a3d;
        color: #fff;
    }

    .cinza {
        background-color: #f1f1f1;
        color: #808184;
    }

    .azul {
        background-color: #15314e;
        color: #fff;

        a {
            text-decoration: none;
            color: #fff;
        }
    }

    input:not([type="submit"]), textarea {
        border: 0;
        border-bottom: 3px solid #E5E5E5;
        border-radius: 0;
    }

    input.btn {
        color: #ffffff;
        border-width: 10px;
        border-color: #ffa727;
        border-radius: 100px;
        font-size: 15px;
        font-family: 'Open Sans';
        font-weight: 700;
        text-transform: uppercase;
        background-color: #ffa727;
    }
}


/* MEDIAS QUERIES */
@media (max-width: 992px) {
    #contact {
        background-position: right;
    }

    #solutions h1 {
        font-size: 36px;
        line-height: 40px;
    }

    #services h1, 
     #blog h1,
     #solutions h1,
     #avaliacoes h1 {
        font-size: 36px;
        line-height: 40px;
    }

    header {
        &.fixed .container#main-header {
            padding-top: 0px !important;
        }

        #mobile-menu-toggle {
            font-size: 24px;
            cursor: pointer;
            span {
                color:#289db5 !important ;
            }
        }
    }

    .backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        display: none;

        &.open {
            display: block;
        }
    }
    #menu-lateral {

        width: 300px;
        margin-left: -300px;
        transition: transform 0.3s ease;
        height: 100%;
        z-index: 999999 !important;
        .menu-lateral-content {
            height: 100%;
        }

        &.open {
            /* display: block !important; */
            transform: translateX(300px);
        }

        .sub-menu {
            display: none;
        }

        .menu-lateral {
            list-style: none;
            li {
                margin-bottom: 10px;
            }
            a {
                /* color: #289db5; */
                color:rgba(0,0,0,.6);
                text-decoration: none;
                font-family: 'Ubuntu';
                font-weight: 600;
                font-size: 20px;
            }

            li.current-menu-item  {
                a {
                  color: #289db5; 
                }
            }
        }

        .whatsapp-button-contato {
            background-color: #25D366;
            color: #fff !important;
            line-height: 0;
            height: 40px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            span{
                font-size: 20px;
            }
        }
    }
}

@media (max-width: 768px) {
    #featured {
        padding: 100px 15px !important;

        h1 {
            font-size: 48px;
        }
        h6 {
            font-size: 18px;
        }
    }

    #contact {
        .whatsapp-button {
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;

            span {
                font-size: 32px;   
            }
        }
    }
}

@media (max-width: 576px) {
    #featured {
        padding: 80px 15px !important;
        h1 {
            font-size: 32px;
        }
        h6 {
            font-size: 16px;
        }

    }
}