/* =========================
   Footer — Blue (top) / Cream (bottom)
   Uses your existing tokens:
   --blue: #3396D3; --cream: #FFF0CE; --gray: #EEEEEE;
   ========================= */

/* Base palette for the footer */
.site-footer{
  --footer-blue: var(--blue, #3396D3);
  --footer-cream: var(--cream, #FFF0CE);
  --footer-gray: var(--gray, #EEEEEE);
  --footer-ink: var(--ink, #0E2233);
  --footer-ink-60: var(--ink-60, rgba(14,34,51,.6));
  --footer-border: rgba(14,34,51,.12);

  background: var(--footer-cream);        /* lower layer */
  color: var(--footer-ink);
  border-top: 1px solid var(--footer-border);
  position: relative;
  isolation: isolate;
  margin-top: 0;
}

/* ============ TOP BAND (blue, full-bleed) ============ */
/* Reuse your existing .footer-inner but make it act like a full-bleed band */
.site-footer .footer-inner{
  position: relative;
  z-index: 0;
  color: #fff;
  /* inner spacing + grid preserved from your original */
  max-width: 1100px; margin: 0 auto; padding: 28px 16px;
  display: grid; gap: 18px;
  grid-template-columns: 1.2fr 1fr 1fr;
}

/* Full-bleed background trick (no HTML changes needed) */
.site-footer .footer-inner::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);              /* extend to viewport edges */
  background: var(--footer-blue);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.25); /* subtle bottom line */
}

/* Typography inside the blue band */
.site-footer .footer-brand h3{
  font-family: var(--font-site, Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  letter-spacing: .2px;
  margin: 0 0 6px;
  color: #fff;
}
.site-footer .brand-text{
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  margin: 0;
}

/* Links & headings in the blue band */
.site-footer .footer-col h3,
.site-footer .footer-links a{
  font-family: var(--font-nav, Tahoma, Geneva, Verdana, sans-serif);
}
.site-footer .footer-col h3{
  margin:0 0 10px; font-size:.95rem; letter-spacing:.2px; color:#fff; font-weight:700;
}
.site-footer .footer-links{ display:flex; flex-direction:column; gap:8px; }
.site-footer .footer-links a{
  color: #fff; text-decoration:none; opacity:.95;
  display:inline-flex; align-items:center; gap:8px;
  text-underline-offset: 3px;
  transition: color .18s ease, opacity .18s ease, transform .18s ease, text-decoration-color .18s ease;
}
.site-footer .footer-links a:hover{ opacity:1; text-decoration: underline; }
.site-footer .footer-links .muted{ color: rgba(255,255,255,.82); opacity:1; }
.site-footer .footer-links .muted:hover{ color:#fff; text-decoration: underline; }

/* Brand row tiny hover detail */
.logo-circle{
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.5px;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.footer-brand:hover .logo-circle{
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}

/* ============ LOWER STRIP (cream) ============ */
.site-footer .footer-legal{
  background: var(--footer-cream);
  border-top: 1px solid var(--footer-border);
  margin-top: 0; /* touches the blue band */
}
.site-footer .legal-inner{
  font-family: var(--font-nav, Tahoma, Geneva, Verdana, sans-serif);
  max-width:1100px; margin:0 auto; padding: 14px 16px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  color: var(--footer-ink-60);
}

/* “Back to top” on cream */
.site-footer .back-to-top{
  color: var(--blue);
  text-decoration:none; opacity:.95;
  border:1px solid var(--footer-border);
  padding:6px 10px; border-radius:999px;
  background: rgba(51,150,211,.06);       /* blue tint */
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.site-footer .back-to-top:hover{
  opacity:1; background: rgba(51,150,211,.12); transform: translateY(-1px);
}
.site-footer .back-to-top:focus-visible{
  outline:2px solid rgba(51,150,211,.45); outline-offset:3px;
}

/* ============ Smooth entrance (subtle) ============ */
.site-footer{
  opacity: 0;
  transform: translateY(6px);
  animation: footer-in .35s ease-out .05s both;
}
@keyframes footer-in{ to { opacity:1; transform: translateY(0); } }

/* ============ Responsive ============ */
@media (max-width: 900px){
  .site-footer .footer-inner{ grid-template-columns: 1fr 1fr; gap: 16px 18px; }
}
@media (max-width: 600px){
  .site-footer .footer-inner{ grid-template-columns: 1fr; gap: 16px; }
  .footer-brand{ display:flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer .legal-inner{ gap: .6rem .8rem; }
}

/* ============ Accessibility ============ */
.site-footer :is(a, button, .back-to-top){ outline: none; }
.site-footer :is(a, button, .back-to-top):focus-visible{
  outline: 3px solid rgba(51,150,211,.45);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-footer{ animation: none; opacity: 1; transform: none; }
  .site-footer .footer-links a,
  .site-footer .back-to-top,
  .logo-circle{ transition: none; }
}