/* Aura Friday login skin -- loaded AFTER keycloak.v2's css/styles.css (see theme.properties).
   Palette taken from the marketing site (websites/aurafriday.com/public_html/pic/base.css):
   primary blue #0071E3, brand pink #eb237f / #fc7bcb, light bg #F5F5F7, dark text #1D1D1F,
   system font stack. Keep this a thin re-skin -- no template/DOM changes. */

:root {
  --af-blue: #0071E3;
  --af-blue-hover: #0077ED;
  --af-pink: #eb237f;
  --af-pink-light: #fc7bcb;
  --af-text: #1D1D1F;
  --af-bg: #F5F5F7;
  --af-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* keycloak.v2 exposes these; repoint the card's top accent bar to brand pink. */
  --keycloak-card-top-color: var(--af-pink);
}

/* Light page background (override the parent's fixed background image), with a soft
   pink brand glow top-centre so it feels like the rest of the site. */
.login-pf body,
body#keycloak-bg {
  background: radial-gradient(1200px 480px at 50% -10%, rgba(252,123,203,0.18), rgba(245,245,247,0) 60%), var(--af-bg) !important;
  color: var(--af-text);
  font-family: var(--af-font);
}

/* Header: show the Aura Friday pink-brain wordmark instead of the realm's text name.
   v2 renders the realm displayName inside #kc-header-wrapper; we paint the logo as its
   background and hide the text, so it looks right regardless of the realm name. */
#kc-header-wrapper {
  display: block;
  height: 74px;
  width: 300px;
  max-width: 80vw;
  margin: 0 auto;
  background-image: url(../img/aurafriday-login-logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Card: white, soft rounded, gentle shadow -- matches the site's cards. */
.pf-v5-c-login__main {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.pf-v5-c-login__main-header {
  border-top: 4px solid var(--af-pink);
}

/* Titles + body font */
#kc-page-title,
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  font-family: var(--af-font);
  color: var(--af-text);
}

/* Primary buttons -> site blue (PatternFly v5 primary button variables). */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--af-blue);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--af-blue-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--af-blue-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--af-blue-hover);
  border-radius: 980px;
}

/* Links + accents -> site blue */
a,
.pf-v5-c-button.pf-m-link {
  color: var(--af-blue);
}
a:hover { color: var(--af-blue-hover); }

/* Social login buttons: keep them neutral but round to match the site */
.pf-v5-c-button.pf-m-control {
  border-radius: 980px;
}

/* Apple IdP button: replace the generic OIDC cube with the Apple logo.
   The button has id="social-apple" from Keycloak's social-providers.ftl. */
#social-apple svg {
  display: none;
}
#social-apple::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-image: url(../img/apple-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}