/* ============================================================
   FOOTER
   Controls the marketing site's footer: the logo/description column,
   the middle links column, the "EMAIL" column, and the copyright row
   at the very bottom.

   Edit this file to change footer layout, spacing, colors, link
   appearance, and mobile footer behavior.
   ============================================================ */

/**
 * Used on index.html and partner-program.html. Requires base.css
 * (tokens, .brand-icon) to be linked first.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the space above the footer or its top border — .footer;
 *   - change the 3-column layout (logo | links | email) — .foot-top
 *     (on mobile this becomes a single centered column — see the
 *     @media block at the bottom);
 *   - change link colors/hover effects — .foot-link;
 *   - change the Instagram/TikTok/LinkedIn icon links — .foot-social
 *     (the row) / .foot-social-link (one icon button); the actual
 *     profile URLs and icon markup are in index.html, not here;
 *   - change the bottom copyright row — .foot-bottom.
 */

.footer { padding: 76px 0 24px; border-top: 1px solid var(--border); }
/* Increase the `gap` value below to create more space between the
   footer's 3 columns. */
.foot-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 32px;
  padding-bottom: 26px; border-bottom: 1px solid var(--border);
}
.foot-brand    { justify-self: start; }
.foot-nav      { justify-self: center; }
.foot-email-col{ justify-self: end; }
.foot-brand { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 300px; line-height: 1; cursor: default; }
/* Icon + wordmark float ABOVE the column instead of taking up flow
   height, so "We build custom..." starts at the same y as "About" /
   "EMAIL" in the other two columns — only the logo sits higher, the
   actual column content lines up. */
.foot-brand-top {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* Same icon size as the nav, for consistency. */
.foot-brand-top .brand-icon { width: 48px; height: 48px; flex-basis: 48px; }
.foot-brand-top .brand-icon img { max-width: 44px; max-height: 44px; }
.foot-mark-light { display: none; }
[data-theme="light"] .foot-mark-dark  { display: none; }
[data-theme="light"] .foot-mark-light { display: block; }
.foot-mha { font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--text-2); letter-spacing: -.02em; transition: color .22s var(--ease), text-shadow .22s var(--ease); }
.foot-brand:hover .foot-mha { color: var(--accent-lt); text-shadow: 0 0 18px rgba(0,255,140,.65), 0 0 40px rgba(0,255,140,.3); }
.foot-mha em { font-style: normal; color: var(--accent); }
.foot-sub { font-family: var(--body); font-size: .62rem; color: var(--text-3); letter-spacing: .02em; }
.foot-desc { font-size: .8rem; color: var(--text-3); line-height: 1.65; margin-top: 0; }

/* Instagram/TikTok/LinkedIn icon links, under the footer description.
   .foot-social is the row; .foot-social-link is one circular icon
   button. To add or remove a platform, copy/remove one <a> block in
   index.html (each holds its own inline SVG icon) — no CSS change
   needed, this rule applies to however many links are present. */
.foot-social { display: flex; gap: 10px; margin-top: 16px; }
.foot-social-link {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid); color: var(--text-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.foot-social-link svg { width: 16px; height: 16px; }
.foot-social-link:hover { color: var(--accent-lt); border-color: var(--accent); background: var(--accent-dim); }

.foot-nav { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: .82rem; font-weight: 500;
  transition: color .22s var(--ease), text-shadow .22s var(--ease);
}
.foot-link:hover { color: var(--accent-lt); text-shadow: 0 0 12px rgba(0,255,140,.45); }
.foot-email-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col-label { font-size: .74rem; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.foot-email { font-weight: 600; color: var(--text-2); }
.foot-bottom {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 16px;
  padding-top: 18px; text-align: center; font-size: .76rem; color: var(--text-3);
}
.foot-cookie-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--text-3);
  background: none; border: none; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.foot-cookie-link:hover { color: var(--accent-lt); background: var(--card); }

/* ============================================================
   MOBILE FOOTER
   Only applies at 640px window width or narrower. Switches the 3-column
   footer layout into a single centered column, since 3 side-by-side
   columns don't fit on a phone screen.
   ============================================================ */
@media (max-width: 640px) {
  .foot-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; }
  .foot-brand, .foot-nav, .foot-email-col { justify-self: center; }
  .foot-brand { align-items: center; text-align: center; max-width: none; padding-top: 46px; }
  /* .foot-brand-top is position:absolute, so a flex align-self has no
     effect on it — its desktop `left:0` was left gluing it to the
     column's left edge even after everything else here centers.
     Center it explicitly instead. */
  .foot-brand-top { left: 50%; transform: translateX(-50%); }
  .foot-nav { align-items: center; }
}