/* ==========================================================================
   MAYA - paleta semantica del contenido
   Las paginas usan has-ink-color, has-primary-background-color, etc.
   Esas clases nunca se definieron: el texto heredaba el color del contenedor,
   y dentro de un bloque cover WordPress lo pone en blanco. De ahi que el hero
   fuera ilegible. Aqui quedan atadas a los tokens de MAYA.
   ========================================================================== */

/* --- Texto ---------------------------------------------------------------- */

.has-ink-color         { color: var(--maya-green); }
.has-ink-inverse-color { color: var(--maya-white); }
.has-primary-color     { color: var(--maya-green); }
.has-accent-color      { color: var(--maya-teal); }
.has-muted-color       { color: var(--maya-muted); }

/* --- Fondos --------------------------------------------------------------- */

.has-surface-background-color     { background-color: var(--maya-white); }
.has-surface-alt-background-color { background-color: var(--maya-mint); }
.has-primary-background-color     { background-color: var(--maya-mustard); }

/* "ink" como FONDO es el verde mas oscuro, no el de texto: encima va blanco. */
.has-ink-background-color         { background-color: var(--maya-ink); }

/* ==========================================================================
   Bloque cover (el hero)
   El hero ya traia su propio velo (.wp-block-cover__background) al 60%.
   Ese velo apuntaba a has-ink-background-color, que nunca estuvo definido:
   por eso la foto clara se veia tal cual y el texto blanco desaparecia.
   Con el velo ya atado a --maya-ink solo falta subir su opacidad.
   ========================================================================== */

/* Un cover con texto inverso es un cover de fondo oscuro. */
.wp-block-cover:has(.has-ink-inverse-color) {
	color: var(--maya-white);
}

/* 60% sobre una foto clara deja el blanco en 3.9:1. Al 75% sube a 5.9:1. */
.wp-block-cover:has(.has-ink-inverse-color) .wp-block-cover__background.has-background-dim {
	opacity: .75;
}

/* Un cover sin texto inverso es claro: el texto va en verde. */
.wp-block-cover:not(:has(.has-ink-inverse-color)) {
	color: var(--maya-green);
}

/* El titular del hero no debe desbordarse en 375px. */
.wp-block-cover h2 {
	font-size: clamp(28px, 8.2vw, 44px);
	line-height: 1.12;
	text-wrap: balance;
}

.wp-block-cover p {
	text-wrap: pretty;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.wp-block-button__link,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--maya-tap);
	padding: 12px 26px;
	border-radius: var(--maya-radius-pill);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-decoration: none;
	line-height: 1.2;
}

/* CTA principal: mostaza con texto verde muy oscuro = 5.27:1.
   Antes era blanco sobre mostaza = 2.28:1, ilegible al sol. */
.wp-block-button__link.has-primary-background-color,
.wp-block-button.is-style-fill > .wp-block-button__link {
	background-color: var(--maya-mustard);
	color: var(--maya-ink);
	border: 1px solid transparent;
}

.wp-block-button__link.has-primary-background-color:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:hover {
	background-color: var(--maya-mustard-dark);
	color: var(--maya-ink);
}

/* Boton secundario de contorno. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid var(--maya-green);
	color: var(--maya-green);
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--maya-green);
	color: var(--maya-white);
}

/* Botones de WooCommerce con la misma identidad. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
button.single_add_to_cart_button {
	background-color: var(--maya-mustard);
	color: var(--maya-ink);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
button.single_add_to_cart_button:hover {
	background-color: var(--maya-mustard-dark);
	color: var(--maya-ink);
}

/* ==========================================================================
   WooCommerce: precios
   El verde oliva que trae por defecto daba 3.41:1 sobre blanco a 20px.
   El precio es lo que mas se mira en una tienda: pasa a verde oscuro, 6.48:1.
   ========================================================================== */

.woocommerce .price,
.woocommerce span.price,
.woocommerce p.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price .amount,
.woocommerce .price bdi {
	color: var(--maya-green);
	font-weight: 700;
}

/* Precio anterior tachado: apoyo, no protagonista. */
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce .price del bdi {
	color: var(--maya-muted);
	font-weight: 500;
	opacity: 1;
}

/* Precio rebajado. */
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce .price ins bdi {
	color: var(--maya-green);
	text-decoration: none;
	font-weight: 700;
}

/* ==========================================================================
   Ritmo de lectura en movil
   ========================================================================== */

.entry-content p,
.wp-block-post-content p {
	line-height: 1.65;
}

/* Los titulos de seccion no deben partirse feo en pantallas estrechas. */
.wp-block-heading {
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Etiquetas tipo "CATEGORIAS" o "SELECCION BOTANICA". */
.wp-block-heading.has-small-font-size,
p.has-small-font-size {
	letter-spacing: .12em;
}

/* ==========================================================================
   Margenes laterales en movil
   Hello Elementor da 10px a .site-main. Los bloques "alignfull" se salen de
   ese relleno con un margen negativo para ocupar todo el ancho, y ninguno
   trae relleno lateral propio: solo arriba y abajo. Resultado, el texto
   quedaba pegado al borde de la pantalla en nosotros, contacto, ayuda y
   legal. El fondo si debe llegar al borde; el texto no.
   ========================================================================== */

:root {
	--maya-gutter: 16px;
}

.site-main {
	padding-left: var(--maya-gutter);
	padding-right: var(--maya-gutter);
}

.wp-block-group.alignfull,
.wp-block-columns.alignfull,
.wp-block-cover.alignfull {
	padding-left: var(--maya-gutter);
	padding-right: var(--maya-gutter);
}

/* Un cover ya centra su contenido; el relleno solo evita que una palabra
   larga toque el borde en pantallas de 320px. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	width: 100%;
}

/* El contenido de la tienda y de las fichas usa el relleno de .site-main. */
.woocommerce .site-main {
	padding-left: var(--maya-gutter);
	padding-right: var(--maya-gutter);
}

@media (min-width: 600px) {
	:root {
		--maya-gutter: 24px;
	}
}

@media (min-width: 900px) {
	:root {
		--maya-gutter: 32px;
	}
}

/* Nada debe provocar barra horizontal. */
html,
body {
	overflow-x: hidden;
}

/* ==========================================================================
   .alignwide fuera de la pantalla
   theme.css de Hello Elementor aplica "margin-inline: -80px" a .alignwide
   sin condicion de ancho. En un telefono eso saca el bloque 80px por cada
   lado: el carrito aparecia cortado en x = -70. El margen negativo solo
   tiene sentido cuando sobra espacio.
   ========================================================================== */

.alignwide {
	margin-inline: 0;
}

@media (min-width: 1100px) {
	.alignwide {
		margin-inline: -80px;
	}
}

/* ==========================================================================
   El relleno base de .site-main
   theme.css lo fija en 10px bajo 575px con un selector mas especifico
   (body:not([class*="elementor-page-"]) .site-main), asi que hay que
   igualarlo para que la tienda y las fichas respiren como el resto.
   ========================================================================== */

@media (max-width: 575px) {
	body:not([class*="elementor-page-"]) .site-main {
		padding-inline: var(--maya-gutter);
	}
}