/**
 * Elementor Overrides
 * 
 * CRITICAL: This file must NOT set color, font-size, font-weight, or line-height
 * on any Elementor widget selectors. Elementor's own widget settings must always win.
 *
 * @package LegalAid
 */

/* ═══════════════════════════════════════
   RESET: Let Elementor fully control text styling
   ═══════════════════════════════════════ */

/* Text-editor widget: inherit everything from Elementor's generated CSS */
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container p,
.elementor-widget-text-editor .elementor-widget-container span,
.elementor-widget-text-editor .elementor-widget-container strong,
.elementor-widget-text-editor .elementor-widget-container em,
.elementor-widget-text-editor .elementor-widget-container a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Heading widget: inherit from Elementor's generated CSS */
.elementor-widget-heading .elementor-heading-title {
  color: inherit;
}

/* ═══════════════════════════════════════
   FONT-FAMILY DEFAULTS ONLY (no color/size)
   These serve as fallbacks when Elementor
   doesn't set a font. They never block
   Elementor settings because they only set
   font-family.
   ═══════════════════════════════════════ */
.elementor-widget-text-editor .elementor-widget-container {
  font-family: var(--lat-font-sans);
}

/* ═══════════════════════════════════════
   BUTTONS — theme styling
   ═══════════════════════════════════════ */
.elementor-button {
  font-family: var(--lat-font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--lat-radius) !important;
  transition: all var(--lat-transition) !important;
}

/* ═══════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════ */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--lat-max-width);
}

/* Container max-width for boxed */
.e-con.e-con-boxed {
  --content-width: 1140px;
}

/* ═══════════════════════════════════════
   WIDGET HARMONISATION (non-color)
   ═══════════════════════════════════════ */

/* Icon boxes — let Elementor settings control everything */
.elementor-widget-icon-box .elementor-icon {
  border-radius: 12px;
}
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Counters — let Elementor settings control colors */
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--lat-font-serif);
  color: inherit;
}

.elementor-widget-counter .elementor-counter-title {
  font-family: var(--lat-font-sans);
  color: inherit;
}

/* Accordions */
.elementor-widget-accordion .elementor-accordion-title {
  font-family: var(--lat-font-serif);
  color: inherit;
}
.elementor-widget-accordion .elementor-tab-content {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Forms (Elementor Pro) */
.elementor-widget-form .elementor-field {
  font-family: var(--lat-font-sans);
  border-radius: var(--lat-radius);
}

.elementor-widget-form .elementor-field:focus {
  border-color: var(--lat-teal);
  box-shadow: 0 0 0 3px rgba(14, 124, 107, 0.1);
}

/* ═══════════════════════════════════════
   ELEMENTOR EDITOR HELPER CLASSES
   (add via Advanced > CSS Classes)
   ═══════════════════════════════════════ */
.lat-el-card {
  background: var(--lat-white);
  border: 1px solid var(--lat-gray-200);
  border-radius: var(--lat-radius-lg);
  padding: 40px 36px;
  transition: all var(--lat-transition);
}
.lat-el-card:hover {
  border-color: var(--lat-teal);
  box-shadow: 0 8px 30px rgba(14,124,107,0.08);
}

.lat-el-accent-top {
  border-top: 3px solid var(--lat-teal);
}

.lat-el-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--lat-teal-pale);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lat-teal);
}

.lat-el-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--lat-gray-50);
  border: 1px solid var(--lat-gray-200);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lat-slate);
  margin: 4px;
}

.lat-el-sector-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: all var(--lat-transition);
}
.lat-el-sector-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--lat-teal);
}

.lat-el-icon-circle {
  width: 52px;
  height: 52px;
  background: var(--lat-navy);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lat-el-icon-circle svg { fill: var(--lat-teal-light); }