/*
Theme Name: LCW AAI
Theme URI: http://lcw-aai.com
Description: Tema WordPress personalizado para LCW AAI.. 
Author: Marco Andrei Kichalowsky, Arsnova Digital 
Author URI: https://arsnova.digital
Version: 1.0
Text Domain: lcw
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 7.2
License: Copyright 2022 @ LCW e Arsnova. Todos os direitos reservados. 
*/

/**
 * Tipos 
 ------------------------------------------------*/

@font-face {
    font-family: 'Didot';
    src: url('fonts/Didot-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Nexa';
    src: url('fontes/NexaBold.woff2') format('woff2'),
        url('fontes/NexaBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nexa';
    src: url('fonts/NexaLight.woff2') format('woff2'),
        url('fonts/NexaLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/**
 * Correções 
 ------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Permite estilizar itens clicáveis no iOS e Safari. */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Padronizações
 ------------------------------------------------*/

:root {
    --letra-corpo-texto: 'Nexa', sans-serif;
    --cor-corpo-texto: black;
    --cor-fundo: white;
    --azul: #233942; /*#014171;*/
    --cinza: #EFEFEC;
    --dourado: #B27E3A;
    --tamanho-coluna-miolo: 800px;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-corpo-texto);
    font-family: var(--letra-corpo-texto);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 2rem 0 1rem;

}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

a,
a:visited {
    color: var(--dourado);
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    opacity: 90%;
}

p {
    margin-bottom: 1rem;
}

strong {
    font-weight: 700;
}

img {
    max-width: 100%;
}

.wp-block-separator {
    border: none;
    height: 1px;
    background-color: #0f0f0f;
    margin: 50px auto;
}

/**
 * Cabeçalho 
 ------------------------------------------------*/

#cabecalho {
    background-color: transparent;
}

.site-header {
    font-size: 0.85rem;
    height: 64px;
    line-height: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.site-header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    max-width: var(--tamanho-coluna-miolo);
    padding: 0 10px;
}

.custom-logo {
    height: auto;
	max-width: 300px;
}

.main-navigation ul {
    display: none;
    list-style: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding-right: 50px;
}

.main-navigation ul li a {
    color: white;
    margin-left: 20px;
}

.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

.main-navigation.toggled ul {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.25);
    top: 64px;
    left: 0;
    right: 0;

}

.main-navigation.toggled ul li {
    line-height: 1.5;
    padding: 10px;
    width: 100%;
}

.menu-toggle {
    border: none;
    font-family: "FontAwesome";
    font-size: 1.5rem;
    background-color: transparent;
    color: white;
    float: right;
    padding: 0 8px;
    outline: none;
    cursor: pointer;
}

#social-icons {
    display: none;
}

@media screen and (min-width: 800px) {
    .menu-toggle {
        display: none;
    }

	.main-navigation {
		flex-grow: 2;
		max-width: 500px;
	}
	
    .main-navigation ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

	.site-header-container {
		justify-content: space-between;
	}
}


/**
 * Seção Principal 
 ------------------------------------------------*/

/* Vitrine */

#vitrine {
    position: relative;
    background-blend-mode: color;
    background-position: -250px center;
    background-size: cover;
    height: 240px;
}

@media screen and (min-width: 800px) {
    #vitrine {
		background-position: center;
        height: 400px;
    }
}

.capa #vitrine {
    height: 100vh;
}

.mascara-azul {
    background-color: rgba(35, 57, 66, 0.85);
    height: 100%;
    width: 100%;
}

.vitrine-conteudo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: var(--tamanho-coluna-miolo);
    margin: 0 auto;
    padding: 20px;
}

.vitrine-texto {
    color: var(--dourado);
    font-family: 'Didot', serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    transform: scaleY(1.25);
    transform-origin: 0 0;
}

@media screen and (min-width: 800px) {
    .vitrine-texto {
        font-size: 3.5rem;
    }
}


/* Sobre */

#sobre {
    position: relative;
    overflow: hidden;
}

.vitrine-aros-esq {
    background-image: url('img/aros-esq.png');
    background-position: right;
    background-size: cover;
    height: 600px;
    width: 400px;
    position: absolute;
    top: -100px;
    left: -200px;
}

.vitrine-aros-dir {
    background-image: url('img/aro.png');
    background-position: left;
    background-size: cover;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -150px;
    right: -200px;
}

#sobre .conteudo {
    margin: 0 auto;
    max-width: var(--tamanho-coluna-miolo);
    padding: 5rem 2rem;
}

.sobre-titulo {
    color: var(--azul);
    font-family: 'Didot', serif;
    margin-bottom: 4rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.sobre-titulo::after {
    border-top: 2px solid var(--dourado);
    content: ' ';
    width: 150px;
    position: absolute;
    bottom: -1rem;
    left: calc(50% - 75px);
}

@media screen and (max-width: 800px) {
    .vitrine-aros-esq {
        display: none;
    }
}


/* Equipe */

#equipe .conteudo {
    background-color: var(--cinza);
    margin: 0 auto;
    width: 100%;
    padding: 5rem 1rem;
}

.equipe-titulo {
    color: var(--azul);
    font-family: 'Didot', serif;
    margin-bottom: 4rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.equipe-titulo::after {
    border-top: 2px solid var(--dourado);
    content: ' ';
    width: 150px;
    position: absolute;
    bottom: -1rem;
    left: calc(50% - 75px);
}

.membros-lista {
    margin: 0 auto;
    max-width: var(--tamanho-coluna-miolo);
    padding: 1rem;
}

.membro-cartao {
    display: flex;
    flex-direction: column;
    margin: 0 auto 3rem
}

.membro-foto {
    margin-bottom: 1rem;
    min-width: 200px;
    max-width: 200px;
}

.membro-foto img {
    border-radius: 50%;
}

.membro-nome {
    color: var(--azul);
    font-family: 'Didot', serif;
    margin: 0;
}

.membro-email {
    font-family: 'Didot', serif;
    margin-bottom: 1rem;
}

@media screen and (min-width: 800px) {
    .membro-cartao {
        flex-direction: row;
    }

    .membro-info {
        padding: 1rem 0 1rem 2rem;
    }
}


/* Documentos */

#docs .conteudo {
    background-color: var(--dourado);
    margin: 0 auto;
    width: 100%;
    padding: 5rem 1rem;
}

.docs-titulo {
    color: white;
    font-family: 'Didot', serif;
    margin-bottom: 4rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.docs-titulo::after {
    border-top: 2px solid var(--azul);
    content: ' ';
    width: 150px;
    position: absolute;
    bottom: -1rem;
    left: calc(50% - 75px);
}

.docs-lista {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: var(--tamanho-coluna-miolo);
    padding: 1rem;
}

.doc-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 3rem
}

.doc-arq {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    width: 150px;
}

.doc-arq a {
    background-color: white;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.doc-arq img {
    height: 80px;
}

.doc-info {
    color: white;
    font-family: 'Didot', serif;
	font-size: 1.25rem;
    margin: 0;
	max-width: 240px;
	text-align: center;
}




/* Contato */

#contato {
    position: relative;
    overflow: hidden;
}

#contato .conteudo {
    color: var(--azul);
    font-family: 'Didot', serif;
    font-size: 1.25rem;
    margin: 0 auto;
    max-width: var(--tamanho-coluna-miolo);
    padding: 5rem 2rem;
    text-align: center;
}

.contato-titulo {
    margin-bottom: 4rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.contato-titulo::after {
    border-top: 2px solid var(--dourado);
    content: ' ';
    width: 150px;
    position: absolute;
    bottom: -1rem;
    left: calc(50% - 75px);
}

.contato-aros-esq {
    background-image: url('img/aro.png');
    background-position: right;
    background-size: cover;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -150px;
    left: -150px;
}

.contato-aros-dir {
    background-image: url('img/aros-dir.png');
    background-position: left;
    background-size: cover;
    height: 400px;
    width: 600px;
    position: absolute;
    bottom: -200px;
    right: -250px;
}


@media screen and (max-width: 800px) {
    .contato-aros-esq {
        display: none;
    }
}



/**
 * Rodapé 
 ------------------------------------------------*/

.site-footer {
    background-color: var(--azul);
    color: white;
    font-size: 0.75rem;
    padding: 3rem 20px 1rem;
}

.site-footer-info {
    text-align: center;
    max-width: var(--tamanho-coluna-miolo);
    margin: 0 auto;
}

.rodape-logo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem auto;
    max-width: var(--tamanho-coluna-miolo);
}

.rodape-logo img {
    height: 2rem;
    margin: 1rem 2rem;
    width: auto;
}

.rodape-texto {
    text-align: justify;
}

.rodape-creditos {
    color: var(--cinza);
    margin: 2rem auto 1rem;
    max-width: var(--tamanho-coluna-miolo);
    text-align: center;
}

@media screen and (min-width: 800px) {}

.creditos {
    margin-bottom: 1rem;
}


/**
 * Páginas
 ------------------------------------------------*/

.entry-content {
    margin: 0 auto;
    max-width: 800px;
    padding: 100px 20px 0;
}

.entry-content h2 {
    color: var(--cor-laranja);
}

.entry-content ul {
    list-style-position: inside;
}