/* ==========================================================================
   	HEADER BASE VERSION
   ========================================================================== */

	.siteHeader {
		max-inline-size: 100%;
		position: sticky;
		inset-block-start: 0;
		z-index: var(--z-index-6); /* 9999 */
		
		display: grid;
		grid-template-columns: minmax(10px, 1fr) 3fr;
		column-gap: var(--space-l);
		justify-items: center;
		align-items: center;
		align-content: center;

		font-family: var(--font-family-headings);
		font-size: 1.12em;

		padding-inline: 10vw;
		padding-block: var(--space-s);

		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		border: 1px solid oklch(100% 0 0 / 0.3);
		border-radius: var(--radius-s);
		/* Glass effect — light brand tint; uses palette surface token */
		background: oklch(98% var(--brand-c-surface) var(--brand-h) / .85);
	}	

	
  /*  RESET A (menu items)  */

	.siteHeader a {
		display: inline-block;
		text-decoration: none;
		padding: 0;
		text-shadow: var(--text-shadow-light); /*adjust per client */
		color: var(--text-dark);
		transform-origin: center;
		transition: transform 0.2s ease-in;
	}

	/* Hover feedback — mouse & trackpad only */
	@media (hover: hover) and (pointer: fine) {
		.siteHeader a:hover {
			transform: scale(1.06);
			transition: transform 0.2s ease-in-out;
		}
	}

	/* Touch press feedback — mobile equivalent of hover feedback */
	@media (hover: none) and (pointer: coarse) {
			.siteHeader a:active {
			transform: scale(1.06);
			transition: transform 0.2s ease-in-out;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.siteHeader a:hover,
		.siteHeader a:active {
			transition: none;
			transform: none;
		}
	}

	
 /* --------- LOGO AREA ------------------- */

	.areaLogo {
		max-inline-size: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	.areaLogo a {
		display: contents;
	}

	/* Adjust max-height per project */
	.siteHeader img.custom-logo {
		block-size: 110px;
		inline-size: auto;	
	}

 /* --------- MENU AREA ------------------- */

	.areaMenu {
		max-inline-size: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		justify-self: end;
	}

	/* Screen-reader-only label — matches .screen-reader-text pattern in style.css */
	.areaMenu button.hamburger .visually-hidden {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* ----- Hamburger ----- */

	/* Hidden by default; shown at ≤1024px */ 
	.areaMenu button.hamburger {
		display: none;
		visibility: hidden;
		position: relative;

		inline-size: max(8vw, 5em);
		block-size: max(8vw, 5em);
		z-index: var(--z-index-3); /* above the mobile panel */
		/* revisar
		flex: 1 1 auto;*/
		flex: 0 0 auto;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		place-content: center;
		gap: 0;

		background: transparent;
		border-radius: var(--radius-s);
		border: none;
		color: var(--brand-color);
		font-size: var(--font-size-p);
		padding: var(--space-s);
		margin: 0;
	}

	/* Override global button feedback from style.css */
	.areaMenu button.hamburger {
		transform: none;
		transition: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.areaMenu button.hamburger:hover {
			transform: none;
			transition: none;
		}
	}

	@media (hover: none) and (pointer: coarse) {
		.areaMenu button.hamburger:active {
			transform: none;
			transition: none;
		}
	}
	/*end override */

	.areaMenu button.hamburger:focus {
		outline: none; /* suppressed for all; :focus-visible handles keyboard */
	}

	.areaMenu button.hamburger:focus-visible {
		outline: 2px solid var(--color-light-5);
		outline-offset: 3px;
	}

	/* Hamburguer lines */
	.areaMenu span.hamburger-lines {
		background-color: var(--brand-color);
		position: absolute;
		inline-size: 2.2em;
		block-size: 0.5em;
		border-radius: var(--radius-xs);
	}

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

	.areaMenu span.hamburger-lines::before {
		inset-block-start: -10px;
	}

	.areaMenu span.hamburger-lines::after {
		inset-block-start: 10px;
	}

	/* ----- nav menu ----- */

	.menuInicio {
		flex: 1 1 auto;
		max-inline-size: 100%;
	}

	.menuInicio ul,
	.menuInicio li {
		list-style: none; /* suppress native bullets; */
	}

	.menuInicio ul {
		max-inline-size: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: var(--space-s);
		margin: 0;
		padding: 0;
	}

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

	/* Social icons */
	.menuInicio svg {
		inline-size: 1.1em;
		block-size: 1.1em;
		vertical-align: top;
	}

	/* WPML language switcher */
	.menuInicio li:last-of-type a:first-of-type {
		margin-inline-end: var(--space-2xs);
	}

	.menuInicio a.wpml-lang-link img {
		inline-size: 1.4em;
	}



/* ==========================================================================
   	HEADER RESPONSIVE VERSION TABLET BREAKPOINT
	========================================================================== */


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

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

		/* Per-client: move or override for logo area if needed. */
		.siteHeader a {
			text-shadow: var(--text-shadow-dark);
			color: var(--text-light);
		}

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

		.areaMenu button.hamburger {
			visibility: visible;
			display: flex;
			touch-action: none; /* disable browser swipe gestures on trigger */
		}

		/* --- Hamburger → X animation when activated----------------- */

		.areaMenu button.hamburger[aria-expanded="true"] span.hamburger-lines {
			rotate: 45deg;
			background-color: var(--color-sat-5);
			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-5);
		}

		/* --- Desktop nav hidden; revealed via 
		.menu-open -------------------- */
		.areaMenu .menuInicio {
			display: none;
			visibility: hidden;
		}

		.areaMenu .menuInicio.menu-open {
			display: block;
			visibility: visible;
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 0;

			inline-size: 70%; /*adjust per website */
			min-block-size: 100vh;
		
			z-index: var(--z-index-2); /* below hamburger button */
			/* Dark brand gradient — built from OKLCH component tokens */
			background: linear-gradient( /* adjust per website */
				to right top,
				oklch(calc(var(--brand-l) * 0.40) var(--brand-c-hue) var(--brand-h) / 0.9),
				oklch(calc(var(--brand-l) * 0.48) var(--brand-c-hue) var(--brand-h) / 0.85),
				oklch(calc(var(--brand-l) * 0.56) var(--brand-c-hue) var(--brand-h) / 0.8),
				oklch(calc(var(--brand-l) * 0.64) var(--brand-c-hue) var(--brand-h) / 0.7),
				oklch(calc(var(--brand-l) * 0.72) var(--brand-c-hue) var(--brand-h) / 0.6)
			);

			margin: 0;
			padding-inline: 8vw;
			animation: slideIn 0.3s ease forwards;
		}

		@keyframes slideIn {
			from { translate: -100% 0; }
			to   { translate: 0 0; }
		}

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

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

	.areaMenu .menuInicio.menu-open ul {
		padding-block-start: max(25%, var(--space-2xl));
	}

	.areaMenu .menuInicio.menu-open li {
		padding-block-end: var(--space-xs);
		font-size: 1.08em;
	}

	/* 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
	*/
	body.lock-scrolling {
		max-inline-size: 100%;
		inline-size: 100%;
		position: fixed;
	}
}

/* ==========================================================================
   	HEADER RESPONSIVE VERSION MOBILE BREAKPOINT
	========================================================================== */

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

	.siteHeader {
		padding-inline: min(1.6rem, 5vw);
	}
	/*
	.areaMenu .hamburger-lines::after {
		inset-block-start: 9px;
	}*/

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

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

	.menuInicio a.wpml-lang-link img {
		inline-size: 1.5em;
	}

	/* Social icons — light fill for dark panel */
	.menuInicio svg {
		inline-size: 1.1em;
		block-size: 1.1em;
		vertical-align: top;
		fill: var(--color-light-1); /*adjust per website */
	}
}