/*
 * footer.css — Universal footer and minimal footer (Amor Musicae variant)
 * All values from tokens.css.
 */

/* ── Universal footer — centred, pink on Night Ink (Figma 1098:1995) ────────── */

.site-footer {
    background-color: var(--color-surface);          /* #233D4D — Night Ink bright */
    color: var(--color-pink-velvet-br);              /* #FF3385 — all content pink */
    text-align: center;
}

.site-footer__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--site-padding);
    padding-block: var(--space-12) var(--space-10);
}

/* ── Top row — nav links split around the centred logo ──────────────────────── */

.site-footer__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    flex-wrap: wrap;
}

.site-footer__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 3vw, var(--space-8));
    list-style: none;
}

.site-footer__nav-list a {
    font-family: var(--font-body);
    font-size: var(--text-sm);      /* 16px */
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-pink-velvet-br);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.site-footer__nav-list a:hover { opacity: 0.65; }

/* Centred logo — pink wordmark, recoloured via mask */
.site-footer__logo {
    flex-shrink: 0;
    width: 150px;
    height: 80px;
    background-color: var(--color-pink-velvet-br);
    -webkit-mask: url('../../images/brand/Carnival-logo-full-basic.svg') center / contain no-repeat;
            mask: url('../../images/brand/Carnival-logo-full-basic.svg') center / contain no-repeat;
    transition: opacity var(--transition-fast);
}
.site-footer__logo:hover { opacity: 0.8; }

/* ── Divider ────────────────────────────────────────────────────────────────── */

.site-footer__divider {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-pink-velvet-br) 30%, transparent);
    margin-block: var(--space-8);
}

/* ── Social icon row ────────────────────────────────────────────────────────── */

.site-footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0 0 var(--space-8);
}

.site-footer__social a {
    display: block;
    color: var(--color-pink-velvet-br);
    transition: transform var(--transition-fast) var(--ease-back), opacity var(--transition-fast);
}

.site-footer__social a:hover { opacity: 0.75; transform: translateY(-2px); }

.site-footer__social img {
    display: block;
    height: 28px;        /* normalise by height; widths follow each glyph's aspect ratio */
    width: auto;
}

/* ── Bottom legal line ──────────────────────────────────────────────────────── */

.site-footer__legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    max-width: none;   /* override the global p { max-width:68ch } so it centres full-width */
    font-size: 1.1875rem;   /* 19px + bold ⇒ "large text", so the pink-on-ink clears AA at 3:1 (was 14px → failed 4.5:1) */
    font-weight: 700;
    color: var(--color-pink-velvet-br);
}

.site-footer__legal a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.site-footer__legal a:hover { opacity: 0.65; }

/* Copyright on its own row below the legal line. */
.site-footer__copyright { margin-top: var(--space-2); }

/* ── Minimal footer — Amor Musicae variant ──────────────────────────────────── */
/*
 * Amor Musicae has no nav and no newsletter form.
 * The minimal footer is centred and condensed.
 */

.site-footer--minimal {
    background-color: var(--color-bg);  /* deepest dark, no surface lift */
}

.site-footer--minimal .site-footer__inner {
    padding-block: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ── Responsive — tablet ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Stack the footer into a clean vertical list: logo on top, then all page links
       in a single centred column (the desktop split-around-logo row doesn't stack). */
    .site-footer__nav { flex-direction: column; gap: var(--space-6); }
    .site-footer__logo { order: -1; flex-basis: auto; }
    .site-footer__nav-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    /* Legal row is a non-wrapping flex line — let it wrap on narrow screens so the
       charity status + policy links don't overflow the viewport. */
    .site-footer__legal { flex-wrap: wrap; }

    .site-footer--minimal .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Responsive — mobile ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .site-footer__social { gap: var(--space-4); }
}