/* Lernhub look for the Keycloak sign-in pages: the colours, card and type of the Lernhub start page
   (taken from the old pages' css/index.css, removed in issue #166), on top of Keycloak's keycloak.v2 theme (PatternFly 5). */
:root {
  --lh-bg: #f6f4ef;
  --lh-bg-glow: #fff6e0;
  --lh-card: #ffffff;
  --lh-text: #1f2430;
  --lh-muted: #5f6675;
  --lh-border: #e4e0d6;
  --lh-primary: #2f5bd3;
  --lh-primary-hover: #2449ad;
  --lh-shadow: 0 2px 4px rgb(30 30 40 / 0.06), 0 8px 24px rgb(30 30 40 / 0.08);
  --lh-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* PatternFly variables the theme uses */
  --pf-v5-global--FontFamily--text: var(--lh-font);
  --pf-v5-global--FontFamily--heading: var(--lh-font);
  --pf-v5-global--primary-color--100: var(--lh-primary);
  --pf-v5-global--primary-color--200: var(--lh-primary-hover);
  --pf-v5-global--link--Color: var(--lh-primary);
  --pf-v5-global--link--Color--hover: var(--lh-primary-hover);
  --keycloak-card-top-color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lh-bg: #15171c;
    --lh-bg-glow: #1d2130;
    --lh-card: #20232b;
    --lh-text: #eef0f4;
    --lh-muted: #a3a9b6;
    --lh-border: #2f333d;
    --lh-primary: #5b84f0;
    --lh-primary-hover: #7a9cf4;
    --lh-shadow: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.3);
  }
}

/* Page: the warm glow of the start page instead of Keycloak's background picture */
.login-pf body,
.login-pf body#keycloak-bg {
  background: radial-gradient(ellipse at top, var(--lh-bg-glow), var(--lh-bg) 60%) fixed, var(--lh-bg);
  color: var(--lh-text);
  font-family: var(--lh-font);
}
.pf-v5-c-login__container {
  grid-template-columns: minmax(0, 30rem);
  padding-inline: 16px;
}

/* Title above the card: "📚 Lernhub", like the start page */
#kc-header-wrapper {
  font-family: var(--lh-font);
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lh-text);
  text-transform: none;
  padding: 12px 0 4px;
}
#kc-header {
  margin-bottom: 8px;
  /* PatternFly paints the login header white (for a dark background picture) */
  --pf-v5-c-login__header--Color: var(--lh-text);
  color: var(--lh-text);
}
/* keycloak.v2 sets this colour with !important (white for its dark background picture) */
#kc-header #kc-header-wrapper { color: var(--lh-text) !important; }

/* Card */
.pf-v5-c-login__main {
  background: var(--lh-card);
  color: var(--lh-text);
  border: 2px solid var(--lh-border);
  border-radius: 24px;
  box-shadow: var(--lh-shadow);
  overflow: hidden;
}
.pf-v5-c-login__main-header { border-top: 0; }
#kc-page-title {
  font-family: var(--lh-font);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--lh-text);
}
.pf-v5-c-login__main-body, .pf-v5-c-login__main-footer { color: var(--lh-text); }
.pf-v5-c-form__label-text, .pf-v5-c-check__label { color: var(--lh-text); font-weight: 600; }
.pf-v5-c-login__main-footer-band, .pf-v5-c-login__main-footer-band-item { color: var(--lh-muted); }

/* Fields: big and round, easy on a tablet */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 12px;
  border-radius: 12px;
  font-size: 1.05rem;
  min-height: 48px;
}
.pf-v5-c-form-control > input { font-size: 1.05rem; }
.pf-v5-c-form-control::after, .pf-v5-c-form-control::before { border-radius: 12px; }

/* Buttons */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--BorderRadius: 14px;
  border-radius: 14px;
  background: var(--lh-primary);
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 52px;
}
.pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { background: var(--lh-primary-hover); }
.pf-v5-c-button.pf-m-control { border-radius: 0 12px 12px 0; }
a { color: var(--lh-primary); }

/* Language switch and alerts: rounded like the rest */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control { min-height: 36px; font-size: 0.95rem; }
.pf-v5-c-alert { border-radius: 12px; }

@media (max-width: 400px) {
  .pf-v5-c-login__main { border-radius: 18px; }
}