/* footer.css — ONE footer bottom-bar for every page (desktop + mobile).
   Loaded last on every page so it wins over the per-page footer rules.
   Covers all three bar variants:  .footer-bar  |  .utility-footer  |  .sf-bottom
   and both link wrappers:         .footer-links  |  .sf-legal
   The "Cookie Settings" control is a <button class="footer-cookie"> built by /assets/js/cookies.js
   and is styled here exactly like the <a> links, in every state (rest, hover, focus, active). */

:root {
    --ft-fs: 12px;
    --ft-copy: #8f8f8f;
    --ft-link: #b4b4b4;
    --ft-sep: #4d4d4d;
    --ft-gold: #FFD700;
}

/* ── the bar ───────────────────────────────────────────── */
body .footer-bar,
body .utility-footer,
body .sf-bottom {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 14px 32px calc(14px + env(safe-area-inset-bottom, 0px));
    font-family: 'Cinzel', serif;
    font-size: var(--ft-fs);
    line-height: 1.5;
    letter-spacing: .5px;
    text-align: left;
}
body .sf-bottom { padding-left: max(32px, 5vw); padding-right: max(32px, 5vw); }

body .footer-bar > span,
body .utility-footer > span,
body .sf-bottom > span,
body .footer-bar .footer-copy {
    display: block;
    font-size: var(--ft-fs);
    letter-spacing: .5px;
    color: var(--ft-copy);
}

/* ── the link row ──────────────────────────────────────── */
body .footer-links,
body .sf-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    font-size: var(--ft-fs);
}
body .footer-links > span,
body .sf-legal > span {
    font-size: var(--ft-fs);
    line-height: 1;
    color: var(--ft-sep);
    user-select: none;
}

/* links AND the cookie button share every property, so they can never drift apart */
body .footer-links a,
body .footer-links button,
body .sf-legal a,
body .sf-legal button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 1px;
    border: 0;
    border-radius: 3px;
    background: none;
    font-family: 'Cinzel', serif;
    font-size: var(--ft-fs);
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: .5px;
    text-transform: none;
    text-decoration: none;
    color: var(--ft-link);
    -webkit-text-fill-color: currentColor;
    cursor: pointer;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
}
body .footer-links a:visited,
body .sf-legal a:visited { color: var(--ft-link); }

/* hover / keyboard focus / press: always gold, never black or white */
body .footer-links a:hover,
body .footer-links button:hover,
body .footer-links a:focus-visible,
body .footer-links button:focus-visible,
body .footer-links a:active,
body .footer-links button:active,
body .sf-legal a:hover,
body .sf-legal button:hover,
body .sf-legal a:focus-visible,
body .sf-legal button:focus-visible,
body .sf-legal a:active,
body .sf-legal button:active {
    color: var(--ft-gold);
}
/* a mouse click leaves focus on the button: keep it in the resting colour, not black/white */
body .footer-links button:focus:not(:focus-visible):not(:hover):not(:active),
body .sf-legal button:focus:not(:focus-visible):not(:hover):not(:active) { color: var(--ft-link); }
body .footer-links a:focus-visible,
body .footer-links button:focus-visible,
body .sf-legal a:focus-visible,
body .sf-legal button:focus-visible { outline: 2px solid var(--ft-gold); outline-offset: 2px; }

/* ── Explore Divisions: the bar is fixed to the bottom of the screen ── */
body .footer-bar.is-fixed,
.divisions-page .footer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; width: auto; height: auto; min-height: var(--footer-h, 46px); }

/* ── phones / small tablets ────────────────────────────── */
@media (max-width: 720px) {
    body .footer-bar,
    body .utility-footer,
    body .sf-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        text-align: center;
    }
    body .footer-bar > span,
    body .utility-footer > span,
    body .sf-bottom > span,
    body .footer-bar .footer-copy { text-align: center; }
    body .footer-links,
    body .sf-legal {
        justify-content: center;
        gap: 2px 18px;
        width: 100%;
        max-width: 420px;
    }
    /* separators only make sense on one line; when links wrap they would dangle at line ends */
    body .footer-links > span,
    body .sf-legal > span { display: none; }
    body .footer-links a,
    body .footer-links button,
    body .sf-legal a,
    body .sf-legal button { min-height: 30px; padding: 2px 2px; }
}
@media (max-width: 360px) {
    :root { --ft-fs: 11.5px; }
    body .footer-links, body .sf-legal { gap: 0 14px; }
}

@media print { .footer-cookie { display: none; } }