/*
 * App-level CSS.
 *
 * Loaded AFTER wwwroot/css/hem-theme.css, so anything here wins over the theme.
 * Keep it to layout that has no UIkit equivalent -- typography, colour, form
 * styling, validation states and the navigation bar all belong in theme/src,
 * not here, or the theme stops being the single source of truth.
 */

/* Sticky footer. The short public pages (the contact form, the withdrawal form, the confirmation
   that replaces either of them) do not fill a desktop viewport, so the footer would otherwise sit
   halfway up the screen with blank page below it. body is the flex column and <main> absorbs the
   slack; everything else the layout renders alongside it is already out of flow -- the reconnect
   <dialog> is closed, the Blazor error banner is fixed, the script tags are not painted -- so
   nothing else takes a share of the free space. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

    body > main {
        flex: 1 0 auto;
    }

.content {
    padding-top: 1.1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

h1:focus {
    outline: none;
}

/* Blazor's unhandled-exception banner. Not themable from SCSS -- the framework
   renders it outside any UIkit component. */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b23a2e;
    padding: 1rem 1rem 1rem 3.7rem;
    border-radius: 12px;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* The website and the installed app share one layout but not one navigation (see InstalledApp and TopNav).
   Which one the page is being shown in is only known here, in the browser, so the server renders both and
   these two rules pick: `browser` is a tab, the other three are the app opened from the home screen
   (`minimal-ui` is what the manifest asks for; the others are what a platform may fall back to). Layout,
   not colour, which is why it lives here and not in the theme. */
@media (display-mode: browser) {
    .hem-app-only {
        display: none !important;
    }
}

@media (display-mode: minimal-ui), (display-mode: standalone), (display-mode: fullscreen) {
    .hem-web-only {
        display: none !important;
    }
}

/* The installed app's splash screen (wwwroot/js/hem-splash.js), over everything while the app starts. Its
   teal is `uk-section-secondary`'s, so only the layout and the fade are written here. */
.hem-splash {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    transition: opacity 0.3s ease-out;
    z-index: 2000;
}

    .hem-splash.hem-splash-out {
        opacity: 0;
        pointer-events: none;
    }

.hem-splash-logo {
    animation: hem-splash-in 0.5s ease-out;
    height: auto;
    width: min(60vw, 18rem);
}

@keyframes hem-splash-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hem-splash,
    .hem-splash-logo {
        animation: none;
        transition: none;
    }
}