/* ============================================================
   FOOTER
   ============================================================ */

/*
  TOC
  1. Site footer
  2. Social icons
  3. Dark mode
*/


/* ---- 1. Site footer ---- */

.site-footer {
    text-align: center;
    padding: 1.75em 0;
    margin-top: 4em;
    background: var(--color-footer-bg);
}

.footer-tagline {
    font-size: 0.85em;
    color: var(--color-light-text);
    margin-bottom: 1em;
    padding: 0 1em;
}


/* ---- 2. Social icons ---- */

/* Container — named neutrally to avoid content blocker false positives */
.footer-elsewhere {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25em;
}

.footer-elsewhere-btn { /* individual icon link */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.footer-elsewhere-btn:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.footer-elsewhere-btn .about-follow-icon {
    width: 0.85em;
    height: 0.85em;
    transition: filter var(--transition-base);
}

.footer-elsewhere-btn:hover .about-follow-icon {
    filter: brightness(0) invert(1);
}


/* ---- 3. Dark mode ---- */

@media (prefers-color-scheme: dark) {
    .footer-elsewhere .about-follow-icon { filter: invert(1); }
}