/* Site footer (moved out of footer.php so it is cached and lives with the other layout CSS). */
/* =========================================================
   BASE FOOTER
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Hide old/static SVG fallback. */
.site-footer svg.glowing-wave-fallback {
    display: none !important;
}

/* Preserve existing glow / grain pseudo layers. */
.site-footer .glowing-wave-showcase::before,
.site-footer .glowing-wave-showcase::after {
    display: block;
}

/* =========================================================
   FOOTER — single definition (v2.7.1)
   One centred stack on every device: legal links, then credit.
   Spacing is driven by two variables, aligned to the page frame.
========================================================= */
.site-footer,
.site-footer--wave {
    --footer-h: 380px;
    --footer-pad-bottom: 28px;
    --sticky-bar-h: 64px;
    position: relative;
    display: block;
    height: var(--footer-h);
    min-height: var(--footer-h);
    overflow: hidden;
    background: #000;
}

.site-footer .glowing-wave-showcase {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: var(--footer-h);
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.site-footer .glowing-wave-canvas {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Content layer fills the footer and pins the stack to the bottom. */
.site-footer .site-footer-info {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 0 var(--frame-gutter) var(--footer-pad-bottom);
    pointer-events: none;
}

.site-footer .footer-bottom {
    position: static;
    display: flex;
    flex-direction: column-reverse;   /* legal links above, credit below */
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: var(--frame-max);
    margin: 0 auto;
    padding-inline: var(--frame-pad);
    text-align: center;
    pointer-events: auto;
}

.footer-credit {
    margin: 0;
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.4;
}

.footer-credit a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #d9d9d9;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 20px;
}

.footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: #b6b0b9;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.footer-credit a:hover,
.footer-legal a:hover { color: #fff; }

.footer-credit a:focus-visible,
.footer-legal a:focus-visible {
    outline: 2px solid var(--pink, #fc0bf1);
    outline-offset: 2px;
    border-radius: 4px;
    color: #fff;
}

/* Hide old/static SVG fallback; keep the glow / grain layers. */
.site-footer svg.glowing-wave-fallback { display: none !important; }
.site-footer .glowing-wave-showcase::before,
.site-footer .glowing-wave-showcase::after { display: block; }

/* =========================================================
   MOBILE (the fixed action bar is reserved on pages where it is fixed)
========================================================= */
@media (max-width: 767px) {
    .site-footer,
    .site-footer--wave {
        --footer-h: 350px;
        --footer-pad-bottom: 12px;
    }
    .footer-legal { gap: 0 12px; }
    .footer-legal a { font-size: 12px; padding: 0 6px; }
}

@media (max-width: 760px) {
    body:not(.detail-layout) {
        padding-bottom: calc(var(--sticky-bar-h, 64px) + env(safe-area-inset-bottom, 0px));
    }
}