/* =========================================================
   GradMate — FOOTER (Single theme, unified background)
   - Clean SaaS look: solid background, high readability
   - Flashy accents only on logo + subscribe button + top line
   - Works with body.dark-mode + Bootstrap data-bs-theme
   Depends on tokens in style.css:
     --app-bg --app-surface --app-text --app-muted --app-border
     --brand-primary --brand-secondary --brand-accent
   ========================================================= */

.app-footer{
  margin-top: 3rem;
  color: var(--app-text);
  background: var(--app-surface);     /* unified background */
  border-top: 1px solid var(--app-border);
}

/* Dark mode: unified real dark */
body.dark-mode .app-footer,
html[data-bs-theme="dark"] .app-footer{
  background: #0B1220;               /* clean deep navy */
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Thin top accent line (nice, not noisy) */
.app-footer-top{
  border-bottom: 1px solid var(--app-border);
  position: relative;
}

body.dark-mode .app-footer-top,
html[data-bs-theme="dark"] .app-footer-top{
  border-bottom-color: rgba(255,255,255,0.10);
}

.app-footer-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--brand-accent));
  opacity: 0.95;
}

/* Branding */
.footer-branding{ max-width: 420px; }

.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-logo-mark{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-accent));
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 16px 36px rgba(109,40,217,0.22);
}

.footer-logo-text{
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--app-text);
}

.footer-tagline{
  color: var(--app-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Social icons: solid + clean */
.footer-social-icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid var(--app-border);
  color: rgba(15,23,42,0.80);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

body.dark-mode .footer-social-icon,
html[data-bs-theme="dark"] .footer-social-icon{
  border-color: rgba(255,255,255,0.14);
  color: rgba(229,231,235,0.92);
}

.footer-social-icon:hover{
  transform: translateY(-2px);
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.35);
  color: var(--app-text);
}

/* Column headings */
.footer-heading{
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  color: var(--app-text);
  opacity: 0.85;
}

/* Links */
.footer-links li{ margin-bottom: 0.45rem; }

.footer-links a{
  color: var(--app-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color .15s ease, opacity .15s ease;
}

.footer-links a:hover{
  color: var(--brand-secondary);
  opacity: 1;
}

/* Newsletter */
.footer-mini{
  font-size: 0.88rem;
  color: var(--app-muted);
}

.footer-newsletter{
  gap: 0.5rem;
}

/* Bigger input (no ant-size), consistent in light/dark */
.footer-newsletter-input{
  min-height: 46px;
  font-size: 0.98rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-bg) !important;     /* contrast against surface */
  color: var(--app-text) !important;
  padding: 0.65rem 0.95rem !important;
}

body.dark-mode .footer-newsletter-input,
html[data-bs-theme="dark"] .footer-newsletter-input{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

.footer-newsletter-input::placeholder{
  color: rgba(100,116,139,0.95);
}

body.dark-mode .footer-newsletter-input::placeholder,
html[data-bs-theme="dark"] .footer-newsletter-input::placeholder{
  color: rgba(148,163,184,0.85);
}

.footer-newsletter-input:focus{
  box-shadow: none !important;
  border-color: rgba(109,40,217,0.55) !important;
}

/* Subscribe button: flashy but classy */
.footer-newsletter-btn{
  min-height: 46px;
  padding: 0.65rem 1.05rem !important;
  border-radius: 999px !important;
  white-space: nowrap;

  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)) !important;
  border: none !important;
  box-shadow: 0 18px 44px rgba(109,40,217,0.28);
}

.footer-newsletter-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Bottom bar: unified, slightly darker strip */
.app-footer-bottom{
  background: rgba(0,0,0,0.02);
}

body.dark-mode .app-footer-bottom,
html[data-bs-theme="dark"] .app-footer-bottom{
  background: rgba(0,0,0,0.28);
}

.footer-bottom-text{
  color: var(--app-muted);
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .app-footer{ margin-top: 2.5rem; }
  .footer-branding{ max-width: 100%; }
  .footer-newsletter{ flex-direction: column; }
  .footer-newsletter-btn{ width: 100%; }
}