/* ============================================================
   頁尾 Footer
   來源 style.css 行 3632-3900（純搬移，內容未改）
   ============================================================ */

/* ============================================================
   12 FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-bg-white);
  color: var(--c-text);
  padding: 30px 0 0;
  position: relative;
}

/* 主結構 */
.footer-grid {
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 45px;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr;
    padding-bottom: 25px;
    gap: 25px;
  }
}

.footer-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

@media (max-width: 991px) {
  .footer-left {
    order: 2;
  }
}

.footer-right {
  flex: 0 0 auto;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

@media (max-width: 1400px) {
  .footer-right {
    justify-content: flex-start;
  }
}

@media (max-width: 991px) {
  .footer-right {
    order: 1;
  }
}

/* 左區上半：Logo + 描述 (水平並排) */
.footer-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {  
  .footer-brand-row {
    gap: 15px;
  }
}

.footer-logo {
  display: inline-block;
  text-decoration: none;
  flex-shrink: 0;
  margin-bottom: 20px;
}

.footer-logo-image {
  width: 212px;
  /* 對應 Figma 211.7px */
  height: auto;
  display: block;
}

.footer-desc {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.304px;
  color: var(--c-text);
  margin: 0;
  text-align: left;
}

/* 右區上半：三據點 (橫排在 footer-left 內) */
.footer-offices {
  display: flex;
  justify-content: space-between;
  gap: 16px 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid #525252;
}

.office {
  width: 33.3333%;
}

@media (max-width: 767px){
  .office {
    width: 100%;
  }
}

.office-city {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.304px;
  color: var(--c-text);
  margin: 0 0 16px;
}

.office-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: 300;
  /* Light */
  font-size: var(--fs-sm);
  color: var(--c-text);
  margin: 6px 0;
  line-height: 1.5;
}

/* 小 icon — 地點 / 電話（用 CSS mask + SVG data URI），顏色改為深色 var(--c-text) 對應 Figma */
.ico {
  display: inline-block;
  flex-shrink: 0;
  /* width: 16px;
  height: 16px; */  
  width: 16px;
  height: 25px;
  background: var(--c-bg-dark);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.ico-pin {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2C7.58 2 4 5.58 4 10c0 5.25 7 12 8 12s8-6.75 8-12c0-4.42-3.58-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/></svg>");
}

.ico-tel {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24 11.36 11.36 0 003.57.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1.02l-2.2 2.2z'/></svg>");
}

.ico-fax {
  mask-image: url("../../img/fax.svg");
}

/* 社群 icons — 改為圖片版（用戶會後補 SVG）
   位於 footer-right 內，靠右下對齊 */
.footer-social {
  display: flex;
  gap: 17px;
  width: 100%;
}

.mobile_type.footer-social {
  display: none;
}

@media (max-width: 991px) {
  .pc_type.footer-social {
    display: none;
  }
  .mobile_type.footer-social {
    display: flex;
    padding-bottom: 25px;
  }
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: transform .25s, opacity .25s;
}

.footer-social a:hover {
  transform: translateY(-2px);
  opacity: 0.7;
}

.footer-social img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* 未補 icon 時隱藏 (避免破圖框) */
.footer-social img[src=""],
.footer-social img:not([src]) {
  opacity: 0;
}

/* 版權 — 分隔線 + 置中文字 */
.footer-copy {
  padding: 0;
}

@media (max-width: 991px) {
  .footer-copy {
    /* display: none; */
  }
}

.footer-copy p {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.304px;
  color: #7D7D7C;
  line-height: 1.5;
  margin: 2px 0;
}

.footer-keywords {
  /* 與第一行同樣字級，符合 Figma 規格 */
  margin-top: 0 !important;
}

/* RWD */
@media (max-width: 991.98px) {
  .footer-nav {
    text-align: left;
  }

  .footer-offices {    
    order: 2;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding-top: 15px;
  }

  .footer-brand-row {
    gap: 20px;
  }

  .footer-offices {
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .office-city {
    margin-bottom: 8px;
  }

  .footer-social {
    width: 100%;
    gap: 14px;
  }
}

.foot_menu_block {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

@media(max-width: 1400px) {
  .foot_menu_block {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 16px;
  }
}

@media(max-width: 991.98px) {
  .foot_menu_block {
    border-bottom: 1px solid #7D7D7C;
    padding-bottom: 20px;
    order: 2;
  }
}

@media(max-width: 1400px) {
  .foot_menu_grid.mobile_type {
    display: none;
  }
}

.foot_menu {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  cursor: pointer;
}

.foot_menu.active {
  color: #ED6D1F;
}

.foot_menu_sub {
  display: inline-block;
  width: 100%;
  padding-left: 10px;
  font-size: 16px;
  color: #7D7D7C;
  position: relative;
}

.foot_menu_sub.active {
  color: #ED6D1F;
}

.foot_menu_sub::before {
  position: absolute;
  top: 12px;
  left: 2px;
  width: 2px;
  height: 2px;
  background: #7D7D7C;
  content: '';
  border-radius: 50%;
  transform: translateY(-50%);
}

.foot_menu_sub:hover::before {
  background: #ED6D1F;
}

.foot_menu_sub.active::before {
  background: #ED6D1F;
}