/*
 * Footer brand block: "parent logo | A <Parent> Service | Powered by Stuxedo" and the
 * "Created with love / code / coffee" line. Logos and the badge are grey and dimmed until
 * hovered or focused (still >= 3:1 at rest); the service text is in the muted text colour.
 * Uses the page's --text-muted / --muted and --accent tokens.
 */
.brand-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 0.75rem;
    font-size: 0.8rem; /* in normal case ("A Ridgwell Family Project"), not capitals */
}

.brand-mark-link {
    display: inline-flex;
}

.brand-mark {
    display: block;
    height: 28px;
    width: auto;
    /* Every state uses the same filter functions so the change animates smoothly; going to
       `filter: none` drops the image's layer at the end of the transition (a glitchy snap). */
    filter: grayscale(1) brightness(1);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
    will-change: filter, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

:root[data-theme="light"] .brand-mark,
:root.theme-light .brand-mark {
    filter: grayscale(1) brightness(0.6);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not(.theme-dark) .brand-mark {
        filter: grayscale(1) brightness(0.6);
    }
}

:root .brand-mark-link:hover .brand-mark,
:root .brand-mark-link:focus-visible .brand-mark {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

.brand-footer-sep {
    opacity: 0.5;
}

/* Wrapped onto several lines on phones, the separators would dangle at line ends. */
@media (max-width: 480px) {
    .brand-footer-sep {
        display: none;
    }
}

.brand-footer-text {
    color: var(--text-muted, var(--muted, #a8a8b3));
    text-decoration: none;
    transition: color 0.2s;
}

.brand-footer-text:hover,
.brand-footer-text:focus-visible {
    color: var(--accent, currentColor);
}

.made-with {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted, var(--muted, #a8a8b3));
}

.made-with a {
    color: inherit;
}

.made-with-love { color: #e5484d; }
.made-with-code { color: #30a46c; }
.made-with-coffee { color: #a0633b; }

.brand-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark,
    .brand-footer-text {
        transition: none;
    }
}

/* Created-with icons: optical sizing so the solid heart is not bigger than the code and coffee icons.
   Icons are sized in em (SVG box 1em; FA glyph via font-size), then scaled per icon. */
.made-with svg { width: 1em; height: 1em; flex: none; }
.made-with-love { font-size: 0.85em; }
.made-with-code { font-size: 1em; }
.made-with-coffee { font-size: 0.95em; }

/* ---- The page footer: links, then the copyright line, then the brand mark ---- */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-weight: 600;
}

.site-footer-copyright {
    margin: 0;
    font-size: 11px;
}

.site-footer .brand-footer {
    margin-top: 4px;
}

/* The archive viewer's one-line footer bar: a smaller mark, no credit line. */
.brand-footer--compact {
    margin-top: 0;
    gap: 8px;
    font-size: 10px;
    flex-wrap: nowrap;
}

.brand-footer--compact .brand-mark {
    height: 18px;
}

@media (max-width: 720px) {
    .brand-footer--compact .brand-footer-sep,
    .brand-footer--compact .brand-footer-text {
        display: none;
    }
}