/* Sachse Choir — shared site footer link styling.
   Loaded on every page after that page's own stylesheet so one set of
   footer link colors wins site-wide. This file owns colors, underline and
   focus treatment only — layout, spacing, wording and the near-black
   footer background stay with each page's stylesheet. */

:root {
  --sc-footer-link: #c9d2df;
  --sc-footer-dim: #667085;
  --sc-footer-accent: #ff7a21;
}

/* Separators (the "·" between links) sit as bare text in the link row,
   so the row itself carries the dim color and the links override it. */
footer p:has(> a),
.site-footer p:has(> a),
.footer p:has(> a) {
  color: var(--sc-footer-dim);
}

/* One color for every footer link, visited included, so history state and
   the current page never read as a different link. */
footer a:link,
footer a:visited,
.site-footer a:link,
.site-footer a:visited,
.footer a:link,
.footer a:visited {
  color: var(--sc-footer-link);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

/* Hover and keyboard focus both land on Sachse orange with an underline. */
footer a:hover,
footer a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible,
.footer a:hover,
.footer a:focus-visible {
  color: var(--sc-footer-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 14px rgba(255, 122, 33, .35);
}

footer a:focus-visible,
.site-footer a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--sc-footer-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

@supports not selector(:focus-visible) {
  footer a:focus,
  .site-footer a:focus,
  .footer a:focus {
    color: var(--sc-footer-accent);
    text-decoration: underline;
    outline: 2px solid var(--sc-footer-accent);
    outline-offset: 3px;
  }
}