/*
 * A Better Meal — UI/UX audit fixes (audit 2026-10-02)
 *
 * Each block is tagged with its checklist ID (ABM-xx).
 * Selectors are prefixed with `body` so they win over Elementor's generated
 * CSS regardless of load order — this file can be pasted as-is into
 * Elementor > Site Settings > Custom CSS on live.
 *
 * Element IDs: About = page 1, Features = page 149, Home = page 41,
 * Footer = template 51053.
 */

/* ── ABM-01 / ABM-02 · About: cap section widths ─────────────────────── */

/* Two-column founder blocks: one boxed width, fixed gap. */
body .elementor-1 .elementor-element.elementor-element-5962895,
body .elementor-1 .elementor-element.elementor-element-2e0b0c3 {
	--width: min(90%, var(--container-max-width, 1140px));
	--gap: 48px;
	--column-gap: 48px;
}

/* "Say hello to our head chef" sits next to its photo, not at the far edge. */
@media (min-width: 768px) {
	body .elementor-1 .elementor-element.elementor-element-1ddc98f .elementor-headline {
		text-align: start;
	}
}

/* Story text block: readable line length (~70 characters per line). */
body .elementor.elementor-1 .elementor-element.elementor-element-3b896eb,
body .elementor.elementor-1 .elementor-element.elementor-element-84021a4,
body .elementor.elementor-1 .elementor-element.elementor-element-e4b7e87,
body .elementor.elementor-1 .elementor-element.elementor-element-5d72afc,
body .elementor.elementor-1 .elementor-element.elementor-element-9e89187 {
	width: 100%;
	max-width: 45rem;
	margin-inline: auto;
	align-self: center;
}

/* ── ABM-03 · About: "Our Secret Ingredients" ────────────────────────── */

/* Keep the heading in view while the values scroll, instead of an empty column. */
@media (min-width: 1025px) {
	body .elementor-1 .elementor-element.elementor-element-69c3fa9 {
		position: sticky;
		top: 120px;
	}
}

/* The lazy-loaded grandkid photo shows a tinted placeholder instead of blank white.
   (The four value icons are now distinct transparent artwork, so no tint.) */
body .elementor-1 img.wp-image-51396 {
	background-color: #ECF7E4;
}

/* ── ABM-04 · Features: logo bands show every logo at once ───────────── */

/* Heading on top, one centred row of logos underneath. */
body .elementor-149 .elementor-element.elementor-element-4e8eec0,
body .elementor-149 .elementor-element.elementor-element-ee59fb0 {
	--flex-direction: column;
	--align-items: center;
	--justify-content: center;
	--gap: 24px;
	--row-gap: 24px;
	--min-height: 0px;
	--padding-top: 48px;
	--padding-bottom: 48px;
}

body .elementor.elementor-149 .elementor-element.elementor-element-7a81d23,
body .elementor.elementor-149 .elementor-element.elementor-element-edc0652 {
	--container-widget-width: 100%;
	width: 100%;
	max-width: var(--container-max-width, 1140px);
	align-self: center;
}

body .elementor-149 .elementor-element-7a81d23 .swiper,
body .elementor-149 .elementor-element-edc0652 .swiper {
	overflow: visible;
}

body .elementor-149 .elementor-element-7a81d23 .swiper-wrapper,
body .elementor-149 .elementor-element-edc0652 .swiper-wrapper {
	transform: none !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 56px;
	height: auto;
}

body .elementor-149 .elementor-element-7a81d23 .swiper-slide,
body .elementor-149 .elementor-element-edc0652 .swiper-slide {
	width: auto !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	visibility: visible !important;
	pointer-events: auto !important;
	margin: 0 !important;
}

