/**
 * WooGrub Theme — components/footer.css
 *
 * Configurable footer: fixed equal-width column grid, each column an optional
 * title above a vertical stack of modules. Column count is supplied per-render
 * via the `--wg-footer-cols` custom property on `.wg-footer__inner`.
 *
 * Inter-module spacing is intentionally minimal — spacer modules are the
 * primary vertical-rhythm control, so configured spacing renders true.
 *
 * Colors are referenced through footer-local custom properties that default to
 * the global tokens, so the footer follows light/dark automatically. When the
 * plugin's footer colour override is enabled, it sets these four locals on
 * `.wg-footer` (via wp_add_inline_style on wg-base), overriding in both modes
 * without affecting the rest of the page.
 */

/* ── Shell ───────────────────────────────────────────────────────────────── */
.wg-footer {
  /* Colours route through footer-local vars. Defaults live in the var()
   * fallback (NOT as declarations here) so the plugin's injected override —
   * which sets these same vars on .wg-footer — isn't clobbered by a later
   * same-specificity default. With no override, each falls back to the global
   * token and follows light/dark automatically. */
  background-color: var(--wg-footer-bg, var(--wg-surface));
  border-top: 1px solid var(--wg-footer-border, var(--wg-border));
  margin-top: auto; /* pushes footer to bottom on short pages */
}

.wg-footer__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--wg-space-10) var(--wg-space-4);
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--wg-space-8) var(--wg-space-6);
}

@media (min-width: 640px) {
  .wg-footer__inner {
    padding-inline: var(--wg-space-6);
  }
}

@media (min-width: 768px) {
  .wg-footer__inner {
    /* Honour the configured column count from --wg-footer-cols. */
    grid-template-columns: repeat(var(--wg-footer-cols, 3), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wg-footer__inner {
    padding-inline: var(--wg-space-8);
  }
}

/* ── Column ──────────────────────────────────────────────────────────────── */
.wg-footer__col {
  display: flex;
  flex-direction: column;
  /* Minimal baseline gap — spacer modules do the real spacing work. */
  gap: var(--wg-space-1);
  min-width: 0;
}

.wg-footer__col-title {
  font-family: var(--wg-font-heading);
  font-size: 1rem; /* sits above the .9375rem module text */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wg-footer-text, var(--wg-text));
  margin: 0 0 var(--wg-space-3);
}

/* ── Module wrapper ──────────────────────────────────────────────────────── */
.wg-footer-module {
  min-width: 0;
}

/* ── Logo module ─────────────────────────────────────────────────────────── */
.wg-footer-logo {
  /* Default scale cap when no max_width is configured. */
  max-width: 200px;
}

.wg-footer-logo__link {
  display: inline-block;
  line-height: 0;
}

.wg-footer-logo__img {
  display: block;
  width: 100%;
  height: auto;
}

.wg-footer-logo__title {
  font-family: var(--wg-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wg-footer-text, var(--wg-text));
  text-decoration: none;
}

/* ── Text module ─────────────────────────────────────────────────────────── */
.wg-footer-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--wg-footer-text-alt, var(--wg-text-muted));
}

.wg-footer-text--bold {
  font-weight: 700;
  color: var(--wg-footer-text, var(--wg-text));
}

.wg-footer-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--wg-transition);
}

.wg-footer-text a:hover {
  color: var(--wg-primary);
}

/* ── Copyright module ────────────────────────────────────────────────────── */
.wg-footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wg-footer-text-alt, var(--wg-text-muted));
}

/* ── Link module ─────────────────────────────────────────────────────────── */
.wg-footer-link {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--wg-footer-text-alt, var(--wg-text-muted));
  text-decoration: none;
  transition: color var(--wg-transition);
}

.wg-footer-link:hover {
  color: var(--wg-primary);
}

/* ── Spacer module ───────────────────────────────────────────────────────── */
.wg-footer-spacer {
  flex: 0 0 auto;
}

/* ── Divider module ──────────────────────────────────────────────────────── */
.wg-footer-divider {
  border: 0;
  border-top: 1px solid var(--wg-footer-border, var(--wg-border));
  margin: var(--wg-space-3) 0;
  width: 100%;
}

/* ── Mobile-only copyright row ───────────────────────────────────────────────
 * The copyright module is rendered twice (approach B): once in its configured
 * column, and once here as a row pinned to the footer's bottom. The in-column
 * copy is hidden below 768px; this row is hidden at 768px and up, so the
 * copyright always sits last on mobile regardless of its desktop column.       */
.wg-footer__copyright-row {
  margin-top: var(--wg-space-6);
}

@media (min-width: 768px) {
  .wg-footer__copyright-row {
    display: none; /* desktop: the in-column copy is the live one */
  }
}

@media (max-width: 767px) {
  /* Hide the in-column copyright so only the bottom row shows on mobile. */
  .wg-footer__col .wg-footer-module--copyright {
    display: none;
  }

  /* Option B: a single full-width column anchored to the footer's left
   * content edge — not centred — so the block reads as structured rather than
   * floating mid-screen. Tighten the inter-section gap to reduce dead air. */
  .wg-footer__inner {
    gap: var(--wg-space-5);
  }
  .wg-footer__col {
    align-items: stretch;
    text-align: left;
  }

  /* Subtle section dividers, mobile-only, via border-top (no extra markup, so
   * desktop is untouched). The logo column gets no rule — it's the centred
   * anchor at the top — so the first divider falls above the first content
   * column that follows the logo. */
  .wg-footer__col + .wg-footer__col {
    border-top: 1px solid var(--wg-footer-border, var(--wg-border));
    padding-top: var(--wg-space-5);
  }
  .wg-footer__col--logo + .wg-footer__col {
    border-top: 0;       /* no rule directly under the logo */
    padding-top: 0;
  }

  /* Logo stays centred — the one symmetric anchor at the top. */
  .wg-footer__col--logo {
    align-items: center;
    text-align: center;
  }
  .wg-footer__col--logo .wg-footer-logo {
    margin-inline: auto;
  }

  /* Copyright row pinned at the bottom, with a divider above it to match. */
  .wg-footer__copyright-row {
    margin-top: var(--wg-space-5);
    padding-top: var(--wg-space-5);
    border-top: 1px solid var(--wg-footer-border, var(--wg-border));
  }

  /* Slightly larger titles on mobile to separate them from content. */
  .wg-footer__col-title {
    font-size: 1.0625rem;
  }

  /* Reclaim dead space: larger module text on mobile. */
  .wg-footer-text,
  .wg-footer-link {
    font-size: 1.0625rem;
  }
  .wg-footer-copyright {
    font-size: 0.9375rem;
  }
}