/* ==========================================================================
   Tradecraft Academy — Elementor Integration CSS
   Syncs theme CSS variables with Elementor's global colour/font tokens
   and provides helper classes for Elementor widgets.
   ========================================================================== */

/* ── CSS variable bridge ────────────────────────────────────────────────── */
:root {
  /* Map TC brand colours to Elementor global colour variables */
  --e-global-color-primary:    var(--tc-green,  #2C5A34);
  --e-global-color-secondary:  var(--tc-orange, #CB6125);
  --e-global-color-text:       var(--tc-ink,    #1D1D1B);
  --e-global-color-accent:     var(--tc-sage,   #4D8A57);

  /* Additional Elementor colours mapped to brand palette */
  --e-global-color-4f06d56:    var(--tc-forest, #1F4E2D);   /* forest */
  --e-global-color-b3c2be2:    var(--tc-cream,  #F6F3EE);   /* cream  */
  --e-global-color-ff00039:    var(--tc-sage-light, #8AB379); /* sage-light */

  /* Typography */
  --e-global-typography-primary-font-family:    'Inter';
  --e-global-typography-primary-font-weight:    800;
  --e-global-typography-secondary-font-family:  'Inter';
  --e-global-typography-secondary-font-weight:  400;
  --e-global-typography-text-font-family:       'Inter';
  --e-global-typography-text-font-weight:       400;
  --e-global-typography-accent-font-family:     'Inter';
  --e-global-typography-accent-font-weight:     600;
}

/* ── Elementor section / container defaults ─────────────────────────────── */
.elementor-section,
.e-con {
  --padding-top:    0px;
  --padding-bottom: 0px;
}

/* ── Elementor kit body overrides ───────────────────────────────────────── */
body.elementor-page { background: var(--tc-white); }

/* ── Elementor button style sync ────────────────────────────────────────── */
.elementor-button {
  border-radius: var(--tc-radius) !important;
  font-family: var(--tc-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: background var(--tc-duration) var(--tc-ease),
              border-color var(--tc-duration) var(--tc-ease),
              transform var(--tc-duration) var(--tc-ease),
              box-shadow var(--tc-duration) var(--tc-ease) !important;
}
.elementor-button:hover { transform: translateY(-1px); }

/* Primary button */
.elementor-button-primary,
.elementor-button[data-settings*="btn-primary"] {
  background-color: var(--tc-orange) !important;
  border-color: var(--tc-orange) !important;
  color: var(--tc-white) !important;
}
.elementor-button-primary:hover {
  background-color: var(--tc-orange-hover) !important;
  border-color: var(--tc-orange-hover) !important;
  box-shadow: 0 4px 12px rgba(203,97,37,.30) !important;
}

/* ── Elementor heading defaults ─────────────────────────────────────────── */
.elementor-heading-title {
  font-family: var(--tc-font);
  line-height: var(--tc-lh-heading);
  letter-spacing: -0.02em;
}
.elementor-widget-heading h1 { font-weight: 900; color: var(--tc-forest); }
.elementor-widget-heading h2 { font-weight: 800; color: var(--tc-forest); }
.elementor-widget-heading h3 { font-weight: 700; color: var(--tc-forest); }

/* ── Elementor text editor ──────────────────────────────────────────────── */
.elementor-widget-text-editor { line-height: 1.75; }

/* ── Elementor image widget ─────────────────────────────────────────────── */
.elementor-widget-image img { border-radius: var(--tc-radius-lg); }

/* ── Custom Elementor widget classes ────────────────────────────────────── */

/* Hero widget */
.tc-elementor-hero { position: relative; overflow: hidden; }
.tc-elementor-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(77,138,87,.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.tc-elementor-hero .elementor-container { position: relative; z-index: 2; }

/* Course card widget */
.tc-elementor-course-card {
  background: var(--tc-white);
  border: 1px solid var(--tc-cream-mid);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--tc-duration) var(--tc-ease), transform var(--tc-duration) var(--tc-ease);
}
.tc-elementor-course-card:hover { box-shadow: var(--tc-shadow-lg); transform: translateY(-3px); }
.tc-elementor-course-card .card-thumbnail { aspect-ratio: 16/9; overflow: hidden; }
.tc-elementor-course-card .card-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tc-ease); }
.tc-elementor-course-card:hover .card-thumbnail img { transform: scale(1.04); }

/* CTA banner widget */
.tc-elementor-cta {
  background: var(--tc-green);
  border-radius: var(--tc-radius-xl);
  overflow: hidden;
}

/* Stats widget */
.tc-elementor-stat { text-align: center; }
.tc-elementor-stat .stat-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--tc-sage-faint); line-height: 1; letter-spacing: -0.03em; }
.tc-elementor-stat .stat-label { font-size: var(--tc-fs-sm); color: rgba(255,255,255,.65); margin-top: var(--tc-space-xs); }

/* Step / How it works widget */
.tc-elementor-step { text-align: center; padding: var(--tc-space-xl); }
.tc-elementor-step .step-icon { width: 56px; height: 56px; background: var(--tc-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--tc-space-md); color: var(--tc-green); }
.tc-elementor-step .step-title { font-size: var(--tc-fs-md); font-weight: 700; color: var(--tc-forest); margin-bottom: var(--tc-space-sm); }
.tc-elementor-step .step-desc { font-size: var(--tc-fs-sm); color: var(--tc-ink-muted); line-height: 1.6; }

/* Accreditation badge */
.tc-elementor-accred-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--tc-space-sm) var(--tc-space-lg);
  background: rgba(77,138,87,.15);
  border: 1px solid rgba(77,138,87,.3);
  border-radius: 100px;
  font-size: var(--tc-fs-sm);
  font-weight: 700;
  color: var(--tc-sage-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Trust badge row */
.tc-trust-strip { display: flex; flex-wrap: wrap; gap: var(--tc-space-xl); align-items: center; justify-content: center; }
.tc-trust-strip .trust-item { display: flex; align-items: center; gap: var(--tc-space-sm); font-size: var(--tc-fs-sm); font-weight: 600; color: var(--tc-ink-muted); }
.tc-trust-strip .trust-item svg, .tc-trust-strip .trust-item img { width: 24px; height: 24px; }

/* ── Elementor popup overrides ──────────────────────────────────────────── */
.elementor-popup-modal .dialog-widget-content { border-radius: var(--tc-radius-xl); overflow: hidden; }
.elementor-popup-modal .dialog-close-button { color: var(--tc-ink-muted); }

/* ── Elementor form widget overrides ────────────────────────────────────── */
.elementor-field-group .elementor-field {
  border: 1px solid var(--tc-cream-mid) !important;
  border-radius: var(--tc-radius) !important;
  font-family: var(--tc-font) !important;
  font-size: var(--tc-fs-sm) !important;
  color: var(--tc-ink) !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color var(--tc-duration), box-shadow var(--tc-duration) !important;
}
.elementor-field-group .elementor-field:focus {
  outline: none !important;
  border-color: var(--tc-sage) !important;
  box-shadow: 0 0 0 3px rgba(77,138,87,.12) !important;
}
.elementor-button.elementor-size-md {
  padding: 0.75rem 1.75rem !important;
}

/* ── Ensure Elementor Pro header/footer take full width ─────────────────── */
.elementor-location-header { width: 100%; z-index: 1000; }
.elementor-location-footer { width: 100%; }

/* ── Elementor sticky header support ────────────────────────────────────── */
.elementor-sticky--active { box-shadow: 0 2px 20px rgba(0,0,0,.15); }

/* ── Dark section helper ────────────────────────────────────────────────── */
.e-con.tc-section-forest,
.elementor-section.tc-section-forest { background-color: var(--tc-forest); }
.e-con.tc-section-forest .elementor-heading-title,
.elementor-section.tc-section-forest .elementor-heading-title { color: var(--tc-white); }
.e-con.tc-section-forest .elementor-widget-text-editor,
.elementor-section.tc-section-forest .elementor-widget-text-editor { color: rgba(255,255,255,.75); }

.e-con.tc-section-cream,
.elementor-section.tc-section-cream { background-color: var(--tc-cream); }

/* ── Gutenberg editor block overrides ───────────────────────────────────── */
.editor-styles-wrapper { font-family: var(--tc-font); color: var(--tc-ink); }
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3 { color: var(--tc-forest); font-weight: 800; }
.wp-block-button__link { background: var(--tc-orange); border-radius: var(--tc-radius) !important; }
.wp-block-button__link:hover { background: var(--tc-orange-hover); }