body .elementor-149 .elementor-element-7a81d23 .swiper-slide-image,
body .elementor-149 .elementor-element-edc0652 .swiper-slide-image {
	height: 80px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

@media (max-width: 767px) {
	body .elementor-149 .elementor-element-7a81d23 .swiper-wrapper,
	body .elementor-149 .elementor-element-edc0652 .swiper-wrapper {
		gap: 16px 28px;
	}

	body .elementor-149 .elementor-element-7a81d23 .swiper-slide-image,
	body .elementor-149 .elementor-element-edc0652 .swiper-slide-image {
		height: 56px;
		max-width: 130px;
	}
}

/* ── ABM-05 / ABM-16 · Large screens ─────────────────────────────────── */

/* Heroes: align text to the content container and stop height growing with the screen. */
@media (min-width: 1025px) {
	body .elementor-149 .elementor-element.elementor-element-f72662b,
	body .elementor-1 .elementor-element.elementor-element-b990d82 {
		--padding-left: max(5%, calc((100% - var(--container-max-width, 1140px)) / 2));
		--min-height: min(80vh, 760px);
	}
}

/* Widescreen (≥1920): wider container and larger base type. */
@media (min-width: 1920px) {
	html {
		font-size: 112.5%;
	}

	body .e-con {
		--container-max-width: 1320px;
	}
}

/* ── ABM-06 · Home + landing pages: image wider than the phone screen ── */

body .elementor-widget-image img.wp-image-51085 {
	max-width: 100% !important;
}

/* ── ABM-07 · Long URLs in body text wrap instead of widening the page ─ */

body .elementor-widget-text-editor a,
body .elementor-widget-theme-post-content a,
body .entry-content a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ── ABM-08 · Legal pages: readable column ───────────────────────────── */

body.page-id-154 .elementor .elementor-element.elementor-widget-text-editor,
body.page-id-158 .elementor .elementor-element.elementor-widget-text-editor,
body.page-id-51594 .elementor .elementor-element.elementor-widget-text-editor,
body.page-id-51594 .elementor .elementor-element.elementor-widget-theme-post-content {
	width: 100%;
	max-width: 47.5rem;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ── ABM-10 · Features at tablet: no horizontal overflow ─────────────── */

@media (max-width: 1024px) {
	body .elementor-149 .elementor-element.elementor-element-4e37e92 {
		--width: 100%;
	}

	/* "Built for real life" arrows were pinned at left: 900px. */
	body .elementor-149 .elementor-element.elementor-element-60e7572 {
		--e-n-carousel-arrow-prev-left-position: calc(100% - 240px);
		--e-n-carousel-arrow-next-right-position: 100px;
	}

}

/* Keep the subtitle clear of the desktop carousel's arrows (tablet only; phones use a separate carousel). */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor.elementor-149 .elementor-element.elementor-element-99f14c1 {
		max-width: calc(100% - 260px);
	}
}

/* ── ABM-11 / ABM-12 · Phone heroes: text first, photo as an inset card ──
   The desktop background photo is dropped on phones and redrawn as a rounded
   card under the text (::after), so the copy never sits on the photo. */

@media (max-width: 767px) {
	body .elementor-149 .elementor-element.elementor-element-f72662b,
	body .elementor-1 .elementor-element.elementor-element-b990d82 {
		--justify-content: flex-start;
		--min-height: 0px;
		--padding-top: var(--abm-section);
		--padding-right: 20px;
		--padding-left: 20px;
		/* card height + 32px gap above it; the card sits on the section's bottom edge,
		   so the next section's own top padding is the only space below it */
		--padding-bottom: calc((100vw - 40px) * 0.75 + 32px);
		--overlay-opacity: 0;
		background-image: none !important;
		background-color: #fff;
	}

	body .elementor-149 .elementor-element.elementor-element-f72662b::after,
	body .elementor-1 .elementor-element.elementor-element-b990d82::after {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 0;
		aspect-ratio: 4 / 3;
		border-radius: 20px;
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0 8px 24px rgba(35, 31, 32, 0.12);
	}

	body .elementor-149 .elementor-element.elementor-element-f72662b::after {
		background-image: url("/wp-content/uploads/features-hero-scaled.webp");
		background-size: auto 120%;
		background-position: 92% 60%;
	}

	body .elementor-1 .elementor-element.elementor-element-b990d82::after {
		background-image: url("/wp-content/uploads/mark-hero-1-scaled.webp");
		background-position: right center;
	}

	/* Even hero rhythm: drop the 5px spacer blocks; 32px before the buttons. */
	body .elementor-149 .elementor-element.elementor-element-879f139,
	body .elementor-1 .elementor-element.elementor-element-e54c596 {
		display: none;
	}

	body .elementor-149 .elementor-element.elementor-element-2e15a9c,
	body .elementor-1 .elementor-element.elementor-element-f827f8e {
		margin-top: 12px;
	}

	/* About headings */
	body .elementor-1 .elementor-element.elementor-element-1ddc98f .elementor-headline,
	body .elementor-1 .elementor-element.elementor-element-f13253e .elementor-headline {
		font-size: 1.875rem !important;
		line-height: 1.2;
		text-align: start;
	}
}

/* ── ABM-13 · Footer: remove the empty band under the links ──────────── */

body .elementor-51053 .elementor-element.elementor-element-407c0d02 {
	--min-height: 0px;
	--padding-bottom: 48px;
}

/* ── ABM-15 · Phone tap targets ≥ 44px ───────────────────────────────── */

@media (max-width: 767px) {
	body .elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	body .elementor-nav-menu--dropdown a.elementor-item,
	body [data-elementor-type="footer"] .elementor-nav-menu a.elementor-item,
	body [data-elementor-type="footer"] .elementor-icon-list-item > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	body .elementor-swiper-button {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Bigger dots with a 24×44 hit area. */
	body .swiper-pagination-bullet {
		position: relative;
		width: 10px !important;
		height: 10px !important;
		margin: 0 7px !important;
	}

	body .swiper-pagination-bullet::after {
		content: "";
		position: absolute;
		inset: -17px -7px;
	}
}

/* ── ABM-17 · Phone text no smaller than 14px ────────────────────────── */

@media (max-width: 767px) {
	body .elementor-testimonial__text {
		font-size: 1rem !important;
	}
}

/* ── ABM-14 · Contrast: dark green for text + button fills ───────────────
 * #5AB547 on white is 2.58:1. Rather than recolour every widget, the green
 * globals are re-pointed to #2E7D32 (5.13:1 on white) only on buttons, text
 * panels and text elements. Dividers, borders, squiggles, icons and section
 * backgrounds keep #5AB547. Nav grey #808285 → #5F6368 (6.0:1).
 */
:root {
	--abm-green-text: #2E7D32;
	--abm-grey-text: #5F6368;
}

/* Fills behind white text */
body .elementor-button,
body .elementor-flip-box__layer,
body .elementor-cta__button,
body .elementor-ribbon-inner,
body .e-n-tab-title,
body .e-search-submit,
/* Text */
body .elementor-heading-title,
body .elementor-widget-text-editor,
body .elementor-headline-dynamic-text,
body .elementor-nav-menu a,
body .elementor-icon-list-text,
body .elementor-icon-list-item > a,
body .elementor-post-info,
body .elementor-widget-theme-post-content a,
body .elementor-testimonial__title,
body .e-filter-item,
body a {
	--e-global-color-primary: var(--abm-green-text);
	--e-global-color-accent: var(--abm-green-text);
	--e-global-color-fda56db: var(--abm-green-text);
	--e-global-color-a54b704: var(--abm-grey-text);
}

/* Widget-level colour variables (Elementor resolves these on the widget, so
   the global re-point above does not reach them). */
body .elementor .elementor-element.elementor-element-0fb0803 {
	--n-tabs-title-background-color-active: var(--abm-green-text);
}

body .elementor .elementor-element.elementor-element-9ab87b4,
body .elementor .elementor-element.elementor-element-4daeabc,
body .elementor .elementor-element.elementor-element-bf80fd3 {
	--dynamic-text-color: var(--abm-green-text);
}

body .elementor .elementor-element.elementor-element-7ffb15b {
	--e-filter-normal-text-color: var(--abm-grey-text);
}

/* Copyright bar: white text on grey */
body .elementor .elementor-element.elementor-element-82d1c98 {
	--e-global-color-a54b704: var(--abm-grey-text);
}

/* Blog search button: white text on #B4B4B4 */
body .elementor .elementor-element.elementor-element-95defee .e-search-submit {
	background-color: var(--abm-grey-text);
}

body .elementor .elementor-element.elementor-element-95defee .e-search-submit:hover {
	background-color: #3C4043;
}

/* Green typed inline into heading text (e.g. "Dinner is Handled.") */
body .elementor-heading-title [style*="5AB547" i],
body .elementor-widget-text-editor [style*="5AB547" i] {
	color: var(--abm-green-text) !important;
}

/* ── ABM-21 · Contact at 360px: form field wrapper's negative half-gap
   margins push the page 0.5px wide; clip that section horizontally. ── */
@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-a4979c1 {
		overflow-x: clip;
	}
}

/* ── ABM-15 (follow-up) · Phone menu: full-width panel under the header ──
   The dropdown used to sit inside the 53px burger column, and Elementor's
   default #3F444B active/hover background showed behind green text. */
@media (max-width: 767px) {
	body [data-elementor-type="header"] .elementor-widget-nav-menu.elementor-nav-menu--toggle,
	body [data-elementor-type="header"] .elementor-widget-nav-menu.elementor-nav-menu--toggle > .elementor-widget-container {
		position: static;
	}

	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		background: #fff;
		box-shadow: inset 0 1px 0 #E5E7EB, 0 16px 24px rgba(35, 31, 32, 0.12);
		z-index: 1000;
	}

	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown > ul {
		padding: 8px 0 16px;
	}

	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown a.elementor-item {
		justify-content: flex-start;
		text-align: left;
		min-height: 52px;
		padding: 0 24px !important;
		font-size: 17px;
		color: #231F20 !important;
		background: transparent !important;
		border-bottom: 1px solid #F1F1F1;
	}

	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown a.elementor-item:focus-visible {
		background: #F3F8F0 !important;
		color: var(--abm-green-text) !important;
		outline: 2px solid var(--abm-green-text);
		outline-offset: -2px;
	}

	/* Current page */
	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		background: #ECF7E4 !important;
		color: var(--abm-green-text) !important;
		font-weight: 600;
		box-shadow: inset 4px 0 0 var(--abm-green-text);
	}

	/* Last item ("Try Now") as the call-to-action button */
	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown li:last-child > a.elementor-item {
		justify-content: center;
		margin: 16px 24px 0;
		min-height: 48px;
		border-bottom: 0;
		border-radius: 999px;
		background: var(--abm-green-text) !important;
		color: #fff !important;
		font-weight: 600;
	}
}

