/*
 * Aeronautix sign-in skin.
 *
 * A skin over Keycloak's own login theme, never a fork of it: the forms, the
 * OTP flow, the passkey prompts, the accessibility work and thirty
 * translations all stay inherited. Only the colours and the mark are ours.
 *
 * The page is served from /auth on the portal's own hostname, so this is the
 * same site as far as the visitor is concerned. It should look like it.
 */

:root {
  --ax-navy: #0c173e;
  --ax-navy-900: #070e28;
  --ax-navy-600: #22357a;
  --ax-cyan: #00aeef;
  --ax-cyan-dark: #0089bd;
}

/*
 * The dark field.
 *
 * Note the absence of a `background-image: none` here. An earlier version set
 * the gradient with the `background` shorthand and then reset
 * `background-image` on the following line, which silently cancelled it — the
 * page stayed white, and a white knockout logo on a white page appeared as
 * ghostly outlines. Set the longhand only.
 */
body,
.login-pf body,
.pf-v5-c-background-image {
  background-color: var(--ax-navy) !important;
  background-image: linear-gradient(160deg, var(--ax-navy-900) 0%, var(--ax-navy) 55%, #14314f 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/*
 * The lockup, drawn once.
 *
 * #kc-header-wrapper sits inside .pf-v5-c-login__header, so styling both drew
 * the logo twice, offset. Target the inner element only.
 */
#kc-header-wrapper {
  background-image: url("../img/aeronautix-horizontal-knockout.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 56px;
  margin: 0 auto 1.25rem;
  padding: 0;
  max-width: 320px;
  font-size: 0;
}

/* Keep the words for assistive technology and as a fallback, off-screen for
   everyone else. */
#kc-header-wrapper .aeronautix-wordmark {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --- the card ----------------------------------------------------------- */
.card-pf,
.pf-v5-c-login__main {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important;
}

/* --- primary action ----------------------------------------------------- */
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-c-button.pf-m-primary,
#kc-login {
  background-color: var(--ax-navy) !important;
  border-color: var(--ax-navy) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background-color: var(--ax-navy-600) !important;
  border-color: var(--ax-navy-600) !important;
}

a,
.pf-v5-c-button.pf-m-link {
  color: var(--ax-cyan-dark) !important;
}

/*
 * Focus ring. Kept to 2px with a 1px offset: an outline is painted outside the
 * element's box, and at 3px/2px it reached up over the field's own label,
 * which sits close above it in PatternFly's form layout.
 */
:focus-visible {
  outline: 2px solid var(--ax-cyan) !important;
  outline-offset: 1px !important;
}

/* A little more air under labels, so nothing collides with the ring. */
.pf-v5-c-form__label,
.pf-v5-c-form__group-label,
label {
  margin-bottom: .4rem !important;
}

/* The heading wraps awkwardly at narrow widths otherwise. */
#kc-page-title {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  margin-bottom: 1.25rem !important;
}

#kc-registration { display: none; }