/* The account console.
 *
 * **Deliberately much smaller than the login theme.** The account console is a
 * React application, not FreeMarker: its markup is generated and its class names
 * are not a public interface, so a stylesheet that reached into them would break
 * on an upgrade with nothing reporting it. What is set here is the small set of
 * things the console genuinely exposes — the brand image and the page ground —
 * and everything else is left to Keycloak.
 *
 * The screen that matters here is **Delete account**, at the bottom of Personal
 * info. It is registered in AlgoJudge as the provider's `deletionUrl`, so it is
 * a page an AlgoJudge account screen sends people to; it should not be the first
 * one that stops looking like AlgoJudge.
 */

/* **Theme resources are not shared between theme types**, so the account console
 * cannot reach the login theme's `fonts/` and carries its own copy: the same four
 * files, byte for byte, with `OFL-Lato.txt` beside them because the licence
 * travels with every copy of the font software.
 *
 * No Inter here either, and it could not help if it were: Keycloak's console
 * builds its own `<img>` for the mark, and an SVG behind an `<img>` renders in a
 * document of its own that cannot see this page's `@font-face`. */
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --aj-navy-900: #0b1028;
    --aj-blue-700: #005694;
    --aj-white: #ffffff;
    --aj-surface: #f5f8fc;
    --aj-text: #10182f;
    --aj-font: Lato, "Segoe UI", Arial, sans-serif;

    --pf-v5-global--FontFamily--text: var(--aj-font);
    --pf-v5-global--FontFamily--heading: var(--aj-font);
    --pf-v5-global--FontFamily--text--vf: var(--aj-font);
    --pf-v5-global--FontFamily--heading--vf: var(--aj-font);
}

/* The masthead is navy, as the application's own shell is. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--aj-navy-900);
}

/* **The mark is a file, not a rule.** The account console renders
 * `<img src=".../account/algojudge/logo.svg" alt="Logo">` itself and falls back
 * to Keycloak's own mark when the theme has no `logo.svg` — so the fix is to put
 * one there, at `resources/logo.svg`, and let the console draw it.
 *
 * This started as a background image on the brand container, which is what the
 * login screen needs because that one is *text*. Here it painted our mark
 * **behind Keycloak's**, and the console showed both, overlapping. Measured
 * before it was believed: the container holds one `IMG`, and its `src` names the
 * file this theme now supplies.
 *
 * The white-filling export, because the masthead is dark. */
.pf-v5-c-masthead__brand img {
    max-height: 36px;
    width: auto;
}

a {
    color: var(--aj-blue-700);
}