/* =============================================================
   SITE FOOTER — universal styles loaded on every page via
   partials/header.php.

   Three bands:
     1. .footer__top       Identity:  brand + 3 link columns
     2. .footer__signup    Signup:    heading + apps + social  |  email form
     3. .footer__fineprint Fineprint: © + disclaimer (top)
                                       payments + legal links (bottom)
   ============================================================= */

.footer {
  background: var(--zoomi-card);
  border-top: 1px solid var(--zoomi-hair);
  padding: var(--s-3xl) 0 var(--s-xl);
  color: var(--zoomi-ink);
  font-family: var(--font-family);
}
.footer * { box-sizing: border-box; }
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer a { color: inherit; text-decoration: none; }

/* ---------- Band 1 · Identity ---------- */
/* Brand on a wider track; the 3 link cols share equal-width tracks on
   the right so the App column stays anchored to the right edge as
   before. The narrow middle (Zoomi) column nudges its content right
   inside its track so the visual gap between link text is symmetric. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-xl);
  margin-bottom: var(--s-xl);
  align-items: start;
}
.footer__brand { max-width: 340px; }
.footer__logo { display: inline-block; }
.footer__logo img {
  display: block; height: 25px; width: auto;
  /* Tint the brand SVG (which uses hardcoded fills) to white for the dark footer. */
  filter: brightness(0) invert(1);
}
.footer__tagline {
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: 1.55;
  margin: var(--s-md) 0 0;
}

/* Link cols hoist into the parent 4-track grid so each sits in an
   equal-width track. */
.footer__cols { display: contents; }
/* Middle (Zoomi) column has the shortest link names, so its content
   hugs the left of its track and creates a visual void to its right.
   Indent it so the gap on each side of the Zoomi block reads even. */
.footer__cols > .footer__col:nth-child(2) { padding-left: var(--s-lg); }
.footer__col h4 { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--zoomi-body); margin: 0 0 var(--s-md); }
.footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col a { font-size: var(--t-body-md); color: var(--zoomi-ink); }
.footer__col a:hover { text-decoration: underline; }

/* ---------- App badges — live under the tagline in the brand block ---------- */
.footer__apps { display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center; margin-top: var(--s-sm); }
.app-badge--footer { display: inline-flex; }
.app-badge--footer img { height: 36px; width: auto; display: block; }

/* ---------- App badges (sitewide) ----------------------------------
   Apple is a clickable <a>; Google is a non-clickable <span> with a
   "Coming soon" pill tacked to the corner. Markup comes from
   /partials/app-store-badges.php. */
