/* backend/src/main/resources/static/modules_styles/starter_standard/components/footer.css */

/* ==============================================
   FOOTER COMPONENT — starter-standard
   ============================================== */

footer {
  margin-top: auto;
  background: var(--gb-bg-surface);
  border-top: 1px solid var(--gb-border-default);
  transition:
    background var(--gb-transition-normal),
    border-color var(--gb-transition-normal);
}

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--gb-spacing-lg);
  padding: var(--gb-spacing-xl) var(--gb-spacing-md);
}

/* ==============================================
   FOOTER NAVIGATION
   ============================================== */

.footer > nav {
  width: 100%;
}

.footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gb-spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.footer__nav li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav-link {
  font-size: var(--gb-type-secondary-size);
  color: var(--gb-text-secondary);
  text-decoration: none;
  transition: color var(--gb-transition-fast);
}

.footer__nav-link:hover {
  color: var(--gb-text-primary);
}

/* ==============================================
   FOOTER BRAND — 3-column grid for true centering
   ============================================== */

.footer__brand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: var(--gb-spacing-lg);
  border-top: 1px solid var(--gb-border-subtle);
}

/* First column, mirroring the email in the third: both captions are
   centred in their columns, so the row is symmetric about the name. */
.footer__copyright {
  font-size: var(--gb-type-caption-size);
  color: var(--gb-text-tertiary);
  text-align: center;
}

.footer__product {
  font-weight: var(--gb-font-weight-semibold);
  font-size: var(--gb-type-overline-size);
  line-height: var(--gb-type-overline-leading);
  color: var(--gb-text-primary);
  text-decoration: none;
  letter-spacing: var(--gb-type-overline-tracking);
  text-transform: uppercase;
  transition: color var(--gb-transition-fast);
  text-align: center;
}

.footer__product:hover {
  color: var(--gb-accent-primary);
}

/* The company email in the third column, balancing the copyright line in
   the first: the same caption type, centred in its column. */
.footer__email {
  font-size: var(--gb-type-caption-size);
  color: var(--gb-text-secondary);
  text-align: center;
  text-decoration: none;
  transition: color var(--gb-transition-fast);
}

.footer__email:hover {
  color: var(--gb-text-primary);
}

/* ==============================================
   MOBILE (< 768px)
   ============================================== */

@media screen and (max-width: 767px) {
  .footer__nav {
    gap: var(--gb-spacing-md);
  }

  .footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--gb-spacing-md);
    text-align: center;
  }

  /* In a column the name heads the row, as a title over its captions. The
     markup keeps the desktop order. Tab still meets the name before the
     email, because the copyright line is text and not a stop; only a
     screen reader reads the copyright line before the name. */
  .footer__product {
    order: -1;
  }
}