/* ══════════════════════════════════════════════════════════════════
   site-footer.css — shared footer, matching index.html's real design
   exactly (not a separate generic design). Flat square social icons
   with a simple opacity/scale hover — no borders, no circle chrome.
   ══════════════════════════════════════════════════════════════════ */

.footer-social-strip{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;background:#07090f;border-top:1px solid rgba(255,210,74,.08);
}
.footer-social-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.gb-social{display:inline-flex;transition:opacity .2s,transform .2s}
.gb-social:hover{opacity:.8;transform:scale(1.1)}
.gb-social img{width:28px;height:28px;border-radius:6px;display:block}

.site-footer{background:#07090f;border-top:1px solid rgba(255,210,74,.1);padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text);text-decoration:underline}

/* Legacy classes used inline on contact.html / api-access.html / checklists.html
   (embedded directly in their own HTML rather than injected). Redesigned here
   to match index.html's real flat-square icon look instead of the old bordered-
   circle version, so every page matches without needing to touch their HTML. */
.socialRow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.socialIcon{display:inline-flex;transition:opacity .2s,transform .2s;background:none;border:0;border-radius:0;width:auto;height:auto}
.socialIcon:hover{opacity:.8;transform:scale(1.1)}
.socialIcon img{width:28px;height:28px;border-radius:6px;display:block;object-fit:cover}
.socialFallback{display:none}

/* store.html's "Site" footer column (Contact/Privacy/Terms) uses this —
   accidentally dropped in an earlier rebuild, restoring it here. */
.footerLinks{display:flex;flex-direction:column;gap:8px}
.footerLinks a{color:var(--muted);text-decoration:none;font-size:13px}
.footerLinks a:hover{color:var(--gold)}

@media(max-width:700px){
  .site-footer{flex-direction:column;text-align:center;padding:20px}
}