/* static/css/footer.css — Site-wide footer (AICUEVANA).
   Scoped entirely under .site-footer so it never bleeds into app styles. */

.site-footer {
  --bg: #0a0714;
  --purple: #a855f7;
  --purple-dark: #7c3aed;
  --fuchsia: #c026d3;
  --teal: #2dd4bf;
  --text: #f4f2fa;
  --muted: #a09bb3;
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-purple: rgba(168, 85, 247, 0.35);

  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 55% 45% at 28% 30%, rgba(88, 28, 135, 0.22), transparent 70%),
    radial-gradient(ellipse 45% 50% at 75% 75%, rgba(76, 29, 149, 0.16), transparent 70%);
  color: var(--text);
}

.site-footer .footer-container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 64px 48px 32px;
  box-sizing: border-box;
}

/* ---------- GRID ---------- */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 56px;
  align-items: start;
}
/* The guides block (footer-guides.js) renders a gradient divider as its last
   element; the grid must not sit flush against it — comfortable space so the
   suggestion card never touches the divider line. Scoped to pages that have
   the guides block (nexa.html loads the footer without footer-guides.js). */
.site-footer .fg-host + .footer-grid { padding-top: 40px; }
/* Column tops aligned: kill the h4 default top margin so the "Discover More"
   title starts on the same horizontal line as the logo and the suggestion
   card (the FAQ title keeps its own 34px offset). */
.site-footer .links-col > .col-title:first-child { margin-top: 0; }

@keyframes footerFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-footer .footer-grid > * {
  animation: footerFadeUp .6s ease both;
}
.site-footer .footer-grid > *:nth-child(2) { animation-delay: .1s; }
.site-footer .footer-grid > *:nth-child(3) { animation-delay: .2s; }

/* ---------- BRAND COLUMN ---------- */
/* Left-aligned vertical stack: logo → PayPal → mail with even, proportional
   spacing (gap reuses the column's existing 22px rhythm). Scoped to .brand-col. */
.site-footer .brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.site-footer .brand-col .btn-paypal,
.site-footer .brand-col .contact-mail { margin-top: 0; }

.site-footer .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.site-footer .logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
  display: block;
}

.site-footer .tagline {
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 340px;
}

.site-footer .btn-paypal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  background: var(--teal);
  color: #06251f;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.site-footer .btn-paypal:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 212, 191, 0.25);
}

.site-footer .contact-mail {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color .2s;
}
.site-footer .contact-mail:hover { color: var(--purple); }

/* ---------- FORM CARD ---------- */
.site-footer .form-card {
  background: linear-gradient(155deg, rgba(46, 24, 84, 0.35), rgba(17, 10, 32, 0.6));
  border: 1px solid var(--border-purple);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 0 60px rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.site-footer .form-title { font-size: 1.12rem; font-weight: 700; }
.site-footer .form-sub { margin-top: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

.site-footer .footer-suggestion-form {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.site-footer .field input,
.site-footer .field textarea {
  width: 100%;
  background: rgba(5, 3, 11, 0.65);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color .2s, box-shadow .2s;
}
.site-footer .field textarea { resize: vertical; min-height: 96px; }
.site-footer .field ::placeholder { color: #6f6a80; }

.site-footer .field input:focus,
.site-footer .field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.site-footer .field .error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

.site-footer .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--purple-dark), var(--purple) 55%, var(--fuchsia));
  color: #fff;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.35);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.site-footer .btn-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(147, 51, 234, 0.45);
}
.site-footer .btn-submit:active { transform: translateY(0); }
.site-footer .btn-submit:disabled {
  opacity: .7;
  cursor: wait;
  transform: none;
}

/* ---------- LINKS COLUMN ---------- */
.site-footer .col-title { font-size: 0.98rem; font-weight: 700; }
.site-footer .faq-title { margin-top: 34px; }

.site-footer .accordion-item { overflow: hidden; }

.site-footer .accordion-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Discover card */
.site-footer .discover {
  margin-top: 16px;
  border: 1px solid var(--border-purple);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(76, 29, 149, 0.28), rgba(23, 13, 44, 0.4));
}
.site-footer .discover .accordion-header { gap: 14px; padding: 15px 16px; }

.site-footer .acc-badge {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}

.site-footer .discover .acc-title {
  flex: 1;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
}

.site-footer .acc-toggle {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.site-footer .discover .accordion-header:hover .acc-toggle {
  background: rgba(168, 85, 247, 0.2);
  color: #fff;
}

.site-footer .acc-toggle .icon-minus { display: none; }
.site-footer .accordion-item.open .acc-toggle .icon-minus { display: block; }
.site-footer .accordion-item.open .acc-toggle .icon-plus { display: none; }

/* FAQ item */
.site-footer .faq { border-bottom: 1px solid var(--border-soft); }
.site-footer .faq .accordion-header {
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  transition: color .2s;
}
.site-footer .faq .accordion-header:hover { color: var(--purple); }

.site-footer .acc-chevron {
  flex-shrink: 0;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: transform .3s;
}
.site-footer .faq.open .acc-chevron { transform: rotate(180deg); }

.site-footer .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.site-footer .acc-body {
  padding: 2px 18px 18px;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.6;
}
.site-footer .faq .acc-body { padding: 0 2px 16px; }

/* ---------- FOOTER BOTTOM ---------- */
.site-footer .footer-bottom {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.site-footer .copy { color: var(--muted); font-size: 0.85rem; }

.site-footer .socials { display: flex; gap: 12px; }
.site-footer .social-btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  text-decoration: none;
  transition: .25s;
}
.site-footer .social-btn:hover {
  color: #fff;
  border-color: var(--purple);
  background: rgba(168, 85, 247, 0.15);
  transform: translateY(-2px);
}
.site-footer .social-btn svg { width: 15px; height: 15px; fill: currentColor; }

.site-footer .legal { justify-self: end; display: flex; gap: 26px; }
.site-footer .legal a {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color .2s;
}
.site-footer .legal a:hover { color: var(--purple); }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: linear-gradient(90deg, var(--purple-dark, #7c3aed), var(--purple, #a855f7));
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: .35s;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
  z-index: 1000;
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-error { background: linear-gradient(90deg, #dc2626, #f43f5e); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 560px;
    margin: 0 auto;
  }
  .site-footer .tagline { max-width: none; }
  .site-footer .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .site-footer .legal { justify-self: center; }
  .site-footer .footer-container { padding: 48px 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after,
  .toast {
    animation: none !important;
    transition: none !important;
  }
}