/**
 * Header — Moni Sarai
 *
 * Portado del Header.tsx de Lovable. Equivalencias de las clases Tailwind:
 *   sticky top-0 z-50 border-b border-border/60 bg-background/85 backdrop-blur
 *   mx-auto flex h-20 max-w-6xl items-center justify-between px-6
 *   img  h-14 w-auto
 *   nav  hidden items-center gap-6 lg:flex
 *   a    text-[0.8rem] tracking-[0.12em] uppercase text-muted-foreground
 *   móvil: border-t px-6 pb-6 pt-2 · a  block py-3 text-sm tracking-[0.12em]
 *
 * ⚠ TODAS las medidas van en px, nunca en rem. OceanWP declara
 *   `html { font-size: 62.5% }`, así que 1rem = 10px, no 16px. Los `rem` de
 *   Tailwind sí valen 16px, de modo que hay que convertirlos al portar:
 *   valor_rem × 16 = px. Usar rem aquí encoge el header al 62.5%.
 *
 * Los colores y las familias salen de tokens.css.
 */

:root {
	/* Medidas del diseño original. */
	--ms-header-height: 80px;        /* h-20 */
	--ms-header-max: var(--ms-container, 1152px);
	--ms-header-pad: var(--ms-gutter, 24px);
	--ms-logo-height: 56px;        /* h-14 */
	--ms-nav-gap: clamp(16px, 2vw, 24px);  /* gap-6 con holgura en 1024px */

	/*
	 * Tamaño del menú.
	 *
	 * Lovable fija `text-[0.8rem]`, que en su base de 16px son 12.8px. Ese
	 * valor se respeta hasta el ancho del diseño (1152px) y a partir de ahí
	 * crece un poco, porque en monitores anchos el mismo texto se percibe
	 * más pequeño. Para clavarlo al diseño sin más, sustituir por: 12.8px.
	 */
	--ms-nav-size: clamp(12.8px, 7.136px + 0.491vw, 15px);
	--ms-nav-size-mobile: 14px;  /* text-sm, como en el diseño */
	--ms-nav-tracking: 0.12em;
	--ms-nav-weight: 400;

	--ms-ease: 0.15s ease;           /* transition-colors */
	--ms-z-header: 999;
}

/* -------------------------------------------------------------------------
 * Contenedor
 * ---------------------------------------------------------------------- */

/*
 * Reset acotado al header: no damos por hecho el `box-sizing` global del tema
 * padre. Sin esto, el padding lateral del contenedor se suma al 100% de ancho
 * y provoca scroll horizontal en móvil.
 */
.ms-header,
.ms-header *,
.ms-header *::before,
.ms-header *::after {
	box-sizing: border-box;
}

.ms-header {
	position: sticky;
	top: 0;
	z-index: var(--ms-z-header);
	width: 100%;
	background-color: var(--ms-background, #fdfcf8);
	border-bottom: 1px solid var(--ms-border-60, rgba(224, 222, 213, 0.6));
}

/* El blur solo se aplica si el navegador lo soporta, para no perder contraste. */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
	.ms-header {
		background-color: var(--ms-background-85, rgba(253, 252, 248, 0.85));
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.ms-header__container {
	width: 100%;
	max-width: var(--ms-header-max);
	margin-inline: auto;
	padding-inline: var(--ms-header-pad);
}

.ms-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	min-width: 0;
	min-height: var(--ms-header-height);
}

@media (min-width: 1024px) {
	.ms-header__bar {
		flex-wrap: nowrap;
	}
}

/* Barra de administración de WordPress. */
.admin-bar .ms-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .ms-header {
		top: 32px;
	}
}

/* -------------------------------------------------------------------------
 * Marca / logo
 * ---------------------------------------------------------------------- */

/*
 * `flex: 0 1 auto` + `min-width: 0`: la marca puede encogerse si el logo es
 * ancho y la pantalla estrecha. Sin esto, un logo grande empuja el botón de
 * menú fuera del viewport y aparece scroll horizontal en móvil.
 */
.ms-header__brand {
	order: 1;
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
	line-height: 0;
	padding-block: 8px;
}

