/* =========================================================
   SITE-FOOTER — shared module v2
   --------------------------------------------------------
   Single canonical footer used across every page (home,
   platform, industries, pricing, company, terms, privacy,
   sms-consent). Replaces the previous three variants:
     .foot         (bundled home template)
     .page-footer  (4 marketing pages)
     .doc-footer   (3 legal pages, omitted current page)

   v2 additions (2026-05-07):
     - Social row between cols grid and divider. Six monochrome
       brand glyphs (Simple Icons, CC0). Each link is a 44x44
       hit target wrapping an 18px icon — meets WCAG 2.5.8 AA
       and Apple HIG. Hover/focus-visible lift ink-mute -> ink;
       color-only transition (no transform, no underline) to
       match the rest of the footer's editorial restraint.
     - First external-link pattern in the rendered site:
       target="_blank" rel="noopener noreferrer" on each link.

   Static markup convention (consumer pages ship verbatim;
   /company + /terms + /privacy + /sms-consent add id="access"
   on the <footer> for the broken-JS fallback. Other pages
   keep id="access" on their closing-band.):

     <footer class="site-footer">
       <div class="shell">
         <div class="site-footer-brand">
           <a class="site-footer-mark" href="/" aria-label="Zaras AI home">
             <svg ...>ZARAS AI wordmark</svg>
           </a>
           <p>Infrastructure for service businesses. Built in the US.</p>
         </div>
         <div class="site-footer-cols">
           <div class="site-footer-col">
             <span class="label">Product</span>
             <a href="/platform">Platform</a>
             <a href="/industries">Industries</a>
             <a href="/pricing">Pricing</a>
           </div>
           <div class="site-footer-col">
             <span class="label">Company</span>
             <a href="/company">About</a>
             <a href="mailto:support@zaras.ai">support@zaras.ai</a>
           </div>
           <div class="site-footer-col">
             <span class="label">Legal</span>
             <a href="/privacy">Privacy</a>
             <a href="/terms">Terms</a>
             <a href="/sms-consent">SMS Consent</a>
           </div>
           <div class="site-footer-col">
             <span class="label">Entity</span>
             <span>ZARAS AI LLC</span>
             <span>Winter Park, Florida</span>
             <span>United States</span>
           </div>
         </div>
         <nav class="site-footer-social" aria-label="Social media">
           <a href="https://www.instagram.com/zarasdotai/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
             <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="..."/></svg>
           </a>
           ...repeat for TikTok, X, YouTube, Facebook, LinkedIn...
         </nav>
         <div class="site-footer-divider"></div>
         <div class="site-footer-status">
           <span class="copy">© 2026 ZARAS AI LLC</span>
           <span class="signal"><span class="signal-dot"></span>ALL SYSTEMS NOMINAL</span>
           <span class="meta">PRIVATE BETA · BY APPLICATION</span>
         </div>
       </div>
     </footer>

   Cache-busting: filename-versioned (vN -> vN+1 on any change).
   ========================================================= */

