/**
 * Nexus Theme — Elementor Overrides
 * Styles to integrate the theme's design system with Elementor
 * without breaking the editor experience.
 *
 * @package Nexus
 * @version 1.0.0
 */

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

/* Apply theme fonts in editor and frontend */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
  font-family: inherit;
}

.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(var(--nexus-text-3xl), 5vw, var(--nexus-text-5xl)); }
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(var(--nexus-text-2xl), 4vw, var(--nexus-text-4xl)); }
.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(var(--nexus-text-xl), 3vw, var(--nexus-text-3xl)); }
.elementor-widget-heading h4.elementor-heading-title { font-size: clamp(var(--nexus-text-lg), 2.5vw, var(--nexus-text-2xl)); }

/* =============================================================================
   SECTION PADDING
   ============================================================================= */

/* Match Elementor section padding to theme spacing */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--nexus-container-xl);
}

.elementor-section.elementor-top-section {
  /* No forced padding — let Elementor control it */
}

/* Default section padding when none set */
.elementor-top-section:not([data-settings*="padding"]) {
  padding-top: var(--nexus-space-24);
  padding-bottom: var(--nexus-space-24);
}

/* =============================================================================
   COLORS
   ============================================================================= */

/* Expose theme color variables to Elementor */
:root {
  --e-global-color-primary:   var(--nexus-primary);
  --e-global-color-secondary: var(--nexus-secondary);
  --e-global-color-accent:    var(--nexus-accent);
  --e-global-color-text:      var(--nexus-text);
  --e-global-color-heading:   var(--nexus-heading);
}

/* =============================================================================
   BUTTON WIDGET
   ============================================================================= */

.elementor-widget-button .elementor-button {
  font-family: var(--nexus-font-body);
  font-weight: var(--nexus-weight-semibold);
  letter-spacing: var(--nexus-tracking-wide);
  border-radius: var(--nexus-radius-md);
  transition: var(--nexus-transition-base);
}

.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
}

.elementor-widget-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
}

/* =============================================================================
   ICON WIDGET
   ============================================================================= */

.elementor-widget-icon .elementor-icon {
  transition: var(--nexus-transition-base);
}

.elementor-widget-icon .elementor-icon:hover {
  transform: scale(1.1);
}

/* =============================================================================
   IMAGE WIDGET
   ============================================================================= */

.elementor-widget-image img {
  border-radius: var(--nexus-radius-lg);
  transition: var(--nexus-transition-slow);
}

/* =============================================================================
   IMAGE BOX WIDGET
   ============================================================================= */

.elementor-widget-image-box .elementor-image-box-wrapper {
  transition: var(--nexus-transition-base);
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper {
  transform: translateY(-4px);
}

/* =============================================================================
   ICON BOX WIDGET
   ============================================================================= */

.elementor-widget-icon-box .elementor-icon-box-wrapper {
  padding: var(--nexus-space-6);
  border-radius: var(--nexus-radius-xl);
  border: 1px solid var(--nexus-border);
  transition: var(--nexus-transition-base);
  background-color: var(--nexus-white);
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
  transform: translateY(-6px);
  box-shadow: var(--nexus-shadow-xl);
  border-color: transparent;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--nexus-radius-xl);
  background: linear-gradient(135deg, rgba(45,174,67,0.08) 0%, rgba(76,200,99,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--nexus-space-4);
  transition: var(--nexus-transition-base);
}

.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon {
  background: var(--nexus-gradient-primary);
  color: var(--nexus-white) !important;
}

/* =============================================================================
   TESTIMONIAL WIDGET (CORE)
   ============================================================================= */

.elementor-widget-testimonial .elementor-testimonial--layout-aside {
  gap: var(--nexus-space-4);
}

.elementor-widget-testimonial .elementor-testimonial__image img {
  width: 50px;
  height: 50px;
  border-radius: var(--nexus-radius-full);
  object-fit: cover;
}

.elementor-widget-testimonial .elementor-testimonial__text {
  font-style: italic;
  font-size: var(--nexus-text-md);
  line-height: var(--nexus-leading-relaxed);
}

/* =============================================================================
   COUNTER WIDGET (CORE)
   ============================================================================= */

.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--nexus-font-heading);
  font-weight: var(--nexus-weight-black);
  color: var(--nexus-heading);
}

/* =============================================================================
   PROGRESS BAR WIDGET
   ============================================================================= */

.elementor-widget-progress .elementor-progress-bar {
  border-radius: var(--nexus-radius-full);
  background: var(--nexus-gradient-primary);
}

.elementor-widget-progress .elementor-progress-wrapper {
  border-radius: var(--nexus-radius-full);
  background-color: var(--nexus-gray-200);
}

/* =============================================================================
   TABS WIDGET
   ============================================================================= */

.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title {
  font-weight: var(--nexus-weight-semibold);
  font-size: var(--nexus-text-sm);
  transition: var(--nexus-transition-fast);
}

.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title.elementor-active {
  color: var(--nexus-primary);
}

/* =============================================================================
   ACCORDION WIDGET
   ============================================================================= */

