/*
 * Header/footer color customization (bg_color_type/text_color_type on
 * HeaderSettings/FooterSettings). The resolved background is applied as a
 * literal inline `background-color` on .site-header/.site-footer (inline
 * styles always win, so no specificity fight with Tailwind's utility
 * classes); the resolved text color is exposed as the --hf-text custom
 * property on those same elements so it cascades to every descendant.
 *
 * `.hf-text`/`.hf-text-muted`/`.hf-link` replace the old hardcoded
 * text-gray-* utility classes on base copy so it always stays legible
 * against a custom background; brand-accent classes (text-primary,
 * bg-primary text-white, etc.) are left untouched on purpose.
 */

.hf-text {
    color: var(--hf-text, inherit);
}

.hf-text-muted {
    color: var(--hf-text, inherit);
    opacity: 0.7;
}

.hf-link {
    color: var(--hf-text, inherit);
    transition: opacity 0.15s ease;
}

.hf-link:hover {
    opacity: 0.7;
}

.hf-hover:hover {
    background-color: rgba(127, 127, 127, 0.15);
}

/*
 * Site logo renditions are rendered at 2x their display size (e.g.
 * site-logo-md's fill-112x112 rendition displays at a 56px-tall box) so
 * Retina/high-DPI screens get a crisp, non-blurry logo instead of a
 * browser-upscaled low-res image. The authoritative sizing lives in an
 * inline `style` on the <img> itself in header.html (inline always wins,
 * so it can't lose a specificity/load-order fight with Tailwind's
 * dynamically-injected CDN stylesheet); these classes are only a fallback
 * for the unlikely case the inline style attribute gets stripped.
 */
.site-logo {
    display: block;
    object-fit: contain;
}

.site-logo-sm {
    height: 36px;
    width: auto;
    max-width: 120px;
}

.site-logo-md {
    height: 56px;
    width: auto;
    max-width: 180px;
}

.site-logo-lg {
    height: 72px;
    width: auto;
    max-width: 220px;
}