/* MLH Client Portal — footer.css
 * Canonical footer styling for the portal.
 *
 * Consumes CSS variables from /shared/tokens.css:
 *   --ink     dark surface
 *   --paper   cream foreground
 *   --gold    accent / link colour
 *   --font-mono   mono typeface stack
 *   --outer   outer-page padding
 *
 * Layout:
 *   - 4-column ledger row on >=960px (entity / office / direct / meta)
 *   - 2-column on 600–959px
 *   - Single-column stack on <600px
 *   - Mono 11px / 0.16em tracked / uppercase throughout
 *   - Top hairline at gold @ 32% opacity
 *   - Hidden on print
 */

.mlh-footer-canonical {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(196, 163, 90, 0.32); /* var(--gold) at 32% */
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--outer, clamp(1.5rem, 6vw, 5rem));
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mlh-footer-canonical__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}

.mlh-footer-canonical__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0; /* prevent overflow inside fixed-fr tracks */
}

.mlh-footer-canonical__col > * {
  overflow-wrap: anywhere;
}

.mlh-footer-canonical__label {
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 0.35rem;
  font-size: 10px;
}

.mlh-footer-canonical__line {
  color: var(--paper);
  opacity: 0.85;
  display: block;
}

.mlh-footer-canonical__strong {
  color: var(--paper);
  opacity: 1;
  display: block;
}

.mlh-footer-canonical__link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 163, 90, 0.28);
  padding-bottom: 1px;
  transition: opacity 160ms ease, border-color 160ms ease;
  display: inline-block;
  word-break: break-word;
}

.mlh-footer-canonical__link:hover,
.mlh-footer-canonical__link:focus {
  opacity: 0.78;
  border-color: rgba(196, 163, 90, 0.6);
  outline: none;
}

@media (max-width: 959px) {
  .mlh-footer-canonical__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 599px) {
  .mlh-footer-canonical {
    padding: clamp(2rem, 8vw, 3rem) var(--outer, 1.5rem);
  }

  .mlh-footer-canonical__row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media print {
  .mlh-footer-canonical {
    display: none;
  }
}