/**
 * Elementor Style Overrides
 *
 * Ensures NBC theme styles work harmoniously with Elementor.
 *
 * @package NBC_Theme
 */

/* Elementor sections respect theme container width */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

/* Full-width Elementor template — remove default padding */
.elementor-full-width .site-main {
	padding: 0;
	margin: 0;
}

/* NBC Canvas template — clean slate */
.nbc-canvas .site-main {
	padding: 0;
	margin: 0;
}

/* Elementor widgets inside NBC sections */
.elementor-widget-wrap {
	line-height: 1.7;
}

/* Ensure Elementor buttons can inherit theme styles */
.elementor-button.btn-gold,
.elementor-button.btn-orange {
	background: var(--orange);
	color: var(--white);
	border: none;
	border-radius: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.elementor-button.btn-gold:hover,
.elementor-button.btn-orange:hover {
	background: var(--orange-light);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255,107,0,0.4);
}

.elementor-button.btn-outline {
	background: transparent;
	color: var(--white);
	border: 2px solid var(--orange);
	border-radius: 0;
}

.elementor-button.btn-outline:hover {
	background: var(--orange);
	color: var(--white);
}

/* Elementor heading widget inherits theme heading styles */
.elementor-heading-title {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--black);
}

/* Dark section Elementor override */
.elementor-section[data-settings*="dark"] .elementor-heading-title,
.section-dark .elementor-heading-title {
	color: var(--white);
}

/* Elementor image widget consistent sizing */
.elementor-image img {
	max-width: 100%;
	height: auto;
}

/* Fix Elementor editor z-index conflict with theme header */
.elementor-editor-active .header {
	z-index: 99;
}

/* NBC widget category icon in editor */
.elementor-panel .elementor-element .icon .nbc-icon::before {
	font-family: 'dashicons';
}

/* ============================================
   Fix: NBC widgets visibility in Elementor editor iframe
   The editor iframe has body.elementor-editor-preview
   Fade-in elements need to be visible without JS animations
   ============================================ */
.elementor-editor-preview .fade-in,
.elementor-editor-preview .fade-in-left,
.elementor-editor-preview .fade-in-right,
.elementor-editor-preview .service-card,
.elementor-editor-preview .portfolio-item,
.elementor-editor-preview .testimonial-card,
.elementor-editor-preview .about-section,
.elementor-editor-preview .stats-bar,
.elementor-editor-preview .cta-banner {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Ensure service grid and project grid show in editor */
.elementor-editor-preview .service-grid,
.elementor-editor-preview .portfolio-grid,
.elementor-editor-preview .testimonials-grid {
  opacity: 1 !important;
}