/**
 * @file
 * Site footer — visual styling.
 *
 * Padding lives in css/layout.css alongside <main>'s page padding
 * (footer is a structural region, treated symmetrically with main).
 * This file handles the skin: dark surface, light text and links.
 */
@layer components {

  .footer {
    background-color: var(--surface-dark);
    color: var(--text-on-dark);

    a {
      color: var(--text-on-dark);
    }
    a:hover,
    a.is-active {
      color: var(--upei-yellow);
      text-decoration: underline;
    }
  }

}