/**
 * footer-styles.css — Industrial Pro Theme
 * ─────────────────────────────────────────────────────────────────────────
 * Scope  : #site-footer, .float-bar, #back-to-top
 * Depends: font-awesome (enqueued before ip-style in functions.php)
 *
 * Design tokens are inherited from the theme's style.css :root block.
 * Fallback values are provided for standalone use / previews.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * CSS variable fallbacks  (already defined in style.css — listed for reference)
 *   --primary-dk : #0D2B4E
 *   --primary    : #1B5E9B
 *   --primary-lt : #2E9CCA
 *   --accent     : #E8A020
 *   --accent-hv  : #D4901A
 *   --dark       : #1A2332   ← footer background
 *   --gray-dk    : #374151
 *   --gray       : #6B7280
 *   --gray-lt    : #9CA3AF
 *   --radius     : 8px
 *   --tr         : all .3s ease
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   1. FOOTER WRAPPER
   ══════════════════════════════════════════════════════════════ */
#site-footer {
  background: var(--dark, #1A2332);
  color: rgba(255, 255, 255, .65);
  padding-top: 68px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--primary-dk, #0D2B4E),
    var(--primary,    #1B5E9B),
    var(--primary-lt, #2E9CCA),
    var(--accent,     #E8A020)
  ) 1;
}


/* ══════════════════════════════════════════════════════════════
   2. MAIN GRID   2fr 1fr 1fr 1fr  (matches .footer-grid in style.css)
   ══════════════════════════════════════════════════════════════ */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}


/* ══════════════════════════════════════════════════════════════
   3. COL 1 — Company / Logo
   ══════════════════════════════════════════════════════════════ */

/* Logo wrapper */
.footer-logo {
  margin-bottom: 16px;
}
.footer-logo .logo-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  width: 100%;
}

/* Text-fallback logo icon */
.footer-logo .logo-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--primary, #1B5E9B), var(--primary-lt, #2E9CCA));
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  flex-shrink: 0;
}

