/*
|--------------------------------------------------------------------------
| MKGO - Brand Component
|--------------------------------------------------------------------------
|
| File:
| /assets/css/components/brand.css
|
| Shared MKGO branding used by the public navbar and footer.
|
*/

.site-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 7px;

    color: #0f172a;

    text-decoration: none;
    white-space: nowrap;
}

.site-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 43px;
    height: 43px;

    padding: 0 9px;

    border-radius: 13px;

    background: #0f172a;

    color: #ffffff;

    font-size: 0.9rem;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.02em;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.site-brand-name {
    color: #0f172a;

    font-size: 1.35rem;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.04em;
}

.site-brand:hover .site-brand-mark {
    transform: translateY(-1px);
}

.site-brand:focus-visible {
    outline: 3px solid rgba(15, 23, 42, 0.2);
    outline-offset: 4px;

    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Small Screens
|--------------------------------------------------------------------------
*/

@media (max-width: 576px) {

    .site-brand {
        gap: 6px;
    }

    .site-brand-mark {
        min-width: 39px;
        height: 39px;

        padding-inline: 8px;

        border-radius: 11px;

        font-size: 0.82rem;
    }

    .site-brand-name {
        font-size: 1.2rem;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .site-brand-mark {
        transition: none;
    }

}