/* ==========================================================================
 * wideum-resp-header.css — RESPONSIVE (mòbil + tablet) del HEADER Theme Builder
 * (.wideum-topbar + .wideum-header) i del logo-row.
 *
 * Replica el comportament de producció (themes/wideum, header.php + theme.js +
 * theme.css). Recordatori de l'entorn migrat:
 *   - El header és un doc Theme Builder d'Elementor. La barra promo és
 *     .wideum-topbar; la fila principal (sticky) és .wideum-header i conté, en
 *     aquest ORDRE al DOM:  logo (image)  |  widget wideum-megamenu  |  bloc dret .e-con
 *     El widget wideum-megamenu emet el menú desktop (.main-header__menu-container),
 *     la HAMBURGUESA (.responsive-menu-button) i el panell off-canvas
 *     (.responsive-menu). El bloc dret .e-con conté el switcher d'idioma
 *     (.wideum-langswitch) + el CTA alternatiu (.alternative-menu).
 *   - theme.css amaga el menú desktop i mostra la hamburguesa a ≤1280px
 *     (var menuResponsive=1280 a theme.js). theme.js obre/tanca el panell
 *     off-canvas i fa l'acordió dels submenús a mòbil. Tot ja està carregat.
 *
 * PROBLEMES que corregeix (vist prod vs local a 390 i 820):
 *   1) A ≤600 la top-bar de prod s'AMAGA (theme.css @media max-width:600). En
 *      local es veia i el botó vessava per la dreta.  → l'amaguem.
 *   2) A tablet (601–1024) la top-bar es veu però el botó quedava tallat a la
 *      vora dreta.  → text a l'esquerra / botó a la dreta (space-between) i mides
 *      lleugerament reduïdes perquè no vessi.
 *   3) A ≤1280 (mòbil+tablet) l'ordre visible era  logo | hamburguesa | idioma.
 *      A prod és  logo | idioma | hamburguesa (hamburguesa SEMPRE a la dreta).
 *      → reordenem amb flex `order` i empenyem el grup idioma+hamburguesa a la
 *      dreta amb `margin-right:auto` al logo.
 *   4) Polim l'espaiat de la capçalera del panell off-canvas i compactem el
 *      logo-row a mòbil (logos a mida raonable, cinta contínua, sense desbordar).
 *
 * Aquest full es carrega DESPRÉS de wideum-legacy (includes/assets.php) i, en
 * conflicte amb el CSS per-element inline d'Elementor / el custom_css del doc
 * header (build-header.php), força els punts crítics amb !important.
 * ========================================================================== */

