/*
 * SeRo branding for the login pages.
 *
 * Kept deliberately small -- every rule here is a rule that can break on the
 * next Keycloak upgrade. keycloak.v2 exposes its background artwork as a CSS
 * custom property, so that part is a variable override rather than a selector.
 */
:root {
    /* Flat dark background instead of the stock Keycloak artwork, matching the
       previous SeRo theme. */
    --keycloak-bg-logo-url: none;
}

.login-pf body {
    background: #303030;
}

/*
 * The SeRo wordmark above the login card.
 *
 * keycloak.v2's template renders the realm's displayNameHtml as the header
 * (`loginTitleHtml={0}` in base), so there is no logo element of its own to
 * style -- the stock div.kc-logo-text rule only ever applies to realms whose
 * displayNameHtml happens to embed that markup. Attaching the logo to the
 * header wrapper instead makes it render for every realm using this theme,
 * while keeping the realm name visible underneath (EMIT, SECURETRACK, ...).
 */
#kc-header-wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 96px;
    margin-bottom: var(--pf-v5-global--spacer--md, 1rem);
    background-image: url('../img/sero.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*
 * Neutralise the stock div.kc-logo-text rule. The master realm's
 * displayNameHtml is `<div class="kc-logo-text"><span>SeRo Systems</span></div>`,
 * which would otherwise paint a second logo on top of the one above and hide
 * its own text.
 */
div.kc-logo-text {
    background-image: none;
    height: auto;
    width: auto;
}

div.kc-logo-text span {
    display: inline;
}