/*
 * FLOWAnalytics brand layer for the Keycloak login theme (F4).
 *
 * Source of truth: docs/branding/branding.md (ITHQ brand kit).
 * Loaded AFTER the parent keycloak.v2 styles.css (see theme.properties),
 * so equal-specificity rules here win by cascade order.
 *
 * Rules honoured: teal as primary, orange as accent only, yellow sparingly,
 * WCAG contrast, tints over transparency, generous whitespace, 8px radii,
 * clear focus states, white logo on dark backgrounds.
 */

/* ---- Self-hosted brand typefaces (Google Fonts, OFL licence) ------------- */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lexend-deca-300.woff2") format("woff2"); }
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lexend-deca-400.woff2") format("woff2"); }
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/lexend-deca-500.woff2") format("woff2"); }

/* ---- Brand tokens (docs/branding/branding.md) ------------------------------ */

:root {
    --ithq-teal: #007d8e;
    --ithq-orange: #f46235;
    --ithq-yellow: #ffb000;
    --ithq-dark-teal: #064a55;
    --ithq-blue: #28627b;
    --ithq-dark: #212424;
    --ithq-mid-grey: #586060;
    --ithq-light-grey: #bfc6c6;
    --ithq-white: #ffffff;
    --ithq-radius: 8px;
    --ithq-focus-ring: 0 0 0 3px rgba(0, 125, 142, 0.35);
}

/* ---- PatternFly v5 global tokens: teal primary, Poppins/Lexend Deca ------- */

:root {
    /* Primary buttons and active emphasis -> ITHQ teal. */
    --pf-v5-global--primary-color--100: var(--ithq-teal);
    --pf-v5-global--primary-color--200: var(--ithq-teal);
    --pf-v5-global--primary-color--300: #066b79;
    --pf-v5-global--primary-color--400: #0091a3;
    --pf-v5-global--link--Color: var(--ithq-teal);
    --pf-v5-global--link--Color--hover: #066b79;
    --pf-v5-global--link--Color--visited: var(--ithq-teal);

    /* Typography: Poppins for headings/buttons, Lexend Deca for body. */
    --pf-v5-global--FontFamily--text: "Lexend Deca", "Helvetica Neue", Arial, sans-serif;
    --pf-v5-global--FontFamily--text--vf: var(--pf-v5-global--FontFamily--text);
    --pf-v5-global--FontFamily--heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --pf-v5-global--FontFamily--heading--vf: var(--pf-v5-global--FontFamily--heading);
}

/* ---- Keycloak theme variables (parent keycloak.v2 hooks) ------------------- */

:root {
    /* ITHQ white/orange logo lockup (white on dark surfaces, per brand rules). */
    --keycloak-logo-url: url("../img/ithq-logo-light.png");
    --keycloak-logo-height: 60px;
    --keycloak-logo-width: 200px;

    /* Deep ITHQ dark-teal canvas: a solid gradient wash (no patterned photo),
       so the logo placement rules stay satisfied without overlays. */
    --keycloak-bg-logo-url: linear-gradient(160deg, var(--ithq-dark-teal) 0%, #02333c 55%, var(--ithq-dark) 100%);

    /* ITHQ orange as the card top accent. */
    --keycloak-card-top-color: var(--ithq-orange);
}

/* ---- Page canvas ------------------------------------------------------------- */

.login-pf body {
    background: linear-gradient(160deg, var(--ithq-dark-teal) 0%, #02333c 55%, var(--ithq-dark) 100%) no-repeat center center fixed;
    background-size: cover;
}

/* ---- Header brand lockup ------------------------------------------------------ */

/* The parent renders the realm display name here. Show the ITHQ logo lockup
   instead (white/orange on the dark teal canvas) and hide the text. */
#kc-header-wrapper {
    background: var(--keycloak-logo-url) center / contain no-repeat;
    width: var(--keycloak-logo-width);
    height: var(--keycloak-logo-height);
    margin: 0 auto;
    font-size: 0;
    letter-spacing: normal;
    text-transform: none;
}

/* ---- Card, buttons, inputs ---------------------------------------------------- */

.pf-v5-c-login__main {
    border-radius: var(--ithq-radius);
}

/* Page title: one notch smaller than the PatternFly 3xl default (1.75rem ->
   1.5rem, DRI acceptance tweak). Explicit value so PatternFly token renames
   across upgrades cannot break it. */
#kc-page-title {
    font-size: 1.5rem;
}

/* Accessible teal focus ring on interactive elements (brand focus rule). */
.pf-v5-c-login__container a:focus-visible,
.pf-v5-c-login__container .pf-v5-c-form-control:focus,
.pf-v5-c-login__container .pf-v5-c-button:focus-visible {
    outline: none;
    box-shadow: var(--ithq-focus-ring);
}

/* Primary button: teal, Poppins, brand radius. */
.pf-v5-c-login__container .pf-v5-c-button.pf-m-primary {
    border-radius: var(--ithq-radius);
    font-family: var(--pf-v5-global--FontFamily--heading);
    font-weight: 500;
}

/* Inputs: brand radius, Lexend Deca body text. */
.pf-v5-c-login__container .pf-v5-c-form-control {
    border-radius: var(--ithq-radius);
    font-family: var(--pf-v5-global--FontFamily--text);
}

.pf-v5-c-login__container .pf-v5-c-form__label {
    font-family: var(--pf-v5-global--FontFamily--text);
}

.pf-v5-c-login__container .pf-v5-c-title {
    font-family: var(--pf-v5-global--FontFamily--heading);
}

/* ---- Social/IdP buttons: brand radius + restrained hover ---------------------- */

.pf-v5-c-login__container #kc-social-providers .pf-v5-c-button {
    border-radius: var(--ithq-radius);
    transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out;
}

.pf-v5-c-login__container #kc-social-providers .pf-v5-c-button:hover {
    border-color: var(--ithq-orange);
}

/* ---- Theme footer (footer.ftl) ------------------------------------------------- */

.flow-footer {
    color: rgba(191, 198, 198, 0.85);
    font-family: var(--pf-v5-global--FontFamily--text);
    font-size: 12px;
    text-align: center;
    /* Explicit values (PatternFly spacer tokens) so token renames across
       upgrades cannot break the DRI acceptance tweaks. */
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.flow-footer strong {
    color: var(--ithq-white);
    font-weight: 500;
}

.flow-footer a {
    color: rgba(191, 198, 198, 0.95);
}

.flow-footer a:hover {
    color: var(--ithq-white);
}