/**
 * Mango Builder · estructura del frontend.
 */

.mango {
	--mango-content-width: 1140px;
	--mango-gap: 20px;
	width: 100%;
}

/**
 * Los temas (sobre todo los de bloques) limitan la anchura de los hijos del
 * contenido. Sin esto, un contenedor "a ancho completo" seguiría viéndose en
 * caja porque el envoltorio del tema ya lo había recortado.
 */
.entry-content > .mango,
.wp-block-post-content > .mango,
.is-layout-constrained > .mango,
.is-layout-flow > .mango,
.site-main > .mango,
main > .mango,
article > .mango {
	max-width: none !important;
	width: 100%;
}

.mango *,
.mango *::before,
.mango *::after {
	box-sizing: border-box;
}

.mango img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------
 * Sección y columnas
 * ----------------------------------------------------------------- */

.mango-section {
	position: relative;
	width: 100%;
}

.mango-section > .mango-section-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.mango-section-boxed > .mango-section-inner {
	max-width: var(--mango-content-width);
	padding-inline: 16px;
}

.mango-section-full_width > .mango-section-inner {
	max-width: none;
}

/* Ancho de la ventana: rompe cualquier contenedor del tema. */
.mango-section-viewport,
.mango-container--viewport {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.mango-section-viewport > .mango-section-inner,
.mango-container--viewport > .mango-container-inner {
	max-width: none;
}

.mango-section-height-full {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.mango-section-height-full > .mango-section-inner {
	align-items: center;
}

/**
 * La separación entre columnas se aplica como relleno de la propia columna
 * (box-sizing: border-box), no con gap: así los anchos en % siguen sumando
 * 100 % y las columnas no saltan de línea.
 */
.mango-column {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	padding-inline: 10px;
}

/* Espacio entre columnas predefinido (relleno a cada lado). */
.mango-section-gap-no > .mango-section-inner > .mango-column { padding-inline: 0; }
.mango-section-gap-narrow > .mango-section-inner > .mango-column { padding-inline: 5px; }
.mango-section-gap-default > .mango-section-inner > .mango-column { padding-inline: 10px; }
.mango-section-gap-extended > .mango-section-inner > .mango-column { padding-inline: 15px; }
.mango-section-gap-wide > .mango-section-inner > .mango-column { padding-inline: 20px; }
.mango-section-gap-wider > .mango-section-inner > .mango-column { padding-inline: 30px; }

.mango-column > .mango-column-wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	position: relative;
}

.mango-widgets-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

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

.mango-container {
	position: relative;
	display: flex;
	width: 100%;
}

.mango-container > .mango-container-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-inline: auto;
	gap: var(--mango-gap);
	position: relative;
	z-index: 1;
}

.mango-container--boxed > .mango-container-inner {
	max-width: var(--mango-content-width);
	padding-inline: 16px;
}

.mango-container--full > .mango-container-inner {
	max-width: none;
	padding-inline: 0;
}

.mango-background-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
}

/* --------------------------------------------------------------------
 * Widgets
 * ----------------------------------------------------------------- */

.mango-widget {
	position: relative;
	max-width: 100%;
}

.mango-widget-container > *:first-child {
	margin-top: 0;
}

.mango-widget-container > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------
 * Visibilidad responsive
 * ----------------------------------------------------------------- */

@media (min-width: 1025px) {
	.mango-hidden-desktop {
		display: none !important;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.mango-hidden-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.mango-hidden-mobile {
		display: none !important;
	}

	.mango-section > .mango-section-inner {
		flex-direction: column;
	}

	/* En columna, flex-basis pasa a ser altura: hay que neutralizarlo. */
	.mango-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}
}

/* --------------------------------------------------------------------
 * Plantillas de página
 * ----------------------------------------------------------------- */

body.mango-template-canvas .mango-canvas,
body.mango-template-full-width .mango-site-main {
	width: 100%;
}

.mango-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mango-site-main {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------
 * Contenido por defecto del Theme Builder
 * ----------------------------------------------------------------- */

.mango-default-content {
	max-width: var(--mango-content-width, 1140px);
	margin-inline: auto;
	padding: 48px 16px;
}

.mango-default-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
	margin-top: 32px;
}

.mango-default-post-title {
	font-size: 1.25rem;
	margin: 12px 0 8px;
}

.mango-default-post-title a {
	text-decoration: none;
	color: inherit;
}

.mango-default-post-thumb img {
	border-radius: 10px;
}

/* --------------------------------------------------------------------
 * Fondo por capas
 * ----------------------------------------------------------------- */

.mango-has-bg-layers {
	position: relative;
}

.mango-bg-layers {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.mango-bg-layer {
	position: absolute;
	inset: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* El contenido siempre por encima de las capas. */
.mango-has-bg-layers > .mango-widget-container,
.mango-has-bg-layers > .mango-container-inner,
.mango-has-bg-layers > .mango-section-inner,
.mango-has-bg-layers > .mango-column-wrap,
.mango-has-bg-layers > .mango-background-overlay {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------
 * Div block
 * ----------------------------------------------------------------- */

.mango-div-block {
	position: relative;
	display: block;
	min-width: 0;
}

.mango-div-block > .mango-element {
	position: relative;
	z-index: 1;
}

/* Un desplegable abierto (mini carrito, resultados de búsqueda, menú…) eleva los
   contenedores que lo contienen: cada contenedor crea su propio contexto de
   apilamiento y los posteriores se pintarían encima. */
.mango-container:has([data-mango-open], .mango-nav-menu.is-open, .mango-nav-menu li:is(:hover, :focus-within)) > .mango-container-inner,
.mango-section:has([data-mango-open], .mango-nav-menu.is-open, .mango-nav-menu li:is(:hover, :focus-within)) > .mango-section-inner,
.mango-div-block:has([data-mango-open], .mango-nav-menu.is-open, .mango-nav-menu li:is(:hover, :focus-within)) > .mango-element {
	z-index: 60;
}

/* --------------------------------------------------------------------
 * Transiciones de página
 * ----------------------------------------------------------------- */

body.mango-transition {
	--mango-transition-duration: 400ms;
}

body.mango-transition-fade.mango-transition-in { animation: mangoPageFade var(--mango-transition-duration) ease both; }
body.mango-transition-fade.mango-transition-out { animation: mangoPageFadeOut 260ms ease both; }

body.mango-transition-slide-up.mango-transition-in { animation: mangoPageSlide var(--mango-transition-duration) ease both; }
body.mango-transition-slide-up.mango-transition-out { animation: mangoPageFadeOut 260ms ease both; }

body.mango-transition-zoom.mango-transition-in { animation: mangoPageZoom var(--mango-transition-duration) ease both; }
body.mango-transition-zoom.mango-transition-out { animation: mangoPageFadeOut 260ms ease both; }

@keyframes mangoPageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mangoPageFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mangoPageSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mangoPageZoom { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	body[class*="mango-transition"] { animation: none !important; }
}