/* Tenki footer section — managed, lives inside Squarespace's
     global site footer Code Block so it appears on every page
     automatically.  Full-bleed dark band so it reads as the page's
     grounding point.  Multi-column on desktop, stacked single-column
     on mobile.  NOTE: do NOT paste this into individual page bodies
     — it goes once into the global SQS footer (Edit Footer area). */
  .tenki-footer-section {
    --tf-blue:        #005A9C;
    --tf-blue-light:  #4d92c9;
    --tf-green:       #008C45;
    --tf-ink:         #f2f5f8;
    --tf-muted:       #b2bfcc;
    --tf-line:        rgba(255, 255, 255, 0.08);
    --tf-bg:          #1A1A1A;

    font-family: 'proxima-nova', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    /* Full-bleed dark band, same pattern as the social / newsletter
       sections.  No top margin — butts directly against the
       newsletter section above. */
    margin: 0 -50vw;
    width: 100vw;
    left: 50%;
    right: 50%;
    box-sizing: border-box;
    padding: 56px 24px 28px;
    background: var(--tf-bg);
    color: var(--tf-ink);
    /* Own stacking context so the next page block can't paint into us. */
    isolation: isolate;
    z-index: 1;
  }

  .tenki-footer-build-chip {
    position: absolute; top: 8px; right: 12px;
    font: 600 10px/1 monospace; padding: 3px 8px; border-radius: 4px;
    background: #000; color: #fff; opacity: .55;
    display: none; pointer-events: none; z-index: 2;
  }
  [data-debug="1"] .tenki-footer-build-chip,
  body.tenki-debug .tenki-footer-build-chip { display: block; }

  /* Outer grid: brand block + columns host.  The columns host is
     itself a sub-grid that adapts to however many columns the JSON
     declares (3 today; 4 or 5 in the future without CSS changes). */
  .tenki-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 3fr;
    gap: 48px 40px;
    align-items: start;
  }
  .tenki-footer-cols-host {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 40px;
    align-items: start;
  }

  /* Skeleton state — fade in once JS populates so the user doesn't see
     the empty placeholders blink before the JSON resolves. */
  .tenki-footer-section:not(.tf-ready) .tenki-footer-inner,
  .tenki-footer-section:not(.tf-ready) .tenki-footer-copyright-row {
    opacity: 0;
    transition: opacity .25s ease;
  }
  .tenki-footer-section.tf-ready .tenki-footer-inner,
  .tenki-footer-section.tf-ready .tenki-footer-copyright-row {
    opacity: 1;
    transition: opacity .25s ease;
  }

  /* Nav-source diagnostic (visible only with ?debug=1). */
  .tenki-footer-nav-source {
    position: absolute; bottom: 4px; left: 12px;
    font: 600 10px/1 monospace; padding: 3px 8px; border-radius: 4px;
    background: rgba(0,0,0,0.4); color: var(--tf-muted); opacity: .8;
    display: none; pointer-events: none; z-index: 2;
  }
  [data-debug="1"] .tenki-footer-nav-source,
  body.tenki-debug .tenki-footer-nav-source { display: block; }

  /* ── Brand block ───────────────────────────────────────────────── */
  .tenki-footer-brand { display: flex; flex-direction: column; gap: 14px; }
  .tenki-footer-logo-link { display: inline-block; max-width: 220px; }
  .tenki-footer-logo {
    display: block; width: 100%; height: auto;
    /* PNG has transparent corners — same drop-shadow treatment as the
       social section's banner so it has definition on the dark bg. */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  }
  .tenki-footer-tagline {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--tf-ink);
    max-width: 320px;
  }
  .tenki-footer-tagline strong { color: #fff; }
  .tenki-footer-address {
    margin: 0; font-style: normal;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--tf-muted);
  }
  .tenki-footer-contact { margin: 0; font-size: 0.9rem; }
  .tenki-footer-contact a {
    color: var(--tf-blue-light);
    text-decoration: none;
    border-bottom: 1px dotted var(--tf-blue-light);
    transition: color .15s, border-color .15s;
  }
  .tenki-footer-contact a:hover {
    color: #fff; border-bottom-color: #fff;
  }

  /* ── Link columns ──────────────────────────────────────────────── */
  .tenki-footer-col { display: flex; flex-direction: column; gap: 12px; }
  .tenki-footer-col-head {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
  }
  .tenki-footer-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .tenki-footer-list a {
    color: var(--tf-muted);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color .15s, transform .15s;
    display: inline-block;
  }
  .tenki-footer-list a:hover {
    color: #fff;
    transform: translateX(2px);
  }

  /* ── Copyright row ─────────────────────────────────────────────── */
  .tenki-footer-copyright-row {
    max-width: 1180px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--tf-line);
    text-align: center;
  }
  .tenki-footer-copyright {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tf-muted);
    letter-spacing: 0.02em;
  }

  /* ── Mobile ─────────────────────────────────────────────────────── */
  /* Tablet (≤820 px): brand stacks above the nav columns and gets
     centered so logo / address / email read as a tidy unit rather
     than a left-rail orphan.  Nav cols stay left-aligned because
     center-aligned bullet-less link lists look formless on phones. */
  @media (max-width: 820px) {
    .tenki-footer-section { padding: 40px 20px 20px; }
    .tenki-footer-inner {
      grid-template-columns: 1fr;
      gap: 28px 24px;
    }
    .tenki-footer-brand {
      align-items: center;
      text-align: center;
    }
    .tenki-footer-tagline { max-width: 100%; }
    .tenki-footer-address { text-align: center; }
    .tenki-footer-cols-host {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 28px 20px;
    }
    .tenki-footer-logo-link { max-width: 200px; }
    .tenki-footer-col-head { font-size: 0.78rem; letter-spacing: 1.2px; }
    .tenki-footer-copyright-row { margin-top: 24px; padding-top: 18px; }
  }
  /* Phone (≤480 px): drop the nav columns to a 2-up grid instead of
     full single-column — keeps the footer half as tall as it would
     be stacked one-per-row, with each column still readable. */
  @media (max-width: 480px) {
    .tenki-footer-section { padding: 32px 18px 18px; }
    .tenki-footer-cols-host {
      grid-template-columns: 1fr 1fr;
      gap: 22px 14px;
    }
    .tenki-footer-col-head { font-size: 0.72rem; letter-spacing: 1px; }
    .tenki-footer-list a   { font-size: 0.9rem; }
    .tenki-footer-tagline  { font-size: 0.88rem; line-height: 1.5; }
    .tenki-footer-logo-link { max-width: 170px; }
  }
  /* Very narrow / iPhone SE territory — drop to single column
     because 2-up gets cramped under ~340 px and "Volunteer /
     Partner" starts to wrap awkwardly. */
  @media (max-width: 360px) {
    .tenki-footer-cols-host {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }