/* =========================================================
   HEADER.CSS — capes per sobre de menu.css (sense trencar-lo)
   S'APLICA NOMÉS AL TEU HEADER ACTUAL
   ========================================================= */

/* ---------- Layout bàsic del teu header ---------- */
#header-container { top: 0; padding-bottom: 0; }

.header-stil1 {
	position: relative; /* el sticky clon ja s'auto-fixa via .cloned */
	width: 100%;
	background: #fff;
}

.header-stil1 .container-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	font-family: var(--fontprincipal, "Poppins", sans-serif);
}

/* Columnes */
.header-stil1 .left-side {
	float: none !important;
	width: auto !important;
	display: flex !important;
	align-items: center;
	gap: 20px;
	position: static !important;
	top: auto !important;
	flex: 1 1 auto;
	min-width: 0;          /* clau: el nav es pot encongir */
}
.header-stil1 .right-side {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: block !important;
	flex: 0 0 auto;
}

/* Logo */
.header-stil1 #logo { float: none !important; margin: 0 !important; width: auto !important; }
.header-stil1 #logo img {
	display: block;
	max-height: 56px; /* ajusta si cal */
	height: auto; width: auto;
	margin: 0 !important;
	transform: none !important;
}

/* ---------- Sticky clon: amagat per defecte ---------- */
#header.cloned{
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	background: #fff;
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .25s ease, opacity .25s ease, visibility 0s .25s;
}
#header.cloned.sticky{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform .25s ease, opacity .25s ease, visibility 0s;
}
#header.cloned.unsticky{
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
}

/* ---------- Nav (desktop) — respecta menu.css però fixa horitzontal ---------- */
.header-stil1 #navigation { margin: 0 !important; }
.header-stil1 #navigation ul { float: none; }               /* evita floats que trenquen el flex */
.header-stil1 #navigation ul li { float: none; }            /* idem, ja posicionem amb flex */
.header-stil1 #navigation.menu-estil1 { flex: 1 1 auto; min-width: 0; }

.header-stil1 #navigation.menu-estil1 > ul#responsive{
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	list-style: none;
	margin: 0 5% 0 0;
	padding: 0;
	flex-wrap: wrap;
}

.header-stil1 #navigation.menu-estil1 > ul > li {
	position: relative;
	flex: 0 0 auto;
	list-style: none;
	margin: 0; padding: 0;
}

/* Enllaços visibles (per si algun CSS antic els anul·lava) */
.header-stil1 #navigation.menu-estil1 a{
	display: block;
	padding: 10px 8px;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
}
.header-stil1 #navigation.menu-estil1 a:hover{
	text-decoration: underline;
}
#navigation.menu-estil1 ul li:hover{
	background: none!important;
}

/* Submenús (desktop): deixem els teus estils de menu.css, però garantim la capa */
.header-stil1 #navigation.menu-estil1 ul ul{
	z-index: 1000;
}

/* ---------- MÒBIL (≤1024px) ---------- */
@media (max-width: 1024px){

	/* Mostra el botó d’hamburguesa (ja el tens a l’HTML) */
	.header-stil1 .mmenu-trigger{
		display: inline-block !important;
		right: 20px;
	}

	/* menu.css amaga #responsive a mòbil; el mostrarem només amb .nav-open */
	/* NO toquem menu.css; apliquem condicional per contenidor */
	#header-container.nav-open #responsive{
		display: block !important;
	}

	/* Panell vertical mòbil */
	#header-container.nav-open #navigation{
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: #fff;
		border-top: 1px solid #eee;
	}

	/* Llista vertical i àrea clicable gran */
	#header-container.nav-open #navigation ul { float: none; }
	#header-container.nav-open #navigation > ul{
		display: block !important;
		margin: 0; padding: 6px 0;
	}
	#header-container.nav-open #navigation > ul > li { width: 100%; }
	#header-container.nav-open #navigation > ul > li > a{
		padding: 14px 16px;
		border-bottom: 1px solid #f1f1f1;
	}

	/* Submenús en flux i tancats per defecte (obrim amb .open al <li>) */
	#header-container.nav-open #navigation ul ul{
		position: static;
		opacity: 1; visibility: visible; transform: none;
		padding-top: 0; margin: 0; display: none;
		background: #fafafa; border: 0; box-shadow: none;
	}
	#header-container.nav-open #navigation li.open > ul{ display: block; }

	/* A mòbil, evitarem els “arrows” injectats per menu.css per neteja visual */
	#header-container.nav-open #navigation ul li a:after,
	#header-container.nav-open #navigation ul ul li a:after{
		content: '' !important;
	}
}

