/* ----------------------------------------------------------------------------
   Global blog page chrome
   Rendered on every page via wp_footer (see functions.php).
   Depends on variables.css for design tokens.
   ---------------------------------------------------------------------------- */

/* Site-wide dark page background.
   Lives here (not in blog-redesign.css) so 404, Elementor Canvas templates,
   and any non-blog page also get the correct background under the footer bar.
   Elementor sections / page templates with their own backgrounds will paint
   over this naturally. */
body {
    background-color: var(--neutral-950);
}

/* Centered container — matches website's max-width */
.blog-container {
    max-width: 1190px;
    margin: 0 auto;
    width: 100%;
}

/* Footer bar — copyright + privacy links + watermark background */
.blog-footer-bar {
    background-color: var(--neutral-950);
    padding: 0 96px;
}

.blog-footer-bar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 28px 0;
}

.blog-footer-bar__copy {
    font-size: 16px;
    color: var(--neutral-400);
    font-family: Aeonik Fono;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -.16px;
}

.blog-footer-bar__links {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-footer-bar__link {
    font-size: 16px;
    color: var(--neutral-400);
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: Aeonik Fono;
}

.blog-footer-bar__link:hover {
    color: var(--neutral-0);
}

/* Background image div — uses padding-top to preserve image aspect ratio */
.blog-footer-bar__bg {
    background: url('../images/blog/footer-bg.webp');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 20%;
    height: 0;
}

@media (max-width: 768px) {
    .blog-footer-bar {
        padding: 0 24px;
    }

    .blog-footer-bar__row {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}