/* --------------------------------------------------------------------------
   File: style-header.css
   Child Theme: Hello Elementor Cuzgow v1.1.0
   Template: hello-elementor
   Theme URI: https://github.com/cuzgow/hello-elementor-cuzgow
   Author: Cuzgow
   Author URI: https://cuzgow.com/
   Description: Header‑specific styles for the Hello Elementor Cuzgow child theme,
                optimized for Web Performance and scalability.
   Version: 1.1.0
   Requires at least: 6.0
   Tested up to:      6.5
   Requires PHP:      8.1
   License: GNU General Public License v3 or later
   License URI: https://www.gnu.org/licenses/gpl-3.0.html
   Text Domain: hello-elementor-cuzgow
------------------------------------------------------------------------- */

/* Header 
------------------------------------------------------------
------------------------------------------------------------ */
.siteHeader{
	max-width: 100%;
	position: sticky;         /* Makes the header sticky */
	top: 0;                   /* Sticks to the top of the viewport */
	z-index: 9999;            /* Ensures it's above other content */
  display: -ms-grid;
  display:grid;
  grid-template-columns: minmax(10px, 1fr) 3fr;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content:stretch;
  -ms-flex-line-pack: center;
  align-content: center;
  grid-auto-flow: row;
	background-color: var(--color-light-2);
  font-family: var(--font-family-headings);
	font-size: 1.12em;
  padding-inline: 10vw;
  padding-block: max(2%, 20px);  
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(245, 254, 248, .85);
}

@media only screen and (max-width: 1024px){
	.siteHeader{
		padding-inline: 8vw;
	}
}


@media only screen and (max-width: 600px){
	.siteHeader{
		padding-inline: min(10%, 8vw);
	}
}


/* reset del <a> normal 
------------------------ */

.siteHeader a{
	border-block-end: none;
	margin-block-end: 0;
	padding: 	0;
	text-shadow: 1px 1px 2px var(--color-light-2);


}
/*
.site-header a::after{
	content: 																							"";
	padding: 																							0;
}*/
/* End reset */


/* Area logo
-----------------------------------------------------
----------------------------------------------------- */
.areaLogo{
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
	margin: 0;
	padding: 0;
}

/* Reseat a 
----------------- */
.areaLogo a{
	display: contents;
}
 
/* Tamaño del logo
---------------------------- */ 
.siteHeader img.custom-logo{
	max-height: 50px;
  width: auto;
}

/* Fin area logo */ 

/* Area Menu
-----------------------------------------------------
----------------------------------------------------- */

.areaMenu{
  max-width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	padding: 0;
	justify-self: end;

}
/* for aria label purpouse */
.areaMenu button.hamburger .visually-hidden{
	visibility: hidden;
	padding: 0;
	margin: 0;
}

.areaMenu button.hamburger{
	display: none;
	visibility: hidden;
  position:relative;
	width: max(8vw, 5em);
	height: max(8vw, 5em);
	z-index: 500;	
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	place-content: center;
	gap: 0;
	background: transparent;
	border-radius: .5em;
	border: none;
	color: var(--brand-color);
	font-size: 1.57rem;
	font-size: var(--font-size-p);
/*	-webkit-transition: -webkit-transform .2s ease-in;
	transition: -webkit-transform .2s ease-in;
	-o-transition: transform .2s ease-in;
	transition: transform .2s ease-in;
	transition: transform .2s ease-in, -webkit-transform .2s ease-in;*/
	-webkit-transform: none;
	-ms-transform:none;
	transform: none;
	padding: 1em;
	margin: 0;			
}

.areaMenu button.hamburger:focus,
.areaMenu button.hamburger:hover{
  /*-webkit-transform: scale(1.2);	
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  -o-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,  -webkit-transform .2s ease-in-out;*/
}

.areaMenu button.hamburger:focus,
.areaMenu button.hamburger:active{
  outline: none;
}

.areaMenu span.hamburger-lines{
  background-color: var(--brand-color);
	position: absolute;
	width: 2.2em;
	height: 0.5em;
	border-radius: 0.2em;

}

