/* Slalom Sans webfont family */
@font-face {
  font-family: "Slalom Sans";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/SlalomSans-Thin.woff2") format("woff2"),
       url("../fonts/SlalomSans-Thin.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/SlalomSans-ThinItalic.woff2") format("woff2"),
       url("../fonts/SlalomSans-ThinItalic.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/SlalomSans-Light.woff2") format("woff2"),
       url("../fonts/SlalomSans-Light.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/SlalomSans-LightItalic.woff2") format("woff2"),
       url("../fonts/SlalomSans-LightItalic.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SlalomSans-Regular.woff2") format("woff2"),
       url("../fonts/SlalomSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SlalomSans-Italic.woff2") format("woff2"),
       url("../fonts/SlalomSans-Italic.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SlalomSans-Bold.woff2") format("woff2"),
       url("../fonts/SlalomSans-Bold.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SlalomSans-BoldItalic.woff2") format("woff2"),
       url("../fonts/SlalomSans-BoldItalic.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/SlalomSans-Black.woff2") format("woff2"),
       url("../fonts/SlalomSans-Black.woff") format("woff");
}
@font-face {
  font-family: "Slalom Sans";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/SlalomSans-BlackItalic.woff2") format("woff2"),
       url("../fonts/SlalomSans-BlackItalic.woff") format("woff");
}

/* Slalom brand palette */
:root {
  --slalom-blue: #0C62FB;
  --slalom-dark-blue: #002FAF;
  --slalom-cyan: #1BE1F2;
  --slalom-coral: #FF4D5F;
  --slalom-purple: #C7B9FF;
  --slalom-chartreuse: #DEFF4D;
  --slalom-light-gray: #E6E6E6;
  --slalom-dark-gray: #666666;
  --slalom-black: #000000;
  --slalom-white: #FFFFFF;

  /* Slalom color bar — Slalom Blue → Cyan → Coral Red → Purple → Chartreuse.
     Hard color stops (two stops at the same offset) avoid gradient blending
     between segments and keep the implementation portable to older browsers. */
  --slalom-color-bar: linear-gradient(
    to right,
    var(--slalom-blue) 0%, var(--slalom-blue) 20%,
    var(--slalom-cyan) 20%, var(--slalom-cyan) 40%,
    var(--slalom-coral) 40%, var(--slalom-coral) 60%,
    var(--slalom-purple) 60%, var(--slalom-purple) 80%,
    var(--slalom-chartreuse) 80%, var(--slalom-chartreuse) 100%
  );

  --slalom-font: "Slalom Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Page chrome */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--slalom-font);
  font-weight: 300;
  background: var(--slalom-light-gray);
  color: var(--slalom-black);
}

.login-pf,
.login-pf body,
.login-pf-page,
.login-pf-page-header {
  background: var(--slalom-light-gray);
  font-family: var(--slalom-font);
}

/* Wordmark — realm displayName styled as the brand mark, with 5-color bar
   underneath and "by Slalom" tagline below.

   Source HTML (keycloak.v2): <div id="kc-header"><div id="kc-header-wrapper">{realm name}</div></div>
   We render the displayName text, then a ::before flex-child for the bar
   (forced after the text via order), then a ::after for the tagline. */
#kc-header {
  display: flex;
  justify-content: center;
  width: 100%;
}

#kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  margin: 56px auto 24px;
  gap: 10px;
  font-family: var(--slalom-font);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  /* The parent keycloak.v2 styles.css sets `color: light-100 !important`
   * here, which renders the wordmark near-white on the light-gray
   * background. Match its specificity with !important and use the
   * brand-guide navy. */
  color: var(--slalom-dark-blue) !important;
}

#kc-header-wrapper::before {
  order: 1;                       /* renders below the text node */
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: var(--slalom-color-bar);
}

#kc-header-wrapper::after {
  order: 2;
  content: "by Slalom";
  font-family: var(--slalom-font);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--slalom-dark-gray);
  text-align: center;
}

/* Form card */
.login-pf-page .card-pf {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 20, 70, 0.10);
  padding: 36px 40px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--slalom-white);
}

/* Heading */
#kc-page-title {
  font-family: var(--slalom-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 0.95;
  color: var(--slalom-black);
  margin: 0 0 20px;
}

