/**
 * Responsive fixes for Lemmony Agency child theme.
 * Restores mobile behavior that was disabled per-block in the editor
 * (isStackedOnMobile:false, fixed px widths on images/columns).
 */

/* Images resized in the editor keep a fixed inline width/height that
 * beats the theme's `img{max-width:100%}` rule. Force them fluid. */
.wp-block-image img,
.entry-content img,
.wp-block-post-content img {
	max-width: 100% !important;
	height: auto !important;
}

/* WooCommerce's Cart/Checkout blocks intentionally remove core's
 * print_emoji_styles() (it conflicts with their MutationObserver-based
 * re-renders), but wp_staticize_emoji still converts emoji in product
 * descriptions to <img class="emoji">. Without that missing CSS the
 * images render at their unconstrained natural size (400px+). Restore
 * core's own sizing rule so emoji match the surrounding text again. */
img.emoji,
img.wp-smiley {
	width: 1em !important;
	height: 1em !important;
	margin: 0 0.07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

@media (max-width: 781px) {
	/* Re-enable column stacking for rows where it was explicitly turned
	 * off. Core forces flex-wrap:nowrap !important on this class, so the
	 * flex-basis override alone just shrinks the columns instead of
	 * wrapping them — the wrap has to be restored too.
	 * Rows with a fixed-px column (icon + text feature rows, e.g. the
	 * pricing checklists) are meant to stay side by side — skip them. */
	.wp-block-columns.is-not-stacked-on-mobile:not(:has(> .wp-block-column[style*="flex-basis"][style*="px"])) {
		flex-wrap: wrap !important;
	}

	.is-not-stacked-on-mobile:not(:has(> .wp-block-column[style*="flex-basis"][style*="px"])) > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
		width: 100% !important;
	}

	.is-not-stacked-on-mobile > .wp-block-column img {
		width: auto !important;
	}
}

/* Header: nav is grouped into submenus (Servicios, Tienda) so the top
 * level only has 5 items. Since the header became a compact floating
 * pill (modern-redesign.css), the full menu + logo + socials + CTA
 * only need ~960px measured live, well under the old 1279px cutoff
 * this rule used for the previous, wider full-bar header. Lowered to
 * 1024px so tablets in landscape and small laptops get the real menu
 * instead of the hamburger. */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}