/* Hover tint only where hover exists, so taps don't leave a stuck highlight. */
@media (max-width: 767px) and (hover: hover) {
	body [data-elementor-type="header"] .elementor-nav-menu--toggle .elementor-nav-menu--dropdown li:not(:last-child) > a.elementor-item:not(.elementor-item-active):hover {
		background: #F3F8F0 !important;
		color: var(--abm-green-text) !important;
	}
}

/* ── Layout rhythm · one side gutter and one section spacing ─────────────
   Gutter: 20px phones, 32px tablets (desktop uses the boxed container).
   Section spacing: 48px phones, 64px tablets, 80px desktop. */
:root {
	--abm-gutter: 20px;
	--abm-section: 48px;
}

@media (min-width: 768px) {
	:root {
		--abm-gutter: 32px;
		--abm-section: 64px;
	}
}

@media (min-width: 1025px) {
	:root {
		--abm-section: 80px;
	}
}

@media (max-width: 1024px) {
	/* About + Features: sections carry the gutter; plain layout containers inside add none. */
	body .elementor-1 .elementor-element.elementor-element-5962895,
	body .elementor-1 .elementor-element.elementor-element-2e0b0c3,
	body .elementor-1 .elementor-element.elementor-element-6b87ca8,
	body .elementor-1 .elementor-element.elementor-element-cf5db8f,
	body .elementor-149 .elementor-element.elementor-element-e3d64c8,
	body .elementor-149 .elementor-element.elementor-element-326052b,
	body .elementor-149 .elementor-element.elementor-element-4e8eec0,
	body .elementor-149 .elementor-element.elementor-element-4c11239,
	body .elementor-149 .elementor-element.elementor-element-3fceace,
	body .elementor-149 .elementor-element.elementor-element-8af346a,
	body .elementor-149 .elementor-element.elementor-element-ee59fb0 {
		--padding-left: var(--abm-gutter);
		--padding-right: var(--abm-gutter);
	}

	body .elementor-1 .elementor-element-5962895 .e-con,
	body .elementor-1 .elementor-element-2e0b0c3 .e-con,
	body .elementor-1 .elementor-element-cf5db8f .e-con,
	body .elementor-149 .elementor-element-e3d64c8 .e-con,
	body .elementor-149 .elementor-element-3fceace .e-con,
	body .elementor-149 .elementor-element-4c11239 .e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* Hero text starts on the gutter too (phones already use 20px). */
	body .elementor-149 .elementor-element.elementor-element-f72662b,
	body .elementor-1 .elementor-element.elementor-element-b990d82 {
		--padding-left: var(--abm-gutter);
		--padding-right: var(--abm-gutter);
	}

	/* Founder blocks: full width inside the gutter (the 90% cap is for desktop). */
	body .elementor-1 .elementor-element.elementor-element-5962895,
	body .elementor-1 .elementor-element.elementor-element-2e0b0c3 {
		--width: 100%;
	}

	/* About story column: full gutter width (it was 90% of a 10px-padded box). */
	body .elementor.elementor-1 .elementor-element.elementor-element-6b87ca8 > .elementor-element {
		margin-inline: auto;
	}
}

