/**
 * AML Theme — Elementor Compatibility Styles
 * Loaded AFTER Elementor's own stylesheets.
 * Fixes conflicts between AML's CSS and Elementor's grid/widget system.
 */

/* ── 1. Reset Elementor section/container inside AML wrappers ─────────────── */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
	box-sizing: border-box;
}

/* Prevent AML's global * box-sizing from fighting Elementor columns */
.elementor *,
.elementor ::before,
.elementor ::after {
	box-sizing: border-box;
}

/* ── 2. Full-width page — remove AML page wrapper constraints ─────────────── */
.elementor-full-width-page,
body.elementor-page .aml-page-wrap {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.elementor-page .aml-page-inner {
	max-width: 100% !important;
	padding: 0 !important;
}

/* ── 3. Canvas — hide AML announce bar & ticker on canvas pages ───────────── */
body.elementor-page-canvas .aml-announce,
body.elementor-page-canvas .aml-ticker,
body.elementor-page-canvas .site-header,
body.elementor-page-canvas .site-footer,
body.elementor-page-canvas .mobile-menu {
	display: none !important;
}

/* ── 4. Elementor widgets — typography compatibility with DM Sans ─────────── */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-widget-container {
	font-family: inherit;
}

/* ── 5. Elementor buttons — keep AML btn styles unless Elementor overrides ── */
.elementor-button-wrapper .elementor-button {
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.2s ease;
}

/* ── 6. Elementor forms — harmonise with AML input styles ────────────────── */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	border-radius: 8px;
	border: 1.5px solid #e0d9f0;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
	border-color: #3a1772;
	outline: none;
	box-shadow: 0 0 0 3px rgba(58, 23, 114, 0.12);
}

/* ── 7. Elementor popup — make sure AML header doesn't overlay it ─────────── */
.elementor-popup-modal {
	z-index: 99999 !important;
}

/* ── 8. Elementor image box + icon box — fix line-height in AML context ───── */
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-icon-box .elementor-icon-box-content {
	line-height: inherit;
}

/* ── 9. Sticky header fix for Elementor editor top bar ───────────────────── */
.elementor-editor-active .site-header {
	z-index: 999 !important;
}

/* ── 10. AML colour tokens as CSS custom properties (usable in Elementor) ── */
:root {
	--aml-purple:        #3a1772;
	--aml-purple-dark:   #2a0f55;
	--aml-purple-light:  #f0ebff;
	--aml-gold:          #e2a110;
	--aml-gold-light:    #fff8ed;
	--aml-text:          #1a1a2e;
	--aml-text-muted:    #666;
	--aml-border:        #e8e4f0;
	--aml-bg-light:      #f4f4f4;
	--aml-radius:        12px;
	--aml-radius-sm:     8px;
	--aml-shadow:        0 2px 8px rgba(58, 23, 114, 0.08);
	--aml-shadow-lg:     0 8px 32px rgba(58, 23, 114, 0.16);
}

/* ── 11. Elementor section inside page-wrapper — remove double padding ────── */
#page-wrapper .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

/* ── 12. Responsive — Elementor hidden classes should respect AML breakpoints */
@media (max-width: 768px) {
	.elementor-hidden-mobile {
		display: none !important;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.elementor-hidden-tablet {
		display: none !important;
	}
}