/* ---------- Accessibilitat mínima ---------- */
.mmenu-trigger .hamburger{ outline: none; }
.mmenu-trigger .hamburger:focus{ outline: 2px dashed #999; outline-offset: 2px; }
/* ————— Desktop (>=1025px): AMAGA “Idiomes” del menú i mostra .lang-wrap ————— */
#navigation.menu-estil1 > ul > li.li8 { display: none !important; }
.lang-wrap { display: block !important; }

/* ————— Mòbil (<=1024px): MOSTRA “Idiomes” dins el menú i amaga .lang-wrap ————— */
@media (max-width:1024px){
	.lang-wrap { display: none !important; }

	/* quan obris el panell (classe .nav-open al #header-container via JS), mostra l’item */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 {
		display: block !important;
	}

	/* neteja visual dels submenús en el panell mòbil */
	#header-container.nav-open #navigation.menu-estil1 ul ul{
		position: static; display: none; background:#fafafa; border:0; box-shadow:none;
	}
	/* s’obrirà en tocar (JS afegeix .open) */
	#header-container.nav-open #navigation.menu-estil1 li.open > ul { display:block; }

	/* treu les fletxes :after antigues de menu.css per evitar duplicats */
	#header-container.nav-open #navigation.menu-estil1 ul li a:after,
	#header-container.nav-open #navigation.menu-estil1 ul ul li a:after { content:'' !important; }
}
/* =========================
   IDIOMES — Desktop vs. Mòbil
   ========================= */

/* ---- DESKTOP (>=1025px): Idiomes fora del menú, mostra .lang-wrap ---- */
@media (min-width:1025px){
	/* amaga l'item Idiomes del menú principal */
	#navigation.menu-estil1 > ul > li.li8 { display: none !important; }

	/* estil del CAT | ES separat */
	.lang-wrap{
		display: flex !important;
		align-items: center;
		gap: 8px;
		margin-left: 8px;
		font-family: var(--fontprincipal, "Poppins", sans-serif);
	}
	.lang-wrap ul{
		display: flex; gap: 8px; margin: 0; padding: 0; list-style: none;
	}
	.lang-wrap li{ display: inline; }
	.lang-wrap li + li::before{
		content: '|';
		color: #000; opacity: .6;
		margin: 0 6px 0 2px;
	}
	.lang-wrap a{
		font-size: 12px; font-weight: 600; color: #000; text-decoration: none;
	}
	.lang-wrap a:hover, .lang-wrap a.active{ text-decoration: underline; }
}

/* ---- MÒBIL (<=1024px): Idiomes dins el menú, amaga .lang-wrap ---- */
@media (max-width:1024px){
	/* amaga el CAT | ES separat */
	.lang-wrap { display: none !important; }

	/* mostra l'item Idiomes del menú quan el panell està obert (.nav-open la posa el JS) */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 { display: block !important; }

	/* fila pare “Idiomes” (look net, sense botó lleig) */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 > a{
		display: flex; align-items: center; gap: 8px;
		padding: 14px 16px; border-bottom: 1px solid #f1f1f1;
	}
	/* caret discret a la dreta */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 > a::after{
		content: '▾'; margin-left: auto; font-size: 16px; line-height: 1;
	}

	/* submenú d'idiomes en flux, polit */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 > ul{
		position: static; display: none;
		background: #fafafa; border: 0; box-shadow: none; margin: 0; padding: 0;
	}
	/* obert quan el <li> té .open (el posa el JS en primer toc) */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8.open > ul{ display: block; }

	/* enllaços del submenú: llegibles (override al line-height:0 de menu.css) */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 > ul > li > a{
		display: block; padding: 12px 20px;
		font-size: 15px; font-weight: 500; color: #000 !important;
		line-height: 1.4 !important;
	}

	/* elimina les fletxes :after de menu.css dins Idiomes per evitar duplicats */
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 a:after,
	#header-container.nav-open #navigation.menu-estil1 > ul > li.li8 ul a:after{
		content: '' !important;
	}
}
/* =========================
   DESKTOP – estètica minimal dels desplegables
   ========================= */
@media (min-width:1025px){

	/* Enllaços de primer nivell: cap fons; només subratllat al hover */
	.header-stil1 #navigation.menu-estil1 > ul > li > a{
		background: transparent !important;
		color:#000 !important;
		text-decoration: none;
	}
	.header-stil1 #navigation.menu-estil1 > ul > li > a:hover{
		text-decoration: underline;
		background: transparent !important;
	}

	/* Panell del submenú: blanc, sense ombra grossa ni efectes de color */
	.header-stil1 #navigation.menu-estil1 ul ul{
		background:#fff !important;
		border:1px solid #eee;           /* si no vols cap vora: posa border:0 */
		box-shadow: none !important;      /* treu l’ombra del menu.css */
		margin-top:8px;
		padding:6px 0;
	}

	/* Files del submenú: sense separadors, lletra més gran */
	.header-stil1 #navigation.menu-estil1 ul ul li{
		border:0 !important;             /* anul·la els separadors del menu.css */
	}
	.header-stil1 #navigation.menu-estil1 ul ul a{
		font-size:16px;                   /* ↑ més gran que el 14px del menu.css */
		font-weight:400;                  /* 300 si el vols més fi */
		line-height:1.5 !important;       /* anul·la el line-height:0 del menu.css */
		padding:12px 18px !important;
		color:#000 !important;
		background: transparent !important;
		text-decoration:none;
	}
	.header-stil1 #navigation.menu-estil1 ul ul a:hover{
		background: transparent !important;
		color:#000 !important;
		text-decoration: underline;
	}

	/* Treu les fletxes FontAwesome automàtiques per un look net (opcional) */
	.header-stil1 #navigation ul li a:after,
	.header-stil1 #navigation ul ul li a:after{
		/*content:'' !important;*/
	}

	/* Assegura’t que el menu.css no imposa line-height:0 als submenús */
	.header-stil1 #navigation ul li:hover ul a,
	.header-stil1 #navigation ul ul a{
		line-height:1.5 !important;
	}
}

