/* Source: wwb-phase2-systematic-qa-final */
/* =========================================================
   WHAT WE BUILD — PHASE 2 — SYSTEMATIC QA FINAL
   Reference: Index global components.
   Page-specific violet theme is preserved.
   ========================================================= */

:root{
  --wwb-acid:#ccff00;
  --wwb-footer-ink:#111111;
  --wwb-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------
   1. FOOTER GEOMETRY
   --------------------------------------------------------- */
html body footer.footer-redesign{
  background:#d7b7ff !important;
  color:var(--wwb-footer-ink) !important;
  border-top:1px solid rgba(17,17,17,.22) !important;
}

html body footer.footer-redesign .footer-redesign-inner{
  padding:clamp(54px,6vw,92px) clamp(22px,4vw,72px) 0 !important;
}

html body footer.footer-redesign .footer-redesign-main{
  display:grid !important;
  grid-template-columns:minmax(280px,.85fr) minmax(640px,1.65fr) !important;
  gap:clamp(56px,9vw,150px) !important;
  align-items:start !important;
  padding-bottom:clamp(54px,7vw,96px) !important;
}

html body footer.footer-redesign .footer-brand-block{
  min-height:320px !important;
}

html body footer.footer-redesign .footer-nav-block{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(150px,1fr)) !important;
  gap:clamp(36px,6vw,92px) !important;
  align-items:start !important;
}

/* ---------------------------------------------------------
   2. FOOTER LOGO
   --------------------------------------------------------- */
html body footer.footer-redesign .footer-logo{
  width:clamp(240px,24vw,360px) !important;
  max-width:360px !important;
  min-width:240px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
}

html body footer.footer-redesign .footer-logo-img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  filter:contrast(1.12) brightness(.92) !important;
}

/* ---------------------------------------------------------
   3. FOOTER TYPOGRAPHY — SAME SCALE AS INDEX
   --------------------------------------------------------- */
html body footer.footer-redesign .footer-col h3,
html body footer.footer-redesign .footer-follow h3{
  margin:0 0 24px !important;
  color:var(--wwb-footer-ink) !important;
  font-family:"Space Grotesk",Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}

html body footer.footer-redesign .footer-col ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:grid !important;
  gap:14px !important;
}

html body footer.footer-redesign .footer-col li{
  margin:0 !important;
  padding:0 !important;
  font-size:inherit !important;
  line-height:inherit !important;
}

html body footer.footer-redesign .footer-col a{
  margin:0 !important;
  padding:0 !important;
  font-family:"Advent Pro",Arial,sans-serif !important;
  font-size:clamp(18px,1.25vw,22px) !important;
  font-weight:400 !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
}

html body footer.footer-redesign .footer-socials a{
  font-family:"Advent Pro",Arial,sans-serif !important;
  font-size:clamp(17px,1.1vw,20px) !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
}

html body footer.footer-redesign .footer-redesign-bottom{
  min-height:74px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:24px !important;
  border-top:1px solid rgba(17,17,17,.32) !important;
  color:var(--wwb-footer-ink) !important;
  font-family:"Advent Pro",Arial,sans-serif !important;
  font-size:clamp(15px,1vw,18px) !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
}

/* ---------------------------------------------------------
   4. FOOTER LINK STATES — TEXT NEVER TURNS YELLOW
   --------------------------------------------------------- */
html body footer.footer-redesign .footer-col a,
html body footer.footer-redesign .footer-col a:link,
html body footer.footer-redesign .footer-col a:visited,
html body footer.footer-redesign .footer-col a:hover,
html body footer.footer-redesign .footer-col a:focus-visible,
html body footer.footer-redesign .footer-col a:active,
html body footer.footer-redesign .footer-socials a,
html body footer.footer-redesign .footer-socials a:link,
html body footer.footer-redesign .footer-socials a:visited,
html body footer.footer-redesign .footer-socials a:hover,
html body footer.footer-redesign .footer-socials a:focus-visible,
html body footer.footer-redesign .footer-socials a:active,
html body footer.footer-redesign .footer-redesign-bottom a,
html body footer.footer-redesign .footer-redesign-bottom a:link,
html body footer.footer-redesign .footer-redesign-bottom a:visited,
html body footer.footer-redesign .footer-redesign-bottom a:hover,
html body footer.footer-redesign .footer-redesign-bottom a:focus-visible,
html body footer.footer-redesign .footer-redesign-bottom a:active{
  position:relative !important;
  display:inline-block !important;
  width:max-content !important;
  max-width:100% !important;
  background:transparent !important;
  color:var(--wwb-footer-ink) !important;
  -webkit-text-fill-color:var(--wwb-footer-ink) !important;
  opacity:1 !important;
  text-decoration:none !important;
  text-shadow:none !important;
  transform:none !important;
  transition:none !important;
}