/* Features: equal spacing between content sections; drop the empty spacer blocks. */
body .elementor-149 .elementor-element.elementor-element-d02eefa,
body .elementor-149 .elementor-element.elementor-element-a9e4fca,
body .elementor-149 .elementor-element.elementor-element-8d6eb8a,
body .elementor-149 .elementor-element.elementor-element-26739c0 {
	display: none;
}

body .elementor-149 .elementor-element.elementor-element-e3d64c8 {
	--padding-top: var(--abm-section);
	--padding-bottom: 24px;
}

body .elementor-149 .elementor-element.elementor-element-326052b {
	--padding-top: 0px;
	--padding-bottom: var(--abm-section);
}

body .elementor-149 .elementor-element.elementor-element-4e8eec0,
body .elementor-149 .elementor-element.elementor-element-ee59fb0 {
	--padding-top: var(--abm-section);
	--padding-bottom: var(--abm-section);
}

body .elementor-149 .elementor-element.elementor-element-4c11239 {
	--min-height: 0px;
	--padding-top: var(--abm-section);
	--padding-bottom: var(--abm-section);
}

body .elementor-149 .elementor-element.elementor-element-3fceace {
	--padding-top: var(--abm-section);
	--padding-bottom: var(--abm-section);
}

@media (max-width: 767px) {
	/* The phone carousel lives in its own container below the heading. */
	body .elementor-149 .elementor-element.elementor-element-3fceace {
		--padding-bottom: 24px;
	}

	body .elementor-149 .elementor-element.elementor-element-8af346a {
		--width: 100%;
		--padding-top: 0px;
		--padding-bottom: var(--abm-section);
	}

	/* "Built for real life" phone slider: each card fills its slide (was a fixed 300px). */
	body .elementor-149 .elementor-element-dd9b4a5 .elementor-widget-flip-box {
		--container-widget-width: 100%;
		width: 100% !important;
		max-width: 100%;
	}

	body .elementor-149 .elementor-element-dd9b4a5 .swiper-slide > .e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}
}

