/* ═══════════════════════════════════════════════════
   SAS Agri Drones — elementor.css
   Overrides Elementor default widget styles to match
   the SAS brand. Every widget type is covered.
   Edit freely — these sit on top of Elementor's CSS.
═══════════════════════════════════════════════════ */

/* ── SECTION / CONTAINER DEFAULTS ────────────────── */
.elementor-section,
.e-container,
.e-con {
  --e-column-margin-right: 20px;
  --e-column-margin-left:  20px;
}

/* Default section background inherits dark field */
.elementor-section.elementor-top-section {
  background-color: var(--sas-deep-field);
}

/* Full-width sections */
.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100%;
}

/* ── HEADING WIDGET ───────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--sas-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.93;
  color: var(--sas-cream);
  letter-spacing: -0.01em;
}

/* H1 — hero scale */
.elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
}

/* H2 — section title scale */
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
}

/* H3 — card/panel titles */
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

/* ── TEXT EDITOR WIDGET ───────────────────────────── */
.elementor-widget-text-editor {
  font-size: 0.95rem;
  color: var(--sas-off-white);
  opacity: 0.8;
  line-height: 1.8;
}
.elementor-widget-text-editor p { margin-bottom: 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ── BUTTON WIDGET ────────────────────────────────── */
.elementor-widget-button .elementor-button {
  font-family: var(--sas-body);
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--sas-radius);
  transition: background 0.2s, transform 0.15s;
}

/* Primary button style */
.elementor-widget-button .elementor-button.elementor-size-md,
.elementor-widget-button .elementor-button-link {
  background-color: var(--sas-crop-green);
  color: var(--sas-deep-field);
  border: none;
  padding: 0.82rem 1.8rem;
}
.elementor-widget-button .elementor-button.elementor-size-md:hover,
.elementor-widget-button .elementor-button-link:hover {
  background-color: var(--sas-spring-lime);
  color: var(--sas-deep-field);
  transform: translateY(-1px);
}

/* Outline variant — add class 'sas-outline' to button in Elementor */
.elementor-widget-button .elementor-button.sas-outline {
  background-color: transparent !important;
  color: var(--sas-cream) !important;
  border: 1px solid rgba(244, 240, 232, 0.22) !important;
}
.elementor-widget-button .elementor-button.sas-outline:hover {
  border-color: var(--sas-spring-lime) !important;
  color: var(--sas-spring-lime) !important;
}

/* ── IMAGE WIDGET ─────────────────────────────────── */
.elementor-widget-image img {
  border-radius: var(--sas-radius);
}

/* ── DIVIDER WIDGET ───────────────────────────────── */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--sas-divider);
}

/* ── ICON WIDGET ──────────────────────────────────── */
.elementor-widget-icon .elementor-icon {
  color: var(--sas-crop-green);
}

/* ── ICON BOX WIDGET ──────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  color: var(--sas-crop-green);
}
.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: var(--sas-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sas-cream);
}
.elementor-widget-icon-box .elementor-icon-box-description {
  font-size: 0.85rem;
  color: var(--sas-off-white);
  opacity: 0.65;
  line-height: 1.65;
}

/* ── IMAGE BOX WIDGET ─────────────────────────────── */
.elementor-widget-image-box .elementor-image-box-title {
  font-family: var(--sas-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sas-cream);
}
.elementor-widget-image-box .elementor-image-box-description {
  font-size: 0.85rem;
  color: var(--sas-off-white);
  opacity: 0.65;
}

/* ── TESTIMONIAL / BLOCKQUOTE ─────────────────────── */
.elementor-widget-testimonial .elementor-testimonial-content {
  font-size: 0.92rem;
  color: var(--sas-off-white);
  opacity: 0.8;
  font-style: italic;
  line-height: 1.75;
}
.elementor-widget-testimonial .elementor-testimonial-name {
  font-weight: 700;
  color: var(--sas-cream);
}
.elementor-widget-testimonial .elementor-testimonial-job {
  font-size: 0.75rem;
  color: var(--sas-muted);
}

/* ── VIDEO WIDGET ─────────────────────────────────── */
.elementor-widget-video .elementor-wrapper {
  border-radius: var(--sas-radius);
  overflow: hidden;
}

/* ── SPACER WIDGET ────────────────────────────────── */
/* Default spacer inherits — no override needed */

/* ── HTML / SHORTCODE WIDGET ──────────────────────── */
.elementor-widget-html,
.elementor-widget-shortcode {
  color: var(--sas-cream);
  font-family: var(--sas-body);
}

