/* City construction for the shared footer. Root-scoped under
   :root[data-style="city"] so Classic stays untouched. Uses the shared City
   ink/outline/hard-shadow tokens from city.css. */
:root[data-style="city"] .site-footer {
  background: var(--color-surface-container-low);
  border-top: var(--fp-outline-width) solid var(--fp-ink);
  box-shadow: inset 0 6px 0 var(--color-tertiary);
}

:root[data-style="city"] .site-footer .footer-grain {
  opacity: 0.06;
}

:root[data-style="city"] .site-footer-column-title {
  color: var(--color-on-surface);
}

:root[data-style="city"] .site-footer-link {
  color: var(--color-on-surface-variant);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

:root[data-style="city"] .site-footer-link:hover,
:root[data-style="city"] .site-footer-link:focus-visible {
  color: var(--color-secondary);
  text-decoration-line: underline;
}

:root[data-style="city"] .site-footer-bottom {
  border-top-color: var(--fp-ink);
  border-top-width: var(--fp-outline-width);
}

:root[data-style="city"] .site-footer-brand-link {
  filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--fp-ink) 20%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style="city"] .site-footer-link {
    transition: none;
  }
}