/* Site-wide: every top-level section on pages and posts uses the same side gutter
   on phones and tablets (Elementor's default is 10px, some sections used % padding). */
@media (max-width: 1024px) {
	body [data-elementor-type="wp-page"] > .elementor-element.e-con.e-con,
	body [data-elementor-type="wp-post"] > .elementor-element.e-con.e-con {
		--padding-left: var(--abm-gutter);
		--padding-right: var(--abm-gutter);
	}
}

/* Contact FAQ column: drop the extra 7px left inset on phones so it sits on the gutter. */
@media (max-width: 767px) {
	body .elementor-51710 .elementor-element.elementor-element-462d7a9 {
		--padding-left: 0px;
		--padding-right: 0px;
	}
}

/* Phones: the section after each hero starts exactly one section-space below the hero card. */
body .elementor-149 .elementor-element.elementor-element-4e37e92 {
	--padding-top: 0px;
}

@media (max-width: 767px) {
	body .elementor-1 .elementor-element.elementor-element-5962895 {
		--padding-top: var(--abm-section);
	}

	body .elementor-1 .elementor-element.elementor-element-1a17c97 {
		--padding-top: 0px;
	}
}

/* Features "3 Simple Steps" tabs on phones: the step image was a fixed 300px (overflowed the
   card below ~400px) and the card was 90% wide, so it didn't line up with the tab buttons. */
@media (max-width: 767px) {
	body .elementor-149 .elementor-element-0fb0803 .elementor-widget-image img {
		max-width: 100% !important;
		height: auto;
	}

	body .elementor-149 .elementor-element.elementor-element-fafde23,
	body .elementor-149 .elementor-element.elementor-element-ae17016,
	body .elementor-149 .elementor-element.elementor-element-0b4abc3 {
		--width: 100%;
	}

	/* Tab panels add no inset of their own, so card edges match the tab buttons. */
	body .elementor-149 .elementor-element.elementor-element-686406c,
	body .elementor-149 .elementor-element.elementor-element-762b33a,
	body .elementor-149 .elementor-element.elementor-element-b61f7b0 {
		--padding-left: 0px;
		--padding-right: 0px;
	}
}