.section--footer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     var(--bg-mobile);
  }

.wrap--footer {
  padding: 20px 20px 70px 20px;
}

.footer__logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
}

.footer__logo img {
  display: block;
  height: 100%;
  width: 100%;
}

.footer__menu {

  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  list-style: none;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--brand-grey-color);

}
/* =========================
           暂时隐藏
   ========================= */

.footer__nav {
  display: none !important;
}
.footer__menu a {
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-size: 24px;
  color: var(--background-color);
  font-family: var(--ff-heading);
  text-decoration: none;
}


.footer__contact {
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  /* padding-top: 16px; */
  font-style: normal;
  align-items: flex-start;
}
.footer__contact-title {
  color: var(--background-color);
  font-size: 1.2em;
    font-weight: 600; /* 让标题加粗 */
    margin-right: 0.5em; /* 在标题和内容之间增加一点空隙 */
}
.footer__email,
.footer__address {
  color: var(--background-color);
  text-decoration: none;
  padding-top: 12px;
  padding-bottom: 12px;
}



.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-btn {
  display: inline-flex;
position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  /* padding-top: 16px; */
  color: var(--background-color);
}

.social-btn svg {
  /* 设置你想要的图标视觉尺寸 */
  width: 30px;
  height: 30px;
  fill: currentColor;
  pointer-events: none;
}

.social-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

.footer__legal {
  color: var(--background-color);
  opacity: .85;
}

@media (min-width: 768px) {
.section--footer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg-tablet, var(--bg-desktop));
/*  */
}

}
@media (min-width: 1024px) {
.section--footer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg-desktop);
/*  */
}
  .wrap--footer {
    /* Define a multi-column grid layout */
    /* This creates 4 columns of varying sizes */
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;

    /* (Optional but highly recommended) Define grid areas for readability */
    grid-template-areas:
      "logo      nav    contact   social"
      "subscribe nav    contact   social"
      "legal     legal  legal     legal";

    /* Increase spacing for a less cramped feel on desktop */
    padding: 60px 10px;
    gap: 50px clamp(30px, 3vw, 60px);

    /* Set a max-width to prevent the footer from becoming too wide on huge screens */
    max-width: 1280px;
  }

  /* --- Assign elements to their grid areas --- */

  .footer__logo {
    grid-area: logo;
    /* Align the logo to the start of its grid area */
    justify-self: start;
    width: 35vw;
    max-width: 500px;
  }

  .footer__nav {
    grid-area: nav;
    grid-row: 1 / 3; 
  }

  .footer__contact {
    grid-area: contact;
    grid-row: 1 / 3; 
  }

  .footer__social {
    grid-area: social;
    grid-row: 1 / 3; 
    column-gap: 20px;
    /* Align social icons to the end of their grid area */
    justify-self: self-start;
    align-self: start;
  }

.footer-subscribe {
grid-area: subscribe;
}
  .footer__legal {
    grid-area: legal;
    /* Center the legal text */
    justify-self: center;
    padding-top: 20px;
    border-top: 1px solid var(--brand-grey-color);
  }

  /* --- Adjust element-specific styles for desktop --- */

  .footer__logo a {
    /* Give the logo a defined max-width instead of 100% to control its size */

    height: auto;
    /* Adjust based on your logo's design */
    justify-content: flex-start;
    /* Align logo SVG to the left within its link container */
  }

  .footer__menu {
    /* On desktop, we likely have enough space, so let's stack links vertically */
    flex-direction: column;
    align-items: flex-start;
    /* Align links to the left */
    gap: 8px;
    /* Reduce the gap for a tighter vertical list */
    padding: 0;

    border-bottom: none;
    /* The main legal section will have the border now */
  }

  .footer__menu a {
    /* Optionally slightly reduce font-size if it looks too large, or keep it */
    font-size: clamp(22px, 2vw, 26px);
    height: auto;
    /* Let height be natural, touch target size is less critical with a mouse */
    padding: 10px 0;
    /* Add some small padding for better hover feel */
  }

  .footer__email,
  .footer__address {
    /* We can increase the font size for better readability on desktop */
    font-size: clamp(16px, 1.5vw, 20px);
    ;
    /* Reset padding as the parent container now has enough space */
    padding: 10px 0;
  }

  .footer__contact {
    gap: 12px;
    /* Add a nice gap between address and email */
  }

  .social-btn {
    /* You can keep 48px, or slightly reduce it for desktop if you prefer */
    width: clamp(40px, 4vw, 50px);
    height: clamp(40px, 4vw, 50px);
    padding: 10px 0;
  }

  .social-btn svg {
    width: clamp(30px, 3vw, 40px);
    height: clamp(30px, 3vw, 40px);
  }
}



/* 1. 整体容器布局 (可调整) */
.footer-subscribe {
  max-width: 450px;
  display: flex;
  flex-direction: column;
  border-radius: 8px; /* 轻微的圆角 */
  text-align: start; /* 文字居中 */
}

/* 2. 提示文字样式 (可调整) */
.footer-subscribe .subscribe-prompt {
  font-size: 24px; /* 字体大小 */
  color: var(--background-color); /* 字体颜色 */
  margin-top: 0;
  margin-bottom: 22px; /* 和下方表单的间距 */
  /* font-family: inherit; */
}

/* 3. Forminator 表单布局调整 */
.footer-subscribe .forminator-row {
  display: flex; /* 使用 Flexbox 布局，让输入框和按钮在同一行 */
  gap: 10px; /* 输入框和按钮之间的间距 */
}
.footer-subscribe .forminator-col {
  flex-grow: 1; 
}

/* 4. 邮件输入框样式 (可调整) */
.footer-subscribe .forminator-input {
  width: 100%;
  padding: 15px 15px; /* 输入框内部的留白 */
  border: 1px solid var(--brand-grey-color); /* 边框颜色 */
  border-radius: 5px; /* 输入框圆角 */
  font-size: 1em; /* 字体大小 */
    /* font-family: inherit; */
}

/* 输入框获得焦点时的样式 */
.footer-subscribe .forminator-input:focus {
  outline: none; /* 去除默认的蓝色外框 */
  border-color: var(--brand-red-color); /* 焦点状态下的边框颜色 (可改为你的品牌色) */
}

/* 5. 订阅按钮样式 (可调整) */
.footer-subscribe .forminator-button-submit {
  width: 100%;
  padding: 10px 25px; /* 按钮内部留白 */
  border: none; /* 去除边框 */
  background-color: var(--brand-red-color); /* 按钮背景色 (可改为你的品牌色) */
  color: var(--background-color); /* 按钮文字颜色 */
  border-radius: 6px; /* 按钮圆角 */
  font-size: 1.2em; /* 字体大小 */
  font-weight: bold;
    /* font-family: inherit; */
  cursor: pointer;
}