/*
  Momentum Partnership Group — site-specific overrides.
  Kept separate from the Consulo template's own stylesheets (style.css / base.css)
  so template updates never clobber our brand customizations, and so it's obvious
  at a glance what we changed vs. what shipped with the template.
*/

/* --- Logo --------------------------------------------------------------- */
/* The delivered logo is a two-line stacked lockup (not the wide single-line
   wordmark the template's placeholder assumed), so it needs an explicit
   height rather than relying on the template's max-width-only sizing. */
.header-logo img,
.footer-logo img {
  height: 40px;
  width: auto;
  max-width: none;
}

/* assets/img/logo-white.png and assets/img/logo.png are the SAME file —
   the header/footer use them on dark backgrounds, the mobile drawer menu
   (light background) uses the color version. Rather than maintain a second
   hand-exported "white" art file, we knock the color version out to solid
   white with a filter wherever it needs to sit on a dark surface. Same
   pattern for the header icon (icon.png / icon-white.png). */
img[src$="logo-white.png"],
img[src$="icon-white.png"] {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .header-logo img,
  .footer-logo img {
    height: 34px;
  }
}

/* --- Hero logo badge ----------------------------------------------------- */
/* Replaces the "+Momentum Partnership Group+" pill on the homepage hero: the
   full-color logo on a white card so it draws attention ahead of the
   headline, per client feedback (Notes 09-08).
   Sized per Notes 09-14 ("increase the logo to about the size of the 'l' in
   people") — the overall logo image height should land at roughly the
   height of that letter (~85px in the headline), not the size of any one
   word inside the logo artwork. */
.hero-logo-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  padding: 18px 30px;
}

.hero-logo-badge img {
  display: block;
  height: 112px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 767px) {
  .hero-logo-badge {
    padding: 13px 20px;
  }
  .hero-logo-badge img {
    height: 68px;
  }
}

/* --- Hero slider full-bleed ------------------------------------------------ */
/* The template's `hero-slider` custom element is `display: flex`, but its only
   child — Swiper's `.swiper` — has no width/flex set, so it collapses to the
   intrinsic width of the slide content (~800px) and Swiper's own
   `margin-inline: auto` then centres that narrow column. Forcing the swiper to
   fill the flex container makes the hero span the full viewport again (Swiper
   measures this width on init and sizes the slides to match). */
.hero-slider > .swiper {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}