/*
	 * Theme Name: Casa Brasil
	 *
	 * assets/css/header.css | Header (Tag #header definida em assets/css/main.css)
	 *
	 */
	
	#header .wrapper {
		position: relative;
	}

	/* Barra superior */

	#header-barra {
		display: none;
		flex-direction: row;		
		width: 100%;
		height: clamp(65px, 5.09vw, 77px);
	}

	body.home #header-barra {
		display: flex;
	}

	#header-barra > div {
		z-index: 25;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#header-barra > div:first-child {
		flex-grow: 0;
		width: clamp(216px, 17.06vw, 258px);
		background-color: var(--main-highlight-color-1);
	}

	#header-barra > div:last-child {
		flex-grow: 1;
		padding-top: 0.1rem;
		font-size: 0.7rem;
		background-color: var(--main-highlight-color-2);
	}

	#header-barra .imagem {
		width:clamp(151px, 11.77vw, 178px);
		height: clamp(37px, 2.91vw, 44px);
	}

	/* Main Header */

	#header-main {
		position: relative;
		z-index: 10;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: clamp(95px, 7.27vw, 110px);
		font-family: var(--main-wide-font);
		font-size: 0.8rem;
		color: #FFFFFF;
		background-color: #283F20;
	}

	#header-main > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#header-main .logo {
		z-index: 25;
		flex-grow: 0;
		width: clamp(465px, 36.18vw, 550px);
		background-color: #283F20;
	}

	#header-main .imagem {
		width: clamp(398px, 31.08vw, 470px);
		height: clamp(46px, 3.57vw, 54px);
	}

	#header-main .sliding {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		padding: 0px clamp(34px, 2.65vw, 40px);
		font-family: var(--main-extended-font);;
		font-size: 0.8rem;
		line-height: 1.2rem;
		letter-spacing: 7%;
	}

	#header-main .status {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0.2rem;
		font-family: var(--main-wide-font);
		font-weight: 300;
		font-size: 0.8rem;
		line-height: 1rem;
	}

	#header-main .status .aberta {
		font-weight: 500;
		color: #97cd04;
		text-transform: uppercase;
	}

	#header-main .status .fechada {
		font-weight: 500;
		color: #f64a4a;
		text-transform: uppercase;
	}

	/* Menu */

	#header .menu-container {
		padding-top: 0.5rem;
		background-color: var(--main-fg-color);

	}

	#header .menu-container > .menu {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		column-gap: 1rem;
		height: 3.9rem;
	}

	#header .menu-container > .menu > li {
		height: 1.26rem;
	}	

	#header .menu-container > .menu > li.menu-item-has-children a:after {
		display: inline-block;
		content: "\e90c";
		margin-left: 5px;
		font-size: 12px;
		font-family: 'casabrasil';
		transform: rotate(90deg);
		
	}

	#header .menu-container a {
		text-transform: uppercase;
		text-decoration: none;
		font-weight: 400;
	}

	#header .menu-container .sub-menu {
		display: none;
	}


	#header .submenu-container a {
		text-decoration: none;
		font-weight: 400;
	}

	#header .submenu-container .menu > li > a {
		display: none;
	}

	#header .submenu-container .sub-menu {
		position: absolute;
		z-index: 5;
		left: 0;
		bottom: 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding-top: 0.2rem;
		padding-left: clamp(34px, 2.65vw, 40px);
		padding-right: clamp(34px, 2.65vw, 40px);
		width: 100%;
		height: 36px;
		font-family: var(--main-extended-font);
		font-size: 0.7rem;
		line-height: 0.7rem;
		letter-spacing: 5%;
		transition: bottom 500ms ease-in-out;
		border-bottom: 1px solid var(--main-fg-color);
	}

	#header .submenu-container .sub-menu.open {
		z-index: 6;
		bottom: -36px;
	}



@media screen and (max-width: 1280px) {

	/* Barra superior */

	#header-barra {
		flex-direction: column;		
		height: clamp(102px, 36.64vw, 165px);
	}

	#header-barra > div:first-child {
		flex-grow: 1;
		height: clamp(49px, 17.47vw, 79px);
		width: 100%
	}

	#header-barra > div:last-child {
		width: 100%;
		height: clamp(53px, 19.17vw, 86px);
		padding: clamp(11px, 4.12vw, 18px);
		padding-top: calc(clamp(11px, 4.12vw, 18px) + 0.2rem);
		font-size: 0.5rem;
		line-height: 0.7rem;
	}	

	/* Main Header */
	#header-main {
		flex-direction: column;
		height: initial;
	}

	#header-main .logo {
		flex-grow: 1;
		align-items: flex-start;
		width: 100%;
		height: clamp(49px, 17.47vw, 79px);
		padding: clamp(11px, 4.12vw, 18px);
	}

	#header-main .imagem {
		width: auto;
		height: 80%;
	}

	#header-main .sliding {
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		position: absolute;
		z-index: 10;
		top: calc(clamp(49px, 17.47vw, 79px) - 100vh);
		height: calc(100vh - clamp(49px, 17.47vw, 79px));
		padding: 0px;
		background-color: var(--main-fg-color);
		transition: top 500ms ease-out;
	}

	#header.menu-open .sliding {
		top: clamp(49px, 17.47vw, 79px);
	}

	#header-main .status {
		flex-grow: 0;		
		width: 100%;
		border-top: 1px solid var(--main-internal-color);
		margin-top: 0;
		padding: clamp(14px, 5.09vw, 23px);
		padding-top: calc(clamp(14px, 5.09vw, 23px) + 0.2rem);
	}

	/* Menu */
	#header .menu-button {
		background: center / 100% auto no-repeat url('../img/button-menu.png');
		width: clamp(37px, 11.65vw, 52px);
		height: clamp(20px, 7.04vw, 32px);
		position: absolute;
		right: clamp(7px, 2.42vw, 11px);
		top: calc(clamp(29px, 10.43vw, 47px) / 2);
		z-index: 26;
	}

	#header-main .sliding > div:last-child {
		overflow: auto;
		width: 100%;
		border-top: 1px solid var(--main-internal-color);
		flex-grow: 1;
		align-items: flex-start;
		padding: clamp(34px, 2.65vw, 40px);
	}

	#header .menu-container {
		font-size: 1.1em;
	}

	#header .menu-container > .menu {
		flex-wrap: nowrap;
		row-gap: 1rem;
		height: initial;
	}

	#header .menu-container > .menu > li {
		height: initial;
	}	

	#header .menu-container > .menu > li.menu-item-has-children a:after {
		display: none;
	}

	#header .menu-container .sub-menu {
		display: flex;
		flex-direction: column;
		margin-top: 0.3rem;
		row-gap: 0.5rem;
	}

	#header .menu-container .sub-menu a {
		color: #FFF9EA;
		text-transform: none;
		font-weight: 300;
	}


	#header .submenu-container {
		display: none;
	}



}