<footer class="footer">
    <div class="container">
        <p class="copyright">
            © <span id="copyright-year">2026</span> mifi Ventures, LLC · Boston, MA
        </p>
        <nav class="footer-links" aria-label="Social media links">
            <a
                href="https://linkedin.com/in/the-mifi"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn profile (opens in new tab)">LinkedIn</a
            >
            <a
                href="https://github.com/the-mifi"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="GitHub profile (opens in new tab)">GitHub</a
            >
        </nav>
    </div>
</footer>

<style>
    .footer {
        padding: var(--space-xxl) 0 var(--space-xl) 0;
        text-align: center;
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border);
    }

    .copyright {
        margin-bottom: var(--space-md);
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-tertiary);
        max-width: 100%;
    }

    .footer-links {
        display: flex;
        gap: var(--space-lg);
        justify-content: center;
        align-items: center;

        @media (max-width: 480px) {
            gap: var(--space-md);
        }

        & a {
            font-size: var(--font-size-medium);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-secondary);
            text-decoration: none;
            transition: color var(--transition-fast);
            border-bottom: 1px solid transparent;
            padding: var(--space-xs) var(--space-sm);
            margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm));
            min-height: 44px;
            display: inline-flex;
            align-items: center;

            &:hover {
                color: var(--color-primary);
                border-bottom-color: var(--color-primary);
            }

            &:focus-visible {
                outline: 4px solid var(--color-focus);
                outline-offset: 4px;
                border-bottom-color: transparent;
                box-shadow: 0 0 0 8px var(--color-focus-outline);
                border-radius: 3px;
            }

            @media print {
                &:after {
                    content: none;
                }
            }
        }
    }
</style>
