/*
 * Grove branding over the stock keycloak.v2 login theme. Loaded after the
 * parent's css/styles.css (see theme.properties), so equal-specificity rules
 * here win on order.
 *
 * Palette tracks the app's tokens in frontend/src/routes/layout.css:
 *   --color-school-main      #0d2145  navy
 *   --color-school-secondary #b39a68  gold
 */

:root {
    /* Logo above the card. img/branding/ is a mount point (see the keycloak
       service in docker-compose.yml), so each deployment supplies its own
       logo.svg without a rebuild, the image only ever ships the Cypress
       default from platform/branding/. The box is square and sized by the
       longer edge; `background-size: contain` letterboxes whatever lands here,
       so logos of any aspect ratio fit without distortion. */
    --keycloak-logo-url: url("../img/branding/logo.svg");
    --keycloak-logo-width: 150px;
    --keycloak-logo-height: 150px;

    /* Accent stripe across the top of the login card. */
    --keycloak-card-top-color: #b39a68;
}

/* The parent paints --keycloak-bg-logo-url here; replace it outright rather
   than layering, so no Keycloak artwork loads. */
.login-pf body {
    background: linear-gradient(160deg, #16305f 0%, #0d2145 55%, #060f22 100%)
        no-repeat center center fixed;
    background-size: cover;
}

/* PatternFly centres the whole stack (logo, card, footer) inside a
   `min-height: 100vh` flex box. Because the logo hangs above the card, the card
   itself lands below the optical centre. Padding at the block end shortens the
   box from below, lifting the centred content by half of whatever is added; the
   ~10rem here offsets roughly half the logo's height plus its margins.

   The min-height guard matters: on a short window the stack is already taller
   than the space available, and flex centring overflows equally in both
   directions, so stealing more room from the bottom would push the logo off the
   top edge where it can't be scrolled back into view. */
@media (min-height: 700px) {
    .pf-v5-c-login {
        padding-block-end: calc(var(--pf-v5-global--spacer--lg, 1.5rem) + 10rem);
    }
}

#kc-header-wrapper {
    margin-bottom: 1rem;
}

/* Rendered by footer.ftl. The Cypress wordmark is a single near-white asset
   built for dark backgrounds, so it's darkened to sit on the white card; drop
   the filter if a dark-on-light variant ever lands in cypress_assets/. */
.grove-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: #6a6e73;
}

.grove-powered-by img {
    height: 66px;
    width: auto;
    filter: brightness(0.55);
}