.app-badge { position: relative; display: inline-flex; }
.app-badge img { display: block; }
.app-badge--google.is-disabled {
  cursor: not-allowed;
  opacity: 0.92;
}
.app-badge--google.is-disabled:hover { transform: none; opacity: 0.92; }
.app-badge__soon {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--accent-peach, #FF8A65);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill, 999px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Sizing modifiers — set by $appBadgesContext on the partial include. */
.app-badges--inline,
.app-badges--home {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.app-badges--inline .app-badge img,
.app-badges--home .app-badge img { height: 48px; width: auto; }

.app-badges--footer { display: flex; gap: var(--s-sm); align-items: center; flex-wrap: wrap; margin-top: 0; }
.app-badges--footer .app-badge img { height: 36px; width: auto; }
.app-badges--footer .app-badge__soon {
  top: -7px; right: -6px;
  font-size: 8px; padding: 2px 6px;
}

/* Social icons live in the signup row, right-aligned */
.footer__social { display: flex; gap: 10px; align-items: center; }
.footer__social a {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--zoomi-body);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
  transition: color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.footer__social svg { display: block; width: 20px; height: 20px; }
.footer__social a:hover {
  color: var(--zoomi-ink);
  box-shadow: inset 0 0 0 1px var(--zoomi-ink);
  background: var(--zoomi-bg);
}
.footer__social svg { display: block; }

/* ---------- Band 2 · Signup (heading on top, form-left + social-right) ---------- */
.footer__signup {
  padding: var(--s-lg) 0;
  border-top: 1px solid var(--zoomi-hair);
  border-bottom: 1px solid var(--zoomi-hair);
}
.footer__signup-heading {
  display: block;
  font-size: var(--t-body-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  margin-bottom: var(--s-sm);
}
.footer__signup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
  flex-wrap: wrap;
}
.newsletter__form { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.newsletter__form input {
  flex: 1; min-width: 0;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 0; box-shadow: inset 0 0 0 1px var(--zoomi-hair);
  font-family: var(--font-family); font-size: var(--t-body-sm);
  background: var(--zoomi-bg); color: var(--zoomi-ink);
  line-height: 1.4;
}
.newsletter__form input:focus { outline: 2px solid var(--zoomi-link); outline-offset: 2px; }

/* Newsletter button fallback — keeps the CTA usable on legacy pages
   that don't load components.css. Pages that DO load components.css
   keep their existing .zoomi-btn-primary styling (same selector, higher
   specificity wins via load order, so they look the same as before). */
.footer .zoomi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 0; cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--t-body-sm); font-weight: 600;
  background: var(--zoomi-ink); color: var(--zoomi-card);
  line-height: 1.4;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.footer .zoomi-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.footer .zoomi-btn:active { transform: scale(0.98); }
.footer .zoomi-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Submit-state messages — hidden until the form sets is-success / is-error. */
.footer-newsletter-msg {
  display: none;
  margin: var(--s-sm) 0 0;
  font-size: var(--t-body-sm);
  line-height: 1.5;
}
.footer-newsletter-msg--success { color: var(--zoomi-ink); }
.footer-newsletter-msg--error   { color: #b3261e; }
#footerNewsletter.is-success .footer-newsletter-msg--success { display: block; }
#footerNewsletter.is-success .newsletter__form { display: none; }
#footerNewsletter.is-error   .footer-newsletter-msg--error   { display: block; }

/* ---------- Band 3 · Fineprint (payments + legal links on top, © + disclaimer at bottom) ---------- */
.footer__fineprint {
  padding-top: var(--s-lg);
  font-size: 12px;
  color: var(--zoomi-body);
}
.footer__finerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
  flex-wrap: wrap;
}
.footer__finetext {
  margin: var(--s-lg) 0 0;
  line-height: 1.55;
  max-width: 880px;
  color: var(--zoomi-body);
}
.footer__finetext span {
  margin-right: 6px;
}

.footer__pay {
  display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap;
}
.footer__pay-label {
  font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--zoomi-body);
}
.footer__pay-list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 0; margin: 0; list-style: none;
}
.footer__pay-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; min-width: 44px; padding: 0 8px;
  background: var(--zoomi-page);
  border-radius: var(--r-icon);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
  color: var(--zoomi-ink);
}
.footer__pay-mark svg { display: block; max-height: 18px; width: auto; }

/* On the dark footer, the payment SVGs use their official brand colors,
   designed for light surfaces. Give the pill a near-white background so
   Visa/PayPal/Apple Pay/Google Pay all read correctly, and force Apple
   Pay's currentColor mark to black instead of white. */
.footer[data-theme="dark"] .footer__pay-mark {
  background: #f5f3ef;
  box-shadow: none;
  color: #1a1a1a;
}

/* AMEX brand mark sits on the cream pill like the others. The gilbarbara
   AMEX SVG is square (256×256) and its native max-height: 18px would
   leave too much empty pill around an 18px×18px badge — bump the cap
   slightly so the AMEX card fills the pill more proportionately. */
.footer__pay-mark--amex svg { max-height: 22px; }

.footer__legal-links {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 0; margin: 0; list-style: none;
  font-size: 12px;
}
.footer__legal-links a { color: var(--zoomi-body); }
.footer__legal-links a:hover { color: var(--zoomi-ink); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--s-xl); }
  .footer__brand { max-width: 100%; }
  /* Below the brand block on tablet, switch to a 3-col grid so the link
     cols span the full width evenly instead of hugging the right edge. */
  .footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-xl);
    justify-content: stretch;
  }
}
@media (max-width: 720px) {
  .footer { padding: var(--s-2xl) 0 var(--s-lg); }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s-lg) var(--s-xl); }
  /* Reset the desktop nudge on the middle column so both top-row
     columns sit flush to their grid track on mobile. */
  .footer__cols > .footer__col:nth-child(2) { padding-left: 0; }
  /* Last column drops to its own row, spanning the full width. */
  .footer__cols > .footer__col:nth-child(3) { grid-column: 1 / -1; }

  /* Signup band stacks: heading, form (full width, button beneath email), social */
  .footer__signup-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-md);
  }
  .newsletter__form {
    flex-direction: column;
    max-width: 100%;
    gap: 10px;
  }
  .newsletter__form input {
    font-size: 16px; /* prevents iOS zoom */
    padding: 11px 18px;
  }
  .newsletter__form .zoomi-btn {
    width: 100%;
    padding: 11px 18px;
    font-size: 15px;
  }

  /* Social icons centered when they sit on their own row */
  .footer__social { justify-content: flex-start; gap: 12px; }

  .footer__apps .app-badge { flex: 0 0 auto; }
  .footer__finerow { flex-direction: column; align-items: flex-start; gap: var(--s-md); }
  .footer__legal-links { gap: 14px 16px; }
  .footer__finetext { font-size: 11px; }
}