/**
 * Elementor compatibility layer.
 *
 * Loaded after theme.css. Tailwind's Preflight flattens margins, list markers
 * and form control styling globally; Elementor's content widgets (Text Editor,
 * Post Content, TOC…) expect browser defaults inside their output. Rather than
 * dropping Preflight — the theme design depends on it — the defaults are
 * restored only inside the widgets that need them.
 */

/* -------------------------------------------------------------------------
 * 1. Restore flow content defaults inside Elementor content widgets.
 * ---------------------------------------------------------------------- */
.elementor-widget-text-editor .elementor-widget-container > *,
.elementor-widget-theme-post-content .elementor-widget-container > *,
.elementor-widget-theme-post-excerpt .elementor-widget-container > * {
	margin: revert;
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
	list-style: revert;
	margin: revert;
	padding: revert;
}

.elementor-widget-text-editor li,
.elementor-widget-theme-post-content li {
	list-style: revert;
}

.elementor-widget-text-editor blockquote,
.elementor-widget-theme-post-content blockquote {
	margin: revert;
	padding: revert;
}

/* Elementor's own list-based widgets must stay unbulleted. */
.elementor-widget-icon-list ul,
.elementor-widget-icon-list li,
.elementor-widget-nav-menu ul,
.elementor-widget-nav-menu li,
.elementor-widget-post-info ul,
.elementor-widget-post-info li,
.elementor-widget-breadcrumbs ul,
.elementor-widget-breadcrumbs li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 2. Restore form control rendering inside Elementor widgets.
 *    Preflight strips background, border and padding from controls.
 * ---------------------------------------------------------------------- */
.elementor-widget-form input:not([type="submit"]):not([type="button"]),
.elementor-widget-form select,
.elementor-widget-form textarea,
.elementor-widget-search-form input,
.elementor-widget-woocommerce-product-add-to-cart input {
	background-color: revert;
	border: revert;
	padding: revert;
}

/* -------------------------------------------------------------------------
 * 3. Editor safety.
 *    The reveal-on-scroll utility starts at opacity:0. Elementor re-renders
 *    widgets after the IntersectionObserver has already run, which would leave
 *    imported markup permanently invisible inside the editor preview.
 * ---------------------------------------------------------------------- */
body.tp-elementor-preview .reveal,
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal,
body.elementor-html .reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* The theme header is sticky; inside the editor preview that can overlap
   Elementor's own toolbars when a header template is being edited. */
body.tp-elementor-preview .tp-site-header,
body.elementor-editor-active .tp-site-header {
	position: static;
}

/* -------------------------------------------------------------------------
 * 4. Let Elementor containers span the viewport.
 *    The theme wraps fallback output in `.shell` (max-width 1200px); Elementor
 *    canvas/full-width templates must not inherit that constraint.
 * ---------------------------------------------------------------------- */
.tp-elementor-location > .elementor,
.tp-elementor-location > .elementor > .elementor-section-wrap {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 5. Neutralise Elementor's atomic base styles on imported elements.
 *
 *    Elementor V4 elements ship base styles of their own — a div-block adds
 *    `padding: 10px; min-width: 30px`, a button its own blue background,
 *    padding and 2px radius — emitted as `.elementor .e-*-base` (specificity
 *    0,2,0). The imported markup carries its full design in Tailwind classes
 *    and assumes browser defaults underneath, so those base styles have to
 *    step aside.
 *
 *    The rules below are scoped to `.tp-el`, the marker class the migration
 *    puts on every element it generates: elements the site owner adds from the
 *    Elementor panel keep Elementor's normal defaults and still look right.
 *
 *    Specificity is 0,3,0 — above Elementor's base styles, below the theme's
 *    own `#page .class` rules (1,1,0), so Tailwind utilities and components
 *    still win.
 * ---------------------------------------------------------------------- */
.elementor .e-div-block-base.tp-el {
	padding: 0;
	min-width: 0;
	/* `.e-con` also forces width:100%, height:auto and position:relative on
	   every container. A width of 100% turns a content-sized flex item into a
	   full-width one — enough to push the neighbouring link onto its own line —
	   and a stray positioning context changes what an absolutely positioned
	   child anchors to. The browser defaults are restored; any element that
	   really wants those values carries the matching Tailwind class, which is
	   more specific and still wins. */
	width: auto;
	height: auto;
	position: static;
}

.elementor .e-button-base.tp-el {
	background: none;
	padding: 0;
	border-width: 0;
	border-radius: 0;
	text-align: inherit;
}

.elementor .e-heading-base.tp-el,
.elementor .e-paragraph-base.tp-el {
	margin: 0;
}

/*    Fallback leaves: markup with no atomic equivalent (inline SVG icons,
 *    lists, <details> accordions, the contact form) is kept whole inside an
 *    HTML widget. Elementor wraps every widget in a div; `display: contents`
 *    removes that box from layout so the original element remains a direct
 *    child of its grid or flex parent, exactly as in the source design. */
.elementor .elementor-widget-html.tp-leaf {
	display: contents;
}

/*    Two families of utilities style the direct children of a container
 *    themselves — `space-y-*` puts a margin on them, `divide-*` a border. A
 *    `display: contents` wrapper generates no box, so that margin or border
 *    would simply never be drawn and the section would collapse. Inside those
 *    containers the wrapper becomes a plain block instead: it then carries the
 *    spacing exactly where the original element carried it. */
.elementor [class*="space-y-"] > .elementor-widget-html.tp-leaf,
.elementor [class*="divide-"] > .elementor-widget-html.tp-leaf {
	display: block;
}