/*
  BLOG HOMEPAGE ONLY
  Purpose: make blog.html visually follow the bd.impro-solution.com main homepage
  for screen width, typography, header logo, menu style and Send RFQ button.
  Existing blog content, article cards, filters, links and JS are not replaced.
*/

body.blog-page {
  font-family: "DM Sans", Arial, sans-serif !important;
}

/* Wider desktop frame like the main homepage */
body.blog-page .container {
  width: calc(100% - 64px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Same font family direction as main homepage */
body.blog-page h1,
body.blog-page h2,
body.blog-page h3,
body.blog-page h4,
body.blog-page h5,
body.blog-page h6,
body.blog-page p,
body.blog-page a,
body.blog-page button,
body.blog-page input,
body.blog-page summary,
body.blog-page span,
body.blog-page strong {
  font-family: "DM Sans", Arial, sans-serif !important;
}

/* Keep blog hierarchy, but remove the heavier Plus Jakarta feel */
body.blog-page .blog-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

body.blog-page .section-heading h2,
body.blog-page .editorial-copy h2,
body.blog-page .faq-section h2,
body.blog-page .final-cta h2 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

body.blog-page p,
body.blog-page .hero-lead,
body.blog-page .feature-card p,
body.blog-page .article-card p,
body.blog-page .faq-list p {
  font-weight: 400 !important;
}

/* Main homepage top information bar */
body.blog-page .topbar {
  background: #082d50 !important;
  color: #ffffff !important;
  min-height: 34px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

body.blog-page .topbar .topbar-inner {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

body.blog-page .topbar a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Header dimensions copied toward the current main homepage visual */
body.blog-page .site-header {
  background: #ffffff !important;
}

body.blog-page .site-header .nav-wrap {
  min-height: 84px !important;
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
}

/* Same larger Impro logo treatment used on the main homepage */
body.blog-page .site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.blog-page .site-header .brand .site-master-logo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: none !important;
}

/* Main homepage menu: title case, lighter than the old BLOG uppercase menu */
body.blog-page .main-nav {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

body.blog-page .main-nav > a,
body.blog-page .main-nav > .has-drop > a,
body.blog-page .main-nav .nav-dropdown-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body.blog-page .main-nav > a:hover,
body.blog-page .main-nav > .has-drop:hover > a,
body.blog-page .main-nav > .has-drop:hover > .nav-dropdown-trigger,
body.blog-page .main-nav > .has-drop:focus-within > .nav-dropdown-trigger {
  color: #e11d2e !important;
}

/* Keep dropdown readable and stable */
body.blog-page .main-nav .has-drop {
  position: relative !important;
}

body.blog-page .main-nav .has-drop .drop {
  z-index: 1000 !important;
}

body.blog-page .main-nav .has-drop .drop a {
  font-family: "DM Sans", Arial, sans-serif !important;
  text-transform: none !important;
}

/* Main homepage Send RFQ: red pill, not the old orange square style */
body.blog-page .site-header .cta {
  flex: 0 0 auto !important;
  min-width: 112px !important;
  height: 47px !important;
  margin-left: 28px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #df1f2d !important;
  color: #ffffff !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Main homepage active-line style if any menu item uses .active */
body.blog-page .main-nav > a.active {
  position: relative !important;
  color: #df1f2d !important;
}

body.blog-page .main-nav > a.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -12px !important;
  height: 2px !important;
  background: #df1f2d !important;
}

/* Same single-character mobile hamburger as main index */
body.blog-page .hamburger {
  font-family: Arial, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Prevent header crowding on medium desktop */
@media (max-width: 1180px) and (min-width: 901px) {
  body.blog-page .container {
    width: calc(100% - 40px) !important;
  }

  body.blog-page .site-header .brand {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  body.blog-page .main-nav {
    gap: 20px !important;
  }

  body.blog-page .main-nav > a,
  body.blog-page .main-nav > .has-drop > a,
  body.blog-page .main-nav .nav-dropdown-trigger {
    font-size: 13px !important;
  }

  body.blog-page .site-header .cta {
    margin-left: 20px !important;
    min-width: 106px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Keep existing blog mobile layout; only align width/logo proportions */
@media (max-width: 900px) {
  body.blog-page .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  body.blog-page .site-header .nav-wrap {
    min-height: 74px !important;
    height: 74px !important;
  }

  body.blog-page .site-header .brand {
    flex: 0 0 196px !important;
    width: 196px !important;
    min-width: 0 !important;
    max-width: 54vw !important;
  }

  body.blog-page .site-header .brand .site-master-logo {
    max-height: 62px !important;
  }
}

@media (max-width: 640px) {
  body.blog-page .container {
    width: calc(100% - 28px) !important;
  }

  body.blog-page .site-header .brand {
    width: 188px !important;
    max-width: 58vw !important;
  }

  body.blog-page .site-header .brand .site-master-logo {
    max-height: 60px !important;
  }
}

@media (max-width: 390px) {
  body.blog-page .site-header .brand {
    width: 174px !important;
    max-width: 60vw !important;
  }
}