/* =====================================================================
   responsive.css — shared mobile/tablet fixes and SEO helpers.
   Loaded after each page's own stylesheet, so it only patches what
   was broken; the desktop design is unchanged.
   ===================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Headings that used to be <div>s keep exactly their old look.
   :where() has zero specificity, so every existing class rule still wins. */
:where(.seo-h) {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Text for search engines and screen readers that is not shown on screen
   (used where a banner image already displays the same words). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Elements that used to be headings (h2/h4) but are not headings:
   same default look as before, every existing class rule still wins */
:where(.was-h2) {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
}
:where(.was-h4) {
  font-weight: bold;
}

/* Menu: featured partner links wrapper is layout-neutral */
.featuredPartnerLinks {
  display: contents;
}

/* Banner titles: the hyphen is drawn by CSS, so the heading text stays one word */
.upperLabelHeaderTxt .hy::after {
  content: "-\A";
  white-space: pre;
}

/* Section titles that are now real headings (look unchanged) */
.textContainer .industriesSub,
.solutionTextContainer .solutionSub {
  display: block;
  font-weight: 700;
  line-height: inherit;
  text-decoration-line: none;
}
.termsPrivacy .termsSub {
  font-weight: 700;
}
h2.exploreHeader {
  line-height: inherit;
}
.coopGridItem h3 {
  padding: 2rem 0;
  font-size: 1.5em;
  font-weight: 700;
}
.coopGridItem .coopStepText {
  text-align: center;
  font-weight: 400;
}

/* Images inside text columns never push the page wider than the screen */
.solutionTextContainer img,
.articleText img,
.exploreGridItemImg img {
  max-width: 100%;
  height: auto;
}
.exploreGridItemImg img {
  max-height: 100%;
  object-fit: contain;
}

/* Footer legal links were 8px — too small to read or tap on phones */
.footerDown {
  height: auto;
  width: auto;
  gap: 0.5rem;
}
.footerDownDown {
  height: auto;
  gap: 1.5rem;
  justify-content: flex-start;
}
.footerDownElement {
  width: auto;
  font-size: 0.75rem;
}

/* ---------- Home: news cards (titles are now <h3>, same look as before) */
.newsGTB h3 {
  height: 6.75rem;
  font-size: 2em;
  font-weight: 700;
}

/* ---------- Solutions page: lead paragraphs (were <h1>) */
.text .textLead {
  line-height: 2.5rem;
}
.text .textLead span {
  font-weight: 800;
}

/* ---------- beSAFE / beENVI: body copy (was <h2>) and section titles (were <span>) */
.solutionPara {
  font-size: 1.5em;
  font-weight: 400;
  line-height: 40px;
}
.solutionTextContainer .solutionSub {
  display: block;
  font-weight: 700;
  line-height: inherit;
}

/* ---------- Articles: visible title (H1) */
.articleText .articleTitle {
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 1.5rem;
  text-align: start;
}

/* =====================================================================
   Small laptops & tablets in landscape (846–1300px): the desktop layout
   used fixed widths that were wider than these screens.
   ===================================================================== */
@media (min-width: 846px) and (max-width: 1300px) {
  /* Home – Our Solutions rows */
  .solutionsBox {
    gap: 3rem;
    padding: 0 5%;
    box-sizing: border-box;
  }
  .solutionsLogoImg {
    width: 44%;
    max-width: 39rem;
    height: auto;
    object-fit: cover;
    align-self: flex-start;
  }
  .solutionsBoxElements {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  .solutionsBoxTextArrow {
    width: fit-content;
    max-width: 100%;
  }
  .solutionsHeader {
    padding: 0 5%;
  }
  /* Home – How to cooperate (5 steps) */
  .coopGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0 4%;
  }
  .coopGridItem img {
    max-width: 100%;
    height: auto;
  }
}

/* Footer: logo box overlapped the "Solutions" column on small laptops */
@media (min-width: 901px) and (max-width: 1300px) {
  .footerUp {
    gap: 2rem;
  }
  .footerLeft {
    width: auto;
    flex: 1 1 auto;
    gap: 2rem;
  }
  .footerLogo {
    flex: 0 0 15.25rem;
  }
  .footerNav {
    width: auto;
    flex: 1 1 auto;
    max-width: 32.5rem;
    gap: 1.25rem;
  }
  .footerNavTopic {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Industries – "Explore other solutions" grid */
@media (min-width: 901px) and (max-width: 1300px) {
  .exploreGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* About – the five value cards wrap instead of running off-screen */
@media (min-width: 661px) and (max-width: 1000px) {
  .valuesElements {
    flex-wrap: wrap;
    row-gap: 3rem;
    padding: 0 4%;
  }
}

/* Tablets (661–1300px) */
@media (min-width: 661px) and (max-width: 1300px) {
  /* Terms of Use & Privacy – fixed 1256px text column */
  .termsPrivacyContainer {
    height: auto;
    padding: 0 6% 4rem;
  }
  .termsPrivacy,
  .arrowContainer {
    width: 100%;
    max-width: 1256px;
    height: auto;
    box-sizing: border-box;
  }
  .termsPrivacy {
    padding-bottom: 3rem;
  }
}

/* =====================================================================
   Phones (≤845px for the home page layout, ≤660px for inner pages)
   ===================================================================== */
@media screen and (max-width: 845px) {
  /* Home hero: 110px text broke "sustainable" mid-word on phones */
  .landingTextsHeader {
    font-size: clamp(2.75rem, 15.5vw, 6.875rem);
  }
  .solutionsBoxTextArrow {
    width: fit-content;
    max-width: 100%;
  }
  /* Home – News & Resources cards were wider than the screen */
  .newsResBox {
    width: 100%;
    box-sizing: border-box;
  }
  .newsGTB {
    width: auto;
    padding-right: 1.875rem;
  }
  .newsResGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .newsGridItem img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 660px) {
  .leftArrow2,
  .leftArrow1 {
    width: fit-content;
    max-width: 100%;
  }
  /* Page banner title box: 20rem square overflowed screens under ~340px */
  .upperLabelHeader {
    width: min(20rem, 86vw);
    height: min(20rem, 86vw);
  }
  .beTeamPositionsText {
    width: auto;
    max-width: 18.75rem;
  }
  .beTeamCollabHeaderText {
    padding-right: 0;
    font-size: clamp(2rem, 9vw, 3.125rem);
    overflow-wrap: anywhere;
  }
  .articleText .articleTitle {
    font-size: 2rem;
    overflow-wrap: anywhere;
  }
}

/* Very small phones (≤360px): banner titles such as "Industries" were wider than the screen */
@media screen and (max-width: 360px) {
  .upperLabelHeaderTxt {
    font-size: 3.5rem;
  }
}

/* Smallest phones (≤345px, e.g. iPhone SE 1st gen): 50px headings were wider than the screen */
@media screen and (max-width: 345px) {
  .header,
  .beTextFContainer {
    font-size: 13vw;
  }
}