/* =====================================================================================================
   Section: footer — styles for the block between "BEGIN SECTION: footer" and "END SECTION: footer" in index.html.
   Also loaded by the legal pages (legal/*.html), which repeat the same footer markup with relative links.
   ===================================================================================================== */

.site-footer {
    --footer-bg: #ececec;                  /* flat light grey band from the design */
    --footer-line: #d4d4d4;                /* top hairline */
    --footer-link: var(--text);
    --footer-link-hover: #3f3f3f;

    position: relative;
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-line);
    color: var(--footer-link);
}

.site-footer__inner {
    /* Narrow centred block (not the full 1440 canvas): wordmark | social icons | legal links on top, then the
       symbol + copyright centred at the very bottom. */
    max-width: calc(60rem + 2 * var(--gutter));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    row-gap: 1rem;
    padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

/* Links: plain grey text, darker + underlined on hover. */
.site-footer a {
    color: var(--footer-link);
    text-decoration: none;
    border-radius: 2px;
    transition: color 0.2s ease;
}
.site-footer a:hover { color: var(--footer-link-hover); }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__links a[aria-current="page"] { color: var(--footer-link-hover); font-weight: 500; }

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Brand gradient logos rendered as flat grey (#666 over the band), as in the design. */
.site-footer__wordmark img,
.site-footer__symbol {
    filter: brightness(0);
    opacity: 0.57;
}

.site-footer__wordmark {
    display: inline-block;
}
.site-footer__wordmark img {
    width: clamp(8.5rem, 5rem + 9vw, 13rem);
    height: auto;
    transition: opacity 0.2s ease;
}
.site-footer__wordmark:hover img { opacity: 0.75; }

/* Centre column: social icons. */
.site-footer__centre {
    display: flex;
    justify-content: center;
}

/* Symbol + copyright: own row at the very bottom, centred. */
.site-footer__copy {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    color: var(--footer-link);
}
.site-footer__symbol {
    width: auto;
    height: 1.25rem;
}

/* Right column: legal links. */
.site-footer__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* Social icons: centre column of the top row. */
.site-footer__social {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 2.5rem;                         /* comfortable touch target around a 22px icon */
    height: 2.5rem;
    border-radius: var(--radius-sm);
}
.site-footer__social a:hover { color: var(--brand-violet); }
.site-footer__social svg { width: 1.375rem; height: 1.375rem; }

/* Tablet and phone: stack the three columns, centred. */
@media (max-width: 47.99rem) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.25rem;
        text-align: center;
    }
    .site-footer__end {
        align-items: center;
        text-align: center;
    }
    .site-footer__links { align-items: center; }
    /* Small screens: wordmark, social icons, legal links, then the copyright last (source order). */
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a,
    .site-footer__wordmark img { transition: none; }
}