/* ==========================================================================
   Footer — one Umber band.
   Rendered by [gsjc_footer]; see inc/footer.php for why it is one shortcode
   rather than four builder columns.
   ========================================================================== */

#colophon,
#colophon .site-footer-row-container {
  background: var(--gsjc-surface-invert);
  color: var(--gsjc-on-dark);
}

/* Dark ground: the focus ring flips to Ochre so it stays visible. */
#colophon {
  --gsjc-focus-ring: var(--gsjc-ochre);
  --gsjc-focus-halo: var(--gsjc-umber);
}

.gsjc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gsjc-space-xl);
  padding-block: var(--gsjc-space-xl);
}

.gsjc-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--gsjc-space-lg);
  flex-wrap: wrap;
}

/* Sized from the mockup's INK, not the SVG box. The wordmark's ink is 519x35 on
   the 1920 canvas — 25px tall once scaled to a 1290px container — and fills only
   39.2% of its viewBox height, so the box has to be about 2.55x that. The same
   left inset applies as in the header: the ink starts 167.5 of 473.5 box-heights
   in, so pulling by 0.3538 x height puts the visible mark on the content edge. */
.gsjc-logo--footer {
  --gsjc-wordmark-h: clamp(44px, 4.4vw, 64px);
  width: auto;
  height: var(--gsjc-wordmark-h);
  margin-left: calc(var(--gsjc-wordmark-h) * -0.3538);
  color: var(--gsjc-on-dark);
}

/* --- Social: Ochre outlined circles, as drawn in the mockup ---------------
   Ochre on Umber is 9.91:1, comfortably past the 3:1 that WCAG 1.4.11 asks of
   a non-text control boundary. */
.gsjc-footer .gsjc-social {
  display: flex;
  align-items: center;
  gap: var(--gsjc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gsjc-social__link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--gsjc-accent);
  border-radius: var(--gsjc-radius-pill);
  color: var(--gsjc-accent);
  transition: background-color 0.18s var(--gsjc-ease), color 0.18s var(--gsjc-ease);
}

.gsjc-social__link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.gsjc-social__link:hover,
.gsjc-social__link:focus-visible {
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);   /* 9.91:1 — never white on Ochre, which is 1.95:1 */
}

/* --- Contact -------------------------------------------------------------- */
.gsjc-footer__contact {
  text-align: right;
  font-size: var(--gsjc-fs-small);
  line-height: 1.7;
}

.gsjc-footer__contact a {
  color: var(--gsjc-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gsjc-footer__contact a:hover,
.gsjc-footer__contact a:focus-visible {
  color: var(--gsjc-accent);
}

.gsjc-footer__contact p {
  margin: var(--gsjc-space-2xs) 0 0;
  color: var(--gsjc-sandstone);
}

@media (max-width: 767px) {
  .gsjc-footer {
    justify-content: center;
    text-align: center;
  }
  .gsjc-footer__brand { justify-content: center; }
  .gsjc-footer__contact { text-align: center; }
}

/* --- Kadence's own footer row spacing -------------------------------------
   .gsjc-footer sets its own 48px padding-block. Kadence's footer row adds a
   further 30px on top of it, and the widget wrapper another 17px margin, so
   the Umber band opened 47px below the signup band it is meant to meet — at
   every width, not just narrow ones. Measured on the live site.

   No footer padding theme_mod is set, so this is Kadence's untouched default
   rather than something chosen in the Customizer; zeroing it here means the
   band's spacing has exactly one owner, which is .gsjc-footer above. */
#colophon .site-middle-footer-inner-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

#colophon .footer-html {
  margin-top: 0;
  margin-bottom: 0;
}

/* The last 17px was neither padding nor margin on any wrapper. Kadence runs
   the footer HTML widget through wpautop, which wraps its content in a
   paragraph — and a <div> cannot live inside a <p>, so the browser closes the
   paragraph early and leaves an EMPTY <p> on each side of the shortcode's
   output. Each carries a 17px paragraph margin, and that is the whole gap.

   Measured: two `p:empty` in .footer-html-inner, heights 0, margin-bottom 17px
   on the first and margin-top 17px on the second. */
#colophon .footer-html-inner > p:empty {
  display: none;
}