/* ----- Breakpoint del tema: la hamburguesa apareix a ≤1280 (menuResponsive) --- */
@media (max-width: 1280px) {

	/* La fila principal en una sola línia, sense embolicar. */
	.wideum-header {
		flex-wrap: nowrap !important;
	}

	/* Logo: mida fixa, i empeny la resta (idioma + hamburguesa) cap a la dreta. */
	.wideum-header > .elementor-widget-image {
		order: 1 !important;
		flex: 0 0 auto !important;
		margin-right: auto !important;
	}

	/* Bloc dret (switcher d'idioma + CTA). El CTA .alternative-menu ja l'amaga
	 * theme.css a ≤1280, de manera que aquí només queda el switcher d'idioma,
	 * just a l'esquerra de la hamburguesa — exactament com a producció. */
	.wideum-header > .e-con {
		order: 2 !important;
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Widget del menú: a ≤1280 el menú desktop està ocult i només hi resta la
	 * hamburguesa (+ el panell off-canvas, que és position:fixed i no ocupa
	 * layout). El posem l'ÚLTIM perquè la hamburguesa quedi a la dreta de tot. */
	.wideum-header > .elementor-widget-wideum-megamenu {
		order: 3 !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
	}

	/* La hamburguesa i el switcher agrupats a la dreta, ben separats. */
	.wideum-header > .e-con {
		margin-left: 0;
	}
	.wideum-header .responsive-menu-button {
		margin-left: 4px;
	}

	/* Paddings laterals de la fila raonables a tablet (prod ~ container). */
	.wideum-header {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ----- TABLET (601–1024): top-bar visible i ben encaixada -------------------- */
@media (min-width: 601px) and (max-width: 1024px) {

	/* Text a l'esquerra, botó a la dreta (com prod), sense vessar per la vora. */
	.wideum-topbar {
		--justify-content: space-between;
	}
	.wideum-topbar > .e-con-inner,
	.wideum-topbar {
		justify-content: space-between !important;
	}
	.wideum-topbar .wideum-topbar-text .elementor-heading-title {
		font-size: 14px;
		line-height: 1.25;
	}
	.wideum-topbar .wideum-topbar-btn .elementor-button {
		font-size: 12px;
		padding: 5px 12px;
		white-space: nowrap;
	}
	.wideum-topbar .wideum-topbar-btn {
		flex: 0 0 auto;
	}
}

/* ----- MÒBIL (≤600): top-bar amagada (idèntic a prod) ------------------------ */
@media (max-width: 600px) {

	/* prod: @media(max-width:600){ .top-bar{display:none} } */
	.wideum-topbar {
		display: none !important;
	}

	/* Fila principal més compacta (prod: container padding 0 25px a ≤700). */
	.wideum-header {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		gap: 12px !important;
	}

	/* Logo a mida de producció (~140px) perquè hi càpiga idioma + hamburguesa. */
	.wideum-header .elementor-widget-image img {
		width: 140px !important;
	}

	/* Switcher d'idioma compacte (menys padding intern) perquè no s'ampli massa. */
	.wideum-header .wpml-ls-legacy-dropdown a {
		padding-right: 22px;
	}
}

@media (max-width: 400px) {
	/* En pantalles molt estretes, logo una mica més petit per garantir marge. */
	.wideum-header .elementor-widget-image img {
		width: 128px !important;
	}
	.wideum-header {
		gap: 8px !important;
	}
}

/* ----- PANELL OFF-CANVAS: polim l'espaiat de la capçalera ------------------- */
/* El panell (.responsive-menu) viu DINS del widget, per tant dins .wideum-header.
 * A la seva capçalera (logo + switcher d'idioma) donem separació neta perquè
 * "English ▾" no quedi enganxat al logo (com passava en local). El botó de
 * tancar (.responsive-menu-button--close) és absolute i no hi interfereix. */
@media (max-width: 1280px) {
	.wideum-header .responsive-menu--header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		padding-right: 44px; /* deixa espai per a la X de tancar */
	}
	.wideum-header .responsive-menu--header .main-header__language {
		margin: 0;
	}
	/* El menú i el CTA del panell off-canvas SÍ que es veuen (theme.css els
	 * mostra dins .responsive-menu); només ens assegurem que no vessin. */
	.wideum-header .responsive-menu {
		box-sizing: border-box;
	}

	/* IMPORTANT — anul·lem els desplaçaments horitzontals dels mega-panells dins
	 * el panell off-canvas. A desktop, els submenús de .menu-product /
	 * .menu-industries es posicionen amb left negatiu (wideum-legacy.css secció l:
	 * left:-100px / -170px) perquè el mega-panell quedi centrat sota el títol. Com
	 * que el panell off-canvas també viu dins .wideum-header, aquelles regles (amb
	 * un `li` extra, més específiques que el reset responsive del tema) empenyien
	 * els submenús cap a l'ESQUERRA i el contingut sortia del viewport (clip a
	 * l'esquerra + overflow horitzontal). Dins .responsive-menu els forcem a
	 * position relative, left:0 i amplada completa: llista/acordió vertical net. */
	.wideum-header .responsive-menu .main-menu > li.menu-item-has-children > .sub-menu,
	.wideum-header .responsive-menu .main-menu > li.menu-product > .sub-menu,
	.wideum-header .responsive-menu .main-menu > li.menu-industries > .sub-menu,
	.wideum-header .responsive-menu .main-menu > li.menu-about > .sub-menu {
		position: relative !important;
		left: 0 !important;
		right: auto !important;
		top: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	/* La fletxa/pseudo-element decoratiu del panell desktop tampoc no ha de
	 * desplaçar-se ni deixar-se veure dins l'off-canvas. */
	.wideum-header .responsive-menu .main-menu > li.menu-item-has-children > .sub-menu::before,
	.wideum-header .responsive-menu .main-menu > li.menu-item-has-children > .sub-menu::after {
		display: none !important;
	}
	/* Cap sub-contenidor del header pot generar scroll horitzontal del document. */
	.wideum-header .responsive-menu * {
		max-width: 100%;
	}
}

/* ==========================================================================
 * LOGO-ROW (cinta de logos) — compacta a mòbil
 * A desktop: logos max-height 70px, gap 60px (--margin-section-large), grayscale
 * (wideum-fix-f.css). A mòbil això mostra només ~2 logos i queda massa gran; ho
 * reduïm perquè la cinta llisqui amb més logos visibles i a mida raonable, sense
 * mai desbordar (la secció .logo-row ja porta overflow:hidden). No toquem
 * l'animació (segueix lliscant) ni el color/grayscale.
 * ========================================================================== */
@media (max-width: 782px) {
	.e-con.logo-row .logo-row__marquee .logo-row__logo {
		margin-right: 40px;
	}
	.e-con.logo-row .logo-row__marquee .logo-row__logo img {
		max-height: 46px;
		max-width: 150px;
	}
}
@media (max-width: 480px) {
	.e-con.logo-row .logo-row__marquee .logo-row__logo {
		margin-right: 32px;
	}
	.e-con.logo-row .logo-row__marquee .logo-row__logo img {
		max-height: 40px;
		max-width: 130px;
	}
}