/*
    Public website overrides.

    Last stylesheet in the public website load order, so use this file only for
    narrow corrections that must win over the template vendor CSS and
    public-website.css.

    Keep general public site branding in public-website.css.
    Keep component-specific styling in .razor.css isolation files.
    Always use var(--rc-...) tokens rather than literal colour values.
*/

/*
    Brand logo sizing on the public site (2026-08-02).

    ⚠️ THE TEMPLATE SIZED ITS LOGO BY WIDTH; BrandLogo SIZES BY HEIGHT. `style.css` sets
    `.navbar-brand img { width: 170px }` and `.footer-logo img { width: 200px }`, but BrandLogo's scoped
    rule `.brand-logo__image[b-...]` is more specific and sets `width: auto` with a height meant for the
    admin top bar — so swapping the artwork in silently shrank the mark from about 65px tall to 44px.
    Nothing looked broken, it just looked wrong, which is the kind of change that ships.

    These heights are the template's own intended sizes converted through the horizontal lockup's 2.61:1
    ratio, so the logo occupies the space the design allowed for it:
        header  170px wide / 2.61 = 65px = 4.0rem
        footer  200px wide / 2.61 = 77px = 4.8rem
        mobile  130px wide / 2.61 = 50px = 3.1rem

    ⚠️ Set through --rc-brand-logo-height rather than by overriding height directly. That custom property
    is the documented way a shell asks BrandLogo for a size; fighting its scoped rule with a more
    specific selector would work until the component's CSS changed.
*/
.navbar-brand {
    --rc-brand-logo-height: 4rem;
}

.offcanvas-brand {
    --rc-brand-logo-height: 3.1rem;
}

.footer-logo {
    --rc-brand-logo-height: 4.8rem;
}

@media (max-width: 991px) {
    .navbar-brand {
        --rc-brand-logo-height: 3.1rem;
    }
}