/*
 * Site footer.
 *
 * Every measurement comes from notes/recon/structure-css.json, section
 * "footer". The prototype's container queries become one media query at
 * 640px; the recon records no change at 1100px, so there is none here.
 * Logical properties throughout, because the site also renders in Hebrew RTL.
 *
 * There is no ambient animation in this section, so it needs no
 * [data-ad-motion="off"] or prefers-reduced-motion kill switch. The one in
 * hero.css covers the reveal transition, which the footer does not use.
 */

.ad-footer {
  padding: 64px var(--ad-space-page) 32px;
  border-top: 1px solid var(--ad-color-hairline);
}

.ad-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ad-color-hairline);
}

/* ----------------------------------------------------------- brand column */

.ad-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/*
 * The logo is a link now, so the anchor is what aligns to the start of the
 * column. line-height:0 stops the inline box adding a descender gap, the
 * same treatment .ad-header__logo gets. The 20px height rides in on the
 * --ad-logo-h custom property act_logo sets, because the global img rule
 * forces height:auto.
 */
.ad-footer__home {
  display: block;
  align-self: start;
  line-height: 0;
}

.ad-footer__tagline {
  max-width: 300px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ad-color-text-muted);
}

/* -------------------------------------------------------- partner lockup */

/*
 * max-width keeps the lockup inside a 320px viewport at 400% zoom even if
 * the client writes a longer partner label than the design allows for
 * (SC 1.4.10). At the design's own string lengths nothing changes.
 */
.ad-footer__meta {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 12px;
  max-width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  /* Decorative frame around the partner lockup, not a control boundary. */
  border: 1px solid var(--ad-color-border-subtle);
}

.ad-footer__meta-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ad-color-text);
}

/* Class beats the global img rule, which would otherwise force height:auto. */
.ad-footer__meta-logo {
  flex: none;
  width: auto;
  height: 16px;
}

.ad-footer__meta-rule {
  flex: none;
  width: 1px;
  height: 16px;
  /* A divider rule carries no information of its own. */
  background: var(--ad-color-border-subtle);
}

.ad-footer__meta-label {
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ad-color-text-muted);
}

/* ------------------------------------------------------------- cloud line */

.ad-footer__cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ad-color-text-meta);
}

/* The provider names sit one step brighter than the lead-in and separator. */
.ad-footer__cloud-name {
  color: var(--ad-color-text-muted);
}

/* ---------------------------------------------------------- link columns */

.ad-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

/*
 * The column heading names its nav landmark or its list through
 * aria-labelledby, so it stays a span. It is not a heading in the page
 * outline: the h1 is the hero wordmark and every h2 belongs to a numbered
 * content section.
 */
.ad-footer__heading {
  margin-bottom: 6px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ad-color-text-meta);
}

.ad-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
 * SC 2.5.8 target size. A 14px link is about 17px tall on its own. The
 * padding grows the hit box to 29px and the equal negative margin cancels
 * it again, so the column keeps the 12px rhythm the design specifies and no
 * two targets overlap. The house 44px floor would need row spacing this
 * design does not have; 29px clears the 24px AA minimum outright, without
 * relying on the spacing exception.
 */
.ad-footer__links a {
  display: block;
  padding-block: 6px;
  margin-block: -6px;
}

.ad-footer__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ad-footer__icon {
  display: inline-flex;
  flex: none;
  color: var(--ad-color-accent);
}

/* ------------------------------------------------------------ bottom bar */

.ad-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  color: var(--ad-color-text-meta);
}

/* ------------------------------------------------------------ responsive */

/*
 * The four columns stack. Vertical padding is unchanged on purpose: unlike
 * every content section the prototype's footer carries no mobile padding
 * override, so 64px and 32px hold at every width.
 */
@media (max-width: 640px) {
  .ad-footer {
    padding-inline: var(--ad-space-page-mobile);
  }

  /*
   * Stacking all four columns made the footer 899px on a 390px screen, which
   * is more than a full viewport of nothing but links. Pairing the link
   * columns and letting the short lists run horizontally brings it back
   * under one screen without touching type size or hit targets.
   */
  .ad-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding-bottom: 32px;
  }

  /* The brand block keeps full width: the Meta lockup needs the room. */
  .ad-footer__brand {
    grid-column: 1 / -1;
    gap: 14px;
  }

  /* MENU and CONTACT sit side by side. */
  .ad-footer__col--menu,
  .ad-footer__col--legal {
    min-width: 0;
  }

  /* Five short nav labels waste a whole column stacked one per row. */
  .ad-footer__links--menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  /*
   * LEGAL spans the full width beneath, with its two links on one row.
   * "Accessibility statement" is the longest label and still fits at 390px.
   */
  .ad-footer__col--legal {
    grid-column: 1 / -1;
  }

  .ad-footer__links--legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  /* The bottom bar has two short strings; no reason for it to be tall. */
  .ad-footer__bottom {
    padding-block: 20px;
  }
}