/* ==================================================================
   Footer — kwizzbit/footer (shared chrome)
   Faithful slice of /HTML/footer.html. Local color / font / layout tokens
   remapped to canonical wp tokens (theme.json). Reset/body/font-face dropped (global).
   ================================================================== */

/* ── FOOTER ── */
.site-footer {
  background: var(--wp--preset--color--blood-orange);
  position: relative;
  /* clip BOTH axes — vertical too, so the K can never spill past the backdrop
     edge (that hairline was the "white strip"). The K is fully contained inside
     the 412px min-height below, so clipping never crops the visible K. */
  overflow: clip;
  /* The decorative K is 412px tall and vertically centred. Match the backdrop
     EXACTLY to its height so the full K shows with no extra blood-orange above
     or below it. space-between keeps the original composition — brand/nav at the
     top, copyright at the bottom. The flex children set width:100% so they still
     fill to the 90rem page-max (auto margins alone would shrink them to content
     width in a flex parent — that was the "squeezed inward" look). Grows on mobile. */
  min-height: 412px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Large K background decoration */
.site-footer__bg-k {
  position: absolute;
  /* Anchor to inner container left edge so K tracks with logo at all viewport widths */
  left: max(var(--wp--custom--layout--gutter), calc(50% - (var(--wp--custom--layout--page-max) / 2) + var(--wp--custom--layout--gutter) - 40px));
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  width: 370px;
  height: 412px;
  opacity: 0.12; /* subtle ghost — no blend mode, Safari-safe */
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;  /* fill to max-width in the flex parent (auto margins would otherwise shrink to content) */
  max-width: var(--wp--custom--layout--page-max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
  padding-block: 5rem 4rem;
  display: grid;
  grid-template-columns: minmax(min-content, 220px) 1fr;
  gap: 0 4rem;
  align-items: start;
}

/* ── Brand column ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-brand__logo {
  display: block;
  width: 105px;
  max-width: 105px;
  height: auto;
  flex-shrink: 0;
  position: relative; /* anchor for the version tag */
  /* transform-origin: center causes a sub-pixel repaint shift every time
     surrounding flex layout recalculates. Anchoring to left prevents that. */
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
  /* Pin the logo to its own compositor layer so the blinking tagline cursor's
     1.1s repaints can't re-rasterise it onto a different sub-pixel row (the ~1px
     "wiggle"). translateZ(0) is the resting transform; the hover tilt composes
     with it so the layer stays promoted throughout. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.footer-brand__logo:hover,
.footer-brand__logo:active {
  transform: rotate(-1deg) translateZ(0);
}

/* ── Hover easter egg: white "3.0" version tag (footer twin of the nav one).
   Footer logo is already white on the dark footer, so the tag is plain white —
   no filter needed. Slides out from behind the wordmark's right edge. ── */
.footer-brand__ver {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity 0.18s ease,
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-brand__logo:hover .footer-brand__ver,
.footer-brand__logo:focus-visible .footer-brand__ver {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .footer-brand__ver { transform: none; transition: opacity 0.18s ease; }
  .footer-brand__logo:hover .footer-brand__ver,
  .footer-brand__logo:focus-visible .footer-brand__ver { transform: none; }
}

.footer-brand__tagline {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 1.75rem; /* 28px — small enough to sit on 2 lines within brand column */
  line-height: 1.75rem;
  letter-spacing: -0.08333em;
  color: var(--wp--preset--color--white);
  max-width: 260px;
}

/* ── Nav columns ── */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 1rem;
  padding-left: 12rem;
}

.footer-nav__col {}

.footer-nav__heading {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600; /* Bold per spec */
  font-size: 0.9375rem; /* 15px */
  line-height: 1;
  color: var(--wp--preset--color--white);
  margin-bottom: 1.25rem;
  display: block;
}

.footer-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Both link types locked to identical row height for column alignment parity */
.footer-nav__list li,
.footer-nav__social-list li {
  display: flex;
  align-items: center;
  height: 1.25rem; /* 20px — explicit row height, same across all 4 columns */
  line-height: 1;
}

.footer-nav__list li svg,
.footer-nav__social-list li svg {
  display: block;
  flex-shrink: 0;
}

.footer-nav__link {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.9375rem; /* 15px */
  line-height: 1;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 160ms ease-out;
  display: inline-flex;
  align-items: center;
}

.footer-nav__link:hover,
.footer-nav__link:focus-visible {
  color: var(--wp--preset--color--white);
  outline: none;
}

/* ── Social links (Connect column) ── */
.footer-nav__social-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-nav__list li,
.footer-nav__social-list li {
  display: flex;
  align-items: center;
  min-height: calc(0.9375rem * 1); /* 15px — matches font-size at line-height:1 */
}

.footer-nav__social-list li {
  line-height: 1;
}

.footer-nav__social-list li svg {
  display: block;
  flex-shrink: 0;
}

.footer-nav__social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1; /* match .footer-nav__link */
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.footer-nav__social-link:hover,
.footer-nav__social-link:focus-visible {
  color: var(--wp--preset--color--white);
  outline: none;
}

.footer-nav__social-link svg {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 160ms ease-out;
}

.footer-nav__social-link:hover svg,
.footer-nav__social-link:focus-visible svg {
  opacity: 1;
}

/* Channels that don't exist yet: the icon still sets the expectation, but
   nothing is clickable and the label says why. Rendered as a <span>, so
   there is no link to follow and no hover promise to break. */
.footer-nav__social-link--soon {
  color: rgba(255,255,255,0.45);
  cursor: default;
}
.footer-nav__social-link--soon svg { opacity: 0.45; }
.footer-nav__social-soon {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 0.6875rem; /* 11px */
  line-height: 1;
  color: var(--wp--preset--color--white);
  background: #EC6F5F; /* solid light coral, a step up from the footer's blood-orange */
  padding: 0.1875rem 0.375rem; /* keeps the row inside the 1.25rem list height */
  margin-left: 0.375rem;
  white-space: nowrap;
}

/* ── Bottom bar ── */
.footer-bottom {
  position: relative;
  z-index: 1;
  width: 100%;  /* fill to max-width in the flex parent (see .site-footer__inner note) */
  max-width: var(--wp--custom--layout--page-max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-bottom__copy {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  color: rgba(255,255,255,0.55);
}

/* ── Back-to-top courtesy link ── */
.footer-totop {
  width: 100%;
  max-width: var(--wp--custom--layout--page-max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
  padding-top: 0.75rem; /* breathing room from the nav above */
  display: flex;
  justify-content: flex-start; /* left edge matches the copyright line below */
}
.footer-totop__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — sibling to the copyright line */
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--bright-yellow);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-totop__link:hover,
.footer-totop__link:focus-visible {
  color: #fff;
}
.footer-totop__arrow {
  transition: transform 0.2s ease;
}
.footer-totop__link:hover .footer-totop__arrow,
.footer-totop__link:focus-visible .footer-totop__arrow {
  transform: translateY(-2px); /* tiny lift reinforces "up" */
}
@media (prefers-reduced-motion: reduce) {
  .footer-totop__arrow { transition: none; }
}

/* ── SCROLL REVEAL — matches site-wide spec ── */
.footer-brand,
.footer-nav__col {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-brand.is-visible,
.footer-nav__col.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand,
  .footer-nav__col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── TABLET (≤1023px) ── */
@media (max-width: 1023px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 3rem 0;
    padding-block: 3.5rem 3rem;
  }

  .site-footer__bg-k {
    /* Fill full footer height, pin top to top, clip any horizontal overflow */
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    transform: none;
    overflow: hidden;
  }

  .site-footer__bg-k svg {
    width: auto;
    height: 100%;
    display: block;
  }

  .footer-brand__tagline {
    font-size: 1.75rem;
    line-height: 1.75rem;
    max-width: 260px;
  }

  .footer-nav {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 0;
  }
}

/* ── MOBILE (≤640px) ── */
@media (max-width: 640px) {
  .site-footer__inner {
    padding-block: 3rem 2.5rem;
    gap: 2.5rem 0;
  }

  .site-footer__bg-k {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    height: auto;
    width: 55vw;
    transform: none;
    overflow: visible;
  }

  .site-footer__bg-k svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1rem;
    padding-left: 0;
  }

  /* Grid layout: Product(1,1) Company(1,2) Legal(2,1) Connect(2,2) */
  .footer-nav__col--connect {
    grid-column: auto; /* sits naturally in col 2, row 2 — next to Legal */
  }

  .footer-brand__tagline {
    font-size: 1.75rem;           /* 28px on mobile */
    line-height: 1.75rem;         /* tight = 1:1 ratio, matches desktop 36px/36px */
    letter-spacing: -0.08333em;   /* locked — same as desktop (-3 tracking at any size) */
  }

  .footer-nav__social-list {
    flex-direction: column; /* stay as a stack, same as other columns */
    flex-wrap: nowrap;
    gap: 0.875rem;          /* match other columns exactly */
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 1.25rem;
  }
}

/* ── TAGLINE TYPING ANIMATION ── */
.footer-tagline__type-wrap {
  display: inline;
  white-space: nowrap;
}

/* Cursor — matches site-wide cursor-blink spec: step-end, 1.1s */
.footer-tagline__cursor {
  display: inline;
  opacity: 0; /* hidden until typing is done */
}

.footer-tagline__cursor.is-blinking {
  animation: cursor-blink 1.1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Typed characters fade in sharply — no fade, snap in like a real keypress */
.footer-tagline__char {
  display: inline;
  opacity: 0;
}

.footer-tagline__char.is-typed {
  opacity: 1;
}