/* Fruitful Network Development — Keycloak login branding.
   Layered on top of keycloak.v2 (PatternFly v5). Palette:
   blue #1e6c93 · deep navy #113056 · green #115f45 · cream #f6f2e8 · ink #353535. */

:root,
:root.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: #1e6c93;
  --pf-v5-global--primary-color--200: #14506e;
  --pf-v5-global--link--Color: #1e6c93;
  --pf-v5-global--link--Color--hover: #14506e;
  --pf-v5-global--BackgroundColor--100: #fffdf8;
  --pf-v5-global--BorderColor--100: #d9d2c2;
  --pf-v5-global--danger-color--100: #a32023;
}

/* Page background — warm FND cream wash (override the dark default too). */
html, body,
.login-pf, .login-pf-page,
.pf-v5-c-login,
.pf-v5-c-background-image {
  background: radial-gradient(1200px 600px at 50% -10%, #eaf1f5 0%, #f6f2e8 55%, #efe7d5 100%) !important;
}
.pf-v5-c-background-image::before { display: none !important; }

/* Top wordmark (realm displayName) — keycloak.v2's styles.css forces it white
   via `#kc-header-wrapper { color: var(--...light-100) !important }`. Beat it with
   a higher-specificity (two-ID) !important rule and give it FND navy + serif. */
#kc-header #kc-header-wrapper,
#kc-header #kc-header-wrapper.pf-v5-c-brand {
  color: #113056 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.14em; font-weight: 400;
}

/* Login card: rounded, soft shadow, FND blue top rule. */
.pf-v5-c-login__main {
  border-radius: 12px !important;
  border: 1px solid #e6ddc9 !important;
  border-top: 4px solid #1e6c93 !important;
  box-shadow: 0 14px 44px rgba(17, 48, 86, 0.16) !important;
  background: #fffdf8 !important;
}

/* FND mark above the login card. */
.pf-v5-c-login__main-header { position: relative; text-align: center; }
.pf-v5-c-login__main-header::before {
  content: ""; display: block;
  width: 62px; height: 62px; margin: 0.4rem auto 0.9rem;
  background: url("../img/fnd-mark.svg") center / contain no-repeat;
}
.pf-v5-c-login__main-header-desc,
.pf-v5-c-login__main-header .pf-v5-c-title {
  color: #113056 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.01em;
}

/* Primary button = FND blue. */
.pf-v5-c-button.pf-m-primary {
  background-color: #1e6c93 !important;
  border-color: #1e6c93 !important;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: #14506e !important;
  border-color: #14506e !important;
}

/* Links. */
a, .pf-v5-c-button.pf-m-link { color: #1e6c93 !important; }
a:hover { color: #14506e !important; }

/* FND form fields — match the fruitfulnetworkdevelopment.com/contact inputs
   exactly: square corners, warm cream, thin muted border, serif text, roomy
   padding (the rounded PatternFly default is what read as "odd").
   PatternFly v5's .pf-v5-c-form-control is a WRAPPER around the <input>, so
   the visible field is the wrapper; the inner input renders plain (no second
   border/box) and only carries the dark typed text. */
.pf-v5-c-form-control {
  border-radius: 0 !important;
  background-color: #fbf9f3 !important;
  border: 1px solid #afafaa !important;
  padding: 0.55em 0.8em !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1rem !important;
}
.pf-v5-c-form-control input,
.pf-v5-c-form-control > input {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important; /* kill the near-black native focus ring on the inner input */
  font-family: inherit !important;
  font-size: inherit !important;
}
.pf-v5-c-form-control input:focus { outline: none !important; }
/* PatternFly draws a 2px ::after focus underline in its own blue; the wrapper
   already carries our FND-blue focus glow, so drop the redundant underline. */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before { display: none !important; border: 0 !important; }
/* keycloak.v2 is a dark theme — its text color is near-white, invisible on our
   cream field. Force dark ink for the typed value on both wrapper and input. */
.pf-v5-c-form-control,
.pf-v5-c-form-control input {
  color: #353535 !important;
  -webkit-text-fill-color: #353535 !important;
}
.pf-v5-c-form-control::placeholder,
.pf-v5-c-form-control input::placeholder { color: #9a958a !important; -webkit-text-fill-color: #9a958a !important; }
/* Chrome autofill paints its own light background+text — pin both back. */
.pf-v5-c-form-control:-webkit-autofill,
.pf-v5-c-form-control input:-webkit-autofill {
  -webkit-text-fill-color: #353535 !important;
  -webkit-box-shadow: 0 0 0 1000px #fbf9f3 inset !important;
  caret-color: #353535 !important;
}
.pf-v5-c-form-control:hover { border-color: #8f8a7d !important; }
.pf-v5-c-form-control:focus-within {
  border-color: #1e6c93 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(30, 108, 147, 0.22) !important;
}

/* Password field: keycloak wraps the input + reveal(eye) button in an
   input-group, and the inner .pf-v5-c-form-control span would then draw a
   SECOND box inside it. Draw the single field box on the group instead, strip
   the inner border, and let the eye button share the same box. */
.pf-v5-c-input-group {
  border-radius: 0 !important;
  background-color: #fbf9f3 !important;
  border: 1px solid #afafaa !important;
}
.pf-v5-c-input-group .pf-v5-c-form-control {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pf-v5-c-input-group:hover { border-color: #8f8a7d !important; }
.pf-v5-c-input-group:focus-within {
  border-color: #1e6c93 !important;
  box-shadow: 0 0 0 2px rgba(30, 108, 147, 0.22) !important;
}
.pf-v5-c-input-group .pf-v5-c-button {
  background: transparent !important;
  border: 0 !important;
  color: #7a756a !important;
}
.pf-v5-c-input-group .pf-v5-c-button:hover { color: #1e6c93 !important; }

/* Header: hide the default wordmark — the FND top-nav link replaces it so the
   header is blank except that link. */
#kc-header, #kc-header-wrapper { display: none !important; }

/* Page becomes a column: top-nav, login card (grows), contact footer at bottom. */
body, body.login-pf { display: flex !important; flex-direction: column; min-height: 100vh; }
.pf-v5-c-login, .login-pf-page, #kc-container { flex: 1 1 auto; }

/* FND top-nav (injected by fnd-login.js) — otherwise-blank header. */
.fnd-topnav { padding: 1.05rem 1.6rem; flex: 0 0 auto; }
.fnd-topnav a {
  color: #113056; text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.fnd-topnav a:hover { color: #1e6c93; }

/* FND contact footer (injected by fnd-login.js). */
.fnd-footer {
  flex: 0 0 auto; padding: 1.4rem; text-align: center;
  font-family: system-ui, sans-serif; font-size: 0.86rem; color: #7a756a;
}
.fnd-footer a { color: #1e6c93; text-decoration: none; }
.fnd-footer a:hover { text-decoration: underline; }