/* ============================================================================
   DataLiftor — Global Typography (Elementor-safe, v3)
   ----------------------------------------------------------------------------
   Goal: ONE uniform type scale everywhere, WITHOUT the Elementor conflict.

   The trick is TWO scopes:

   1) SITE-WIDE BASE (in @layer dataliftor-base)
      Sets the family + scale for plain h1–h6/p across the whole site and
      through Elementor widgets. Because it lives in a LOW cascade layer, any
      explicit style you set in Elementor's own UI still wins — so it fills in
      defaults without hijacking your builder.

   2) DATALIFTOR SECTIONS (scoped to .dl-scope, NOT layered, with the strength
      needed to beat the pasted section CSS)
      Only the elements INSIDE a .dl-scope wrapper get the forced/uniform
      treatment. This is what keeps the pasted sections consistent without
      touching the rest of your site.

   HOW TO USE
   - Keep the .php plugin active (loads this last, priority 9999).
   - Wrap each DataLiftor page's pasted content in ONE container:
         <div class="dl-scope"> …all the section HTML… </div>
     (In Elementor, set the Section/Container CSS Classes field to  dl-scope ,
      or wrap your HTML widgets in one HTML widget that opens <div class="dl-scope">.)
   - Everything else on your site stays untouched.
   ============================================================================ */

:root{
  --dl-font:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --dl-font-mono:'DM Mono', ui-monospace, monospace;
  --dl-ink:#0A1633; --dl-body:#475569; --dl-muted:#64748B;
  --dl-h1:clamp(1.6rem,3.1vw,2.15rem);
  --dl-h2:clamp(1.45rem,2.6vw,1.95rem);
  --dl-h3:clamp(1.1rem,1.6vw,1.3rem);
  --dl-h4:clamp(1rem,1.2vw,1.1rem);
  --dl-h5:.95rem; --dl-h6:.85rem;
  --dl-body-size:1rem; --dl-small:.875rem;
  --dl-lh-tight:1.16; --dl-lh-heading:1.2; --dl-lh-body:1.7;
}

/* ===========================================================================
   1) SITE-WIDE BASE — low-priority layer, cooperates with Elementor
   =========================================================================== */
@layer dataliftor-base;
@layer dataliftor-base{
  body,h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,input,select,textarea,
  blockquote,th,td,figcaption,small,strong,em,
  .elementor-heading-title,.elementor-widget-text-editor,.elementor-button{
    font-family:var(--dl-font);
  }
  code,pre,kbd,samp{ font-family:var(--dl-font-mono); }

  h1{ font-size:var(--dl-h1); line-height:var(--dl-lh-tight); font-weight:700; letter-spacing:-.02em; color:var(--dl-ink); }
  h2{ font-size:var(--dl-h2); line-height:var(--dl-lh-heading); font-weight:700; letter-spacing:-.015em; color:var(--dl-ink); }
  h3{ font-size:var(--dl-h3); line-height:1.3; font-weight:700; letter-spacing:-.01em; color:var(--dl-ink); }
  h4{ font-size:var(--dl-h4); line-height:1.35; font-weight:700; color:var(--dl-ink); }
  h5{ font-size:var(--dl-h5); line-height:1.4; font-weight:700; color:var(--dl-ink); }
  h6{ font-size:var(--dl-h6); line-height:1.4; font-weight:700; letter-spacing:.02em; color:var(--dl-ink); }
  p,li{ font-size:var(--dl-body-size); line-height:var(--dl-lh-body); font-weight:400; }
  small,figcaption{ font-size:var(--dl-small); line-height:1.55; }
}

/* ===========================================================================
   2) DATALIFTOR SECTIONS — scoped to .dl-scope, strong enough to beat the
      pasted section CSS. NOT layered, uses :not() specificity + !important so
      it wins locally, but ONLY inside .dl-scope so nothing else is affected.
   =========================================================================== */
.dl-scope :is(h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,input,select,textarea){
  font-family:var(--dl-font) !important;
}
.dl-scope code,.dl-scope pre,.dl-scope kbd,.dl-scope samp,
.dl-scope .dl-mono,.dl-scope [class*="mono"]{ font-family:var(--dl-font-mono) !important; }

.dl-scope :not(.zz):not(.zz) h1{ font-size:var(--dl-h1) !important; line-height:var(--dl-lh-tight) !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.dl-scope :not(.zz):not(.zz) h2{ font-size:var(--dl-h2) !important; line-height:var(--dl-lh-heading) !important; font-weight:700 !important; letter-spacing:-.015em !important; }
.dl-scope :not(.zz):not(.zz) h3{ font-size:var(--dl-h3) !important; line-height:1.3 !important; font-weight:700 !important; }
.dl-scope :not(.zz):not(.zz) h4{ font-size:var(--dl-h4) !important; line-height:1.35 !important; font-weight:700 !important; }
.dl-scope :not(.zz):not(.zz) h5{ font-size:var(--dl-h5) !important; font-weight:700 !important; }
.dl-scope :not(.zz):not(.zz) h6{ font-size:var(--dl-h6) !important; font-weight:700 !important; }

.dl-scope :not(.zz):not(.zz) p,
.dl-scope :not(.zz):not(.zz) li{
  font-size:var(--dl-body-size) !important; line-height:var(--dl-lh-body) !important; font-weight:400 !important;
}
/* Keep intentional small print small */
.dl-scope small,
.dl-scope [class*="__hint"],.dl-scope [class*="__note"],
.dl-scope [class*="__fine"],.dl-scope figcaption{
  font-size:var(--dl-small) !important; line-height:1.55 !important;
}
/* Title/intro helper classes inside the sections */
.dl-scope [class*="__title"],.dl-scope [class*="-title"],
.dl-scope [class*="__heading"],.dl-scope [class*="__headline"]{
  font-size:var(--dl-h2) !important; line-height:var(--dl-lh-heading) !important; font-weight:700 !important; letter-spacing:-.015em !important;
}
.dl-scope [class*="__subtitle"],.dl-scope [class*="__card-title"],.dl-scope [class*="__step-title"]{
  font-size:var(--dl-h3) !important; line-height:1.3 !important; font-weight:700 !important;
}