/* ============================================================================
   Theme compatibility
   ----------------------------------------------------------------------------
   The rebuilt pages were designed on a site running hello-elementor, where
   headings inherit their colour from the section around them. The live site runs
   Kadence, which sets an explicit heading colour (#194c00). That override wins,
   so any heading that was meant to inherit turned dark green, including cream
   headings sitting on the dark green bands, which made them invisible.

   Restoring inheritance inside the mev wrappers only. Anywhere the design sets a
   colour deliberately, Elementor emits a per-element rule that is more specific
   than this, so those are untouched. Nothing outside a mev wrapper is affected,
   which means the blog, and any page we have not rebuilt, keeps Kadence's styling.
   ============================================================================ */

.mev-lv :where(h1, h2, h3, h4, h5, h6),
.mev-cnd :where(h1, h2, h3, h4, h5, h6),
.mev-dlv :where(h1, h2, h3, h4, h5, h6),
.mev-about :where(h1, h2, h3, h4, h5, h6),
.mev-vr :where(h1, h2, h3, h4, h5, h6),
.mev-loc :where(h1, h2, h3, h4, h5, h6),
.mev-kw :where(h1, h2, h3, h4, h5, h6),
.mev-gal :where(h1, h2, h3, h4, h5, h6),
.mev-car :where(h1, h2, h3, h4, h5, h6),
.mev-cat :where(h1, h2, h3, h4, h5, h6),
.mev-com :where(h1, h2, h3, h4, h5, h6),
.mev-cmn :where(h1, h2, h3, h4, h5, h6),
.mev-contact :where(h1, h2, h3, h4, h5, h6),
.mev-clv :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Same story for the paragraph and list colour inside our sections. */
.mev-lv :where(p, li, blockquote),
.mev-cnd :where(p, li, blockquote),
.mev-dlv :where(p, li, blockquote),
.mev-about :where(p, li, blockquote),
.mev-vr :where(p, li, blockquote),
.mev-loc :where(p, li, blockquote),
.mev-kw :where(p, li, blockquote),
.mev-gal :where(p, li, blockquote),
.mev-car :where(p, li, blockquote),
.mev-cat :where(p, li, blockquote),
.mev-com :where(p, li, blockquote),
.mev-cmn :where(p, li, blockquote),
.mev-contact :where(p, li, blockquote) {
	color: inherit;
}

/* ---------------------------------------------------------------------------
   X (Twitter) icon.
   The header markup asks for Font Awesome's fa-x-twitter, but the site loads
   Font Awesome 5, which predates that glyph, so it rendered as an empty gap.
   Drawing the mark as a masked SVG instead: no font upgrade, and it inherits
   currentColor so it still matches the other icons on hover.
   --------------------------------------------------------------------------- */
