/*
 * ZTN – Elementor compatibility layer
 * Loaded after Elementor frontend CSS.
 * Aligns Elementor defaults with our design system.
 */

body.ztn-page.elementor-page {
  /* Reset some Elementor defaults */
}

/* Ensure our .ztn-container wins over Elementor's container */
.elementor-section .elementor-container {
  max-width: var(--ztn-container-max);
}

.elementor .elementor-element.elementor-widget-heading .elementor-heading-title {
  color: var(--ztn-navy);
  font-weight: 700;
  line-height: 1.2;
}

/* Section padding helpers (Elementor has its own padding) */
.elementor-top-section {
  padding-top: var(--ztn-sp-9);
  padding-bottom: var(--ztn-sp-9);
}

/* Remove default Elementor container padding when our wrapper is used */
.elementor-top-section > .elementor-container {
  padding-left: var(--ztn-container-pad);
  padding-right: var(--ztn-container-pad);
}

/* Make sure Elementor text widgets follow our body color */
.elementor-widget-text-editor {
  color: var(--ztn-text-grey);
  font-size: var(--ztn-fs-body);
  line-height: 1.6;
}

/* Elementor button: align with our button styles */
.elementor-widget-button .elementor-button {
  background: var(--ztn-navy);
  color: #fff;
  border-radius: var(--ztn-radius-sm);
  font-weight: 600;
  padding: 13px 22px;
  border: 2px solid var(--ztn-navy);
}
.elementor-widget-button .elementor-button:hover {
  background: #163d70;
  border-color: #163d70;
}

/* For our .ztn-page body, ensure Elementor's body_class is on body */
body.ztn-page.elementor-editor-active .elementor.elementor-edit-area {
  /* Editor mode adjustments */
}

/* Elementor page builder section background */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--ztn-container-max);
}

/* Elementor template page background */
.ztn-page .elementor.elementor-location-header,
.ztn-page .elementor.elementor-location-footer {
  display: none; /* We use the theme for these */
}