/* Park Sense login skin, layered over keycloak.v2's styles.css (see theme.properties).
 * Background: Noosa Hinterland QLD, Colin Hobson, Unsplash License (see resources/img/SOURCE.txt).
 * Heading font: Montserrat ExtraBold, SIL Open Font License (resources/fonts/OFL-Montserrat.txt). */

@font-face {
    font-family: "Montserrat";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2");
}

:root {
    --ps-dark: #0b4a2b;
    --ps-green: #3d9b2f;
    --ps-amber: #d9a21b;
    --keycloak-card-top-color: var(--ps-green);
    /* PatternFly primary (Sign In button, links) -> Park Sense greens */
    --pf-v5-global--primary-color--100: var(--ps-dark);
    --pf-v5-global--primary-color--200: #08381f;
    --pf-v5-global--link--Color: #1f6e33;
    --pf-v5-global--link--Color--hover: var(--ps-dark);
}

/* Background anchored at the TOP: the photo's horizon sits about 31% down the image, so with the heading
 * pinned near the top of the window (below) the heading is always in the sky, at any window shape. */
.login-pf body {
    background: #8fb3d9 url("../img/background.jpg") no-repeat center top fixed;
    background-size: cover;
}

/* Desktop / tablet: content starts near the top instead of being centred vertically (centring put the
 * heading on the horizon on tall or 1080p windows). */
.pf-v5-c-login {
    align-items: flex-start;
    padding-top: 6vh;
}

/* Ultrawide (wider than 2.1:1): the photo is scaled by width, so its horizon sits at least ~43% down the
 * window, well below a centred heading. Centre the content again so the card isn't stranded at the top. */
@media (min-aspect-ratio: 21/10) {
    .pf-v5-c-login { align-items: center; padding-top: 0; }
}

/* Heading: the "ParkSense" wordmark (one word: "Park" dark green, "Sense" green), drawn by CSS so the realm display name doesn't matter.
 * Fixed sizes (not window-relative) so it sits in the same place as the window is resized. */
#kc-header-wrapper {
    font-size: 0;            /* hide the realm display name text */
    text-transform: none;    /* keycloak.v2 upper-cases the brand */
    letter-spacing: 0;
    white-space: nowrap;     /* keep the wordmark on one line */
    text-align: center;
    width: 100%;
}
#kc-header-wrapper::before,
#kc-header-wrapper::after {
    font: 800 64px/1.05 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: -0.5px;
    /* soft white glow: keeps the greens readable over clouds or hills */
    text-shadow: 0 0 2px #fff, 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.85),
                 0 0 28px rgba(255, 255, 255, 0.6);
}
#kc-header-wrapper::before { content: "Park"; color: var(--ps-dark); }
#kc-header-wrapper::after  { content: "Sense"; color: var(--ps-green); }

#kc-header.pf-v5-c-login__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 24px;
}
/* Dev-only environment badge (body class comes from KC_HOSTNAME; prod shows nothing). */
body[class*="ps-host-auth.dev."] #kc-header::after {
    content: "Development";
    display: inline-block;
    margin-top: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--ps-amber);
    color: #1d1600;
    font: 700 13px/1.4 "Red Hat Text", "Segoe UI", Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Card: a little shadow so it lifts off the photo. */
.pf-v5-c-login__main {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Phones: heading and card centred on the screen, card floating with a margin and rounded corners.
 * (keycloak.v2 fixes the column at 34rem / 544px, wider than a phone.) */
@media (max-width: 600px) {
    .login-pf body { background-attachment: scroll; background-position: center center; }
    .pf-v5-c-login {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 16px;
    }
    .pf-v5-c-login__container { grid-template-columns: minmax(0, 1fr); width: 100%; }
    #kc-header.pf-v5-c-login__header { justify-content: center; height: auto; padding: 0 0 20px; }
    #kc-header-wrapper::before,
    #kc-header-wrapper::after { font-size: 44px; }
    .pf-v5-c-login__main { border-radius: 8px; overflow: hidden; }
}
/* Identity-provider button(s) shrunk to a small link in the card's bottom-right corner (2026-10-21): rangers
 * see a plain username/password card, the internal team still reaches Leakster AD through the link.
 * Presentation only, not access control. */
.pf-v5-c-login__main-footer-band { display: none; }   /* the "Or sign in with" divider */
.pf-v5-c-login__main-footer { padding: 6px 0 6px !important; margin: 0 !important; }
#kc-social-providers ul { padding: 0 !important; margin: 0; list-style: none; }
#kc-social-providers li { padding: 0 !important; text-align: right; }
/* 8px vertical padding keeps a usable tap area on phones */
#kc-social-providers a.pf-v5-c-button {
    display: inline-block !important;
    width: auto;
    min-height: 0;
    padding: 8px 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: #5a6b60;
    font: 400 13px/1.4 "Red Hat Text", "Segoe UI", Arial, sans-serif;
    text-decoration: underline;
}
#kc-social-providers a.pf-v5-c-button:hover { color: var(--ps-dark); }
#kc-social-providers a.pf-v5-c-button::after,
#kc-social-providers a.pf-v5-c-button svg { display: none; }
#social-leakster-ad span { font-size: 0; margin: 0 !important; }
#social-leakster-ad span::after { content: "Leakster staff sign-in"; font-size: 13px; }