/*
 * Component: SiteFooter (.site-footer)
 * Rebuilt 2026-07-22 to match the repeated final desktop footer in Gentle Botanica.dc.html
 * exactly, plus the separate simplified mobile footer block. See TODO.md source-priority audit.
 * Two structures are both rendered, toggled by breakpoint (no JS) — the mobile block is NOT a
 * collapsed version of the desktop grid, it's genuinely different content per the source.
 */
.site-footer {
  background: var(--color-background-primary);
  border-top: var(--border-width) solid var(--color-border-default);
  margin-top: var(--space-9);
}

/* ---- Mobile simplified footer (<768px) ---- */
.site-footer__mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}
/* Visual alignment pass 2026-08-13: real stacked logo image, was text + <br>. */
.site-footer__mobile-wordmark {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: var(--space-2);
}
.site-footer__desktop { display: none; }

@media (min-width: 768px) {
  .site-footer__mobile { display: none; }
  .site-footer__desktop { display: block; }
}

/* ---- Desktop 4-column footer (≥768px) ---- */
.site-footer__inner {
  max-width: var(--breakpoint-xl);
  margin-inline: auto;
  padding: var(--space-9) var(--space-5) var(--footer-padding-bottom);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--footer-column-gap);
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-inline: var(--space-7); }
}
@media (min-width: 1024px) {
  .site-footer__inner { padding-inline: var(--space-9); }
}

/* Brand row. Visual alignment pass 2026-08-13: real stacked logo image replaces the small flower
   mark + text lockup (the flower-mark asset stays on disk, unused, in case it's wanted elsewhere). */
.site-footer__brand {
  margin-bottom: var(--space-5);
}
.site-footer__wordmark {
  display: block;
  width: 140px;
  height: auto;
}
.site-footer__tagline {
  font-size: var(--font-size-meta);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 220px;
  margin-bottom: var(--space-3);
}
.site-footer__instagram { font-size: var(--font-size-meta); color: var(--color-background-accent); }

.site-footer__col-title {
  font-size: var(--font-size-ui-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-emphasis);
  margin-bottom: var(--space-4);
}
/* Now rendered via wp_nav_menu() (native WP Menus) — a <ul><li> structure, not the flat <a>
   tags this was originally written for. Reset list chrome; the existing `a` rule below still
   reaches through the <li> via a plain descendant selector. */
.site-footer__link-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-footer__link-list li { margin: 0; }
.site-footer__link-list a { font-size: var(--font-size-meta); color: var(--color-text-muted); text-decoration: none; }
.site-footer__link-list a:hover { color: var(--color-text-primary); }

.site-footer__bottom {
  max-width: var(--breakpoint-xl);
  margin-inline: auto;
  border-top: var(--border-width) solid var(--color-border-default);
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-ui-label);
  color: var(--color-text-muted);
}
.site-footer__legal { display: flex; gap: var(--space-5); }
.site-footer__legal a { color: var(--color-text-muted); text-decoration: none; }
.site-footer__legal a:hover { color: var(--color-text-primary); }