/*
 * Baba Ganoush – Elementor site. Loaded after v3.css.
 *
 * 1. Elementor wraps every widget in section > container > column > widget-wrap > widget > widget-container.
 *    On the live page (not inside the Elementor editor) those wrappers step out of the layout (display: contents),
 *    so the design's own sections sit directly in <main> exactly as in the v3 templates: the fixed header, the
 *    sticky category bar and filter rail, and the fixed WhatsApp button behave the same. Only sections made of
 *    Baba Ganoush widgets (class bge-flow) and the Baba Ganoush widgets themselves are affected; a normal Elementor
 *    section added by hand keeps Elementor's layout.
 * 2. In the editor the wrappers stay (so they can be selected), with no spacing between the widgets.
 * 3. Elementor's global colours and fonts are mapped to the design, so a normal Elementor widget added to a page
 *    (Heading, Text Editor, Button, Image) picks up the same look.
 */

body.bge:not(.elementor-editor-active) :is(.elementor-location-header, .elementor-location-footer, [data-elementor-type="wp-page"], [data-elementor-type="header"], [data-elementor-type="footer"]),
body.bge:not(.elementor-editor-active) :is(.elementor-section.bge-flow, .elementor-section.bge-flow > .elementor-container, .elementor-section.bge-flow .elementor-column, .elementor-section.bge-flow .elementor-widget-wrap, .elementor-section.bge-flow .elementor-row),
body.bge:not(.elementor-editor-active) :is([class*="elementor-widget-bge-"], [class*="elementor-widget-bge-"] > .elementor-widget-container) {
	display: contents;
}
body.bge .elementor-section.bge-flow > .elementor-container { max-width: none; }
body.bge .elementor-section.bge-flow .elementor-column > .elementor-widget-wrap { padding: 0; }
body.bge [class*="elementor-widget-bge-"] { margin: 0 !important; width: 100%; }
body.bge [class*="elementor-widget-bge-"] > .elementor-widget-container { transform: none; transition: none; }

/* Hello theme's skip link is replaced by the header widget's own; WordPress's screen-reader text helper */
body.bge .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Elementor global colours and fonts = the design tokens (used by normal Elementor widgets) */
body.bge {
	--e-global-color-primary: #111111;
	--e-global-color-secondary: #B5D334;
	--e-global-color-text: #111111;
	--e-global-color-accent: #B5D334;
	--e-global-typography-primary-font-family: "Bebas Neue", Impact, sans-serif;
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-secondary-font-family: "Inter", system-ui, sans-serif;
	--e-global-typography-secondary-font-weight: 600;
	--e-global-typography-text-font-family: "Inter", system-ui, sans-serif;
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-accent-font-family: "Inter", system-ui, sans-serif;
	--e-global-typography-accent-font-weight: 600;
}
/* a normal Elementor section added between the design's sections gets the design's side margins */
body.bge .elementor-section:not(.bge-flow) > .elementor-container { width: min(100% - 2 * var(--gutter), var(--wrap)); }

/* editor only: a widget with nothing to show still needs a handle */
body.elementor-editor-active .bge-empty { padding: 24px; border: 1px dashed #bbb; font: 14px/1.4 Inter, sans-serif; color: #666; text-align: center; }

/* editor only: the header's skip link (off-screen on the live page) would sit over the logo inside Elementor's wrapper */
body.elementor-editor-active .skip { display: none; }

/* editor only: the scroll-reveal and headline animations start hidden and are switched on by the page script, which ran
   before Elementor drew the widgets; inside the editor everything is shown straight away */
body.elementor-editor-active [data-reveal],
body.elementor-editor-active [data-reveal-group] > *,
body.elementor-editor-active [data-hero-lines] span,
body.elementor-editor-active [data-hero-lines] i { opacity: 1 !important; transform: none !important; clip-path: none !important; }