/* Form labels */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
label.control-label,
label.pf-c-form__label {
  font-family: var(--slalom-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--slalom-black);
  margin: 0 0 6px;
}

/* Inputs — PatternFly v5 (Keycloak's keycloak.v2 parent theme) wraps the
 * <input> in a <span class="pf-v5-c-form-control">. The wrapper is the
 * visible control; the inner input is a transparent fill. Styling both
 * layers identically — as the previous rule did — produced a nested
 * double-border (visible as a smaller rectangle inside the field). */
.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input.form-control {
  font-family: var(--slalom-font);
  font-weight: 400;
  font-size: 14px;
  color: var(--slalom-black);
  background: var(--slalom-white);
  border: 1px solid var(--slalom-dark-gray);
  border-radius: 6px;
  padding: 8px 12px;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* Reset the inner input so the wrapper alone provides the chrome. */
.pf-v5-c-form-control input,
input.pf-v5-c-form-control {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.pf-v5-c-form-control:focus-within,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input.form-control:focus {
  outline: none;
  border-color: var(--slalom-blue);
  box-shadow: 0 0 0 2px rgba(12, 98, 251, 0.20);
}

/* The inner input itself never paints focus chrome — :focus-within on
 * the wrapper handles it — otherwise the focus ring would appear inside
 * the wrapper border instead of around it. */
.pf-v5-c-form-control input:focus,
input.pf-v5-c-form-control:focus {
  outline: none;
  box-shadow: none;
}

input::placeholder {
  color: var(--slalom-dark-gray);
  font-weight: 400;
}

/* Form options (forgot password, registration links) */
#kc-form-options,
#kc-registration {
  font-family: var(--slalom-font);
  font-size: 13px;
}

#kc-form-options a,
#kc-registration a,
.login-pf-page a {
  font-family: var(--slalom-font);
  font-weight: 400;
  font-size: 13px;
  color: var(--slalom-blue);
  text-decoration: none;
}

#kc-form-options a:hover,
#kc-registration a:hover,
.login-pf-page a:hover {
  color: var(--slalom-dark-blue);
  text-decoration: underline;
}

/* Primary action button (Sign in) */
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button,
input[type="submit"].btn-primary,
button[type="submit"].pf-v5-c-button,
input#kc-login,
button#kc-login {
  font-family: var(--slalom-font);
  font-weight: 700;
  font-size: 14px;
  background: var(--slalom-blue);
  border: 1px solid var(--slalom-blue);
  color: var(--slalom-white);
  border-radius: 6px;
  height: 44px;
  padding: 0 16px;
  width: 100%;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"].pf-v5-c-button:hover,
input[type="submit"].btn-primary:hover,
button[type="submit"].pf-v5-c-button:hover,
input#kc-login:hover,
button#kc-login:hover {
  background: var(--slalom-dark-blue);
  border-color: var(--slalom-dark-blue);
}

/* "Or sign in with" divider header */
#kc-social-providers > h2,
#kc-social-providers > h4,
#kc-social-providers > p {
  font-family: var(--slalom-font);
  font-weight: 400;
  font-size: 13px;
  color: var(--slalom-dark-gray);
  text-align: center;
  margin: 24px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--slalom-light-gray);
}

/* Social provider list */
#kc-social-providers ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#kc-social-providers ul li {
  margin: 8px 0;
}

#kc-social-providers ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--slalom-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--slalom-dark-blue);
  background: var(--slalom-white);
  border: 1px solid var(--slalom-dark-blue);
  border-radius: 6px;
  height: 42px;
  padding: 0 16px;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

#kc-social-providers ul li a:hover {
  background: var(--slalom-dark-blue);
  color: var(--slalom-white);
  text-decoration: none;
}

/* Error/info messages */
.pf-v5-c-alert,
.alert {
  font-family: var(--slalom-font);
  font-size: 13px;
  border-radius: 6px;
}

.pf-v5-c-alert.pf-m-danger,
.alert-error {
  border-left: 3px solid var(--slalom-coral);
}

/* Hide PatternFly's stock brand image; we render our own wordmark above */
.login-pf-brand {
  display: none;
}