/* =================================================================
   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);
}

/* -----------------------------------------------------------------
   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;
}