.site-footer {
  /* Transparent — the page-glow (each page's specific bottom dynamic)
     bleeds through. The footer reads as the atmospheric end of the
     page, with a hairline rule above it as a clean page break. */
  position: relative;
  padding-top: 104px;
  padding-bottom: 80px;
  margin-top: 0;
  /* Subtle hairline — visible enough to demarcate but never bold. */
  border-top: 1px solid rgba(255, 250, 240, 0.10);

  /* Break out of narrow parents (.doc on legal pages constrains main to
     760px; .page on company narrows to 1080px). On full-width parents
     this calc evaluates to ~0 and is a no-op, so it's safe everywhere.
     Result: footer spans the full body width on every page. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Prevent horizontal scrollbar from the breakout calc on systems where
   100vw includes scrollbar width (Chrome on Windows, etc). overflow: clip
   doesn't establish a scroll container, so position: sticky still works
   on the site-nav above. */
html { overflow-x: clip; }

/* Neutralize padding-bottom on the parent <main> when the footer is its last
   child. Legal pages set .doc { padding-bottom: 120px } which left a gap below
   the footer. The footer's own padding handles end-of-page breathing room. */
main:has(> .site-footer:last-child),
main:has(> :last-child .site-footer:last-child) {
  padding-bottom: 0;
}

.site-footer .shell {
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

/* -- Brand block (logo + tagline) ------------------------- */
.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 76px;
  max-width: 42ch;
}
.site-footer-mark {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border-bottom: none;
  width: fit-content;
}
.site-footer-mark svg {
  height: 34px;
  width: auto;
  display: block;
}
.site-footer-brand p {
  color: var(--ink-sub);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

/* -- Columns grid ----------------------------------------- */
.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-bottom: 56px;
}
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer-col > .label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
/* Default for column items — non-clickable info text (Entity column values).
   Slightly dimmer than links to make the contrast clear. */
.site-footer-col > a,
.site-footer-col > span:not(.label) {
  font-family: var(--sans);
  font-size: 15.5px;
  letter-spacing: 0;
  line-height: 1.45;
  text-decoration: none;
}
.site-footer-col > span:not(.label) {
  color: var(--ink-sub);
}
/* Clickable links — brighter than the dim values, so it's instantly
   obvious which footer items navigate. */
.site-footer-col > a {
  color: var(--ink);
  transition: color 180ms ease, border-bottom-color 180ms ease;
  cursor: pointer;
  width: fit-content;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-footer-col > a:hover,
.site-footer-col > a:focus-visible {
  color: var(--signal-ink, var(--ink));
  border-bottom-color: var(--signal-rule, var(--rule-hi));
}

/* -- Social row ------------------------------------------ */
/* Sits between the columns grid and the divider. Single horizontal
   strip of 6 brand glyphs, left-aligned to match the rest of the
   footer's editorial layout. Each <a> is a 44x44 hit target wrapping
   an 18px icon — invisibly expands click zone for WCAG 2.5.8 AA +
   Apple HIG without changing the visual gap. */
.site-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 88px;
  /* Negative margin pulls the leftmost icon's invisible padding back
     so the visible glyph aligns flush with column labels above. */
  margin-left: -13px;
}
.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-mute);
  /* Explicit override — prevents any future broader .site-footer a
     selector from putting an underline under the SVG. */
  border-bottom: none;
  border-radius: 4px;
  transition: color 180ms ease;
}
.site-footer-social a svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.site-footer-social a:hover,
.site-footer-social a:focus-visible {
  color: var(--ink);
}
.site-footer-social a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* -- Divider --------------------------------------------- */
.site-footer-divider {
  height: 1px;
  background: var(--rule);
  margin-bottom: 32px;
}

/* -- Status row ------------------------------------------ */
.site-footer-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-footer-status .copy {
  text-align: left;
  justify-self: start;
}
.site-footer-status .signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  justify-self: center;
  color: var(--ink-sub);
}
.site-footer-status .signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(118,199,178,0.6);
  flex: 0 0 auto;
}
.site-footer-status .meta {
  text-align: right;
  justify-self: end;
}

/* -- Mobile breakpoint ----------------------------------- */
@media (max-width: 880px) {
  .site-footer {
    padding-top: 64px;
    padding-bottom: 48px;
  }
  .site-footer-brand {
    margin-bottom: 48px;
  }
  .site-footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    margin-bottom: 40px;
  }
  .site-footer-social {
    margin-bottom: 56px;
  }
}

@media (max-width: 540px) {
  .site-footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer-social {
    gap: 4px;
    margin-bottom: 40px;
  }
  .site-footer-status {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .site-footer-status .copy,
  .site-footer-status .signal,
  .site-footer-status .meta {
    text-align: center;
    justify-self: center;
  }
}

@media print {
  .site-footer { background: white; color: black; }
  .site-footer-social { display: none; }
}