/*
Theme Name: PF-2021
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Header 
--------------------------------------------
*/


header.header { 

	/* Cores */

	--cor-texto: #FFFFFF;
	--cor-texto-underline: rgba(255,255,255,.5);


	/* Dimensões */

	--height: 130px;

}


header.header { z-index: 9; display: flex; align-items: center; width: 100%; max-width: var(--limite); margin: 0 auto; padding: 0 var(--recuo); height: var(--height); transition-property: max-width, height, padding; transition-duration: 100ms; transition-timing-function: ease-in-out; }
header.header:before { position: absolute; top: 0; left: 50%; width: calc(var(--vw, 1vw) * 100); height: 100%; margin-left: calc(var(--vw, 1vw) * -50); background: var(--cor-primaria); background: var(--gradiente-verde); content: ""; }

a.logotipo { display: block; top: -5px; width: 250px; height: 34px; text-indent: -9999px; margin-right: 45px; background-image: url(imagens/logotipo.svg) !important; background-size: contain !important; background-repeat: no-repeat; background-position: center !important; }

header.header nav { display: flex; flex-grow: 1; align-items: center; }

header.header nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }

header.header nav ul.principal { font-family: var(--h-font-family); font-size: var(--h3-font-size); line-height: var(--height); }
header.header nav ul.principal > li { margin-right: 10px; }
header.header nav ul.principal > li:last-child { margin-right: 0; }
header.header nav ul.principal > li > a { display: block; padding: 0 10px; color: var(--cor-texto); background-image: linear-gradient(var(--cor-texto-underline), var(--cor-texto-underline)); background-position: 100% calc(50% + 24px); }
header.header nav ul.principal > li > a.selecionado, 
header.header nav ul.principal > li > a:hover, 
header.header nav ul.principal > li > a:focus,
header.header nav ul.principal > li:hover > a { background-size: 100% 1px; background-position: 0 calc(50% + 24px); }

header.header nav ul.secundario { margin-left: auto; }
header.header nav ul.secundario > li > a { display: flex; align-items: center; height: var(--height); }
header.header nav ul > li > a:hover, header.header nav ul > li > a:focus { background-size: 0; }

header.header nav ul > li > ul { visibility: hidden; position: absolute; z-index: 1; top: calc(50% + 45px); left: 50%; display: block; /*max-width: 240px; margin-left: -120px;*/ transform: translateX(-50%); padding: 20px 0; background-color: var(--cor-secundaria); box-shadow: 0 0 var(--sombra-blur) var(--sombra); }
header.header nav ul > li > ul > li > ul { top: -20px; left: 100%; margin-left: 0; }
/*header.header nav ul.secundario > li > ul:before { position: absolute; z-index: -2; top: -10px; left: 50%; width: 20px; height: 20px; background-color: var(--cor-secundaria-escura); transform: rotate(45deg); transform-origin: 0 0; content: ""; }*/
header.header nav ul > li > ul:before { position: absolute; z-index: -2; top: -10px; left: 50%; width: 0; height: 0; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--cor-secundaria-escura); content: ""; }
header.header nav ul > li > ul > li > ul:before { top: 28px; left: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--cor-secundaria-escura); border-left: 0; }
header.header nav ul > li > ul:after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cor-secundaria); content: ""; }
header.header nav ul > li:hover > ul,
header.header nav ul > li:focus-within > ul,
header.header nav ul > li > a:focus + ul { visibility: visible; animation: submenu 200ms ease-in-out; }

header.header nav ul > li > ul li,
header.header nav ul > li > ul a { display: block; font-family: var(--h-font-family); font-size: var(--h3-font-size); font-weight: var(--font-weight-light); line-height: 40px; color: var(--cor-cinza-translucido); text-align: center; white-space: nowrap; }
header.header nav ul > li > ul strong { padding: 0 30px; font-weight: var(--font-weight-medium); }
header.header nav ul > li > ul a { padding: 0 30px; background-size: 0; background-color: var(--cor-transparente); transition-property: background; }
header.header nav ul > li > ul a[href]:hover, header.header nav ul > li > ul a[href]:focus { background-color: var(--cor-cinza-translucido-claro); }
/*header.header nav ul > li > ul > li:hover > a { background-color: var(--cor-cinza-translucido-claro); }*/
header.header nav ul > li > ul li span { font-weight: var(--font-weight-medium); padding: 0 30px; }

header.header nav .separador { width: 40px; height: 60px; }
header.header nav .separador:before { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: var(--cor-texto-underline); content: ""; }

header.header nav ul ul li.separador { width: auto; height: auto; margin-top: 10px; padding-top: 10px; }
header.header nav ul ul li.separador:before { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--cor-cinza-translucido-claro); content: ""; }

header.header nav ul.secundario > li.principal,
header.header nav ul.secundario > li.principal + .separador { display: none; }


@media screen and (min-width: 1080px) and (max-width: 1279px) {

	header.header { 

		/* Dimensões */

		--height: 115px;
		--recuo: 65px;

	}

	header.header nav ul.principal { display: none; }

	header.header nav ul.secundario > li.principal,
	header.header nav ul.secundario > li.principal + .separador { display: list-item; }

}