/* ============================================================================
   home2.css — Home2.html overrides (layered AFTER home.css).
   Brand blue: #0F298F. Adds: solid square brand-blue buttons, brand-blue bold
   headlines with tighter line-height, white masthead text, a full-bleed image
   Sustainability Report section, a blue HTML "Progress at a Glance" section, and
   a 4-logo certification row.
   ========================================================================== */

/* ---- Brand-blue square button ---- */
#esg .btn-brand {
  display: inline-block;
  background-color: #0F298F;
  color: #ffffff !important;
  font-family: Arial;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 16px 34px;
  border: 2px solid #0F298F;
  border-radius: 0;            /* square rectangle */
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#esg .btn-brand:hover { background-color: #ffffff; color: #0F298F !important; }

/* ---- Headlines: brand blue, bold, tighter line-height (light backgrounds) ----
   #esg section .section-title (1,1,1) beats the theme's generic
   `section .section-title` (600) and the responsive `#esg .section-title` rules. */
#esg section .section-title {
  color: #0F298F;
  font-weight: 700 !important;
  line-height: 1.15;
}
#esg .resource-card .card-body .report-title,
#esg .beyond-certifications .beyond-body .report-title {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #0F298F;
  margin: 0 0 14px;
  padding: 0;
}
/* keep the news headline consistent (blue + bold) */
#esg section.newsletter .section-title { color: #0F298F; font-weight: 700; line-height: 1.2; }

/* ---- Resource card image: show the full image, never crop (theme uses
   align-self:stretch + object-fit:cover, which crops). Let it size to its
   natural aspect ratio in every view. ---- */
#esg section.resources .resource-card .card-img {
  align-self: center;
  height: auto;
  object-fit: contain;
}

/* ---- Masthead (header bar): drop the drop-shadow ---- */
header.header { box-shadow: none !important; }

/* ---- Masthead (hero): pure white, bold ---- */
#esg section.banner .banner-content h1 {
  color: #ffffff !important;
  font-weight: 700;
  line-height: 1.1;
}
/* theme adds an 85px flex gap (+ space-between) between title and CTA;
   clear it so the button sits just below the title */
#esg section.banner .banner-content { justify-content: flex-start; gap: 0 !important; }
#esg section.banner .banner-content .btn-brand { margin-top: 24px; align-self: flex-start; }
/* keep the title + button as the top-most layer above the parallax background */
#esg section.banner .container,
#esg section.banner .banner-content { position: relative; z-index: 5; }

/* ---- Sustainability Report: full-bleed image background, white text ---- */
#esg section.sustainability-report {
  position: relative;
  padding: 90px 0;
  background-image: linear-gradient(rgba(8, 38, 28, 0.78), rgba(8, 38, 28, 0.82)),
                    url(../../esg/uploads/2024/06/jpeg-optimizer_shutterstock_1833381685.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#esg section.sustainability-report .sr-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
#esg section.sustainability-report .sr-thumb {
  flex: 0 0 300px;
  width: 300px;
  max-width: 40%;
  height: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
#esg section.sustainability-report .sr-body { flex: 1; }
#esg section.sustainability-report .section-title { color: #ffffff; margin-bottom: 24px; }
#esg section.sustainability-report .section-content { color: #ffffff; }
#esg section.sustainability-report .section-content p { color: #ffffff; }
#esg section.sustainability-report .section-content + .section-content { margin-top: 16px; }
#esg section.sustainability-report .btn-brand { margin-top: 28px; }
@media (max-width: 767.98px) {
  #esg section.sustainability-report .sr-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  /* clear the 300px flex-basis (which becomes a forced height in the column and
     squashes the cover) so the image keeps its natural aspect ratio */
  #esg section.sustainability-report .sr-thumb { flex: 0 0 auto; width: 220px; max-width: 70%; height: auto; }
}

/* ---- Our Progress at a Glance: blue background, Featured Stats JPEG ---- */
/* no bottom padding: the same-blue past-reports band follows, so its 26px top
   padding alone gives the "Looking for past reports?" text balanced spacing */
#esg section.progress-text { background-color: #0F298F; padding: 90px 0 0; }
#esg section.progress-text .section-title { color: #ffffff; text-align: center; margin-bottom: 48px; }
#esg section.progress-text .progress-image {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);   /* full-bleed: span the entire page width */
  height: auto;                    /* height varies with the section */
}

/* ---- "Looking for past reports?": shorter band + red rectangle button ---- */
#esg section.past-reports { padding: 26px 0; }
#esg section.past-reports .section-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FF2727;
  color: #ffffff;
  font-family: Arial;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 0;            /* red square rectangle */
  text-decoration: none;
}
#esg section.past-reports .section-link > svg path { fill: #ffffff; }

/* ---- Certifications: four logos in a clean row (no circular chips) ---- */
#esg section.certification .certification-container .certification-list {
  justify-content: center;
  align-items: center;
  gap: 4%;
}
#esg section.certification .certification-container .certification-list .certification {
  flex: 0 1 20%;
  text-align: center;
}
#esg section.certification .certification-container .certification-list .certification .certification-thumb {
  max-width: 150px;
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin: 0 auto;
  object-fit: contain;
}
@media (max-width: 575px) {
  #esg section.certification .certification-container .certification-list .certification { flex: 0 1 42%; margin-bottom: 24px; }
}

/* ---- Mobile refinements: tighter vertical rhythm + full-width tap targets ---- */
@media (max-width: 767.98px) {
  /* the theme stacks 90–95px desktop paddings; tighten them on phones */
  #esg section.vision { padding-top: 56px; padding-bottom: 56px; }
  #esg section.sustainability-report { padding: 56px 0; }
  #esg section.progress-text { padding-top: 56px; }
  #esg section.progress-text .section-title { margin-bottom: 28px; }

  /* give the hero real height on mobile and vertically centre the title + button
     (the compact content was top-aligned and tucked under the sticky header) */
  #esg section.banner .banner-content { min-height: 70vh !important; justify-content: center; }

  /* full-width, easy-to-tap primary CTAs */
  #esg .btn-brand,
  #esg section.past-reports .section-link {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  #esg section.banner .banner-content .btn-brand { align-self: stretch; }
  /* stack the past-reports band (text over full-width button) on mobile.
     the theme caps .section-link at max-width:fit-content — clear it for full width */
  #esg section.past-reports .container { flex-direction: column; align-items: flex-start; }
  #esg section.past-reports .section-link { max-width: none; margin-top: 18px; }

  /* show the full resource image on mobile (theme forces a fixed 220px crop) */
  #esg section.resources .resource-card .card-img { height: auto; }
}