.areaMenu span.hamburger-lines::before,
.areaMenu span.hamburger-lines::after{
	display: block;
	background-color: var(--brand-color);
	position: absolute;
	content: 	"";
	width: 2.2em;
	height: 0.5em;
	border-radius: 0.2em;
}

.areaMenu span.hamburger-lines::before{
	top: 																										-10px;

}

.areaMenu span.hamburger-lines::after{
	top: 																										10px;
}

/* Nav menu
----------------------------- */
.menuInicio{
	flex: 1 1 auto;
	max-width: 100%;
}

.menuInicio ul{
	max-width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: 0;
}

.menuInicio li::before{
	display: none;
	content: "";
	visibility: hidden;
	padding: 0;
	margin: 0;
}

.menuInicio li{
	padding: 0;
	margin: 0;
}

/* Social Icons
-------------------------------------- */
.menuInicio svg{
	width: 1.1em;
	height: 1.1em;
	vertical-align: top;
}

/* Flags WPML 
--------------------------------------- */
.menuInicio li:last-of-type a:first-of-type {
	margin-inline-end: .5em;
}

.menuInicio li:last-of-type img{
	height: .8em;
	width: auto;
}

/* Media queries
----------------------------------------------------------
---------------------------------------------------------- */
@media only screen and (max-width: 1024px){

	.siteHeader{
		grid-template-columns: repeat(2, minmax(10px, 1fr));
		justify-items: end;
		font-family: var(--font-family);
		padding-block: 0;
	}

	.siteHeader a{
		color: var(--text-white);
		text-shadow: var(--text-shadow);
	}

	.areaMenu{
		flex-flow: column nowrap;
		justify-content: center;
	}

	
	.areaMenu button.hamburger{
		visibility: visible;
		display: -webkit-box;
		display:  -ms-flexbox;
		display: flex;
		/* para inhabilitar touchscreen actions en la hamburguesa */
		-ms-touch-action: none;
		touch-action: none;
	}

	/* Para convertir la hamburguesa en X cuando se activa */
	.areaMenu button.hamburger[aria-expanded=true] span.hamburger-lines{
		transform: 																	rotate(45deg);
		background-color: var(--color-sat-11);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.areaMenu button.hamburger[aria-expanded=true] span.hamburger-lines::before{
		opacity: 0;
		
	}

	.areaMenu button.hamburger[aria-expanded=true] span.hamburger-lines::after{
		transform: rotate(270deg) translateX(9px);
		background-color: var(--color-sat-11);
	}
/* Fin hamburguesa en X */
.areaMenu .menuInicio{
	display: none;
	visibility: hidden;
}

.areaMenu .menuInicio.menu-open{
	display: block;
	visibility: visible;
	width: 60%;
	min-height: 100vh;
	position: absolute;
	left: 0%;
	top:0%;
	z-index: 99;
	background: linear-gradient(to right top, #087822, #098927, #099b2c, #0aad31, #0cbf36);
	opacity: 0.98;
	margin: 0;
	padding-inline: 8vw; /* Revisar media query 600px */
	animation: slideIn 1s ease forwards;
}
@keyframes slideIn {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

.areaMenu nav.menuInicio ul{
	max-width: 100%;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.areaMenu .menuInicio li{
	max-width: 100%;
}

.areaMenu .menuInicio.menu-open  li:first-child{
	margin-block-start: max(25%, 60px);
}

.areaMenu .menuInicio.menu-open li{
	padding-block-end: .8em;
	font-size: 1.2em;
}

/* Para fijar el menú (div.menu-principal-container) 
** cuando se abre en versión mobile 
** Esta clase se añade al body al pulsar sobre el menu
*/
.lock-scrolling {
	max-width: 																100%;
	width: 																		100%;
	position: 																fixed;
}
}

/* Media query mobile
----------------------------------- 
*/
@media only screen and (max-width: 600px){


	.areaMenu .hamburguer-linas::after{
		top: 																					9px;
	}

	.areaMenu .menuInicio.menu-open{
		padding-inline: 															min(1.6rem, 5vw);
	}
}