/* AGLab basketball sign-in base: the ball over the realm's display name.
   Structure follows the pulsesight theme (see its css for why each block
   exists). Colours are variables; skills.css and hoops.css set them. */
:root {
  --keycloak-bg-logo-url: none;
  --ag-navy: #14232c;
  --ag-orange: #e8772e;
  --ag-orange-hi: #f39050;
  --ag-orange-deep: #b9561a;
  --ag-ink: #14232c;
  --ag-link: #a24a12;

  --keycloak-card-top-color: var(--ag-orange);
  --pf-v5-global--primary-color--100: var(--ag-orange);
  --pf-v5-global--primary-color--200: var(--ag-orange-deep);
  --pf-v5-global--link--Color: var(--ag-link);
  --pf-v5-global--link--Color--hover: var(--ag-ink);
  --pf-v5-global--BorderColor--active: var(--ag-orange);
}

body#keycloak-bg,
.login-pf body {
  background: var(--ag-page-bg, var(--ag-navy));
  background-attachment: fixed;
}

/* Header sits on the navy page, outside the card: ball, then the realm name. */
#kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: max(28px, env(safe-area-inset-top)) 16px 18px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: none;
}

#kc-header-wrapper::before {
  content: "";
  display: block;
  width: min(84px, 22vw);
  aspect-ratio: 1;
  background: url("../img/ball.svg") no-repeat center / contain;
}

@media (max-width: 480px), (max-height: 780px) {
  #kc-header-wrapper {
    gap: 8px;
    font-size: 24px;
    padding: max(22px, calc(env(safe-area-inset-top) + 10px)) 16px 10px;
  }
  #kc-header-wrapper::before {
    width: min(56px, 16vw);
  }
  .pf-v5-c-login__container {
    padding-left: 14px;
    padding-right: 14px;
  }
  .pf-v5-c-login__main {
    border-radius: 14px;
    overflow: hidden;
  }
}

/* Orange is a mid colour: white text on it fails AA, so buttons use navy ink. */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(180deg, var(--ag-orange-hi) 0%, var(--ag-orange) 100%);
  color: var(--ag-ink);
  border: none;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background: linear-gradient(180deg, #f6a46b 0%, var(--ag-orange-hi) 100%);
  color: var(--ag-ink);
}

/* Secondary actions (passkey, Google) outlined in orange, not blue. */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: var(--ag-link);
  border-color: var(--ag-orange);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-v5-global--link--Color: var(--ag-orange-hi);
    --pf-v5-global--link--Color--hover: #ffffff;
  }
  .pf-v5-c-button.pf-m-secondary,
  .pf-v5-c-button.pf-m-link {
    color: var(--ag-orange-hi);
  }
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--ag-orange);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-color: var(--ag-orange);
  border-color: var(--ag-orange);
}

:root,
input,
.pf-v5-c-check__input {
  accent-color: var(--ag-orange);
}