/* ===================================
   FOOTER — mirrors nav.css link styling
   Same color tokens as .nav-links a, minus the
   logo/theme-toggle/hamburger (footer doesn't need those)
   =================================== */

:root {
  /* Local copy of the token borrowed from styles.css —
     footer.css no longer depends on styles.css being loaded */
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);

  /* Local copies of the link color tokens borrowed from nav.css —
     footer.css no longer depends on nav.css being loaded */
  --clr-nav-link-bg:        hsla(200, 70%, 82%, 1);   /* light blue block bg   */
  --clr-nav-link:           hsl(325, 75%, 60%);        /* bright pink text      */
  --clr-nav-link-border:    hsl(263, 75%, 45%);        /* bold violet 2px border*/
  --clr-nav-link-hover-bg:  hsl(263, 75%, 45%);        /* purple flip on hover  */
  --clr-nav-link-hover:     hsla(200, 70%, 82%, 1);    /* light blue hover text */
}

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    /* border-top: .25rem solid var(--clr-nav-link-border); */
     /* border-top: .15rem solid color-mix(in srgb, var(--clr-nav-link-border) 50%, transparent); */
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 4vw, 5rem); /* scales fluidly instead of jumping at breakpoints */
    margin: 0;
    padding: 2rem 1rem;
}

/* .nav-links a {
 font-family: Georgia, serif;
    text-decoration: none;
    font-size: 1.01rem;
    font-weight: 700;
    color: hsla(320, 90%, 58%, 1);
    background: hsla(200, 70%, 82%, 1);
    border: 2px solid hsla(270, 65%, 42%, 1);
    border-radius: 12px;
    padding: 6px 12px;
    box-shadow: 3px 3px 0 hsla(270, 65%, 28%, 1), 5px 5px 8px hsla(270, 50%, 15%, 0.6);
    letter-spacing: 0.04rem;
    transition: background 0.2s ease, color 0.2s ease, border-color .2s ease;
} */

.footer-links a {
    font-family: Georgia, serif;
    text-decoration: none;
    background: var(--clr-nav-link-bg);
    color: var(--clr-nav-link);
    border: 2px solid var(--clr-nav-link-border);
    font-size: 1.01rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 12px;
    box-shadow: 3px 3px 0 hsla(270, 65%, 28%, 1), 5px 5px 8px hsla(270, 50%, 15%, 0.6);
    letter-spacing: 0.04rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}

[data-theme="dark"] .footer-links a {
    box-shadow: 3px 5px 1px hsla(270, 65%, 28%, 1), 5px 5px 8px hsla(270, 50%, 15%, 0.6);
}

.footer-links a:hover:not(.active) {
    background: var(--clr-nav-link-hover-bg);
    color: var(--clr-nav-link-hover);
    border-color: var(--clr-nav-link-hover-bg);
}

.footer-links a.active {
    display: none;
}

.footer-credit {
    font-size: var(--fs-300);
    margin: 0;
    opacity: 0.75;
}

/* ===================================
   Same breakpoint nav.css uses to shrink spacing
   =================================== */
@media (width <= 900px) {
    .footer-links {
        font-size: 0.75rem;
    }
}