/* ============================================================
   Site footer — the shared bottom chrome.

   Companion to site-header.css: used by BOTH front-end systems
   (see CLAUDE.md "Two design systems"). The hand-built pages get it
   from _layouts/default.html; the Kubio homepage links this file
   directly. Markup for both comes from _includes/footer.html.

   Requires tokens.css, and site-header.css for the .brand lockup
   that .footer-brand restyles below.
   Load order: tokens.css -> site-header.css -> site-footer.css.

   Self-sufficient by design: the homepage cannot load styles.css, so
   the few utility classes the footer markup uses (.container, .tiny)
   are redeclared here, scoped to .site-footer. Values match their
   styles.css counterparts — keep them in sync if those change.
   ============================================================ */

.site-footer {
  border-top: 3px solid var(--navy);
  background: var(--navy-dk);
  padding: 36px 0 18px;
  color: rgba(255,255,255,.75);
  /* Set explicitly so the footer renders identically on the homepage, where the
     surrounding Kubio page has a different body font (and a 1.4 line-height).
     Both inherit down to the footer's <p>/<li>/<a>, so setting them here is
     enough — Kubio's own typography rules are gated behind
     `.with-kubio-global-style` / `[data-kubio]`, neither of which this markup has. */
  font-family: var(--font);
  line-height: 1.65;
  /* Kubio's base font-size is ~18.64px vs the 16px the hand-built pages use.
     Anything in the footer sized by inheritance (the brand lockup, the link
     lists) would otherwise render noticeably larger on the homepage. */
  font-size: 1rem;
}

/* styles.css gives all headings line-height 1.2; the homepage doesn't load it,
   so the footer column titles would inherit ~1.4 there. */
.site-footer .footer-title { line-height: 1.2; }

/* The homepage ships an inline WordPress rule `:root :where(p){line-height:1.4}`.
   An inherited value always loses to a rule that matches the element directly, so
   the footer's line-height has to be restated for <p> at higher specificity
   (0,1,1 beats the 0,1,0 of `:root :where(p)`). Without this the homepage footer
   sets ~14px shorter than the subpage one. */
.site-footer p { line-height: 1.65; }

/* Scoped copies of styles.css utilities the footer markup relies on. */
.site-footer .container {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}
.site-footer .tiny { font-size: .875rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 24px;
}
.footer-brand .brand-mark { background: rgba(255,255,255,.15); }
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .muted { color: rgba(255,255,255,.6); }
.footer-brand + p { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0; }

.footer-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-links {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 7px;
}
.footer-links a {
  color: rgba(255,255,255,.62);
  font-size: .9rem;
  text-decoration: none;
}
.footer-links a:hover { color: var(--gold); text-decoration: none; }

.footer-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 4px;
}
.footer-bottom .tiny { color: rgba(255,255,255,.42); }

@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Join band — the "Join the Women in Induced Proximity Community"
   strip directly above the footer, on every page. Markup is the
   first element of _includes/footer.html.

   A hand-built recreation of the Kubio call-to-action section the
   homepage used to carry inline, so the homepage looks exactly as it
   did and every subpage now matches it. Values (padding, container
   widths, gutters, breakpoints at 768 / 1024 / 1200 px) mirror the
   Kubio grid it replaced; the colours are the homepage's
   --kubio-color-1 / -6 / -5 / -2 (/-2-variant-2 on hover), inlined
   because those vars only exist on the homepage.

   Everything that would otherwise be inherited or set by a page's
   globals (Kubio's on the homepage, styles.css's h2 / a rules on
   subpages) is pinned here, and the component rules are 2-class
   selectors so they out-specify both.
   ============================================================ */

.site-join {
  display: block;
  margin: 0;
  padding: 90px 0;
  background: linear-gradient(90deg, #004d80 0%, #00121f 100%);
  color: #fffefa;
  font-family: Urbanist, Helvetica, Arial, sans-serif, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  scroll-margin-top: 70px;
}
.site-join .site-join-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}
.site-join .site-join-text,
.site-join .site-join-action {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 15px;
}
.site-join .site-join-text { flex: 1 1 0; text-align: left; }
.site-join .site-join-action { flex: 0 0 auto; width: 26.34%; justify-content: center; text-align: center; }

.site-join .site-join-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-family: Urbanist, Helvetica, Arial, sans-serif, serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.143;
  letter-spacing: normal;
  text-transform: none;
  color: #fffefa;
}

.site-join .site-join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 30px;
  border: 2px solid #ffc800;
  border-radius: 5px;
  background-color: #ffc800;
  color: #fff;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif, serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition-property: background, padding, margin, border, transform, filter, box-shadow, opacity, color, fill, font, border-radius, max-height, max-width;
  transition-duration: .5s;
}
.site-join .site-join-button:hover {
  background-color: #ffda55;
  border-color: #ffda55;
  color: #fff;
  text-decoration: none;
}

/* Kubio's boxed container widths. */
@media (min-width: 576px)  { .site-join .site-join-inner { max-width: 540px; } }
@media (min-width: 768px)  { .site-join .site-join-inner { max-width: 720px; } }
@media (min-width: 1024px) { .site-join .site-join-inner { max-width: 960px; } }
@media (min-width: 1200px) { .site-join .site-join-inner { max-width: 1232px; } }

/* Tablet: tighter section padding and 10px gutters. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-join { padding: 60px 0; }
  .site-join .site-join-text,
  .site-join .site-join-action { padding: 10px; }
}

/* Phone: heading and button stack, both centred. */
@media (max-width: 767px) {
  .site-join { padding: 30px 0; }
  .site-join .site-join-text,
  .site-join .site-join-action { width: 100%; flex: 0 0 auto; padding: 20px 10px; }
  .site-join .site-join-text { text-align: center; }
}