/* ==========================================================================
   Component: Site footer (brand, link columns, social, newsletter)
   JS: assets/js/components/newsletter.js
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: 40px;
  padding: 48px 0 24px;
  overflow: hidden;
  background: var(--night);
  color: #c9ccea;
  font-size: .9rem;
  isolation: isolate;
}

/* Doodle pattern (games, food, music, film), very faint */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../../images/footer-doodles.webp") center top / 1600px auto repeat;
  opacity: .07;
  pointer-events: none;
}

.site-footer .brand,
.site-footer .brand:hover { color: #fff; }
.site-footer .brand__accent { color: var(--brand-soft); }

.site-footer__about {
  max-width: 320px;
  margin: 14px 0 18px;
  line-height: 1.6;
}

.site-footer__heading {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.site-footer__links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a { color: #c9ccea; transition: color .2s var(--ease); }
.site-footer__links a:hover { color: var(--hot); }

/* ---------- Social ---------- */
.social-links {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.social-links a:hover { background: var(--hot); color: var(--night); }
.social-links .icon { width: 18px; height: 18px; transition: filter .2s var(--ease); }
.social-links a:hover .icon { filter: brightness(0); }

/* ---------- Newsletter ---------- */
.newsletter__text { margin: 0 0 14px; line-height: 1.5; }

.newsletter__form {
  display: grid;
  gap: 10px;
  max-width: 340px;
}

.newsletter__input {
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: 500 .9rem var(--font);
}
.newsletter__input::placeholder { color: #a3a8c4; }
.newsletter__input[aria-invalid="true"] { border-color: #ff8fa3; }

.newsletter { scroll-margin-top: calc(var(--header-h) + 16px); }
.newsletter__input:focus { outline: 3px solid var(--hot); outline-offset: 2px; }
.newsletter__form .btn-pill:disabled { opacity: .75; cursor: default; }

.newsletter__status {
  min-height: 1.4em;
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
}
.newsletter__status:empty { min-height: 0; }
.newsletter__status.is-error,
.newsletter__status.is-success,
.newsletter__status.is-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  animation: nl-in .25s var(--ease);
}
.newsletter__status.is-error::before,
.newsletter__status.is-success::before,
.newsletter__status.is-info::before {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}
.newsletter__status.is-error { color: #ffb3c1; box-shadow: inset 3px 0 0 #ff8fa3; }
.newsletter__status.is-error::before { content: "!"; background: #ff8fa3; color: var(--night); }
.newsletter__status.is-success { color: #fff; box-shadow: inset 3px 0 0 var(--hot); }
.newsletter__status.is-success::before { content: "\2713"; background: var(--hot); color: var(--night); }
.newsletter__status.is-info { color: #fff; box-shadow: inset 3px 0 0 var(--brand-soft); }
.newsletter__status.is-info::before { content: "i"; background: var(--brand-soft); color: var(--night); font-style: italic; font-family: Georgia, serif; }
@keyframes nl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Bottom bar ---------- */
.site-footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: #a3a8c4;
  text-align: center;
}