/* ==========================================================================
   Footer Component
   Site footer with brand, navigation, and copyright.
   ========================================================================== */

.footer {
  border-top: none;
  padding: var(--space-lg) 0;
  position: relative;
}

.footer__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-accent) 0,
    var(--color-accent) 8px,
    transparent 8px,
    transparent 12px
  );
  transform-origin: left;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

/* --- Brand --- */
.footer__logo { display: inline-flex; }
.footer__logo:hover { text-decoration: none; }
.footer__logo-img { height: 1.5rem; width: auto; max-width: 150px; }

.footer__tagline {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
  max-width: 40ch;
}

/* --- Nav --- */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}

.footer__link {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer__link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* --- Copyright --- */
.footer__copy {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* --- Desktop layout --- */
@media (min-width: 1024px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }

  .footer__brand { flex: 1; }
  .footer__nav { flex: 1; justify-content: center; }
  .footer__copy { flex: 1; text-align: right; align-self: center; }
}