html body footer.footer-redesign a *,
html body footer.footer-redesign a:hover *,
html body footer.footer-redesign a:focus-visible *{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  background:transparent !important;
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   5. FOOTER UNDERLINE — ONLY YELLOW ELEMENT
   --------------------------------------------------------- */
html body footer.footer-redesign .footer-col a::after,
html body footer.footer-redesign .footer-socials a::after,
html body footer.footer-redesign .footer-redesign-bottom a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-5px !important;
  width:auto !important;
  height:1.5px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--wwb-acid) !important;
  opacity:1 !important;
  transform:scaleX(0) !important;
  transform-origin:right center !important;
  transition:transform .75s var(--wwb-ease) !important;
  pointer-events:none !important;
}

html body footer.footer-redesign .footer-col a:hover::after,
html body footer.footer-redesign .footer-col a:focus-visible::after,
html body footer.footer-redesign .footer-socials a:hover::after,
html body footer.footer-redesign .footer-socials a:focus-visible::after,
html body footer.footer-redesign .footer-redesign-bottom a:hover::after,
html body footer.footer-redesign .footer-redesign-bottom a:focus-visible::after{
  transform:scaleX(1) !important;
  transform-origin:left center !important;
}

html body footer.footer-redesign .footer-logo::after,
html body footer.footer-redesign a:has(img)::after{
  display:none !important;
  content:none !important;
}

/* ---------------------------------------------------------
   6. FOCUS ACCESSIBILITY
   --------------------------------------------------------- */
html body footer.footer-redesign a:focus-visible{
  outline:2px solid var(--wwb-acid) !important;
  outline-offset:4px !important;
}

/* ---------------------------------------------------------
   7. GLOBAL COMPONENT CHECKS FOR THIS PAGE
   --------------------------------------------------------- */

/* Reading progress: exact Index rule */
html body .ic-progress{
  height:2px !important;
  background:#ccff00 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Floating CTA: same interaction language */
html body .floating-talk:hover,
html body .floating-talk:focus-visible{
  background:#ccff00 !important;
  color:#050505 !important;
  -webkit-text-fill-color:#050505 !important;
  border-color:#ccff00 !important;
  transform:translateY(-2px) !important;
}

html body .floating-talk:hover *,
html body .floating-talk:focus-visible *{
  color:#050505 !important;
  -webkit-text-fill-color:#050505 !important;
}

/* Menu active state remains visible */
html body .nav .section-menu .pill[aria-current="page"]{
  background:#ccff00 !important;
  color:#050505 !important;
  border-color:#ccff00 !important;
}

/* ---------------------------------------------------------
   8. RESPONSIVE FOOTER
   --------------------------------------------------------- */
@media(max-width:980px){
  html body footer.footer-redesign .footer-redesign-main{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  html body footer.footer-redesign .footer-brand-block{
    min-height:auto !important;
  }

  html body footer.footer-redesign .footer-logo{
    width:240px !important;
    min-width:0 !important;
  }

  html body footer.footer-redesign .footer-nav-block{
    grid-template-columns:1fr 1fr !important;
  }

  html body footer.footer-redesign .footer-redesign-bottom{
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:24px 0 !important;
  }

  html body footer.footer-redesign .footer-legal-links{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  html body footer.footer-redesign .back-top{
    justify-self:start !important;
  }
}

@media(max-width:640px){
  html body footer.footer-redesign .footer-logo{
    width:220px !important;
  }

  html body footer.footer-redesign .footer-nav-block{
    grid-template-columns:1fr !important;
  }

  html body footer.footer-redesign .footer-col a{
    font-size:20px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body footer.footer-redesign a::after{
    transition:none !important;
  }
}