/* SONIA welcome theme - loaded after keycloak/welcome/resources/css/welcome.css */

:root {
  --sonia-blue: #004077;
  --sonia-logo-shadow: 0 18px 48px rgba(0, 32, 64, 0.28);
}

.pf-v5-theme-dark {
  --sonia-blue: #4f9ee8;
  --sonia-logo-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* background: the inline style of the base index.ftl was removed in our override,
   so light/dark can be switched purely in CSS.
   NOTE: set background-image directly, not via the PatternFly variable - a relative
   url() inside a custom property resolves against the stylesheet that *uses* the
   variable (patternfly.min.css under common/), which would 404. */
.pf-v5-c-background-image {
  background-image: url('../img/bg-light.svg');
  background-size: cover;
  background-position: center;
}

.pf-v5-theme-dark .pf-v5-c-background-image {
  background-image: url('../img/bg-dark.svg');
}

.kc-brand {
  height: 220px;
  width: 220px;
  display: block;
  margin: 0 auto;
  /* square logo tile - no rounding/clipping */
  box-shadow: var(--sonia-logo-shadow);
}

.pf-v5-c-login__main {
  border-radius: 14px;
  border-top: 5px solid var(--sonia-blue);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--sonia-blue);
  min-height: 44px;
}

@media (max-width: 576px) {
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding-inline: 0.75rem;
    box-sizing: border-box;
  }

  .kc-brand {
    height: 160px;
    width: 160px;
  }
}