.elementor-widget-accordion .elementor-accordion-item {
  border: 1px solid var(--nexus-border);
  border-radius: var(--nexus-radius-lg);
  margin-bottom: var(--nexus-space-3);
  overflow: hidden;
}

.elementor-widget-accordion .elementor-tab-title {
  font-weight: var(--nexus-weight-semibold);
  padding: var(--nexus-space-4) var(--nexus-space-5);
}

.elementor-widget-accordion .elementor-tab-content {
  padding: 0 var(--nexus-space-5) var(--nexus-space-4);
  font-size: var(--nexus-text-sm);
  color: var(--nexus-text-light);
}

/* =============================================================================
   GALLERY WIDGET
   ============================================================================= */

.elementor-widget-image-gallery .gallery-item img {
  border-radius: var(--nexus-radius-md);
  transition: transform 0.4s ease;
}

.elementor-widget-image-gallery .gallery-item:hover img {
  transform: scale(1.05);
}

/* =============================================================================
   VIDEO WIDGET
   ============================================================================= */

.elementor-widget-video .elementor-wrapper {
  border-radius: var(--nexus-radius-xl);
  overflow: hidden;
  box-shadow: var(--nexus-shadow-xl);
}

/* =============================================================================
   FORM (ELEMENTOR PRO)
   ============================================================================= */

.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  border: 1px solid var(--nexus-border-dark);
  border-radius: var(--nexus-radius-md);
  padding: var(--nexus-space-3) var(--nexus-space-4);
  font-family: var(--nexus-font-body);
  font-size: var(--nexus-text-base);
  transition: var(--nexus-transition-fast);
  background-color: var(--nexus-white);
  color: var(--nexus-text);
  width: 100%;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus,
.elementor-form .elementor-field-group select:focus {
  outline: none;
  border-color: var(--nexus-secondary);
  box-shadow: 0 0 0 3px rgba(76,200,99,0.15);
}

.elementor-form .elementor-button {
  font-family: var(--nexus-font-body);
  font-weight: var(--nexus-weight-semibold);
  background-color: var(--nexus-primary);
  border-radius: var(--nexus-radius-md);
  transition: var(--nexus-transition-base);
  border: 2px solid var(--nexus-primary);
}

.elementor-form .elementor-button:hover {
  background-color: var(--nexus-primary-dark);
  border-color: var(--nexus-primary-dark);
  transform: translateY(-2px);
}

/* =============================================================================
   POSTS WIDGET (ELEMENTOR PRO)
   ============================================================================= */

.elementor-posts .elementor-post {
  background-color: var(--nexus-white);
  border: 1px solid var(--nexus-border);
  border-radius: var(--nexus-radius-xl);
  overflow: hidden;
  transition: var(--nexus-transition-base);
}

.elementor-posts .elementor-post:hover {
  transform: translateY(-6px);
  box-shadow: var(--nexus-shadow-xl);
  border-color: transparent;
}

.elementor-posts .elementor-post__thumbnail img {
  transition: transform 0.5s ease;
}

.elementor-posts .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.06);
}

.elementor-posts .elementor-post__read-more {
  color: var(--nexus-primary);
  font-weight: var(--nexus-weight-semibold);
  font-size: var(--nexus-text-sm);
}

/* =============================================================================
   EDITOR-SPECIFIC OVERRIDES
   ============================================================================= */

/* Make editor preview match frontend */
.elementor-edit-area .nexus-hero {
  min-height: 500px;
}

/* Prevent theme nav from appearing in blank template editor */
.elementor-editor-active .site-header,
.elementor-editor-active .site-footer {
  /* Let Elementor control this */
}

/* =============================================================================
   RESPONSIVE — ELEMENTOR BREAKPOINTS
   ============================================================================= */

@media (max-width: 1024px) {
  .elementor-section.elementor-top-section:not([data-settings*="padding"]) {
    padding-top: var(--nexus-space-16);
    padding-bottom: var(--nexus-space-16);
  }
}

@media (max-width: 768px) {
  .elementor-section.elementor-top-section:not([data-settings*="padding"]) {
    padding-top: var(--nexus-space-12);
    padding-bottom: var(--nexus-space-12);
  }

  .elementor-widget-icon-box .elementor-icon-box-wrapper {
    padding: var(--nexus-space-4);
  }
}

@media (max-width: 480px) {
  .elementor-section.elementor-top-section:not([data-settings*="padding"]) {
    padding-top: var(--nexus-space-10);
    padding-bottom: var(--nexus-space-10);
  }
}

/* =============================================================================
   COLUMN GAP FIXES
   ============================================================================= */

.elementor-row {
  --nexus-column-gap: var(--nexus-space-6);
}

.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
  padding: 0 var(--nexus-space-3);
}

/* =============================================================================
   Z-INDEX LAYERING
   ============================================================================= */

.elementor-sticky--active {
  z-index: var(--nexus-z-sticky) !important;
}

.elementor-popup-modal {
  z-index: var(--nexus-z-modal) !important;
}