/*
 * Component: Footer
 * Layout and spacing via Tailwind in assets/footer.html.
 * Scoped overrides below ensure footer matches original design when main.css
 * global link styles (a { color: var(--accent-color) }) would otherwise override.
 */

/* Section titles (Useful Links, Our Services, Our Newsletter) – readable size, wins over Bootstrap/Tailwind */
.app-footer .app-footer__links h4,
.app-footer .app-footer__newsletter h4 {
  font-size: 1rem !important; /* 16px, matches original text-base */
}

/* Logo: black heading color (main.css makes all links blue otherwise) */
.app-footer .app-footer__logo {
  color: var(--color-text-heading);
}

/* Footer links: grey default, blue on hover (match original footer.css) */
.app-footer .app-footer__link {
  color: color-mix(in srgb, var(--color-text-main), transparent 30%);
  text-decoration: none;
  transition: color 0.2s;
}
.app-footer .app-footer__link:hover {
  color: var(--color-accent);
}

/* Newsletter pill form: single semantic component, same design as Tailwind version */
.newsletter-pill {
  display: flex;
  height: 48px;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text-main), transparent 85%);
  background-color: var(--color-bg-surface);
  margin-top: var(--space-lg);
  border-radius: 9999px;
}
.newsletter-pill__input {
  height: 100%;
  flex: 1;
  min-width: 0;
  padding: 0 0.75rem 0 1rem;
  border: 0;
  outline: none;
  font: inherit;
  color: var(--color-text-main);
  background-color: var(--color-bg-surface);
}
.newsletter-pill__input::placeholder {
  color: color-mix(in srgb, var(--color-text-main), transparent 50%);
}
.newsletter-pill__btn {
  height: 100%;
  flex-shrink: 0;
  padding: 0 1.25rem;
  border: 0;
  font-weight: 600;
  color: var(--color-text-light);
  background-color: var(--color-accent);
  cursor: pointer;
  transition: background-color 0.2s;
}
.newsletter-pill__btn:hover {
  background-color: color-mix(in srgb, var(--color-accent), transparent 20%);
}