/*
 * ========================================
 * footer-styles.css - SYN-TECH Website Footer Styles
 * Theme A: Warm / Trustworthy / Glass White + Green/Brown accents
 * 最後更新: 2026-01-07
 * ========================================
 */

/* Theme tokens (keep consistent with nav theme A) */
:root{
  --footer-ink: #0f1f1a;
  --footer-muted: rgba(15,31,26,.70);
  --footer-border: rgba(15,31,26,.12);

  --footer-surface: rgba(255,255,255,.88);       /* 玻璃白 */
  --footer-surface-strong: rgba(255,255,255,.94);

  --footer-accent: #2E4A3A;                      /* 深綠灰 */
  --footer-accent-2: #6E5834;                    /* 溫暖棕 */

  --footer-link: rgba(46,74,58,.92);
  --footer-link-hover: #2E4A3A;
}

/* Footer container */
.footer-section{
  position: relative;
  color: var(--footer-ink);
  padding: 2.75rem 2rem 1.25rem;
  text-align: center;

  /* 白底玻璃感 + 很淡的暖色暈染（不搶戲） */
  background:
    radial-gradient(circle at 20% 10%, rgba(110,88,52,.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(46,74,58,.10) 0%, transparent 45%),
    linear-gradient(to bottom, var(--footer-surface) 0%, rgba(255,255,255,.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-top: 1px solid var(--footer-border);
}

/* 上緣一條很精緻的品牌線（呼應 nav/header） */
.footer-section::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-accent), var(--footer-accent-2));
  opacity: .38;
}

.footer-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.footer-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.75rem;
}

/* Left: logo + text */
.footer-left{
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.company-logo-footer{
  width: 64px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  /* 輕微陰影：有層次但不浮誇 */
  filter: drop-shadow(0 2px 10px rgba(15,31,26,.14));
}

.footer-company-info{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-address,
.footer-contact{
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--footer-muted);
}

/* Right: links */
.footer-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  white-space: nowrap;
}

/* Links become subtle pill buttons */
.footer-link{
  color: var(--footer-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;

  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(46,74,58,.28);
  background: rgba(255,255,255,.55);
  transition: all .2s ease;
}

.footer-link:hover{
  color: var(--footer-link-hover);
  background: rgba(46,74,58,.10);
  border-color: rgba(110,88,52,.50);
  transform: translateY(-1px);
}

.footer-separator{
  color: rgba(15,31,26,.35);
  font-size: 1rem;
}

/* Bottom */
.footer-bottom{
  border-top: 1px solid rgba(15,31,26,.10);
  padding-top: 1rem;
  color: rgba(15,31,26,.55);
  text-align: left;
  font-size: 0.9rem;
}

/* -----------------------
   Responsive
----------------------- */
@media (max-width: 768px){
  .footer-section{
    padding: 2.25rem 1rem 1.1rem;
  }

  .footer-content{
    padding: 0 1rem;
  }

  .footer-info{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .footer-left{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-right{
    justify-content: center;
    white-space: normal;
    flex-wrap: wrap;
  }

  .footer-bottom{
    text-align: center;
  }
}

@media (max-width: 576px){
  .company-logo-footer{
    width: 60px;
  }

  .footer-address,
  .footer-contact{
    font-size: 0.85rem;
  }

  .footer-link{
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }
}

footer.footer-section .company-logo-footer {
  background: linear-gradient(135deg, rgba(46,74,58,.90), rgba(110,88,52,.85));
  padding: 10px;
  border-radius: 14px;
}

/* ========================================
   Footer Force Override (fix white text)
   放在 footer-styles.css 最底部，確保覆蓋舊樣式
   ======================================== */

footer.footer-section {
  color: #0f1f1a !important;
}

footer.footer-section p,
footer.footer-section .footer-address,
footer.footer-section .footer-contact,
footer.footer-section .footer-bottom,
footer.footer-section .footer-bottom p {
  color: rgba(15, 31, 26, 0.70) !important;
}

footer.footer-section .footer-link {
  color: rgba(46, 74, 58, 0.92) !important;
}

footer.footer-section .footer-link:hover {
  color: #2E4A3A !important;
}

footer.footer-section .footer-separator {
  color: rgba(15, 31, 26, 0.35) !important;
}

/* ========================================
   Footer Height Compact Adjustment
   縮減 footer 高度（安全版）
   ======================================== */

/* 1) 整體上下 padding 縮小 */
footer.footer-section {
  padding: 2rem 2rem 0.9rem;   /* 原本約 2.75rem 2rem 1.25rem */
}

/* 2) 主資訊區與底部間距縮小 */
footer.footer-section .footer-info {
  margin-bottom: 1.1rem;       /* 原本約 1.75rem */
}

/* 3) 底部版權區 padding 縮小 */
footer.footer-section .footer-bottom {
  padding-top: 0.6rem;         /* 原本 1rem */
  font-size: 0.85rem;          /* 稍微精緻一點 */
}

/* 4) 地址與聯絡資訊行距微調（不壓迫） */
footer.footer-section .footer-address,
footer.footer-section .footer-contact {
  line-height: 1.35;           /* 原本 1.45 */
  font-size: 0.88rem;
}