.ms-header__brand:focus-visible {
	outline: 2px solid var(--ms-primary, #396040);
	outline-offset: 4px;
	border-radius: var(--ms-radius, 4px);
}

.ms-header__logo {
	display: block;
	width: auto;
	height: var(--ms-logo-height);
	max-width: 100%;
	object-fit: contain;
}

.ms-header__sitename {
	display: block;
	overflow-wrap: anywhere;
	font-family: var(--ms-font-display, Georgia, serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--ms-primary, #396040);
}

/* -------------------------------------------------------------------------
 * Navegación
 * ---------------------------------------------------------------------- */

.ms-nav {
	order: 3;
	flex-basis: 100%;
	display: none;
	max-height: calc(100vh - var(--ms-header-height));
	max-height: calc(100dvh - var(--ms-header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--ms-border-60, rgba(224, 222, 213, 0.6));
	padding-top: 8px;    /* pt-2 */
	padding-bottom: 24px; /* pb-6 */
}

.ms-header.is-open .ms-nav {
	display: block;
}

.ms-nav__list,
.ms-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-nav__item {
	position: relative;
	margin: 0;
}

.ms-nav__link {
	display: block;
	padding: 12px 0; /* py-3 */
	font-family: var(--ms-font-sans, sans-serif);
	font-size: var(--ms-nav-size-mobile);
	font-weight: var(--ms-nav-weight);
	line-height: 1.3;
	letter-spacing: var(--ms-nav-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ms-muted-foreground, #646b63);
	transition: color var(--ms-ease);
}

.ms-nav__link:hover,
.ms-nav__link:focus-visible {
	color: var(--ms-primary, #396040);
}

.ms-nav__item.is-current > .ms-nav__link,
.ms-nav__item.is-ancestor > .ms-nav__link {
	color: var(--ms-primary, #396040);
}

.ms-nav__link:focus-visible {
	outline: 2px solid var(--ms-primary, #396040);
	outline-offset: 3px;
	border-radius: var(--ms-radius, 4px);
}

/* Submenús en móvil: simplemente indentados. */
.ms-nav__sub {
	padding-left: 16px;
}

.ms-nav__item--sub > .ms-nav__link {
	padding-block: 9px;
	text-transform: none;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
 * Carrito
 *
 * Va con `order: 2`, el mismo que el botón de menú: como en el HTML está
 * antes, queda a su izquierda en móvil. En escritorio pasa a `order: 3` para
 * cerrar la barra por la derecha, después del menú.
 * ---------------------------------------------------------------------- */

.ms-cart {
	order: 2;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--ms-foreground, #1f2620);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ms-cart:hover,
.ms-cart:focus-visible {
	color: var(--ms-azul-ink, #375b6a);
}

.ms-cart:focus-visible {
	outline: 2px solid var(--ms-azul-ink, #375b6a);
	outline-offset: 2px;
	border-radius: var(--ms-radius, 4px);
}

.ms-cart__icon {
	flex: 0 0 auto;
}

/*
 * En móvil la barra reparte el espacio con `space-between`, así que sin esto
 * el carrito se queda flotando en medio. Con el margen automático, el hueco
 * se va delante y el carrito queda pegado al botón de menú.
 */
@media (max-width: 1023px) {

	.ms-cart {
		margin-left: auto;
	}
}

/* La chapita del número, en el azul de la tienda. */
.ms-cart__count {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--ms-azul-ink, #375b6a);
	color: var(--ms-background, #fdfcf8);
	font-family: var(--ms-font-sans);
	font-size: 10px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Botón hamburguesa
 * ---------------------------------------------------------------------- */

.ms-nav-toggle {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ms-foreground, #1f2620);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ms-nav-toggle:focus-visible {
	outline: 2px solid var(--ms-primary, #396040);
	outline-offset: 2px;
	border-radius: var(--ms-radius, 4px);
}

.ms-nav-toggle__box {
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
}

.ms-nav-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform var(--ms-ease), opacity var(--ms-ease), top var(--ms-ease);
}

.ms-nav-toggle__bar:nth-child(1) {
	top: 0;
}

.ms-nav-toggle__bar:nth-child(2) {
	top: 7px;
}

.ms-nav-toggle__bar:nth-child(3) {
	top: 14px;
}

.ms-nav-toggle[aria-expanded="true"] .ms-nav-toggle__bar:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.ms-nav-toggle[aria-expanded="true"] .ms-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.ms-nav-toggle[aria-expanded="true"] .ms-nav-toggle__bar:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * Escritorio (a partir de 1024px, el breakpoint `lg` del diseño)
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.ms-nav-toggle {
		display: none;
	}

	.ms-cart {
		order: 3;
		margin-left: 4px;
		margin-right: -10px;
	}

	/*
	 * El menú se lleva el hueco sobrante: así el carrito queda pegado al
	 * último enlace y no flotando solo en la esquina.
	 */
	.ms-nav {
		margin-left: auto;
	}

	.ms-nav {
		order: 2;
		flex: 0 1 auto;
		flex-basis: auto;
		display: block;
		max-height: none;
		overflow: visible;
		border-top: 0;
		padding-block: 0;
	}

	.ms-nav__list {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--ms-nav-gap);
	}

	.ms-nav__link {
		padding: 4px 0;
		font-size: var(--ms-nav-size);
		white-space: nowrap;
	}

	/* Submenú desplegable de un nivel. */
	.ms-nav__sub {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 5;
		min-width: 210px;
		margin-top: 12px;
		padding: 8px 0;
		border: 1px solid var(--ms-border, #e0ded5);
		border-radius: var(--ms-radius, 4px);
		background-color: var(--ms-background, #fdfcf8);
		box-shadow: 0 12px 28px rgba(31, 38, 32, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -6px);
		transition: opacity var(--ms-ease), transform var(--ms-ease), visibility var(--ms-ease);
	}

	.ms-nav__item.has-children:hover > .ms-nav__sub,
	.ms-nav__item.has-children:focus-within > .ms-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.ms-nav__item--sub > .ms-nav__link {
		padding: 8px 16px;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
 * Preferencias del usuario
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ms-header *,
	.ms-header *::before,
	.ms-header *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Impresión: el header no debe ocupar espacio ni quedarse fijo. */
@media print {

	.ms-header {
		position: static;
		border-bottom: 0;
	}

	.ms-nav,
	.ms-nav-toggle {
		display: none !important;
	}
}