/*-----------------------------------------------------------  <HEADER - ORIENTATION LANDSCAPE>  ------------------------------------*/
header {
	position: static;
	display: grid;
/* 	min-height: 20vh; */
	width: 100%;
	grid-template-columns: 1fr 1fr 4fr 2fr;
	/* grid-template-columns: 1fr 2fr 2fr 3fr; */
	align-items: center;
	color: orange;
}

.header__PassportPhotoBox {
	display: grid;
	align-items: center;
	color: blue;
}

.PassportPhoto {
	position: relative;
	left: 40%;
	object-fit: contain;
		border-style: groove;
			width: 60%;
	border-block-color: #811331;
	border-block-width: 0.5vw;
}

/* .PassportPhoto {
	position: static;
			width: 100%;
				object-fit: contain;
		border-style: groove;
	border-block-color: #811331;
	border-block-width: 0.5vw;
} */

#personal_text {
	display: grid;
	height: 100%;
	align-items: center;
	color: black;  /* Claret #811331 */
	font-style:oblique; 
	font-weight:bold; 
    /* font-size: 2.5vmin; */
	font-size: var(--fontBrand, 2.5vmin);
	text-align: center;
}

.header__centralBox {
	height: 100%;
	background-color: inherit;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	/* border-style: solid;
	color: green; */
}

.languages {
	display: flex;
	flex-flow: row nowrap;
	/* flex: 0 0 4.5vh; */
	width: 100%;
	justify-content: center;
	background-color: inherit;
	/* border-style: solid;
	color: blue; */
}

.languages input[type="radio"] {
cursor: pointer;
display: none;}

.languages label {
	/* display: inline-block; */
	cursor: pointer;
	width: min(5.5vw, calc(4vh * 1.5));
	height: min(calc(5.5vw / 1.5), 4vh);
	margin-right: 2.25vw;
	margin-left: 2.25vw;
	margin-top: 1vh;
}

