/* =====================================================================
   Site footer (WoulfesK9_Site_Footer)

   Same look as the BeTheme footer it replaces: a dark strip under a hairline,
   copyright left, round white back-to-top right; stacked and centred on
   phones.
   ===================================================================== */

/* BeTheme still prints its <footer id="Footer"> shell (the copyright row is
   switched off with the betheme_disable_footer filter). Nothing is left
   inside it, so it goes. */
#Footer { display: none; }

.wk9-footer {
    background: var(--k9-ink-900);
    border-top: 1px solid var(--k9-line);
    color: var(--k9-text-muted);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body);
}

.wk9-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k9-space-5);
    width: min(1330px, calc(100% - (var(--k9-gutter) * 2)));
    min-height: 90px;
    margin: 0 auto;
    padding: var(--k9-space-4) 0;
    box-sizing: border-box;
}

/* margin:0 because BeTheme puts a bottom margin on every <p>. */
.wk9-footer .wk9-footer__copy {
    margin: 0;
    color: var(--k9-text-muted);
    line-height: 1.5;
}

.wk9-footer__copy a {
    color: var(--k9-text-secondary);
    text-decoration: none;
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-footer__copy a:hover,
.wk9-footer__copy a:focus-visible { color: var(--k9-text); }

/* `html body` so BeTheme's button and button:hover rules (0,1,1) can't
   repaint it. */
html body .wk9-footer .wk9-footer__top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--k9-white);
    color: var(--k9-black);
    box-shadow: none;
    cursor: pointer;
    transition: transform var(--k9-duration-fast) var(--k9-ease);
}

html body .wk9-footer .wk9-footer__top:hover {
    background: var(--k9-white);
    color: var(--k9-black);
    transform: translateY(-2px);
}

html body .wk9-footer .wk9-footer__top:focus-visible {
    outline: 2px solid var(--k9-white);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .wk9-footer__inner {
        flex-direction: column-reverse;
        justify-content: center;
        gap: var(--k9-space-4);
        padding: var(--k9-space-8) 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .wk9-footer .wk9-footer__top:hover { transform: none; }
}