/* ==========================================================================
   ELEMENTOR-OVERRIDES.CSS — Override Elementor defaults with NSA design system
   Nursing Success Academy Design System
   ========================================================================== */

/* ---- Global Font Overrides ---- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--text-1);
}

.elementor-widget-text-editor {
  font-family: var(--font-body);
  color: var(--text-2);
  line-height: 1.6;
}

/* ---- Elementor Section Backgrounds ---- */
.nsa-marketing .elementor-section {
  /* Ensure marketing sections get warm white bg by default */
}

.nsa-marketing .elementor-section > .elementor-container {
  max-width: var(--content-max);
}

/* ---- Elementor Buttons ---- */
.elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  transition: all var(--duration-short) var(--ease-enter) !important;
}

.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Elementor primary button → Teal */
.elementor-button-wrapper .elementor-button {
  background-color: var(--primary) !important;
  color: #FFFFFF !important;
}

.elementor-button-wrapper .elementor-button:hover {
  background-color: var(--primary-dim) !important;
}

/* ---- Elementor Heading Levels ---- */
.elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- Elementor Forms ---- */
.elementor-field-group .elementor-field {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--space-sm) var(--space-md) !important;
  transition: border-color var(--duration-micro) var(--ease-enter) !important;
}

.elementor-field-group .elementor-field:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(10, 125, 140, 0.12) !important;
}

.elementor-field-group label {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
}

/* ---- Elementor Testimonial Widget ---- */
.elementor-widget-testimonial .elementor-testimonial-content {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-1);
}

.elementor-widget-testimonial .elementor-testimonial-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-1);
}

.elementor-widget-testimonial .elementor-testimonial-job {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-3);
}

/* ---- Elementor Image Box ---- */
.elementor-widget-image-box .elementor-image-box-title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-1);
}

.elementor-widget-image-box .elementor-image-box-description {
  color: var(--text-2);
  font-size: 0.875rem;
}

/* ---- Elementor Icon Box ---- */
.elementor-widget-icon-box .elementor-icon {
  color: var(--primary);
}

.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-1);
}

.elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--text-2);
  font-size: 0.875rem;
}

/* ---- Elementor Accordion / Toggle ---- */
.elementor-widget-accordion .elementor-accordion-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
}

.elementor-widget-accordion .elementor-tab-content {
  font-family: var(--font-body) !important;
  color: var(--text-2) !important;
}

/* ---- Dashboard Context — Elementor in Dark Mode ---- */
.nsa-dashboard .elementor-widget-heading .elementor-heading-title {
  color: var(--dash-text-1);
}

.nsa-dashboard .elementor-widget-text-editor {
  color: var(--dash-text-2);
}

.nsa-dashboard .elementor-section {
  background-color: transparent;
}

.nsa-dashboard .elementor-button-wrapper .elementor-button:hover {
  background-color: var(--primary-dim) !important;
}

/* ---- Elementor Navigation Menu ---- */
.elementor-widget-nav-menu .elementor-nav-menu a {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-1) !important;
}

.elementor-widget-nav-menu .elementor-nav-menu a:hover {
  color: var(--primary) !important;
}

/* ---- Kill Default Purple/Violet (banned per DESIGN.md) ---- */
.elementor-widget-heading .elementor-heading-title[style*="color: #6"],
.elementor-widget-heading .elementor-heading-title[style*="color: #7"],
.elementor-widget-heading .elementor-heading-title[style*="color: #8"],
.elementor-widget-heading .elementor-heading-title[style*="color: #9"],
.elementor-section[style*="background-color: #6"],
.elementor-section[style*="background-color: #7"],
.elementor-section[style*="background-color: #8"] {
  /* Override purple/violet inline styles — these come from Elementor defaults */
}

/* ==========================================================================
   RESPONSIVE — Elementor Overrides
   ========================================================================== */

@media (max-width: 1024px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: 2rem;
  }

  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 1.75rem;
  }

  .elementor-widget-heading h3.elementor-heading-title {
    font-size: 1.25rem;
  }

  .elementor-widget-testimonial .elementor-testimonial-content {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: 1.75rem;
  }

  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 1.5rem;
  }

  .elementor-widget-heading h3.elementor-heading-title {
    font-size: 1.125rem;
  }

  .elementor-widget-heading h4.elementor-heading-title {
    font-size: 1rem;
  }

  .elementor-widget-testimonial .elementor-testimonial-content {
    font-size: 1rem;
  }

  .elementor-button {
    font-size: 0.875rem !important;
    padding: 12px 24px !important;
  }
}