/*
 * Espacio Deco — header y menú (brief 2.1).
 *
 * El menú del sitio es ahora el bloque nativo Navegación con "Menú
 * superpuesto: móvil" y el header queda fijo (sticky) con la clase del tema
 * `ext-header-sticky` puesta sobre el grupo del header: el tema hace sticky el
 * template part completo (barra superior + header), igual que el boceto
 * aprobado (`.site-top{position:sticky}`), y resuelve el desfase de la barra de
 * administración. Con eso el header deja de desplazarse de verdad, que era el
 * problema de fondo del `position:sticky` anterior.
 *
 * Hallazgo al aplicarlo: el tema sólo puede hacer sticky si la clase está en el
 * HTML guardado del bloque. Los grupos son bloques estáticos, así que el
 * atributo `className` del comentario no alcanza: hay que tocar también el
 * `<header class="...">` guardado. Ver docs/decisions.md (D-049).
 *
 * Acá sólo se pule el bloque nativo para que se vea como el nav que había y
 * para que el panel móvil sea legible. El diseño fino del panel —se abre desde
 * la izquierda, categorías en tamaño grande, Mi cuenta y WhatsApp al pie— es la
 * Fase 5 del brief.
 */

/* ---------- Escritorio: paridad con el nav anterior ---------- */
.edc-nav .wp-block-navigation__container {
	gap: 26px;
}

.edc-nav .wp-block-navigation-item__content {
	padding: 7px 0;
	border-bottom: 1.5px solid transparent;
	text-decoration: none;
}

.edc-nav .wp-block-navigation-item__content:hover,
.edc-nav .wp-block-navigation-item__content:focus-visible {
	border-bottom-color: currentColor;
}

/* Ofertas en Teja, como el nav anterior y el boceto (sección 5 del brief). */
.edc-nav .sale .wp-block-navigation-item__content {
	color: var(--wp--preset--color--edc-teja);
	font-weight: 700;
}

/* ---------- Botón hamburguesa: mismo tratamiento que los iconos del header ---------- */
.edc-nav .wp-block-navigation__responsive-container-open {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	align-items: center;
	justify-content: center;
}

.edc-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--edc-superficie);
}

/*
 * ---------- Menú superpuesto a partir de 1100 px ----------
 * El bloque nativo muestra el nav en línea desde 600 px, pero las seis
 * categorías no entran antes de 1100 px (el header anterior también las
 * escondía por debajo de ese ancho). Así que entre 600 y 1100 px se usa el
 * botón y el panel, y desde 1100 px el nav en línea.
 */
@media (max-width: 1099.98px) {
	.edc-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.edc-nav .wp-block-navigation__responsive-container {
		display: none !important;
	}

	.edc-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}

	/* El nav ya no está en línea: el botón queda junto a los iconos del header. */
	.edc-head .edc-nav {
		justify-content: flex-end;
	}
}

/* ---------- Panel móvil ---------- */
.edc-nav .wp-block-navigation__responsive-container {
	background: var(--wp--preset--color--edc-blanco);
}

.edc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.edc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--edc-cacao);
	font-size: 20px;
	font-weight: 600;
	padding: 12px 0;
	border-bottom: 0;
}

.edc-nav .wp-block-navigation__responsive-container.is-menu-open .sale .wp-block-navigation-item__content {
	color: var(--wp--preset--color--edc-teja);
}

.edc-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--edc-tinta);
	border-radius: 50%;
}

.edc-nav .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--edc-superficie);
}

/* ---------- Barra superior (brief 2.3): siempre una sola línea ---------- */
header.wp-block-template-part .edc-announce {
	white-space: nowrap;
}

@media (max-width: 360px) {
	header.wp-block-template-part .edc-announce {
		font-size: 12px;
	}
}