/*
 * Every Child Leaves Protected v2.3.0
 * Preserve staging appearance on installations with legacy Elementor Kit CSS.
 * This stylesheet styles ECLP components only. It does not change Elementor
 * header/footer display conditions or override other pages' global settings.
 */

/* Typography and inheritance on ECLP layout components */
body .eclp-header,
body #eclp-main,
body .eclp-footer {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Header should use compact staging navigation, not Elementor's default links. */
body .eclp-header .eclp-nav {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
body .eclp-header .eclp-nav > a:not(.eclp-nav-cta) {
  color: #332c28 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 9px 10px;
  text-decoration: none !important;
}
body .eclp-header .eclp-nav > a:not(.eclp-nav-cta):hover {
  color: #c94f0a !important;
}
body .eclp-header .eclp-nav .eclp-nav-cta,
body .eclp-header .eclp-mobile-menu .eclp-mobile-menu-cta {
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
body .eclp-header .eclp-mobile-menu > a:not(.eclp-mobile-menu-cta) {
  color: #2f2824 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
body .eclp-header .eclp-org-logo,
body .eclp-header .eclp-campaign-logo {
  display: block;
  object-fit: contain;
}

/* Hero title layout: staging shows black "Every Child" and the entire
 * orange "Leaves Protected." on one distinct second line. */
body #eclp-main .eclp-hero h1 {
  margin: 21px 0 18px !important;
  color: #241e1b !important;
  font-family: inherit !important;
  font-size: clamp(45px, 5vw, 68px) !important;
  font-weight: 900 !important;
  line-height: .98 !important;
  letter-spacing: -.047em !important;
}
body #eclp-main .eclp-hero h1 span {
  display: block;
  color: #f47a1f !important;
  font: inherit;
  line-height: inherit !important;
  white-space: nowrap;
}
body #eclp-main .eclp-hero-lead {
  margin: 0;
  color: #655d58 !important;
  font-family: inherit !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
body #eclp-main .eclp-advocacy-badge {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: .09em !important;
}
body #eclp-main .eclp-eyebrow {
  color: #c94f0a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: .075em !important;
}

/* Staging CTA contrast and weight.  This also corrects Elementor's black
 * default link color appearing on orange buttons. */
body #eclp-main a.eclp-btn {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
}
body #eclp-main a.eclp-btn-primary {
  color: #fff !important;
}
body #eclp-main a.eclp-btn-secondary {
  color: #c94f0a !important;
}
body #eclp-main a.eclp-btn-light {
  color: #873000 !important;
}
body #eclp-main a.eclp-btn-urgent {
  font-size: 15px !important;
  min-height: 56px;
}
body #eclp-main .eclp-action-band a.eclp-btn-secondary {
  color: #fff !important;
}

/* Staging stakeholder links and the Parent & Family guide. */
body #eclp-main .eclp-stakeholder-links a {
  color: #873000 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  text-decoration: none !important;
}
body #eclp-main .eclp-stakeholder-links a:hover {
  color: #f47a1f !important;
  text-decoration: underline !important;
}
body #eclp-main .eclp-parent-link {
  color: #655d58 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}
body #eclp-main .eclp-parent-link a {
  color: #c94f0a !important;
  font-size: inherit !important;
  font-weight: 900 !important;
}

/* Other native campaign sections should retain staging scale. */
body #eclp-main .eclp-impact-number {
  color: #fff !important;
  font-size: 48px !important;
  font-weight: 900 !important;
}
body #eclp-main .eclp-kicker {
  color: #c94f0a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
body #eclp-main .eclp-section h2 {
  font-family: inherit !important;
  font-size: clamp(34px, 4.6vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.038em !important;
}
body #eclp-main .eclp-section-heading-orange {
  color: #c94f0a !important;
}
body #eclp-main .eclp-lead {
  color: #655d58 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}
body #eclp-main .eclp-action-band h2 {
  color: #fff !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}
body .eclp-footer a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Keep a two-line hero at desktop widths without overflowing small phones. */
@media (max-width: 1050px) {
  body #eclp-main .eclp-hero h1 span { white-space: normal; }
}
@media (max-width: 660px) {
  body #eclp-main .eclp-hero h1 { font-size: 43px !important; }
}