/* =========================
   MÒBIL – coherència visual dels submenús
   ========================= */
@media (max-width:1024px){
	/* Pare de cada ítem: només subratllat al hover/tocar */
	#header-container.nav-open #navigation.menu-estil1 > ul > li > a{
		background:#fff;
		text-decoration:none;
		color:#000 !important;
	}
	#header-container.nav-open #navigation.menu-estil1 > ul > li > a:hover{
		text-decoration: underline;
		background:#fff;
	}

	/* Submenús en flux, sense separadors ni colors de fons al hover */
	#header-container.nav-open #navigation.menu-estil1 ul ul{
		position:static; display:none;
		background:#fafafa;              /* manté contrast suau; canvia a #fff si vols */
		border:0; box-shadow:none; margin:0; padding:0;
	}
	#header-container.nav-open #navigation.menu-estil1 li.open > ul{ display:block; }

	#header-container.nav-open #navigation.menu-estil1 ul ul a{
		font-size:16px;
		line-height:1.5 !important;
		padding:12px 18px !important;
		color:#000 !important;
		background:transparent !important;
		text-decoration:none;
	}
	#header-container.nav-open #navigation.menu-estil1 ul ul a:hover{
		text-decoration: underline;
		background: transparent !important;
	}

	/* Neteja fletxes :after del menu.css dins el panell mòbil */
	#header-container.nav-open #navigation.menu-estil1 ul li a:after,
	#header-container.nav-open #navigation.menu-estil1 ul ul li a:after{
		content:'' !important;
	}
}
/* Neteja el left manual antic */
.mmenu-trigger{ left:auto !important; }

/* La fila del header ja és flex; assegurem la disposició */
.header-stil1 .left-side{
	display:flex !important;
	align-items:center;
	gap:12px;
	margin-left: 20px;
}

/* Botó hamburguesa: apareix a mòbil i es col·loca a la dreta del logo */
@media (max-width:1024px){
	.mmenu-trigger{
		display:inline-block !important;
		margin-left:auto;        /* 🔑 empeny el botó cap a la dreta dins .left-side */
		width:44px; height:44px; /* mida còmoda de tap */
		background:#000;
		border-radius:4px;
		position:relative;       /* sense left */
		cursor:pointer;
	}
	.hamburger{ left: 9px; }   /* centra les barres dins el botó negre */
}

/* A escriptori, ocult (ja ho tens a menu.css, però reforcem) */
@media (min-width:1025px){
	.mmenu-trigger{ display:none !important; }
}

/****************************/
/* Top Header */
/****************************/
.top-header{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-bottom: 1px solid #eeeeee;
	padding: 0 150px 0 10px;
	margin-top: -15px;
	margin-bottom: -5px;
}
.top-header a,
.top-header p{
	color: black;
}
.top-header span{
	margin-left: 20px;
}
@media only screen and (max-width: 480px){
	.top-header{
		padding: 0 27px 0 10px;
	}
}
/****************************/
/* Top user */
/****************************/
.header-user-menu {
	float: right;
	position: relative;
	top: -5px;
	margin-left: 0;
	margin-right: 50px;
}

.header-user-name {
	position: relative;
	float: left;
	cursor: pointer;
	color: #666;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-top: 10px;
	font-weight: 400;
	left: 25px;
}

.header-user-name:before {
	font-family: "FontAwesome";
	content: "\f0d7";
	position: absolute;
	color: #666;
	bottom: 1px;
	font-size: 13px;
	right: -16px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.header-user-name span {
	position: absolute;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: visible;
	top: 0;
	left: 0px;
}

.header-user-name span img {
	border: 3px solid #fff;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
	width: 100%;
	height: 100%;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.header-user-name.hu-menu-visdec:before {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.header-user-menu ul {
	margin: 10px 0 0 0;
	opacity: 0;
	list-style: none;
	visibility: hidden;
	position: absolute;
	min-width: 150px;
	top: 35px;
	left: -80px;
	z-index: 1;
	padding: 10px 0;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #eee;
}

.header-user-menu ul li {
	float: left;
	width: 100%;
	padding: 4px 0;
}
.header-user-menu .user-menu ul li a:hover {
	font-weight: bold;
}
.header-user-menu ul li a {
	color: #50596E;
	float: left;
	width: 100%;
	font-size: 15px;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
	padding: 6px 15px;
}

.header-user-name span::after {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	bottom: 11px;
	right: 65px!important;
	background-color: #38b653;
	display: block;
	border: 2px solid #fff;

	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	border-radius: 50%;

}