/* Custom logo image (WordPress the_custom_logo()) */
.footer-logo .custom-logo-link img,
.footer-logo-img .custom-logo-link img {
  height: 46px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* 关键修复：页脚禁用 header 伪元素公司名，避免重复显示 */
#site-footer .custom-logo-link::after,
.footer-logo .custom-logo-link::after {
  content: none !important;
  display: none !important;
}


/* Logo image wrapper — inline-flex to align with text */
.footer-logo-img {
  display: flex;
  align-items: center;
}

.footer-logo .logo-text {
  display: flex;
  flex-direction: column;
}
.footer-logo .company-name {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.footer-logo .company-slogan {
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  margin-top: 3px;
  letter-spacing: .3px;
}

/* Description */
.footer-desc {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .50);
  margin-bottom: 20px;
}

/* Contact rows */
.footer-ct {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
}
.footer-ct .ct-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.footer-ct i {
  color: var(--accent, #E8A020);
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
}
.footer-ct a:hover {
  color: var(--accent, #E8A020);
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 9px;
  margin-top: 6px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr, all .3s ease);
}
.footer-social a:hover {
  background: var(--accent, #E8A020);
  color: #fff;
  transform: translateY(-3px);
}


/* ══════════════════════════════════════════════════════════════
   4. COLS 2-4 — Headings & Links
   ══════════════════════════════════════════════════════════════ */
.footer-col h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  position: relative;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--accent, #E8A020);
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-links a {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  text-decoration: none;
  transition: var(--tr, all .3s ease);
  display: flex;
  align-items: center;
  gap: 7px;
}
.footer-links a::before {
  content: "›";
  color: var(--accent, #E8A020);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.footer-links a:hover {
  color: var(--accent, #E8A020);
  padding-left: 4px;
}


/* ══════════════════════════════════════════════════════════════
   5. COL 4 — Business Hours
   ══════════════════════════════════════════════════════════════ */
.ft-hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.ft-hours .fh-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.ft-hours i {
  color: var(--accent, #E8A020);
  width: 14px;
  flex-shrink: 0;
  margin-top: 3px;
}
.ft-hours strong {
  color: rgba(255, 255, 255, .80);
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.ft-hours small {
  color: rgba(255, 255, 255, .40);
  font-size: 12px;
  display: block;
  margin-top: 1px;
}

/* CTA button (Col 4) */
.ft-cta { margin-top: 4px; }
.ft-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent, #E8A020);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius, 8px);
  text-decoration: none;
  transition: var(--tr, all .3s ease);
  letter-spacing: .3px;
}
.ft-cta-btn:hover {
  background: var(--accent-hv, #D4901A);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 160, 32, .35);
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   6. BOTTOM BAR
   ══════════════════════════════════════════════════════════════ */
.footer-bottom-wrap {
  background: rgba(0, 0, 0, .22);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .35);
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255, 255, 255, .40); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent, #E8A020); }

.ft-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ft-links a,
.ft-links span {
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
}
.ft-links a:hover { color: var(--accent, #E8A020); }


/* ══════════════════════════════════════════════════════════════
   7. BACK-TO-TOP BUTTON
   ══════════════════════════════════════════════════════════════ */
#back-to-top {
  display: none;               /* shown via JS when scrollY > 300 */
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  background: var(--primary, #1B5E9B);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--tr, all .3s ease);
  z-index: 8000;
  box-shadow: 0 4px 14px rgba(27, 94, 155, .40);
}
#back-to-top.show { display: flex; }
#back-to-top:hover {
  background: var(--primary-dk, #0D2B4E);
  transform: translateY(-3px);
}


/* ══════════════════════════════════════════════════════════════
   8. FLOATING CONTACT BAR  (.float-bar)
      HTML structure from original footer.php:
        .float-bar > .fb-outer > .fb-link  (WhatsApp / Phone / Email)
        .float-bar > .fb-outer.fb-wc-wrap > .fb-btn + .fb-wc-popup
   ══════════════════════════════════════════════════════════════ */
.float-bar {
  position: fixed;
  right: 0;
  bottom: 130px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Shared button shell */
.fb-link,
.fb-btn {
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 0;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--tr, all .3s ease);
  border: none;
  background: transparent;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* Icon box */
.fb-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

/* Text label (slides in on hover) */
.fb-text {
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 0 0;
  max-width: 0;
  overflow: hidden;
  transition: max-width .3s ease, padding .3s ease;
  letter-spacing: .3px;
}
.fb-link:hover .fb-text,
.fb-btn:hover .fb-text {
  max-width: 100px;
  padding: 0 14px 0 2px;
}

/* Per-channel colours */
.fb-wa  { background: #25D366; }
.fb-wc  { background: #07C160; }
.fb-tel { background: var(--primary, #1B5E9B); }
.fb-mail{ background: #7C3AED; }

.fb-wa:hover  { background: #1ebe59; box-shadow: -4px 0 14px rgba(37,211,102,.5); }
.fb-wc:hover  { background: #05a84e; box-shadow: -4px 0 14px rgba(7,193,96,.5);  }
.fb-tel:hover { background: var(--primary-dk, #0D2B4E); box-shadow: -4px 0 14px rgba(27,94,155,.5); }
.fb-mail:hover{ background: #6d28d9; box-shadow: -4px 0 14px rgba(124,58,237,.5);}

/* WeChat popup */
.fb-wc-wrap { position: relative; }

.fb-wc-popup {
  display: none;
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .22);
  padding: 16px;
  z-index: 10000;
  animation: fpopIn .25s ease;
  margin-right: 8px;
}
.fb-wc-wrap:hover .fb-wc-popup { display: block; }

@keyframes fpopIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.fb-wc-popup::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #fff;
}

.wcp-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 12px;
}

.wcp-qr {
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcp-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wcp-id {
  text-align: center;
  font-size: 12px;
  color: #555;
  background: #f8f8f8;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet landscape (≤ 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  /* Company col spans full width */
  .footer-grid > .footer-col:first-child {
    grid-column: span 2;
  }
}

/* ── Tablet portrait (≤ 768px) ──────────────────────────── */
@media (max-width: 768px) {
  #site-footer { padding-top: 50px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .footer-grid > .footer-col:first-child {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .ft-links { justify-content: center; }

  /* Float bar moves up a little */
  .float-bar { bottom: 80px; gap: 4px; }
  .fb-link,
  .fb-btn     { height: 44px; font-size: 17px; }
  .fb-icon    { width: 44px; height: 44px; }
  /* Hide text label on small screens */
  .fb-text    { display: none; }
}

/* ── Mobile (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-grid > .footer-col:first-child {
    grid-column: span 1;
  }

  .footer-logo .company-name { font-size: 17px; }

  .ft-cta-btn { width: 100%; justify-content: center; }

  .float-bar  { bottom: 70px; gap: 3px; }
  .fb-link,
  .fb-btn     { height: 40px; font-size: 16px; }
  .fb-icon    { width: 40px; height: 40px; }

  #back-to-top {
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}


/* ══════════════════════════════════════════════════════════════
   10. PRINT & REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .float-bar,
  #back-to-top {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   11. MOBILE OVERFLOW FIXES (修复手机端溢出问题)
   ══════════════════════════════════════════════════════════════ */

/* ── 全局防溢出 ───────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 强制所有元素不超出容器 */
*,
*::before,
*::after {
  box-sizing: border-box;
  max-width: 100%;
}

/* 强制图片自适应 */
img,
video,
iframe,
canvas,
embed {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 表格自适应 */
table {
  max-width: 100%;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
}

/* ── Mobile (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Header 顶部栏换行 */
  .top-bar,
  .header-top,
  .top-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }

  .top-bar .contact-item,
  .top-bar .info-item {
    display: block !important;
    width: 100% !important;
  }

  /* 隐藏桌面端导航,显示汉堡菜单(需要主题支持) */
  .main-navigation ul,
  .nav-menu,
  .desktop-menu {
    display: none !important;
  }

  /* 移动端导航按钮(需要主题配合) */
  .mobile-toggle,
  .menu-toggle {
    display: block !important;
  }

  /* Hero Banner 标题自适应 */
  .hero-title,
  .banner-title,
  .page-title h1,
  .home-hero h1,
  .hero-section h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* 副标题 */
  .hero-subtitle,
  .banner-subtitle,
  .hero-section p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  /* 按钮容器 */
  .hero-buttons,
  .banner-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .hero-buttons a,
  .banner-buttons a,
  .btn,
  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
  }

  /* 强制所有容器不超出 */
  .container,
  .wrapper,
  .site-container,
  .content-wrapper,
  .page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 防止 padding 溢出 */
  section,
  .section,
  .hero-section,
  .banner-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Mobile Small (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  /* 标题进一步缩小 */
  .hero-title,
  .banner-title,
  .page-title h1,
  .home-hero h1,
  .hero-section h1 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  /* 减少内边距 */
  .container,
  .wrapper,
  .site-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   12. FOOTER COMPANY NAME (页脚公司名样式)
   ══════════════════════════════════════════════════════════════ */

.footer-logo .logo-mark {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* 确保 Logo 和文字在同一行 */
.footer-logo .logo-mark > * {
  flex-shrink: 0 !important;
}

/* 移动端调整字体大小 */
@media (max-width: 768px) {
  .footer-logo .logo-mark span {
    font-size: 15px !important;
    margin-left: 8px !important;
  }
}

@media (max-width: 480px) {
  .footer-logo .logo-mark span {
    font-size: 13px !important;
    margin-left: 6px !important;
  }
}