i.fa-x-twitter::before,
.fab.fa-x-twitter::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--mev-x-icon) center / contain no-repeat;
	mask: var(--mev-x-icon) center / contain no-repeat;
}
:root {
	--mev-x-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Kadence puts a 24px top margin on its content wrapper. hello-elementor, which
   the pages were designed against, does not, so every rebuilt page gained a white
   band between the header and the first section. Removed for Elementor-built
   pages only, so ordinary theme pages and the blog keep Kadence's spacing.
   --------------------------------------------------------------------------- */
body.page-template-elementor_header_footer .wrap.hfeed,
body.page-template-elementor_header_footer .site > .wrap,
body.elementor-page .wrap.hfeed {
	margin-top: 0;
}

/* Kadence puts a 24px margin around the Elementor header and footer, which shows as a white
   strip above the dark contact bar and again as a gap above the footer on every page. */
body.page-template-elementor_header_footer .elementor-location-header,
body.page-template-elementor_header_footer .elementor-location-footer,
.site .elementor-location-header,
.site .elementor-location-footer { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Elementor leaves an empty container at the end of some pages. It has no content but still
   takes its padding, which reads as a stray white band above the footer. */
[data-elementor-type="wp-page"] > .e-con:last-child:not(:has(.elementor-widget)) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}

/* Top bar: the right-hand half holds the social icons. With the flowers link removed it had
   nothing pushing it over, so the icons sat mid-bar instead of at the right edge. */
header.elementor-location-header .e-con.e-child:has(> .elementor-widget-social-icons) {
	justify-content: flex-end !important;
}
header.elementor-location-header .elementor-widget-social-icons { margin-left: auto; }

/* ---- footer: OUR LOCATIONS ---- */
/* Addresses run to one, two or three lines, so "Get Directions" landed at a different height in
   each box. Stretch every card to the tallest in the row, then push the link to the bottom.
   Elementor sets its own widget margins, so these have to win outright. */
[data-elementor-type="footer"] .e-con:has(> .e-con > .elementor-widget-button a[href*="google.com/maps"]) {
	align-items: stretch !important;
}
[data-elementor-type="footer"] .e-con:has(> .elementor-widget-button a[href*="google.com/maps"]) {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	height: auto !important;
}
[data-elementor-type="footer"] .e-con > .elementor-widget-button:has(a[href*="google.com/maps"]) {
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

/* ---- footer: newsletter ---- */
/* The "Email" label sits dark-green on dark-green above the field, which reads as a stray word.
   The field already carries a placeholder, so the label is only needed by screen readers. */
[data-elementor-type="footer"] .elementor-field-label {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* the captcha was overlapping the field, give it its own row */
[data-elementor-type="footer"] .elementor-turnstile-field,
[data-elementor-type="footer"] .cf-turnstile {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	margin-top: .75rem;
}
[data-elementor-type="footer"] .elementor-form-fields-wrapper { align-items: flex-end; }

/* ---- page background ---- */
/* Sections whose own background is transparent show the page behind them. On staging that is
   BODY at rgb(254,247,240), the warm cream the design was built on. Kadence instead paints a
   .site wrapper pure white (--global-palette9), so those sections read as white boxes and the
   edge of every coloured band looked harsh. Matching staging's colour exactly.
   .content-bg is deliberately NOT included: the blog post cards use it and must stay white. */
body,
body.content-style-unboxed .site,
.site.wp-site-blocks { background-color: rgb(254, 247, 240) !important; }

/* ---- header nav: spacing and hairline dividers ----
   Nine top-level items now, so there is room to breathe. Padding steps down as the viewport
   narrows so the row always stays on one line; below 1025px the burger menu takes over.
   Dividers are a short vertical hairline in the brand forest green at low opacity, set on a
   pseudo-element so they sit centred on the text rather than running the full item height.
   Only between top-level items: never in the dropdowns, never in the mobile menu. */
@media (min-width: 1025px) {
	header.elementor-location-header nav .menu-item > a,
	header.elementor-location-header .elementor-nav-menu > li > a {
		padding-left: 13px !important;
		padding-right: 13px !important;
	}
	header.elementor-location-header nav > ul > li + li,
	header.elementor-location-header ul.elementor-nav-menu > li + li { position: relative; }
	header.elementor-location-header nav > ul > li + li::before,
	header.elementor-location-header ul.elementor-nav-menu > li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 13px;
		background: rgba(18, 61, 27, .16);
		pointer-events: none;
	}
	/* the dropdown panels are their own surface, no dividers inside them */
	header.elementor-location-header nav > ul ul li::before,
	header.elementor-location-header ul.elementor-nav-menu ul li::before { content: none !important; }
}
@media (min-width: 1025px) and (max-width: 1365px) {
	header.elementor-location-header nav .menu-item > a,
	header.elementor-location-header .elementor-nav-menu > li > a {
		padding-left: 9px !important;
		padding-right: 9px !important;
		letter-spacing: .4px !important;
	}
}
@media (min-width: 1025px) and (max-width: 1279px) {
	header.elementor-location-header nav .menu-item > a,
	header.elementor-location-header .elementor-nav-menu > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 13px !important;
		letter-spacing: 0 !important;
	}
}

/* ============================================================================
   MOBILE ONLY. Everything below is inside max-width:767px and cannot affect
   the desktop or tablet layout. Verified: header 148px at 1512 and 166px at
   768 are byte-identical before and after these rules.
   ============================================================================ */
@media (max-width: 767px) {

	/* --- header top bar ---
	   The two halves were each squeezed into 141px, wrapping the phone, email and
	   store links onto four lines and pushing the social icons onto two rows.
	   Stack them full width and keep the icons on a single row. */
	header.elementor-location-header .elementor-element-d100009,
	header.elementor-location-header .elementor-element-d100009 > .e-con-inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: .3rem !important;
		align-items: center !important;
		padding-top: .4rem !important;
		padding-bottom: .4rem !important;
	}
	header.elementor-location-header .elementor-element-d100008,
	header.elementor-location-header .elementor-element-d100007 {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		justify-content: center !important;
	}
	header.elementor-location-header .elementor-element-d100008,
	header.elementor-location-header .elementor-element-d100008 p {
		text-align: center !important;
		font-size: 11px !important;
		line-height: 1.7 !important;
	}
	header.elementor-location-header .elementor-element-d100007 .elementor-social-icons-wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: .55rem !important;
	}

	/* --- service panel close button ---
	   The close sits inside .mev-cs-panel-hero, and the panel itself was the
	   scrolling element, so on the longer panels (Grocery, Meat Shop) the button
	   scrolled off the top and the panel could not be dismissed at all.
	   A fixed position cannot help here: the panel carries a transform, which makes
	   it the containing block, so fixed children still scroll with it. Instead the
	   hero is pinned and only the body scrolls. */
	.mev-lv .mev-cs-panel { overflow-y: hidden !important; }
	.mev-lv .mev-cs-panel-hero { height: 13rem !important; flex: 0 0 auto !important; }
	.mev-lv .mev-cs-panel-body {
		overflow-y: auto !important;
		min-height: 0 !important;
		-webkit-overflow-scrolling: touch;
	}
	.mev-lv .mev-cs-close {
		z-index: 5 !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
	}
}