/* =====================================================================
   v2-footer.css — PersonTees shared footer component
   v=20261102e
   ---------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for every <footer class="v2-footer"> on the
   site (495 pages: homepages + marketing + solution + content + legacy).

   Supersedes the footer rules that used to live only inside
   _assets/v2-home.css — which meant the other 43 pages rendered a
   footer with almost no styling at all.

   Problems this file fixes (all verified against live production
   on 2026-11-02, before/after computed-style + DOM geometry):

     1. v2-marketing.css had a catch-all `footer, .footer,
        [class*="footer"] { ... !important }` rule. The `[class*="footer"]`
        part matched EVERY footer descendant — .v2-footer-link,
        .v2-footer-h4, .v2-footer-brand, .v2-footer-cols — forcing a
        background AND a 1px hairline on each one. Result: a column of
        stray horizontal rules through the footer of every marketing page.
     2. .v2-footer-inner / .v2-footer-cols had no display:grid, so the
        link columns stacked vertically and the footer grew to ~1045px.
     3. Bare <h3> inside the column markup fell back to the browser
        default 24px, instead of the 13px mono eyebrow the homepage uses.
     4. Footer links rendered at the inherited 16px with no vertical
        rhythm, unlike the 13px homepage links.
     5. Marketing footers had no max-width, so footer content did not
        line up with the 1280px site grid used by .container.
     6. 35 of the 46 pages had a brand-only footer — three quarters of
        the footer area was empty. All 46 now render brand + link
        columns + bottom bar from one shared component.

   Markup variants covered by this file:
     .v2-footer-wrap     page-grid wrapper (all 46 pages)
     .v2-footer-grid     brand + link columns            (all 46 pages)
     .v2-footer-brand    logo + tagline + contact block
     .v2-footer-col      a single link column
     .v2-footer-cols     link column group     (legacy wrapper pages)
     .v2-footer-inner    legacy marketing wrapper
     .v2-footer-bottom   legal / copyright bar
     .footer-bottom      legacy bottom bar

   Loaded LAST on every page that renders the footer, so it wins over
   v2-home.css and v2-marketing.css.
   ===================================================================== */

/* --- 1 · Token bridge -------------------------------------------------
   v2-home.css exposes --v2-s-* / --v2-r-* / --v2-font-*.
   v2-marketing.css exposes --v2-radius-* and no font token at all.
   Aliased once here, with literal fallbacks, so the footer renders
   identically no matter which bundle a page loads.                    */
:root {
  --v2-ftr-space-1: var(--v2-s-1, 4px);
  --v2-ftr-space-2: var(--v2-s-2, 8px);
  --v2-ftr-space-3: var(--v2-s-3, 16px);
  --v2-ftr-space-4: var(--v2-s-4, 24px);
  --v2-ftr-space-5: var(--v2-s-5, 40px);
  --v2-ftr-space-6: var(--v2-s-6, 64px);
  --v2-ftr-space-7: var(--v2-s-7, 96px);
  --v2-ftr-radius: var(--v2-r-3, var(--v2-radius-lg, 16px));
  --v2-ftr-pill: var(--v2-r-full, var(--v2-radius-pill, 999px));
  /* Homepages load Geist Mono + Inter Tight; the 43 marketing pages load
     JetBrains Mono + Inter. Alias both so the footer reads the same. */
  --v2-ftr-display: var(--v2-font-display, var(--font-display, 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif));
  --v2-ftr-mono: var(--v2-font-mono, var(--font-mono, 'Geist Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace));
  --v2-ftr-max: 1280px;
}

/* Page grid used by the footer. A dedicated class (not .v2-container)
   so the homepage's own .v2-container rules are never touched. */
.v2-footer-wrap {
  max-width: var(--v2-ftr-max);
  margin: 0 auto;
  padding: 0 var(--v2-ftr-space-4);
}

/* --- 2 · Footer root --------------------------------------------------
   !important here is deliberate: v2-marketing.css forces
   `padding: clamp(40px,5vw,64px) 0 !important` on the root.           */
.v2-footer {
  background: var(--v2-ground) !important;
  background-color: var(--v2-ground) !important;
  color: var(--v2-text-2) !important;
  border-top: 1px solid var(--v2-hairline) !important;
  padding: var(--v2-ftr-space-7) 0 var(--v2-ftr-space-5) !important;
  font-family: var(--v2-ftr-display);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- 3 · Layout -------------------------------------------------------
   .v2-footer-grid is a FLEX row: the brand block holds its width and
   the link columns share what is left. A fixed 3-column grid template
   pushed a 4th child onto its own row, which is what the old markup
   did on pages that carry three link columns.                          */
.v2-footer-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--v2-ftr-space-5);
  align-items: flex-start;
  margin-bottom: var(--v2-ftr-space-6);
}
.v2-footer-brand {
  flex: 0 0 34%;
  min-width: 260px;
}
.v2-footer-col {
  flex: 1 1 180px;
  min-width: 0;
}

/* Marketing wrapper: sits directly under <footer>, so it carries the
   page grid (1280px + gutter) the homepage gets from .v2-container. */
.v2-footer-inner {
  max-width: var(--v2-ftr-max);
  margin: 0 auto var(--v2-ftr-space-6);
  padding: 0 var(--v2-ftr-space-4);
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--v2-ftr-space-5);
  align-items: start;
}

/* Link column group — 3 or 4 columns depending on the page. */
.v2-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v2-ftr-space-5);
  align-items: start;
}

/* Pages whose .v2-footer-cols is a direct child of <footer> need the
   page grid too. Scoped to the direct child so the ones nested inside
   .v2-footer-inner are left alone. */
