/* footer.css — contact banner + dark navy footer (2.2.28)
   Cool navy family (deep blue + white + light gray). No warm accents.
   Dark navy footer bar matches concept-B header; light contact banner bridges page → footer.
   2.2.28: raise footer text contrast (near-white body/links on navy; base color inheritance). */

/* ---------- Contact banner (soft light band above dark footer) ---------- */
.footer_content {
  background: var(--hue-tint, #E6ECF5);
  border-top: 1px solid rgba(11, 47, 102, 0.08);
}

.footer_content_w {
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.footer_content1 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  row-gap: 1.25rem;
}

.footer_content1_l {
  width: 72%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  column-gap: 1.25rem;
}

.footer_content1_l .img_box {
  width: 16.4%;
  max-width: 120px;
  flex: 0 0 auto;
}

.footer_content1_l .img_box img {
  width: 100%;
  border-radius: 6px;
}

.footer_content1_l .r_box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 52rem;
}

.footer_content1_l .r_box .title {
  color: var(--hue);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.footer_content1_l .r_box .text {
  color: #5a6b82;
  padding-top: clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem);
  line-height: 1.65;
}

.footer_content1_r {
  width: auto;
  flex: 0 0 auto;
  text-align: center;
}

.footer_content1_r .public_page_btn2 {
  display: inline-block;
  min-width: 10rem;
  padding: 0 1.75rem;
  background: var(--hue);
  color: #fff;
  border: 1px solid var(--hue);
  border-radius: 6px;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.footer_content1_r .public_page_btn2:hover {
  background: var(--hue-2);
  border-color: var(--hue-2);
  color: #fff;
}

/* ---------- Dark navy footer ---------- */
.public_footer {
  position: relative;
  background: var(--hue);
  /* Base light text — stops browser/body dark color from washing out unmarked nodes */
  color: #E8EEF5;
}

.footer_top_w {
  padding-top: clamp(3rem, 2.2rem + 3.2vw, 5.25rem);
  padding-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 4rem);
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  row-gap: 0;
}

/* Brand stack: mark above + Hengyou Chemical (same family as header 2.2.25) */
.footer_logo {
  width: auto;
  max-width: 11rem;
}

.footer_logo a,
.footer_logo a.ycx_brand_link {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  line-height: 1.15;
}

.footer_logo a img,
.footer_logo .ycx_brand_img {
  width: auto;
  height: 40px;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.footer_logo .ycx_brand_name {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.2;
}

/* Legal / company line under brand (Customizer company_name) */
.footer_top1_01 {
  color: #DCE4F0;
  padding-top: clamp(0.65rem, 0.45rem + 0.5vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Company blurb under legal name — near-white for WCAG on navy */
.footer_top1_desc {
  color: #E8EEF5;
  line-height: 1.7;
  padding-top: 12px;
  max-width: 360px;
}

.footer_top1_02 {
  padding-top: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

.footer_top1_02 .item {
  margin-bottom: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  column-gap: 2px;
}

.footer_top1_02 .item .iconfont {
  width: clamp(1.75rem, 1.712rem + 0.16vw, 1.875rem);
  font-size: clamp(1.25rem, 1.2rem + 0.16vw, 1.4rem);
  color: #E8EEF5;
  flex: 0 0 auto;
  line-height: 1.4;
}

.footer_top1_02 .item .r_box {
  width: calc(100% - clamp(1.75rem, 1.712rem + 0.16vw, 1.875rem));
  color: #F5F7FA;
  line-height: 1.5;
}

.footer_top1_02 .item .r_box a {
  color: #F5F7FA;
  text-decoration: none;
  transition: color 0.2s;
}

.footer_top1_02 .item .r_box a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer_top_list_item {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer_top_title {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  color: #fff;
  padding-top: clamp(0.85rem, 0.7rem + 0.4vw, 1.15rem);
  padding-bottom: clamp(0.95rem, 0.8rem + 0.4vw, 1.25rem);
  letter-spacing: 0.02em;
}

.footer_top_list a {
  display: block;
  color: #E8EEF5;
  margin-bottom: 6px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.2s;
}

.footer_top_list a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 2.2.31: link columns are separate (top2/3/4); no stack grid on top3 */
.footer_media {
  column-gap: 8px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  /* under brand/contact in footer_top1 */
  padding-top: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

.footer_media a {
  display: block;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: #fff;
  text-align: center;
  width: clamp(2rem, 1.8rem + 0.6vw, 2.4rem);
  height: clamp(2rem, 1.8rem + 0.6vw, 2.4rem);
  line-height: clamp(2rem, 1.8rem + 0.6vw, 2.4rem);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.25s, border-color 0.25s;
}

.footer_media a:hover {
  background: var(--hue-2);
  border-color: var(--hue-2);
}

/* 2.2.31: brand+social | Products | Quick Links | Resources — equal link cols, no social in link area */
.footer_top1 {
  width: 28%;
}

.footer_top2 {
  width: 22%;
}

.footer_top3 {
  width: 22%;
}

.footer_top4 {
  width: 22%;
}

/* Copyright bar — deeper navy */
.public_footer_bot {
  background: var(--hue-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #DCE4F0;
}

.footer_bot_w {
  padding-top: clamp(1.15rem, 0.95rem + 0.7vw, 1.65rem);
  padding-bottom: clamp(1.15rem, 0.95rem + 0.7vw, 1.65rem);
}

.footer_bot1 {
  color: #DCE4F0;
  text-align: center;
  line-height: 1.55;
}

.footer_bot1 a {
  color: #E8EEF5;
  text-decoration: none;
  transition: color 0.2s;
}

.footer_bot1 a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (min-width: 1201px) and (max-width: 1410px) {
  .footer_top1 {
    width: 27%;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .footer_content1_l {
    width: 70%;
  }
  .footer_top1 {
    width: 30%;
  }
  .footer_top2 {
    width: 22%;
  }
  .footer_top3 {
    width: 22%;
  }
  .footer_top4 {
    width: 22%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer_content1_r {
    width: 100%;
    text-align: left;
  }
  .footer_content_w {
    padding-bottom: 32px;
  }
  /* 2.2.31: brand left; three link columns share the rest (hide none) */
  .footer_top1 {
    width: 34%;
  }
  .footer_top2 {
    width: 20%;
  }
  .footer_top3 {
    width: 20%;
  }
  .footer_top4 {
    width: 20%;
  }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .footer_content1_l .img_box {
    display: none;
  }
  .footer_content1_l .r_box {
    width: 100%;
  }
  .footer_content1_l {
    width: 100%;
  }
  .footer_content1_r {
    width: 100%;
    text-align: left;
  }
  .footer_content_w {
    padding-bottom: 24px;
  }
  .footer_top1 {
    width: 100%;
  }
  /* 2.2.31: show all three link columns stacked on mobile; social stays under brand */
  .footer_top2 {
    width: 100%;
    margin-top: 28px;
    display: block;
  }
  .footer_top3 {
    width: 100%;
    margin-top: 16px;
    display: block;
  }
  .footer_top4 {
    width: 100%;
    margin-top: 16px;
  }
  .footer_media {
    padding-top: 14px;
  }
  .footer_top_w {
    padding-top: 32px;
  }
  .footer_logo .ycx_brand_name {
    font-size: 13px;
  }
  .footer_logo a img,
  .footer_logo .ycx_brand_img {
    height: 34px;
  }
}

/* contact banner toggle: <body data-contact-banner="off"> hides it */
body[data-contact-banner="off"] .footer_content {
  display: none;
}