/*
 * 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.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.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; }

/* One logo or badge per theme (as stux.group does): the --for-light image shows on light
   backgrounds, the --for-dark one on dark. Dark is the default, as on these sites. */
.brand-mark--for-light { display: none; }
:root[data-theme="light"] .brand-mark--for-light,
:root.theme-light .brand-mark--for-light { display: block; }
:root[data-theme="light"] .brand-mark--for-dark,
:root.theme-light .brand-mark--for-dark { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]):not(.theme-dark) .brand-mark--for-light { display: block; }
    :root:not([data-theme]):not(.theme-dark) .brand-mark--for-dark { display: none; }
}

/* Dark backgrounds: a greyed-out blue logo turns near-black and vanishes, so the muted logo is
   lifted to a light grey (the neon Stuxedo badge is already light). Hover still restores colour,
   as `:root .brand-mark-link:hover .brand-mark` is more specific. */
:root .brand-mark--lift { filter: grayscale(1) brightness(2.2); }