footer > .v2-footer-cols {
  max-width: var(--v2-ftr-max);
  margin: 0 auto var(--v2-ftr-space-6);
  padding: 0 var(--v2-ftr-space-4);
}

/* --- 4 · Brand block -------------------------------------------------- */
.v2-footer-brand .v2-footer-logo,
.v2-footer-brand .v2-logo {
  display: block;
  font-family: var(--v2-ftr-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--v2-text) !important;
  margin: 0 0 var(--v2-ftr-space-3);
}
.v2-footer-tagline,
.v2-footer-brand p,
.v2-footer-col p {
  font-size: 13px;
  color: var(--v2-text-3) !important;
  font-family: var(--v2-ftr-mono);
  line-height: 1.6;
  margin: 0 0 var(--v2-ftr-space-2);
}
.v2-footer-col p + p {
  margin-top: 0;
}

/* --- 5 · Contact meta + social ---------------------------------------- */
.v2-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--v2-text-2);
}
.v2-footer-meta a {
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
}
.v2-footer-meta a:hover {
  color: var(--v2-text) !important;
}
.v2-footer-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v2-footer-meta-dot {
  color: var(--v2-text-3);
}
.v2-footer-address {
  font-size: 13px;
  color: var(--v2-text-2) !important;
  margin: 8px 0 12px;
  line-height: 1.5;
}
.v2-footer-social {
  display: flex;
  gap: var(--v2-ftr-space-2);
  margin-top: var(--v2-ftr-space-3);
}
.v2-social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--v2-hairline-strong);
  border-radius: var(--v2-ftr-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--v2-text-2);
  transition: all 200ms var(--v2-ease);
}
.v2-social-link:hover {
  border-color: var(--v2-purple);
  color: var(--v2-purple);
}

/* --- 6 · Column headings ----------------------------------------------
   One eyebrow style for .v2-footer-h4 (homepage) and the bare <h3>
   used by the marketing column markup. */
.v2-footer-h4,
.v2-footer-cols h3,
.v2-footer-col h3 {
  font-family: var(--v2-ftr-mono) !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--v2-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 var(--v2-ftr-space-3);
}

/* --- 7 · Links -------------------------------------------------------- */
.v2-footer-link,
.v2-footer-cols a,
.v2-footer-col a {
  display: block;
  font-size: 13px;
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
  margin-bottom: var(--v2-ftr-space-2);
  line-height: 1.5;
  transition: color 200ms var(--v2-ease);
}
.v2-footer-link:hover,
.v2-footer-cols a:hover,
.v2-footer-col a:hover {
  color: var(--v2-text) !important;
}

/* --- 8 · Bottom bar --------------------------------------------------- */
.v2-footer-bottom {
  padding-top: var(--v2-ftr-space-4);
  border-top: 1px solid var(--v2-hairline);
  font-size: 12px;
  color: var(--v2-text-3);
  font-family: var(--v2-ftr-mono);
  line-height: 1.6;
}
.v2-footer-bottom a {
  color: var(--v2-text-3) !important;
  text-decoration: none !important;
}
.v2-footer-bottom a:hover {
  color: var(--v2-text-2) !important;
}
footer > .v2-footer-bottom,
footer > .footer-bottom {
  max-width: var(--v2-ftr-max);
  margin: 0 auto;
  padding: var(--v2-ftr-space-4) var(--v2-ftr-space-4) 0 !important;
  border-top: 1px solid var(--v2-hairline);
  font-size: 12px;
  color: var(--v2-text-3);
  font-family: var(--v2-ftr-mono);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* --- 9 · Newsletter block (homepage pattern, kept for parity) --------- */
.v2-footer-newsletter {
  display: flex;
  gap: var(--v2-ftr-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-ftr-space-5);
  background: var(--v2-surface-1);
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-ftr-radius);
  margin-bottom: var(--v2-ftr-space-3);
}
.v2-footer-newsletter-p {
  font-size: 14px;
  color: var(--v2-text-2);
  margin-top: var(--v2-ftr-space-2);
}
.v2-footer-newsletter-form {
  display: flex;
  gap: var(--v2-ftr-space-2);
}
.v2-footer-newsletter-form input {
  padding: 10px 14px;
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-ftr-pill);
  color: var(--v2-text);
  font-size: 14px;
  min-width: 220px;
  outline: none;
}
.v2-footer-newsletter-form input:focus {
  border-color: var(--v2-purple);
}
.v2-footer-unsubscribe {
  font-size: 11px;
  color: var(--v2-text-3);
  font-family: var(--v2-ftr-mono);
  margin-bottom: var(--v2-ftr-space-5);
}

/* --- 10 · Responsive --------------------------------------------------
   1000px: brand takes a full row, columns go two-up.
   700px : legacy .v2-footer-cols two-up, newsletter stacks.
   600px : everything single column.                                     */
@media (max-width: 1000px) {
  .v2-footer-grid {
    gap: var(--v2-ftr-space-4);
  }
  .v2-footer-brand {
    flex: 0 0 100%;
  }
  .v2-footer-col {
    flex: 1 1 calc(50% - 12px);
  }
  .v2-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--v2-ftr-space-5);
  }
}
@media (max-width: 700px) {
  .v2-footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .v2-footer-newsletter {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 600px) {
  .v2-footer {
    padding: var(--v2-ftr-space-6) 0 var(--v2-ftr-space-4) !important;
  }
  .v2-footer-col {
    flex: 1 1 100%;
  }
  .v2-footer-cols {
    grid-template-columns: 1fr;
    gap: var(--v2-ftr-space-4);
  }
  .v2-footer-wrap {
    padding: 0 var(--v2-ftr-space-3);
  }
}