/* P2-02: X palette, grouped links and muted brand actions.
   8 October local design revision; visual approval and deployment pending. */
#footer.wm-footer,
#footer.wm-footer * { box-sizing: border-box; }
#footer.wm-footer {
  --wm-footer-font: Urbanist, sans-serif;
  --wm-footer-surface: rgb(var(--bs-dark-rgb));
  --wm-footer-muted: rgba(255, 255, 255, .75);
  --wm-footer-base-text: rgba(255, 255, 255, .65);
  background: var(--wm-footer-surface);
  color: #fff;
  font: 14px/1.55 var(--wm-footer-font);
}
#footer.wm-footer .wm-footer-shell { container: wmfooter / inline-size; padding: 36px 28px 26px; }
#footer.wm-footer .wm-social { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
#footer.wm-footer .wm-social-copy { min-width: 0; }
#footer.wm-footer h2 { margin: 0 0 8px; font: 700 26px/1.25 var(--wm-footer-font); letter-spacing: -.45px; }
#footer.wm-footer .wm-social p { margin: 0; color: var(--wm-footer-muted); font-size: 15px; }
#footer.wm-footer .wm-social-actions { display: grid; gap: 10px; }
#footer.wm-footer .wm-wa,
#footer.wm-footer .wm-network {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: 400 14px/1.4 var(--wm-footer-font);
  text-decoration: none;
  transition: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .15);
}
#footer.wm-footer .wm-wa { display: inline-flex; gap: 9px; font-weight: 600; }
#footer.wm-footer .wm-networks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#footer.wm-footer .wm-wa { --wm-brand-fill: #08763d; }
#footer.wm-footer .wm-facebook { --wm-brand-fill: #0866ff; }
#footer.wm-footer .wm-instagram { --wm-brand-fill: linear-gradient(125deg, #6846b8 0%, #a82a91 32%, #c4275b 65%, #b95720 100%); }
#footer.wm-footer .wm-youtube { --wm-brand-fill: #d90000; }
#footer.wm-footer .wm-tiktok { --wm-brand-fill: #000; }
#footer.wm-footer .wm-wa::before,
#footer.wm-footer .wm-network::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--wm-brand-fill);
  opacity: .72;
  transition: opacity 140ms ease;
}
#footer.wm-footer .wm-network-label,
#footer.wm-footer .wm-label-space { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#footer.wm-footer .wm-label-space { visibility: hidden; font-weight: 700; }
#footer.wm-footer .wm-wa i,
#footer.wm-footer .wm-network i { font-size: 16px; }
#footer.wm-footer .wm-network:is(:focus, :active) { color: #fff; font-weight: 700; }
#footer.wm-footer .wm-wa:is(:focus, :active)::before,
#footer.wm-footer .wm-network:is(:focus, :active)::before { opacity: 1; }
#footer.wm-footer .wm-wa:active::before,
#footer.wm-footer .wm-network:active::before { transition: none; }
@media (any-hover: hover) {
  #footer.wm-footer .wm-network:hover { color: #fff; font-weight: 700; }
  #footer.wm-footer .wm-wa:hover::before,
  #footer.wm-footer .wm-network:hover::before { opacity: 1; }
}
#footer.wm-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#footer.wm-footer .wm-body { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; padding: 34px 0 22px; }
#footer.wm-footer .wm-body > * { min-width: 0; }
#footer.wm-footer .wm-wordmark { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 700 24px/1.3 var(--wm-footer-font); letter-spacing: -.65px; }
#footer.wm-footer .wm-about { margin: 3px 0 0; max-width: 34ch; color: var(--wm-footer-muted); }
#footer.wm-footer h3 { margin: 9px 0 8px; color: #fff; font: 600 14px/1.4 var(--wm-footer-font); }
#footer.wm-footer ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; list-style: none; margin: 0; padding: 0; }
#footer.wm-footer .wm-nav { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 0; color: var(--wm-footer-muted); font: 400 14px/1.4 var(--wm-footer-font); text-align: left; text-decoration: none; }
#footer.wm-footer .wm-nav:is(:hover, :focus) { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
#footer.wm-footer .wm-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 24px; padding-top: 10px; }
#footer.wm-footer .wm-base p { margin: 0; color: var(--wm-footer-base-text); font-size: 12px; }
@container wmfooter (max-width: 1050px) {
  #footer.wm-footer .wm-body { gap: 28px; }
  #footer.wm-footer ul { grid-template-columns: 1fr; }
}
@container wmfooter (max-width: 780px) {
  #footer.wm-footer .wm-social { grid-template-columns: 1fr; gap: 18px; }
  #footer.wm-footer .wm-social-actions { justify-self: start; }
  #footer.wm-footer .wm-body { grid-template-columns: 1fr 1fr; gap: 18px 28px; padding-top: 28px; }
  #footer.wm-footer .wm-brand { grid-column: 1 / -1; }
}
@container wmfooter (max-width: 540px) {
  #footer.wm-footer h2 { font-size: 22px; }
  #footer.wm-footer .wm-social p { font-size: 14px; }
  #footer.wm-footer .wm-social-actions { justify-self: stretch; }
  #footer.wm-footer .wm-networks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #footer.wm-footer .wm-body { gap: 14px 24px; padding-bottom: 18px; }
  #footer.wm-footer .wm-base { display: block; padding-top: 8px; }
  #footer.wm-footer .wm-base p + p { margin-top: 4px; }
}
@media (max-width: 575.98px) { #footer.wm-footer .wm-footer-shell { padding: 28px 20px 24px; } }
@supports not (container-type: inline-size) {
  @media (max-width: 1199.98px) { #footer.wm-footer ul { grid-template-columns: 1fr; } }
  @media (max-width: 991.98px) {
    #footer.wm-footer .wm-social { grid-template-columns: 1fr; gap: 18px; }
    #footer.wm-footer .wm-social-actions { justify-self: start; }
    #footer.wm-footer .wm-body { grid-template-columns: 1fr 1fr; gap: 18px 28px; padding-top: 28px; }
    #footer.wm-footer .wm-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 575.98px) {
    #footer.wm-footer h2 { font-size: 22px; }
    #footer.wm-footer .wm-social p { font-size: 14px; }
    #footer.wm-footer .wm-social-actions { justify-self: stretch; }
    #footer.wm-footer .wm-networks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #footer.wm-footer .wm-base { display: block; padding-top: 8px; }
    #footer.wm-footer .wm-base p + p { margin-top: 4px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #footer.wm-footer .wm-wa::before,
  #footer.wm-footer .wm-network::before { transition: none; }
}
