/*
 * DA Beauty — Elementor compatibility layer.
 *
 * Loads last, after dabeauty-wp.css. Nothing here restyles the design;
 * it bridges Elementor's markup onto the component library carried over
 * from the source storefront, exactly as dabeauty-wp.css does for
 * WordPress and WooCommerce markup.
 *
 * Every rule is scoped to an `.elementor-*`, `.e-con` or
 * `.elementor-editor-active` selector. On a page with no Elementor
 * content this file is completely inert, which is why it can ship in
 * Phase 1 ahead of the templates that need it.
 *
 * Sections marked PROVISIONAL are written against the design tokens but
 * cannot be visually verified until Phase 2 puts real Elementor content
 * on a page. They are validated there.
 */

/* ------------------------------------------------------------------ *
 * 1. Layout parity.
 *
 * The theme's .container resolves to
 *   max-width: calc(var(--page-width) + 6rem)   -> 1392px + 96px
 *   padding-inline: 3rem                        -> 48px each side
 * giving a 1392px content column. Elementor's Kit content width is set
 * to the same 1392px, so the inner column already matches; these rules
 * only add the outer gutter so content never touches the viewport edge.
 *
 * Scoped to direct children of the Elementor document wrapper so nested
 * containers do not accumulate padding.
 * ------------------------------------------------------------------ */

.dabeauty-elementor .elementor > .e-con.e-con-boxed,
.dabeauty-elementor .elementor > .elementor-section.elementor-section-boxed {
	padding-inline: 3rem;
}

@media screen and (max-width: 1024px) {
	.dabeauty-elementor .elementor > .e-con.e-con-boxed,
	.dabeauty-elementor .elementor > .elementor-section.elementor-section-boxed {
		padding-inline: 5%;
	}
}

/* Full-bleed sections (hero, image bands) opt out via this class. */
.dabeauty-elementor .elementor > .e-con.da-full-bleed,
.dabeauty-elementor .elementor > .elementor-section.da-full-bleed {
	padding-inline: 0;
}

/* ------------------------------------------------------------------ *
 * 1b. Image-with-text: media on the right.
 *
 * The source design only ever places the media on the left, so the
 * component CSS has no modifier for the mirrored layout. This adds one.
 * The reversal is desktop-only: below the breakpoint the two columns
 * stack, and stacking must always put the image first regardless of the
 * side chosen, which is what row-reverse on a wrapped flex row would
 * otherwise break.
 * ------------------------------------------------------------------ */

@media screen and (min-width: 1025px) {
	.section__image-with-text .flex.da-media-right {
		flex-direction: row-reverse;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Typography inheritance.  PROVISIONAL
 *
 * Elementor's default colours and fonts are disabled in the Kit, so
 * widgets should already inherit from settings.css. These rules cover
 * the handful of widgets that hard-code a colour or reset a margin
 * regardless of that setting.
 * ------------------------------------------------------------------ */

.dabeauty-elementor .elementor-widget-heading .elementor-heading-title {
	font-family: var(--heading-font);
	font-weight: var(--heading-weight);
	color: var(--color-heading);
}

.dabeauty-elementor .elementor-widget-text-editor,
.dabeauty-elementor .elementor-widget-theme-post-content {
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--color-text);
}

/* Elementor strips list styling; the theme's prose rules expect it back. */
.dabeauty-elementor .elementor-widget-text-editor ul,
.dabeauty-elementor .elementor-widget-text-editor ol {
	padding-inline-start: 2rem;
}

/*
 * The source design ships these two rules in an inline <style> block
 * beside every image-with-text band. Hoisting them here means the widget
 * emits markup only, instead of repeating a <style> block per instance.
 */
.elementor .block__description ul {
	margin: 0;
	padding-inline-start: 15px;
}

.elementor .block__description ul li:not(:last-child) {
	margin-bottom: 5px;
}

/* ------------------------------------------------------------------ *
 * 3. Button mapping.  PROVISIONAL
 *
 * Maps Elementor's Button widget onto the storefront's .btn tokens so a
 * client-inserted button matches a theme button without them having to
 * restyle it. Adding the `btn btn-primary` classes in the widget's
 * Advanced -> CSS Classes field remains the preferred route; this is the
 * safety net for when they do not.
 * ------------------------------------------------------------------ */

.dabeauty-elementor .elementor-button {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight-bold);
	border-radius: var(--btn-radius, 4px);
	transition: var(--duration-short);
}

.dabeauty-elementor .elementor-button:not(.elementor-button-link):not([style*="background"]) {
	background-color: var(--color-button-background, var(--color-heading));
	color: var(--color-button-text, #fff);
}

/* ------------------------------------------------------------------ *
 * 4. Media behaviour.
 *
 * The component library sets object-fit on images inside <motion-effect>
 * and <picture>. Elementor's Image widget wraps images in its own
 * figure/anchor, which the theme's selectors do not reach.
 * ------------------------------------------------------------------ */

.dabeauty-elementor .elementor-widget-image img,
.dabeauty-elementor .elementor-widget-theme-post-featured-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Widgets that opt into the theme's cover behaviour. */
.dabeauty-elementor .da-cover-media img,
.dabeauty-elementor .da-cover-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * 5. Overflow.
 *
 * Several theme utilities set overflow:hidden on section wrappers. When
 * an Elementor container sits inside one, sticky children stop sticking.
 * ------------------------------------------------------------------ */

.dabeauty-elementor .elementor .e-con,
.dabeauty-elementor .elementor .elementor-section {
	overflow: visible;
}

.dabeauty-elementor .elementor .e-con.da-clip,
.dabeauty-elementor .elementor .elementor-section.da-clip {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 6. Editor affordances.
 *
 * These apply only inside the Elementor preview iframe. Three behaviours
 * from the component library actively obstruct editing and are switched
 * off while editing; none of this reaches the front end.
 * ------------------------------------------------------------------ */

/* 6a. Scroll-triggered reveals leave elements at opacity 0 until the
 *     intersection observer fires. Newly inserted widgets are not
 *     always observed, so content can appear blank in the editor. */
body.elementor-editor-active motion-effect,
body.elementor-editor-active motion-items-effect,
body.elementor-editor-active [data-animate] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

body.elementor-editor-active motion-effect > :is(img, picture),
body.elementor-editor-active motion-effect[data-animate*="fade"],
body.elementor-editor-active motion-effect[data-animate*="zoom"] > :is(img, picture) {
	opacity: 1 !important;
}

/* 6b. The sticky header follows the scroll inside the preview iframe and
 *     covers whatever is being edited at the top of the page. */
body.elementor-editor-active .header-site,
body.elementor-editor-active .site-header-group {
	position: static !important;
	transform: none !important;
}

/* 6c. Fixed overlays (back-to-top, mobile bottom bar, search drawer,
 *     announcement dismissal) intercept clicks meant for widget
 *     handles. */
body.elementor-editor-active back-to-top,
body.elementor-editor-active mobile-navigation-bar,
body.elementor-editor-active .fixed-overlay {
	display: none !important;
}

/* 6d. Elementor's own empty-container placeholder needs to clear the
 *     theme's zero-height utilities to remain droppable. */
body.elementor-editor-active .e-con.e-con--empty,
body.elementor-editor-active .elementor-empty-view {
	min-height: 60px;
}

/* ------------------------------------------------------------------ *
 * 7. Admin bar.
 *
 * dabeauty-wp.css already offsets the sticky header for the admin bar.
 * Elementor's editor loads without one, so the offset must not apply in
 * the preview or the header sits 32px too low.
 * ------------------------------------------------------------------ */

body.elementor-editor-active .header-site {
	top: 0 !important;
}