/* =================================================================
   Pickleheart — Site Footer
   -----------------------------------------------------------------
   Hand-coded replacement for the Bricks "Footer" template — loads on
   every front-end request via pickleheart_site_footer_assets() in
   includes/site-footer.php, rendered by footer.php via
   pickleheart_site_footer().

   Scoped under `.site-footer` — same local `--sf-*` alias-not-declare
   pattern as `.site-header`'s `--sh-*` (see site-header-style.css),
   rather than reaching into the `.pkl-*` component layer.
   ================================================================= */

.site-footer {
  --sf-text: var(--text-neutral-strong);
  --sf-text-muted: var(--text-neutral-weak);
  --sf-border: var(--border-neutral-weak);
  --sf-hover: var(--foreground-brand-strong);

  background: var(--background-highlight); /* #F1E5C5 */
  border-top: 1px solid var(--sf-border);
  font-family: var(--font-body);
}

.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }
.site-footer a { text-decoration: none; color: inherit; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }

/* Same 1100px column + 24px side padding as .site-header-inner
   (site-header-style.css), so the footer content lines up with the
   header/nav above it instead of running wider/narrower. */
.site-footer-inner {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
@media (max-width: 620px) {
  .site-footer-inner { padding: 32px 20px; gap: 12px; }
}

/* -----------------------------------------------------------------
   LOGO — same desktop/mobile logo pair as the header, swapped at
   620px by the .site-header-logo-variant rules in site-header-style.css.
   ----------------------------------------------------------------- */
.site-footer-logo { display: flex; align-items: center; justify-content: center; }
.site-footer-logo img { display: block; max-height: 40px; width: auto; }
.site-footer-logo .site-header-logo-link { display: flex; align-items: center; }

/* -----------------------------------------------------------------
   TAGLINE — exact style from the old Bricks footer (bricks_template
   5841)'s "basetext_sm" global class.
   ----------------------------------------------------------------- */
.site-footer-tagline {
  margin: 0 0 24px;
  font-family: "Nunito", var(--font-body);
  font-weight: 300;
  font-size: 22px;
  line-height: 26px;
  color: var(--sf-text-muted);
}

/* -----------------------------------------------------------------
   NEWSLETTER — the "Newsletter form" CF7 form from the old Bricks footer.
   The joined field + button pill is the form's own (.newsletter_form in
   Customizer → Additional CSS); the rest here places it in the footer
   and overrides the form's rainbow button class with the navy primary.
   ----------------------------------------------------------------- */
.site-footer-newsletter {
  width: 100%;
  max-width: 440px;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer-newsletter-text {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: var(--sf-text-muted);
}
.site-footer-newsletter .wpcf7 { width: 100%; }
/* The field's own inline tip already says what's wrong. */
.site-footer-newsletter form.invalid .wpcf7-response-output { display: none; }
.site-footer-newsletter .fieldset { flex: 1; min-width: 0; }
.site-footer-newsletter .fieldset input { display: block; width: 100%; text-align: left; }
/* One line directly under the field: the form's own offset assumes a tip
   that never wraps, and it would land on top of the input on phones. */
.site-footer-newsletter .fieldset .wpcf7-not-valid-tip {
  top: 100%;
  bottom: auto;
  margin-top: 2px;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  text-align: left;
  white-space: nowrap;
}
/* Sits inside the button, so it doesn't push the pill off-center. */
.site-footer-newsletter .fieldset_btn p { position: relative; }
.site-footer-newsletter .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 6px;
  margin-top: -12px;
}
/* Same navy primary treatment as .pkl-btn (pickleheart-components.css),
   specific enough to beat .bg-rainbow and Bricks' ":root .bricks-button[class*=primary]". */
:root .site-footer .site-footer-newsletter input.wpcf7-submit {
  background: var(--foreground-primary);
  color: var(--text-on-primary);
  font-weight: 700;
  transition: transform 130ms ease, filter 130ms ease;
}
:root .site-footer .site-footer-newsletter input.wpcf7-submit:hover {
  color: var(--text-on-primary);
  filter: brightness(1.1);
}
:root .site-footer .site-footer-newsletter input.wpcf7-submit:active { transform: translateY(1px); filter: brightness(0.94); }
:root .site-footer .site-footer-newsletter input.wpcf7-submit:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; }

/* -----------------------------------------------------------------
   MENU COLUMNS — up to 3 (PICKLEHEART_FOOTER_COLUMNS in
   site-footer-customizer.php), one menu per column, --sf-columns set
   inline per-request to however many are actually in use so 1 or 2
   columns don't stretch to fill a 3-column grid. Full width of the
   1100px content column above — same width the rest of the site
   already uses, not a narrower band of its own.
   ----------------------------------------------------------------- */
.site-footer-columns {
  width: 100%;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(var(--sf-columns, 3), minmax(140px, 1fr));
  gap: 32px 40px;
}
.site-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
}
.site-footer-column-title {
  margin: 0;
  font-family: var(--font-display); /* Winter Draw */
  font-weight: 700;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  color: var(--sf-text);
}
.site-footer-column-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-footer-column-list a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: var(--sf-text-muted);
  transition: color 130ms ease;
}
.site-footer-column-list a:hover { color: var(--sf-hover); }
@media (max-width: 620px) {
  .site-footer-columns { grid-template-columns: 1fr; gap: 20px; }
  .site-footer-column { align-items: center; text-align: center; }
  .site-footer-column-list { align-items: center; }
}

/* -----------------------------------------------------------------
   BOTTOM — "made with" line + copyright line, each its own row.
   ----------------------------------------------------------------- */
.site-footer-bottom {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-border);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.site-footer-made-with,
.site-footer-copyright {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  align-self: center;
  color: var(--sf-text-muted);
}
.site-footer-made-with a { color: var(--sf-text); text-decoration: underline; text-underline-offset: 2px; }
/* The header's mobile heart logo in place of the ♥ glyph — sized to the line. */
.site-footer-made-with-heart {
  display: inline-block;
  height: 1.1em;
  width: auto;
  margin: 0 0.15em;
  vertical-align: -0.2em;
}