.languages label[for="italian"] {
	background-image: url('../data/italian_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="english"] {
	background-image: url('../data/eng_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="french"] {
	background-image: url('../data/french_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label[for="german"] {
	background-image: url('../data/ger_flag.jpg');
	background-size: cover;
	background-position: center;
}

.languages label:has(input[type="radio"]:checked) {
	outline: 0.1vmin solid black; /* Claret #811331*/
	outline-offset: -0.1vmin;
	box-shadow: inset 0vmin 0vmin 0.5vmin 0vmin;
	border-image: linear-gradient(to left, rgba(0,0,0,0.8), transparent 10% 90%, rgba(0,0,0,0.8)) 0 fill/0/0;
	border-image: linear-gradient(to left, rgba(0,0,0,0.8), rgba(211,211,211,0.5) 10% 90%, rgba(0,0,0,0.8)) 0 fill/0/0;
	border-image: linear-gradient(to left, rgba(211,211,211,0.2) 0% 100%) 0 fill/0/0;
} 

.header__titleBox {
	/* height: 100%; */
	color: black;  /* Claret #811331 */
	font-style:normal; 
	font-family: serif;
	font-weight: bold; 
    /* font-size: 5vmin;  */
	font-size: var(--fontTitle, 5vmin);
/* 	display: grid;
	align-items: start;
	padding-top: 3vh;*/
	text-align: center;
	/* border-style: solid;
	color: red; */
}

.header__quotationBox {
	height: 100%;
display: grid;
align-items: center;
	text-align: center;
	color: black;  /* Claret #811331 */
	font-family: calligraphic;
	font-style: oblique;
	font-weight: bold;
	/* font-size: 2vmin; */
	font-size: var(--fontQuot, 2vmin);
}

nav {
	flex: 0 0 100%;
	align-self: end;
	display: grid;
	width: 100%;
	grid-column: 1 / 5;
	grid-row: 2;
	/* grid-template-columns: 20% 20% 20% 20% 20%; */
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
	text-align: center;
	background-color: rgb(var(--headerNavBarBckGndColorRed), var(--headerNavBarBckGndColorGreen), var(--headerNavBarBckGndColorBlue)); 
}

nav > * {
/* .navBar__navLink { */
	margin: 1vh 1%;
	/* border-style: solid;
	color: pink; */
}

.navBar__navLink {
	font-size: var(--fontNavbar, 2vmin);
	background-color: inherit;
	color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
}

.navBar__navLink > span {
	color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	color: #811331; /* (Claret) #811331; */
	background-color: inherit;
}

.navBar__dropDownMenu > .navBar__navLink {
	margin: 0;
	padding: 0;
}

.navBar__dropDownMenu {
	position: relative;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	/* color: orange;
	border-style: solid; */
}

.dropDownMenu__table {
	position: absolute;
	display: none;
	/* display: block; */
	top: 0;
	top: calc(var(--fontNavbar) + 2vh + 1px);
	right: 0;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	/* width: max-content; */
	color: black;
	background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	border-radius: 2vmin;
	overflow: hidden;
	/* border-style: solid; */
	
}

.dropDownMenu__table_prodotti_show, .dropDownMenu__table_cucina_show {
	display: block;
}

.dropDownMenu__table > li {
	margin: 0;
	padding: 0;
	/* width: fit-content; */
	text-align: start;
	text-align: center;
	color: rgb(var(--footerBannerBorderColorRed), var(--footerBannerBorderColorGreen), var(--footerBannerBorderColorBlue));
	background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	border-style: solid none;
	border-style: none;
	border-width: 0.1px;
}

.dropDownMenu__table > li:hover {
	background-color: beige;
}

/* .navBar__dropDownMenu_prodotti:hover .dropDownMenu__table_prodotti {
	display: block;
} */

.dropDownMenu__table_prodotti:hover {
	display: block;
}

/* .navBar__dropDownMenu_cucina:hover .dropDownMenu__table_cucina {
	display: block;
} */

.dropDownMenu__table_cucina:hover {
	display: block;
}

.dropDownMenu__table > li > a {
	color: rgb(var(--footerBannerBorderColorRed), var(--footerBannerBorderColorGreen), var(--footerBannerBorderColorBlue));
	/* background-color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue)); */
	width: max-content;
	/* color: blue; */
}

.dropDownMenu__button {
	/* width: min-content; */
	/* padding: 0 1vmin; */
	height: 100%;
	position: relative;
	font-size: var(--fontNavbar, 2vmin);
	--dropDownMenuButtonRotation: 90deg;
	--dropDownMenuButtonYTranslation: 25%;
	background-color: transparent;
	border-style: none;
	color: rgb(var(--pageAccessoriesColorRed), var(--pageAccessoriesColorGreen), var(--pageAccessoriesColorBlue));
	/* border-style: solid;
	color: red; */
}

.dropDownMenu__button:before {
    content: '\27A6';
	display: block;
	position: absolute;
	/* top: 0;
	transform: rotate(90deg) translateX(75%) translateY(25%); */
	bottom: 0;
	transform: rotate(var(--dropDownMenuButtonRotation)) translateY(var(--dropDownMenuButtonYTranslation));
	padding: 0;
	margin: 0;
	/* border-style: solid;
	color: green; */
}

.dropDownMenu__button:hover {
	color: black;
}

.dropDownMenu__button:active {
	filter: drop-shadow(0vw 0vh 4vmin white);
}

/*-----------------------------------------------------------  </HEADER - ORIENTATION LANDSCAPE>  ------------------------------------*/

/*-----------------------------------------------------------  <HEADER - ORIENTATION PORTRAIT>  ------------------------------------*/

@media screen and (orientation: portrait) {
	header {
	/* max-height: 15vh; */ /* 20vh * (3/4)*/
/* 	width: 100%; */
/* 	grid-template-columns: 12.5% 25% 25% 37.5%; */
	grid-template-columns: 1fr 2fr 2fr 3fr;
	align-items: center;
	color: orange;
} 

.PassportPhotoImg_id_chiaraFlisi {
	position: static;
			width: 100%;
				object-fit: contain;
		border-style: groove;
	border-block-color: #811331;
	border-block-width: 0.5vw;
}
 
.languages {
	flex: 0 0 2.25vh;
}

.languages label {
	height: 1.5vh;
	width: 2.25vh;
	margin-right: 1.125vh;
	margin-left: 1.125vh;
	margin-top: 1vh;
}

.languages label:has(input[type="radio"]:checked) {
	outline: 0.1vh solid black; /* Claret #811331*/
	outline-offset: 0.1vh;
} 
 
nav {
	/* background-color: #E37383; */ /* (Watermelon Pink) / #DA70D6 (Orchid) */
	background-color: rgb(var(--headerNavBarBckGndColorRed), var(--headerNavBarBckGndColorGreen), var(--headerNavBarBckGndColorBlue));
	}  

}

/*-----------------------------------------------------------  </HEADER - ORIENTATION PORTRAIT>  ------------------------------------*/