/**
 * Footer — PDF p.11.
 */

/* ---- Trust strip ---- */
.trust-strip {
  background: var(--color-cream);
  padding: var(--space-8) 0;
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-strip__icon {
  color: var(--color-cherry-temp);
  margin-bottom: var(--space-3);
}
.trust-strip__title {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.trust-strip__desc {
  margin: 0;
  font-size: var(--fs-00);
  color: var(--color-ink-soft);
}

/* ---- Cherry brand band ---- */
.brand-band {
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  text-align: center;
  padding: var(--space-4);
}
.brand-band__text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Main dark footer ---- */
.footer-main {
  background: var(--color-ash);
  color: var(--color-paper-on-dark);
  padding-top: var(--space-8);
}

.footer-main__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}

.footer-col__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-cherry-temp);
  display: inline-block;
}
/* The <h3>.footer-col__heading above carries all the visible typography.
   Desktop keeps its exact previous look: the button below is just a reset
   plain-text trigger sized to its content, same as the <p> it replaced —
   the full-width flex row + visible chevron are mobile-only (see the
   accordion breakpoint below), since desktop makes this non-interactive
   anyway (see the >=1024px rule further down). */
.footer-col__heading-btn {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.footer-col__chevron {
  display: none;
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col__links a {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-0);
  transition: color var(--transition-fast);
}
.footer-col__links a:hover,
.footer-col__links a:focus-visible {
  color: var(--color-paper-on-dark);
}

/* Base state for all widths — JS (assets/js/footer-accordion.js) drives the
   actual open/closed max-height inline per viewport; with JS disabled this
   simply never collapses (overflow:hidden with no height constraint clips
   nothing), so the links stay fully reachable either way. */
.footer-col__panel {
  overflow: hidden;
  transition: max-height 280ms ease;
}

/* ---- Newsletter — FluentCRM Free (Phase 4), email-only ---- */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.newsletter-form .haven-form-banner {
  font-size: var(--fs-000);
}
.newsletter-form__input {
  background: rgba(245, 241, 233, 0.06);
  border: 1px solid var(--color-line-on-dark);
  color: var(--color-paper-on-dark);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
}
.newsletter-form__input::placeholder { color: var(--color-paper-on-dark-soft); }
.newsletter-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-000);
  color: var(--color-paper-on-dark-soft);
}
.newsletter-form__submit {
  align-self: flex-start;
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.newsletter-form__submit:hover,
.newsletter-form__submit:focus-visible {
  opacity: 0.85;
}
.newsletter-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.footer-col__heading--follow { margin-top: var(--space-2); }
.footer-social {
  display: flex;
  gap: var(--space-5);
}
.footer-social a {
  font-size: var(--fs-00);
  color: var(--color-paper-on-dark-soft);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--color-paper-on-dark);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-top: 1px solid var(--color-line-on-dark);
  padding-block: var(--space-5);
}
.footer-bottom__logo {
  display: block;
  color: var(--color-paper-on-dark);
}
.footer-bottom__logo svg {
  display: block;
  height: 26px;
  width: auto;
}
.footer-bottom__copyright {
  margin: 0;
  font-size: var(--fs-000);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
}

@media (max-width: 1023px) {
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Footer nav columns become a single-column accordion below the same
     1024px breakpoint navigation.css/navigation.js use to switch to the
     mobile main nav — footer-accordion.js drives aria-expanded/inert/
     max-height per column; this only handles layout and the collapsed-row
     look. Newsletter/Follow stays its own always-visible full-width block
     directly after, unchanged. ---- */
  .footer-main__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-col:not(.footer-col--newsletter) {
    border-bottom: 1px solid var(--color-line-on-dark);
    padding-block: var(--space-5);
  }
  .footer-col:first-child { padding-top: 0; }
  .footer-col__heading {
    /* The border-bottom above already separates rows — the heading's own
       cherry underline (desktop's section-title treatment) would double up
       into a busy two-line rule right above the chevron on mobile. */
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    display: block;
  }
  .footer-col__panel.is-open {
    margin-top: var(--space-4);
  }
  .footer-col__links { gap: var(--space-4); }
  .footer-col__links a {
    /* Comfortable tap height without visually enlarging the text. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The trigger becomes the full tappable row here — desktop's inline,
     content-sized button (base rule above) isn't right once it's a real
     accordion control. */
  .footer-col__heading-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    cursor: pointer;
  }
  .footer-col__chevron {
    display: inline-block;
    margin-inline-start: auto;
    transition: transform var(--transition-fast);
    font-size: 0.85em;
  }
  .footer-col__heading-btn[aria-expanded="true"] .footer-col__chevron {
    transform: rotate(180deg);
  }

  .footer-main__grid > .footer-col--newsletter {
    padding-top: var(--space-6);
  }
  /* Client feedback, 2026-09-01: on mobile the heading-reset two rules up
     (margin:0, for the other columns' accordion rows) also zeroed the gap
     under "Join Our Newsletter" itself, leaving it flush against the email
     input. Restoring a small gap here, scoped to the newsletter heading only
     — the "Follow Us" sub-heading further down keeps its own margin-top
     instead (see .footer-col__heading--follow), so this doesn't touch it. */
  .footer-col--newsletter .footer-col__heading:not(.footer-col__heading--follow) {
    margin-bottom: var(--space-3);
  }
}

/* ---- Phone-specific polish on top of the accordion above — tighter outer
   rhythm, single-column trust strip, safe-area clearance for the copyright
   line on notched iPhones. ---- */
@media (max-width: 640px) {
  .trust-strip { padding: var(--space-7) 0; }
  .trust-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: start;
  }
  .trust-strip__item { align-items: flex-start; }

  .footer-main { padding-top: var(--space-7); }
  .footer-main__grid { padding-bottom: var(--space-7); }

  .footer-social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }
}