/*
 * Cabecera del tema padre. Todo va dentro de la capa lgd2: el CSS del hijo siempre tiene prioridad.
 * La tipografía no se fija aquí: se hereda de la web.
 * El menú móvil se usa por debajo de 60em.
 */

@layer lgd2 {
	.lgd2-header {
		--lgd2-header-bg: #fff;

		position: relative;
		z-index: 100;
		background: var(--lgd2-header-bg);
		color: #1a1a1a;
		border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	}

	.lgd2-header--sticky {
		position: sticky;
		top: 0;
	}

	.admin-bar .lgd2-header--sticky {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	.lgd2-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		max-width: 80rem;
		margin-inline: auto;
		padding: 1rem clamp(1rem, 4vw, 2rem);
	}

	.lgd2-header a {
		color: inherit;
		text-decoration: none;
	}

	.lgd2-header__brand .custom-logo-link {
		display: block;
	}

	.lgd2-header__brand img {
		display: block;
		width: auto;
		max-height: 3rem;
	}

	.lgd2-header__site-title {
		font-size: 1.25rem;
		font-weight: 700;
	}

	.lgd2-header__menu {
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	/* Menú */
	.lgd2-nav__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 1.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lgd2-nav__list li {
		position: relative;
	}

	.lgd2-nav__list a {
		display: inline-block;
		padding-block: 0.5rem;
		transition: opacity 0.2s;
	}

	.lgd2-nav__list a:hover {
		opacity: 0.65;
	}

	.lgd2-nav__list [aria-current="page"] {
		font-weight: 600;
	}

	.lgd2-nav__list > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.125rem;
	}

	.lgd2-nav__submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.lgd2-nav__submenu-toggle .lgd2-icon {
		width: 1rem;
		height: 1rem;
		transition: transform 0.2s;
	}

	.lgd2-nav__submenu-toggle[aria-expanded="true"] .lgd2-icon {
		transform: rotate(180deg);
	}

	.lgd2-nav .sub-menu {
		display: none;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
	}

	.lgd2-nav .is-open > .sub-menu {
		display: block;
	}

	/* Botón destacado */
	.lgd2-header .lgd2-header__cta {
		display: inline-block;
		padding: 0.7rem 1.4rem;
		border-radius: 999px;
		background: #1a1a1a;
		color: #fff;
		font-weight: 600;
		line-height: 1.2;
		transition: opacity 0.2s;
	}

	.lgd2-header .lgd2-header__cta:hover {
		opacity: 0.85;
	}

	.lgd2-header__ctas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
	}

	/* CTA de teléfono, a la derecha del CTA de la cabecera */
	.lgd2-header .lgd2-header__cta--telefono {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: transparent;
		color: inherit;
		box-shadow: inset 0 0 0 1.5px currentColor;
	}

	.lgd2-header__cta--telefono .lgd2-icon {
		width: 1rem;
		height: 1rem;
	}

	/* Botón del menú móvil: tres barras que se convierten en una X */
	.lgd2-header__toggle {
		display: none;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.lgd2-header__toggle-bars,
	.lgd2-header__toggle-bars::before,
	.lgd2-header__toggle-bars::after {
		display: block;
		width: 1.5rem;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s, background-color 0.2s;
	}

	.lgd2-header__toggle-bars {
		position: relative;
	}

	.lgd2-header__toggle-bars::before,
	.lgd2-header__toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.lgd2-header__toggle-bars::before {
		top: -7px;
	}

	.lgd2-header__toggle-bars::after {
		top: 7px;
	}

	.lgd2-header__toggle[aria-expanded="true"] .lgd2-header__toggle-bars {
		background-color: transparent;
	}

	.lgd2-header__toggle[aria-expanded="true"] .lgd2-header__toggle-bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.lgd2-header__toggle[aria-expanded="true"] .lgd2-header__toggle-bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Móvil y tablet */
	@media (max-width: 59.99em) {
		.lgd2-header__toggle {
			display: inline-flex;
		}

		.lgd2-header__menu {
			display: none;
			position: absolute;
			top: 100%;
			right: 0;
			left: 0;
			flex-direction: column;
			align-items: stretch;
			gap: 1.25rem;
			box-sizing: border-box;

			/* --lgd2-menu-top lo calcula navigation.js: dónde acaba la cabecera en la pantalla (barra de administración incluida). */
			max-height: calc(100vh - var(--lgd2-menu-top, 5rem));
			max-height: calc(100dvh - var(--lgd2-menu-top, 5rem));
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: 0.5rem clamp(1rem, 4vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
			background: var(--lgd2-header-bg);
			border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
		}

		.lgd2-header.is-menu-open .lgd2-header__menu {
			display: flex;
		}

		.lgd2-nav__list {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
		}

		.lgd2-nav__list > li {
			border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
		}

		.lgd2-nav__list > li > a {
			display: block;
			flex: 1;
			padding-block: 0.875rem;
		}

		.lgd2-nav .sub-menu {
			flex-basis: 100%;
			padding: 0 0 0.75rem 1rem;
		}

		.lgd2-nav .sub-menu a {
			display: block;
			padding-block: 0.5rem;
			font-size: 0.92em;
		}

		.lgd2-header__ctas {
			align-self: flex-start;
		}

		.lgd2-header .lgd2-header__cta--ocultar-movil {
			display: none;
		}

		html.lgd2-menu-abierto {
			overflow: hidden;
		}
	}

	/* Escritorio */
	@media (min-width: 60em) {
		/*
		 * El submenú empieza por debajo de la cabecera, no pegado al enlace.
		 * La separación se ajusta con --lgd2-submenu-offset.
		 */
		.lgd2-nav .sub-menu {
			position: absolute;
			top: calc(100% + var(--lgd2-submenu-offset, 1.25rem));
			left: -1rem;
			z-index: 10;
			min-width: 14rem;
			background: var(--lgd2-header-bg);
			border-radius: 0.5rem;
			box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.12);
		}

		/* Puente invisible: el ratón puede bajar hasta el submenú sin pasar por "fuera". */
		.lgd2-nav .sub-menu::before {
			content: "";
			position: absolute;
			right: 0;
			bottom: 100%;
			left: 0;
			height: var(--lgd2-submenu-offset, 1.25rem);
		}

		.lgd2-nav .sub-menu a {
			display: block;
			padding: 0.5rem 1rem;
		}

		/*
		 * Submenús a dos columnas. La primera columna tiene tantos elementos como indique
		 * --lgd2-submenu-corte (Personalizar → Cabecera); el resto pasa a la segunda.
		 * Con menos elementos que el corte, el submenú se queda en una sola columna.
		 */
		.lgd2-header--submenu-dos .lgd2-nav .sub-menu {
			grid-template-rows: repeat(var(--lgd2-submenu-corte, 7), auto);
			grid-auto-flow: column;
			grid-auto-columns: minmax(14rem, max-content);
			column-gap: 1rem;
		}

		.lgd2-header--submenu-dos .lgd2-nav .is-open > .sub-menu {
			display: grid;
		}

		.lgd2-header--logo-centrado .lgd2-header__inner {
			flex-direction: column;
			gap: 0.75rem;
		}

		.lgd2-header--logo-centrado .lgd2-nav__list {
			justify-content: center;
		}

		/* Menú a la derecha del logo con los elementos de izquierda a derecha: empieza junto al logo y los CTAs quedan al final. */
		.lgd2-header--menu-izquierda .lgd2-header__inner {
			gap: 3rem;
		}

		.lgd2-header--menu-izquierda .lgd2-header__menu {
			flex: 1;
		}

		.lgd2-header--menu-izquierda .lgd2-header__ctas {
			margin-left: auto;
		}

		/* Menú invertido: el primer elemento del menú queda a la derecha y los siguientes se añaden hacia la izquierda. */
		.lgd2-header--menu-invertido .lgd2-nav__list {
			flex-direction: row-reverse;
		}

		.lgd2-header--menu-invertido .lgd2-nav .sub-menu {
			right: -1rem;
			left: auto;
		}

		/* Menú centrado en la cabecera: logo | menú | CTAs. Si no cabe, el centrado cede antes que el contenido. */
		.lgd2-header--menu-centrado .lgd2-header__inner {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
		}

		.lgd2-header--menu-centrado .lgd2-header__menu {
			display: contents;
		}

		.lgd2-header--menu-centrado .lgd2-nav {
			grid-column: 2;
		}

		.lgd2-header--menu-centrado .lgd2-header__ctas {
			grid-column: 3;
			justify-self: end;
		}
	}

	/*
	 * La apertura con el ratón la lleva navigation.js con la clase .is-open: espera antes de cerrar
	 * y no deja dos submenús abiertos a la vez.
	 */

	/* En pantallas estrechas la barra de administración no queda fija. */
	@media (max-width: 600px) {
		.admin-bar .lgd2-header--sticky {
			top: 0;
		}
	}
}