/* Bewerbly sign-in look, on top of keycloak.v2 (Keycloak 26.8.0). Colours: brand/bewerbly-brand-tokens.json.
   Fonts: Inter and Fraunces only if installed on the device; nothing is loaded from outside. */
:root {
  --bw-fresh-green: #22C373; /* decoration only: never text, never white text on it */
  --bw-forest-ink: #0B2A1B;
  --bw-mist: #F2FBF6;
  --bw-white: #FFFFFF;
  --bw-leaf: #0E7A45;
  --bw-moss: #46594F;
  --bw-line: #DCE7E0;
  --bw-font-text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bw-font-head: Fraunces, Georgia, "Times New Roman", serif;

  /* PatternFly 5 tokens (keycloak.v2) and their PatternFly 6 names, so the parent's own rules pick up the brand. */
  --pf-v5-global--primary-color--100: var(--bw-forest-ink);
  --pf-v5-global--primary-color--200: var(--bw-leaf);
  --pf-v5-global--link--Color: var(--bw-leaf);
  --pf-v5-global--link--Color--hover: var(--bw-forest-ink);
  --pf-v5-global--Color--100: var(--bw-forest-ink);
  --pf-v5-global--Color--200: var(--bw-moss);
  --pf-v5-global--BorderColor--100: var(--bw-line);
  --pf-v5-global--FontFamily--text: var(--bw-font-text);
  --pf-v5-global--FontFamily--heading: var(--bw-font-head);
  --pf-t--global--color--brand--default: var(--bw-forest-ink);
  --pf-t--global--color--brand--hover: var(--bw-leaf);
  --pf-t--global--color--brand--clicked: var(--bw-leaf);
  --pf-t--global--text--color--link--default: var(--bw-leaf);
  --pf-t--global--text--color--link--hover: var(--bw-forest-ink);
  --pf-t--global--text--color--regular: var(--bw-forest-ink);
  --pf-t--global--text--color--subtle: var(--bw-moss);
  --pf-t--global--font--family--body: var(--bw-font-text);
  --pf-t--global--font--family--heading: var(--bw-font-head);
}

/* Page: Mist, no Keycloak background picture. */
html, body, #keycloak-bg, .pf-v5-c-login, .pf-v6-c-login {
  background: var(--bw-mist) !important;
  color: var(--bw-forest-ink);
  font-family: var(--bw-font-text);
}

/* Header: the logo file instead of the text; the realm name stays in the page for screen readers. */
#kc-header-wrapper {
  display: block;
  width: 240px;
  max-width: calc(100vw - 32px);
  height: 53px; /* 240 x 117.77 / 539.4 */
  margin: 20px auto; /* clear space: the b's bowl */
  background: url("../img/bewerbly-logo-primary.svg") no-repeat center / contain;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* Card: white, Fresh Green stripe on top, brand radius. */
.pf-v5-c-login__main, .pf-v6-c-login__main {
  background: var(--bw-white);
  border: 1px solid var(--bw-line);
  border-top: 6px solid var(--bw-fresh-green);
  border-radius: 20px;
  color: var(--bw-forest-ink);
}

#kc-page-title {
  font-family: var(--bw-font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bw-forest-ink);
}

/* Field borders: Moss, so the field's edge is visible (non-text contrast). */
.pf-v5-c-form-control, .pf-v6-c-form-control {
  --pf-v5-c-form-control--after--BorderBottomColor: var(--bw-moss);
  --pf-v5-c-form-control--before--BorderColor: var(--bw-moss);
  --pf-v6-c-form-control--before--BorderColor: var(--bw-moss);
}

/* Main button: white on Forest Ink, pill shape. */
.pf-v5-c-button.pf-m-primary, .pf-v6-c-button.pf-m-primary, #kc-login {
  background-color: var(--bw-forest-ink);
  color: var(--bw-white);
  border-radius: 999px;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary:hover, .pf-v6-c-button.pf-m-primary:hover, #kc-login:hover {
  background-color: var(--bw-leaf);
  color: var(--bw-white);
}

a, a:visited { color: var(--bw-leaf); }
a:hover { color: var(--bw-forest-ink); }

/* Keyboard focus: always visible, Leaf ring outside the element. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bw-leaf) !important;
  outline-offset: 2px;
}

/* Phones (375 px): the card fills the width with the page's 16 px gutter. */
@media (max-width: 480px) {
  .pf-v5-c-login__main, .pf-v6-c-login__main { margin: 0 16px; border-radius: 16px; }
}