/* ==========================================================================
   Light Generation Ministry — Site Footer
   Location: assets/css/footer.css
   Depends on: assets/css/variables.css, main.css's .container (no Bootstrap)

   Recreated from a specific reference design: a white two-column footer
   (tagline + legal links + copyright on the left; quick-link nav +
   social icons on the right). Kept in its own file, same rationale as
   assets/css/header.css — it's maintained against that reference
   independently of the rest of the design system.
   ========================================================================== */

:root {
  /* Azure/Cerulean link blue, matched against the reference footer. */
  --lgm-footer-link: #1BA9D5;
  --lgm-footer-link-hover: #1489AE;
}

/* ==========================================================================
   Footer: tagline/legal/copyright + nav/social
   ========================================================================== */

.lgm-footer {
  background: var(--lgm-white);
  padding: var(--lgm-space-xl) 0;
}

.lgm-footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lgm-space-lg);
}

.lgm-footer-left {
  max-width: 520px;
}

.lgm-footer-tagline {
  margin: 0 0 var(--lgm-space-md);
  color: var(--lgm-dark-grey);
  font-size: 0.9rem;
}

.lgm-footer-tagline a {
  font-weight: 500;
}

.lgm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--lgm-space-md);
}

.lgm-footer-legal a {
  font-size: 0.8rem;
}

.lgm-footer-legal span {
  color: var(--lgm-medium-grey);
  font-size: 0.8rem;
}

.lgm-footer-copyright {
  margin: 0;
  color: var(--lgm-dark-grey);
  font-size: 0.75rem;
}

.lgm-footer-right {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--lgm-space-md);
}

.lgm-footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px;
}

.lgm-footer-nav-list a {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Shared link treatment: color + animated underline that reveals on
   hover/focus, left-to-right, 300ms ease — reused across the tagline,
   legal, and quick-nav links rather than repeating the same rule set
   three times. */
.lgm-footer-tagline a,
.lgm-footer-legal a,
.lgm-footer-nav-list a {
  position: relative;
  color: var(--lgm-footer-link);
  text-decoration: none;
  transition: color 300ms ease;
}

.lgm-footer-tagline a::after,
.lgm-footer-legal a::after,
.lgm-footer-nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.lgm-footer-tagline a:hover,
.lgm-footer-tagline a:focus-visible,
.lgm-footer-legal a:hover,
.lgm-footer-legal a:focus-visible,
.lgm-footer-nav-list a:hover,
.lgm-footer-nav-list a:focus-visible {
  color: var(--lgm-footer-link-hover);
}

.lgm-footer-tagline a:hover::after,
.lgm-footer-tagline a:focus-visible::after,
.lgm-footer-legal a:hover::after,
.lgm-footer-legal a:focus-visible::after,
.lgm-footer-nav-list a:hover::after,
.lgm-footer-nav-list a:focus-visible::after {
  transform: scaleX(1);
}

.lgm-footer-social {
  display: flex;
  gap: 12px;
}

.lgm-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--lgm-dark-blue);
  color: var(--lgm-white);
  transition: transform 300ms ease, background-color 300ms ease;
}

.lgm-footer-social-link .lgm-icon {
  width: 17px;
  height: 17px;
}

.lgm-footer-social-link:hover,
.lgm-footer-social-link:focus-visible {
  transform: scale(1.08);
  background: var(--lgm-footer-link-hover);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: keep the same two-column hierarchy, tighten spacing. */
@media (max-width: 991.98px) {
  .lgm-footer-main {
    gap: var(--lgm-space-md);
  }

  .lgm-footer-nav-list {
    gap: 20px;
  }
}

/* Mobile: stack everything, center-align, social icons stay on one row. */
@media (max-width: 767.98px) {
  .lgm-footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lgm-footer-left {
    max-width: none;
  }

  .lgm-footer-legal {
    justify-content: center;
  }

  .lgm-footer-right {
    align-items: center;
    width: 100%;
  }

  .lgm-footer-nav-list {
    justify-content: center;
  }

  .lgm-footer-social {
    flex-wrap: nowrap;
  }
}