/* JALIN - Phase 3.4 section 8: footer social icons.
   Monochrome (footer text color), brand color on hover, 20-24px glyphs inside a >=44px hit area. */
.pagefoot .foot-bottom { align-items: center; }

.foot-social {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto 0 4px;
  padding: 0;
}

.foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  /* Inherit the footer text color instead of pinning a pale grey. */
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
  transition: color 180ms ease;
}

/* The site's own `.pagefoot .foot-bottom a` rule sets a link colour; keep the icons on the
   footer text colour instead by winning on specificity. */
.pagefoot .foot-bottom .foot-social-link {
  color: inherit;
}

/* The site CSS sets display:flex on footer links, which would defeat the hidden attribute. */
.foot-social-link[hidden] {
  display: none !important;
}

.foot-social-link svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

/* CSS outranks an inline fill presentation attribute, so the official SVG files stay
   unmodified. Only <path> is repainted: the official LinkedIn bug draws its "in" as
   negative space, so a single currentColor fill stays legible on the dark footer. */
.foot-social-link svg path {
  fill: currentColor;
}

.foot-social-link:hover,
.foot-social-link:focus-visible {
  color: var(--accent, #1647E8);
}

.foot-social-link:focus-visible {
  outline: 2px solid var(--accent, #1647E8);
  outline-offset: 2px;
}

.foot-social-link[data-social="whatsapp"]:hover,
.foot-social-link[data-social="whatsapp"]:focus-visible { color: #25D366; }
.foot-social-link[data-social="linkedin"]:hover,
.foot-social-link[data-social="linkedin"]:focus-visible { color: #0A66C2; }
.foot-social-link[data-social="facebook"]:hover,
.foot-social-link[data-social="facebook"]:focus-visible { color: #1877F2; }
.foot-social-link[data-social="instagram"]:hover,
.foot-social-link[data-social="instagram"]:focus-visible { color: #E4405F; }
.foot-social-link[data-social="youtube"]:hover,
.foot-social-link[data-social="youtube"]:focus-visible { color: #FF0000; }

/* Footer contact line: WhatsApp / Tel: +86 134 2000 8858 */
.foot-contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0;
  min-height: 37px;
  /* Follow whatever footer colour the final build uses; no pinned grey. */
  color: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.pagefoot .foot-contact-line a {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  color: inherit;
  white-space: nowrap;
}

.pagefoot .foot-contact-line a:hover,
.pagefoot .foot-contact-line a:focus-visible {
  color: var(--accent, #1647E8);
}

.pagefoot .foot-contact-line .foot-whatsapp:hover,
.pagefoot .foot-contact-line .foot-whatsapp:focus-visible { color: #25D366; }

/* Phase 3.5: on a 390px screen "WhatsApp" and "/ Tel:" used to be separate flex items, so the
   label could break between them. The three label pieces now sit in one nowrap group while the
   number stays whole and may wrap onto its own line. */
.foot-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 0 4px;
  white-space: nowrap;
}

.pagefoot .foot-contact-line .foot-contact-label > span { white-space: nowrap; }
.pagefoot .foot-contact-line .foot-tel { white-space: nowrap; }

/* Inquiry form fallback line: Prefer WhatsApp? +86 134 2000 8858 */
.inquiry-whatsapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted, #5C6674);
}

.inquiry-whatsapp a {
  color: var(--accent, #1647E8);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .pagefoot .foot-bottom {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .foot-social {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin: 2px 0 0;
  }
}

/* === Sitewide desktop circular float CTAs (2026-10-23) === */
.site-float-cta{
  position:fixed;
  right:18px;
  bottom:28px;
  z-index:800;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:auto;
  pointer-events:none;
}
.site-float-cta a{pointer-events:auto}
.site-float-btn{
  box-sizing:border-box;
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;
  padding:0;
  margin:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:none;
  box-shadow:0 8px 22px rgba(23,35,43,.2);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.site-float-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(23,35,43,.26);
}
.site-float-btn:focus-visible{
  outline:2px solid #17232b;
  outline-offset:3px;
}
.site-float-icon{width:24px;height:24px;display:block}
.site-float-wa{background:#25d366;color:#fff}
.site-float-wa:hover{background:#128c7e;color:#fff}
.site-float-quote{background:#1944e9;color:#fff}
.site-float-quote:hover{background:#1236c4;color:#fff}
@media (max-width:760px){
  .site-float-cta{display:none!important}
}
.desktop-float-cta{display:none!important}