/* TTAI web app footer (templates/inc/ttaiFooter.tpl).
   Self-contained — does not rely on the enterprise stylesheet. Tokens mirror
   ttaiNavbar.css so the footer reads as one continuous dark surface with the
   bar, and it flips to a light surface on pages that opt into the light theme
   (body[data-ttf-theme='light'], set pre-paint by the inline script in
   design.tpl and kept in sync by ttaiTheme.js).

   Layout is a single centered column so it stays balanced at any page width
   (the app content area varies a lot) instead of sprawling edge-to-edge. */

/* --- Defensive reset --------------------------------------------------------
   This component renders a <footer>, and several stylesheets that load on the
   same pages define aggressive *bare element* rules that would otherwise
   clobber it — e.g. profile.css (on /reads and profile pages) sets
   `footer { position: fixed; bottom: 0; display: none }`,
   `footer div { height: 36px; text-transform: uppercase; font-weight: bold }`,
   and `footer img { border-radius: 50% }`; the 5thestate sheets set
   `footer { padding: 90px; display: flex }`. A single class outranks a bare
   element selector, so we reset the properties they touch up front and let the
   component rules below re-apply only what we want. This is what kept the
   footer pinned over the infinite-scroll feed and uppercased its text. */
.ttai-site-footer,
.ttai-site-footer * {
  position: static;
  inset: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* landing.css loads on the static legal pages (Privacy/Terms) via inc/header.tpl
   and styles the page footer with `footer:not(.contact-footer)` (+ descendant
   img/div rules). Those are specificity (0,1,1)+, which outranks our single-class
   rules — it was pinning a fixed dark background (#050509), so the footer stayed
   black even in light mode, and also forced the wrong padding and a stretched
   logo. Re-assert the component's own surface/layout at a higher specificity
   (body footer.ttai-site-footer …) so the theme variable wins. */
body footer.ttai-site-footer {
  background: var(--ttai-site-footer-bg);
  padding: 36px 20px;
}
body footer.ttai-site-footer .ttai-site-footer-inner { margin-bottom: 0; }
body footer.ttai-site-footer .ttai-site-footer-logo-img {
  width: auto;
  height: 30px;
  margin-bottom: 0;
}

.ttai-site-footer {
  --ttai-site-footer-bg: #0A0A0C;
  --ttai-site-footer-border: #1e1e22;
  --ttai-site-footer-text: #8a8a90;
  --ttai-site-footer-link: #c4c4c8;
  --ttai-site-footer-pink: #e91e63;

  display: block;
  width: 100%;
  padding: 36px 20px;
  background: var(--ttai-site-footer-bg);
  border-top: 1px solid var(--ttai-site-footer-border);
  box-sizing: border-box;
  text-align: center;
  color: var(--ttai-site-footer-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ttai-site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
}

/* Brand */
.ttai-site-footer-logo {
  display: inline-flex;
  align-items: center;
}
.ttai-site-footer-logo-img {
  height: 30px;
  width: auto;
}
.ttai-site-footer-tagline {
  color: var(--ttai-site-footer-text);
  font-size: 14px;
  line-height: 1.55;
}

/* Links */
.ttai-site-footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ttai-site-footer-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
/* Link colour is forced with high specificity + !important on purpose. Several
   pages colour anchors with the user/theme accent (the default --theme-color is
   green) via rules that would otherwise tint these links — this is why
   Privacy/Terms showed up green on a profile. Pinning every state here keeps
   them on the footer's own greys/pink on ANY page, regardless of profile colour
   or which page stylesheet is loaded. Reads the theme-aware var so the light
   theme still recolours correctly. */
.ttai-site-footer a.ttai-site-footer-link,
.ttai-site-footer a.ttai-site-footer-link:link,
.ttai-site-footer a.ttai-site-footer-link:visited,
.ttai-site-footer a.ttai-site-footer-link:active {
  color: var(--ttai-site-footer-link) !important;
}
.ttai-site-footer a.ttai-site-footer-link:hover,
.ttai-site-footer a.ttai-site-footer-link:focus {
  color: var(--ttai-site-footer-pink) !important;
}

/* Copyright — sits below a divider that spans the centered column. */
.ttai-site-footer-copy {
  width: 100%;
  margin-top: 2px;
  padding-top: 20px;
  border-top: 1px solid var(--ttai-site-footer-border);
  color: var(--ttai-site-footer-text);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Light theme — mirrors the navbar's data-theme='light' surface tokens. The
   brand letter-logo is white-on-transparent, so darken it on the light surface.
--------------------------------------------------------------------------- */
body[data-ttf-theme='light'] .ttai-site-footer {
  --ttai-site-footer-bg: #ffffff;
  --ttai-site-footer-border: #e5e5ea;
  --ttai-site-footer-text: #6c6c70;
  --ttai-site-footer-link: #3a3a3c;
}
body[data-ttf-theme='light'] .ttai-site-footer-logo-img {
  filter: brightness(0);
}