/* Magnetrix - logo lockup, header balance, hero media.
   Loaded after grid.css. Covers the header and hero parts that live in Xpro
   widgets (style controls not writable via API) plus the image aspect ratio,
   which the Elementor Image widget does not expose. */

/* 1. LOGO LOCKUP
   The mark is 43:24, so its optical centre sits above the midpoint of the
   two-line wordmark. Centre them and match the measures. */
.xpro-theme-builder-header .elementor-widget-xpro-site-logo,
#xpro-theme-builder-footer .elementor-widget-xpro-site-logo {
  display: flex;
  align-items: center;
  line-height: 0;
}
.xpro-theme-builder-header .elementor-widget-xpro-site-logo img {
  height: 34px !important;
  width: auto !important;
  display: block;
}
#xpro-theme-builder-footer .elementor-widget-xpro-site-logo img {
  height: 38px !important;
  width: auto !important;
  display: block;
}
.xpro-theme-builder-header .elementor-widget-xpro-heading h6,
#xpro-theme-builder-footer .elementor-widget-xpro-heading h6 {
  margin: 0 !important;
  line-height: 1.02 !important;
}
.xpro-theme-builder-header .elementor-widget-xpro-heading:last-of-type h6,
#xpro-theme-builder-footer .elementor-widget-xpro-heading:last-of-type h6 {
  letter-spacing: .305em !important;
  padding-top: 3px;
}

/* 2. HEADER BALANCE
   The logo flank was 250px and the CTA flank 300px, so space-between pushed
   the nav about 25px left of true centre. Equalise both flanks. */
.xpro-theme-builder-header .e-con-inner { align-items: center !important; }

@media (min-width: 1025px) {
  .xpro-theme-builder-header .e-con-inner > .e-con:first-child,
  .xpro-theme-builder-header .e-con-inner > .e-con:last-child {
    flex: 0 0 300px !important;
    width: 300px !important;
  }
  .xpro-theme-builder-header .e-con-inner > .e-con:first-child { justify-content: flex-start; }
  .xpro-theme-builder-header .e-con-inner > .e-con:last-child  { justify-content: flex-end; }
  .xpro-theme-builder-header .elementor-widget-xpro-horizontal-menu { width: 100%; }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav { justify-content: center; }
}

/* 3. HEADER BUTTONS
   Fixed height so both pills match and sit on the nav centre line. */
.mx-hbtn { display: flex; align-items: center; }
.mx-hbtn .xpro-elementor-button {
  height: 42px;
  padding: 0 20px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}
.mx-hbtn .xpro-button-text { line-height: 1 !important; }

/* 4. HERO MEDIA
   4:3 at this column width ran about 500px tall and pushed the stat strip
   off a 900px viewport. 16:10 keeps the whole band visible. */
.mx-glow .elementor-widget-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* 5. HERO TYPE
   Hold the headline to a measure so it breaks in three lines rather than
   running the full column width. */
.mx-glow h1 { max-width: 17ch; }
.mx-glow .elementor-widget-text-editor { max-width: 46ch; }

.mx-glow .elementor-widget-heading:first-of-type .elementor-heading-title {
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .mx-glow .elementor-widget-heading:first-of-type .elementor-heading-title {
    white-space: normal;
    letter-spacing: .16em !important;
  }
}
@media (max-width: 767px) {
  .mx-glow h1 { max-width: none; }
  .mx-glow .elementor-widget-image img { aspect-ratio: 4 / 3; }
  .xpro-theme-builder-header .elementor-widget-xpro-site-logo img { height: 30px !important; }
}