/* ═══════════════════════════════════════════════════════════════════════
   MILLSAP'S SUPPLY — plugin "extras" layer (loaded AFTER millsap-widgets.css)

   1) Inline-style conversions: several elements in the approved HTML carry
      design styles as INLINE style="" attributes. Inline styles can never be
      overridden by Elementor's generated CSS, which would make those elements
      un-editable. They are converted here to classes with equivalent values
      and ENOUGH SPECIFICITY to beat every competing rule in the base sheet,
      so the default rendering is pixel-identical while Elementor controls
      (which generate .elementor-element-xxx … selectors) can still win.

   2) Optional behavior classes used by widget switches (static header, flat
      CTA band without the diagonal stripe texture).

   3) Elementor img-override armor: Elementor core ships
      `.elementor img{height:auto;max-width:100%}` with the SAME specificity
      as our `.ms-brand img` / `.ms-footer img` / `.ms-deliv__img` sizing —
      whoever loads later wins, and Elementor may load later. These armor
      rules re-assert the approved sizes with one extra class, so the logo,
      footer logo and delivery image can never un-size. Values are identical
      to the base stylesheet (pixel output unchanged); Elementor's own
      generated widget CSS (higher specificity) still overrides them.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 3) Elementor img-override armor ── */
.ms-home .ms-brand img {
  height: 58px;
  width: auto
}

.ms-home .ms-footer img {
  height: 64px;
  width: auto
}

.ms-home .ms-deliv__img {
  height: 100%;
  min-height: 420px
}

@media (max-width: 1060px) {
  .ms-home .ms-brand img {
    height: 52px
  }
}

@media (max-width: 940px) {
  .ms-home .ms-deliv__img {
    aspect-ratio: 16/11;
    height: auto;
    min-height: 0
  }
}

/* section h2 that sat outside .ms-shead (why / delivery) — was inline */
.ms-home .ms-h2sec {
  font-size: clamp(36px, 4.6vw, 56px);
  margin: 20px 0 18px
}

/* intro paragraph — was inline "font-size:17.5px" (+ muted color variant) */
.ms-home .ms-lead {
  font-size: 17.5px
}

.ms-home .ms-lead--mut {
  color: var(--mut)
}

/* full-width button — was inline "width:100%" (calculator + quote submit) */
.ms-home .ms-btn--full {
  width: 100%
}

/* "results update live" hint — was inline margin/size/color/align
   (specificity 3 classes on purpose: must beat .ms-calc__form>p) */
.ms-home .ms-calc .ms-live-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--mut);
  text-align: center
}

/* materials footnote phone link — was inline copper style */
.ms-home .ms-matnote__tel {
  color: var(--copper-3);
  font-weight: 700;
  text-decoration: none
}

/* quote-form hint phone link — was inline copper style */
.ms-home .ms-quote__tellink {
  color: var(--copper);
  font-weight: 700;
  text-decoration: none
}

/* footer bottom-bar brand link — was inline style */
.ms-home .ms-footer__brandlink {
  color: var(--lt);
  text-decoration: underline;
  font-weight: 600
}

/* ── widget switch classes ── */

/* header: "sticky header" switch OFF */
.ms-home.ms-header--static {
  position: relative;
  top: auto
}

/* CTA band: "diagonal stripe texture" switch OFF */
.ms-home.ms-ctaband--flat {
  background: var(--copper)
}

/* ── Elementor integration armor ──
   Modern Elementor kits default "Space Between Widgets" to 20px, which is
   applied as margin-block-end on every widget inside a legacy section. The
   homepage sections must stack flush (pixel-identical to the approved page),
   so zero it for Millsap widgets only — everything else on the site is
   untouched. */
.elementor-widget-wrap > .elementor-widget[class*="elementor-widget-millsap_"] {
  margin-block-end: 0
}