/* ===== SITE FOOTER =====
   Modelled on the Linking Space footer: brand + description on the left, a
   links column and a contact column to the right, fine print centred on one
   line underneath. It uses Inter, like Linking Space, rather than the Barlow
   body font of the rest of the app. Inter is self-hosted (see fonts.css for
   why) and declared here because only the footer uses it. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-var-latin-ext.f5b588b5cfef.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-var-latin.225835e6e049.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

footer.site-footer {
    --footer-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    margin-top: var(--space-lg);
    background: #060d06;
    color: var(--dark-text, #f0ede7);
    font-family: var(--footer-font);
    padding: 64px var(--space-lg) 32px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
    /* Reveal on scroll */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

footer.site-footer.footer--visible {
    opacity: 1;
    transform: translateY(0);
}

.footer-inner {
    max-width: 1152px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* The global `p`, `h2`, `ul` and `a` rules carry margins and sizes meant for
   page content; everything in here sets its own. */
.site-footer p,
.site-footer h2,
.site-footer ul {
    margin: 0;
    font-family: var(--footer-font);
}

/* ── Brand ───────────────────────────────────────────────── */
.footer-brand-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-brand .brand-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Wordmark: spaced capitals, the way Linking Space sets its name. */
.footer-brand-name {
    font-family: var(--footer-font);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold, #c4a860);
    white-space: nowrap;
}

.footer-tagline {
    margin-top: 20px;
    max-width: 36ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--muted-text, rgba(240, 237, 231, 0.6));
}

/* ── Column headings ─────────────────────────────────────── */
.footer-heading {
    font-family: var(--footer-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--dark-text, #f0ede7);
    margin-bottom: 18px;
}

/* ── Links ───────────────────────────────────────────────── */
/* This is a <nav>, and styles.css styles bare `nav` as *the* site navbar:
   background, border, shadow, and `position: sticky; z-index: 100`. The
   landmark is worth keeping for screen readers, so the leak gets reset. */
.footer-links {
    background: none;
    border-bottom: none;
    box-shadow: none;
    position: static;
    z-index: auto;
    padding: 0;
    display: block;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The tap target (padding-block) comes from interaction.css, which owns the
   44 px rule globally — setting it here too would just fight it. */
.footer-links a,
.footer-contact a {
    display: inline-block;
    font-family: var(--footer-font);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dark-text, #f0ede7);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.2s;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--gold, #c4a860);
}

/* ── Contact ─────────────────────────────────────────────── */
.footer-contact p + p {
    margin-top: 14px;
}

.footer-madein {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted-text, rgba(240, 237, 231, 0.6));
}

.footer-madein .icon-svg {
    width: 1em;
    height: 1em;
    fill: #e11d48;
    stroke: #e11d48;
    color: #e11d48;
}

/* ── Fine print ──────────────────────────────────────────── */
.footer-bottom {
    max-width: 1152px;
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted-text, rgba(240, 237, 231, 0.5));
}

.footer-dot {
    margin: 0 0.6em;
    opacity: 0.6;
}

@media (max-width: 768px) {
    footer.site-footer {
        padding: 48px var(--space-sm) 24px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-tagline {
        max-width: none;
    }

    .footer-bottom {
        margin-top: 40px;
    }

    /* On a phone the three fine-print pieces wrap; the dots would dangle. */
    .footer-bottom span {
        display: block;
    }

    .footer-dot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    footer.site-footer {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Light Mode ──────────────────────────────────────────── */
/* #f0f0ee rather than the Champagne White of the page body: the footer needs to
   read as a separate band, and an identical background makes it float. */
html:not(.dark-mode) footer.site-footer {
    background: #f0f0ee;
    border-top-color: rgba(0, 0, 0, 0.1);
    color: var(--dark-text);
}

html:not(.dark-mode) .footer-heading,
html:not(.dark-mode) .footer-links a,
html:not(.dark-mode) .footer-contact a {
    color: var(--dark-text);
}

html:not(.dark-mode) .footer-links a:hover,
html:not(.dark-mode) .footer-contact a:hover {
    color: var(--gold, #c4a860);
}

html:not(.dark-mode) .footer-tagline,
html:not(.dark-mode) .footer-madein,
html:not(.dark-mode) .footer-bottom p {
    color: rgba(26, 44, 66, 0.65);
}

html:not(.dark-mode) .footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.1);
}