/**
 * Elementor Free + Pro compatibility layer
 * Arobase Designs Theme
 *
 * Loaded only when Elementor is active.
 */

/* ------------------------------------------------------------------
   1. Remove theme padding / max-width constraints on Elementor content
   ------------------------------------------------------------------ */

.arobase-elementor-page .site-main,
.arobase-elementor-full-width .site-main,
.elementor-page .site-main,
.elementor-template-full-width .site-main {
	padding: 0;
	margin: 0;
	max-width: none;
}

.arobase-elementor-full-width-content,
.arobase-elementor-canvas-content {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Canvas template – completely blank */
body.elementor-template-canvas,
body.arobase-elementor-canvas {
	background: #fff;
	margin: 0;
	padding: 0;
}
body.elementor-template-canvas .site-main,
body.arobase-elementor-canvas .site-main {
	display: contents;
}

/* ------------------------------------------------------------------
   2. Prevent duplicate page titles when Elementor builds the page
   ------------------------------------------------------------------ */

.arobase-elementor-page .entry-header,
.arobase-elementor-page .page-header,
.elementor-page .entry-header,
.elementor-page .page-header,
.elementor-editor-active .entry-header {
	display: none !important;
}

/* ------------------------------------------------------------------
   3. Full-width / stretched sections
   ------------------------------------------------------------------ */

.elementor-section.elementor-section-stretched,
.e-con.e-con-full {
	width: 100% !important;
	left: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure Elementor containers can break out of any residual theme constraints */
.elementor .elementor-section-wrap,
.elementor-section,
.e-con {
	max-width: none;
}

/* ------------------------------------------------------------------
   4. Theme header / footer coexistence with Theme Builder
   ------------------------------------------------------------------ */

/* When Theme Builder header is present, remove sticky theme header styles
   that could conflict (Theme Builder controls its own positioning). */
.elementor-location-header {
	position: relative;
	z-index: 999;
}

/* ------------------------------------------------------------------
   5. Global colour / typography alignment fallbacks
   ------------------------------------------------------------------ */

/* These act as sensible defaults if the user has not yet set
   Elementor Site Settings → Global Colors / Typography. */
:root {
	--e-global-color-primary:   #FC3D18;
	--e-global-color-secondary: #111111;
	--e-global-color-text:      #111111;
	--e-global-color-accent:    #FC3D18;
}

/* Button widgets inherit brand radius when using default styles */
.elementor-button,
.elementor-button-link {
	border-radius: 999px;
}

/* ------------------------------------------------------------------
   6. Forms – prevent theme form styles from fighting Elementor Forms
   ------------------------------------------------------------------ */

.elementor-widget-form input:not([type="submit"]),
.elementor-widget-form textarea,
.elementor-widget-form select {
	/* Let Elementor control form field appearance */
	border-radius: inherit;
	box-shadow: none;
}

/* ------------------------------------------------------------------
   7. WooCommerce + Elementor (when both are active)
   ------------------------------------------------------------------ */

.elementor-widget-woocommerce-products .product,
.elementor-widget-wc-products .product {
	/* Keep theme card styles from forcing layout on Elementor product grids */
	border: none;
	box-shadow: none;
	padding: 0;
	transform: none;
}

/* ------------------------------------------------------------------
   8. Editor / preview mode helpers
   ------------------------------------------------------------------ */

.elementor-editor-active .site-header {
	/* Keep header visible but non-interactive in editor if needed */
	pointer-events: auto;
}

/* ------------------------------------------------------------------
   9. Responsive safety – do not let theme media queries
      collapse Elementor columns unexpectedly
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.elementor-section .elementor-container,
	.e-con {
		/* Theme mobile rules should not force single-column on Elementor */
		display: flex; /* Elementor controls the actual flex/grid */
	}
}