/*
 * Provider mark — the business logo in a square frame, or the automatic
 * monogram until one is uploaded. Every property is declared here because the
 * mark lands inside containers whose legacy `span`/`img` rules would otherwise
 * leak in (the sidebar switcher styles every span, themes style every img).
 */
.hc-brand-mark {
    --hc-mark-size: 44px;
    --hc-mark: #5f6b3a;
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    box-sizing: border-box;
    width: var(--hc-mark-size);
    height: var(--hc-mark-size);
    min-width: var(--hc-mark-size);
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(31, 36, 24, .1);
    border-radius: calc(var(--hc-mark-size) * .26);
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 36, 24, .06), 0 6px 16px -10px rgba(31, 36, 24, .35);
    color: #fff;
    font-size: calc(var(--hc-mark-size) * .42);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}
.hc-brand-mark.is-xs { --hc-mark-size: 28px; }
.hc-brand-mark.is-sm { --hc-mark-size: 38px; }
.hc-brand-mark.is-md { --hc-mark-size: 52px; }
.hc-brand-mark.is-lg { --hc-mark-size: 112px; }

.hc-brand-mark.has-logo img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: calc(var(--hc-mark-size) * .03);
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
    object-position: center;
}

.hc-brand-mark.is-auto {
    border-color: transparent;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .26), transparent 58%),
        linear-gradient(145deg, var(--hc-mark), color-mix(in srgb, var(--hc-mark) 72%, #111));
    background-color: var(--hc-mark);
}
.hc-brand-mark .hc-brand-initials {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    white-space: nowrap;
}
.hc-brand-mark .hc-brand-badge {
    position: absolute;
    inset-block-end: calc(var(--hc-mark-size) * -.1);
    inset-inline-end: calc(var(--hc-mark-size) * -.1);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: max(16px, calc(var(--hc-mark-size) * .4));
    height: max(16px, calc(var(--hc-mark-size) * .4));
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--hc-mark);
    font-size: 0;
    line-height: 0;
    box-shadow: 0 2px 6px rgba(31, 36, 24, .18);
}
.hc-brand-mark .hc-brand-badge svg {
    display: block;
    width: 72%;
    height: 72%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hc-brand-mark.is-xs .hc-brand-badge { display: none; }