/* Shortcode zone styling (reused from HTML prototype) */
.elementor-widget-shortcode .sas-shortcode-zone {
  background: rgba(14, 26, 14, 0.7);
  border: 2px dashed rgba(78, 144, 64, 0.35);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; color: var(--sas-spring-lime); opacity: 0.75;
  text-align: center;
}

/* ── COLUMNS ──────────────────────────────────────── */
.elementor-column .elementor-column-wrap {
  height: 100%;
}

/* ── SECTION BACKGROUND HELPERS ───────────────────── */
/* Add these CSS classes in Elementor section > Advanced > CSS Classes */

.sas-section-dark {
  background-color: var(--sas-deep-field) !important;
}
.sas-section-canopy {
  background: linear-gradient(135deg, var(--sas-canopy), rgba(14,26,14,0.95)) !important;
}
.sas-section-card {
  background-color: var(--sas-card-bg) !important;
  border: 1px solid var(--sas-divider);
  border-radius: 6px;
}
.sas-section-subtle {
  background: rgba(30, 74, 24, 0.06) !important;
  border-top: 1px solid var(--sas-divider);
  border-bottom: 1px solid var(--sas-divider);
}
.sas-section-caa {
  background: linear-gradient(135deg, rgba(30,74,24,0.5) 0%, rgba(14,26,14,0.9) 100%) !important;
  border-top: 1px solid rgba(78,144,64,0.3);
  border-bottom: 1px solid rgba(78,144,64,0.3);
}

/* ── TEXT COLOUR HELPERS ──────────────────────────── */
.sas-text-lime    { color: var(--sas-spring-lime) !important; }
.sas-text-green   { color: var(--sas-crop-green)  !important; }
.sas-text-cream   { color: var(--sas-cream)        !important; }
.sas-text-muted   { color: var(--sas-muted)        !important; }
.sas-text-sky     { color: var(--sas-sky-light)    !important; }

/* ── EYEBROW HELPER CLASS ─────────────────────────── */
/* Apply 'sas-eyebrow' CSS class to any Elementor Heading widget */
.elementor-widget-heading .elementor-heading-title.sas-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sas-crop-green);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sas-body) !important;
}
.elementor-widget-heading .elementor-heading-title.sas-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--sas-crop-green);
  flex-shrink: 0;
}

/* ── SERVICE CARD HELPER ──────────────────────────── */
/* Apply 'sas-service-card' to an Elementor inner section/column */
.sas-service-card {
  background: var(--sas-card-bg) !important;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  cursor: default;
}
.sas-service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sas-crop-green);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
.sas-service-card:hover { background: rgba(30, 74, 24, 0.18) !important; }
.sas-service-card:hover::before { transform: scaleX(1); }

/* ── BENEFIT CARD NUMBER HELPER ───────────────────── */
.sas-card-num {
  font-family: var(--sas-display) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--sas-muted) !important;
  margin-bottom: 0.75rem !important;
}

/* ── ACCREDITATION LOGOS ──────────────────────────── */
.sas-accred-logo img {
  height: 44px; width: auto;
  object-fit: contain;
  filter: grayscale(0.3);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.sas-accred-logo img:hover { opacity: 1; filter: none; }

/* ── CONTACT FORM WRAPPER ─────────────────────────── */
/* CF7 and similar form styles */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  background: rgba(14, 26, 14, 0.7) !important;
  border: 1px solid rgba(78, 144, 64, 0.22) !important;
  border-radius: var(--sas-radius) !important;
  color: var(--sas-cream) !important;
  font-family: var(--sas-body) !important;
  font-size: 0.86rem !important;
  padding: 0.72rem 0.9rem !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none !important;
  border-color: var(--sas-crop-green) !important;
}
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  background: var(--sas-crop-green) !important;
  color: var(--sas-deep-field) !important;
  border: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  padding: 0.95rem 2rem !important;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
  background: var(--sas-spring-lime) !important;
}
.wpcf7-form label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--sas-spring-lime) !important;
  opacity: 0.85 !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}
.wpcf7-not-valid-tip { color: #e05252 !important; font-size: 0.78rem !important; }
.wpcf7-response-output {
  border: 1px solid var(--sas-crop-green) !important;
  color: var(--sas-spring-lime) !important;
  background: rgba(78,144,64,0.08) !important;
  border-radius: var(--sas-radius) !important;
  padding: 0.75rem 1rem !important;
}

/* ── RESPONSIVE ELEMENTOR OVERRIDES ──────────────── */
@media (max-width: 767px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
}