/* Collective Tools Keycloak login theme */

@font-face {
  font-family: 'Aveburg Grande Condensed';
  src: url('../fonts/aveburg-grande-condensed-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NeueSwiss';
  src: url('../fonts/NeueSwiss-Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueSwiss';
  src: url('../fonts/NeueSwiss-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ct-bg:        #EDEDED;
  --ct-teal:      #4c8b90;
  --ct-teal-dark: #458084;
  --ct-text:      #222;
  --ct-subtext:   #333;
  --ct-input:     #888;
  --ct-white:     #fdfdfc;
  --pf-v5-global--primary-color--100: #4c8b90 !important;
  --pf-v5-global--primary-color--200: #458084 !important;
  --keycloak-card-top-color: transparent;
  --pf-v5-global--Color--200: var(--ct-text);
  --pf-v5-global--FontSize--sm: var(--pf-v5-global--FontSize--md);
  /* stock styles.css: .login-pf body draws --keycloak-bg-logo-url as its
     background; pointing it at our own bg color instead of overriding the
     rule with !important */
  --keycloak-bg-logo-url: var(--ct-bg);
}

/*
 * PatternFly component variables. These have to live on (or below) the same
 * selector PatternFly itself declares them on — most get re-declared to
 * their default further down PatternFly's own component tree, which would
 * shadow a :root override. Grouped here anyway so they're not scattered
 * through the rest of the file; the rules below only hold plain properties.
 */
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: transparent;
  --pf-v5-c-login__main--BoxShadow: none;
}
.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: transparent;
  --pf-v5-c-card--BoxShadow: none;
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopWidth: 1px;
  --pf-v5-c-form-control--before--BorderRightWidth: 1px;
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--before--BorderLeftWidth: 1px;
  --pf-v5-c-form-control--before--BorderTopColor: var(--ct-input);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ct-input);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--ct-input);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ct-input);
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--BackgroundColor: #fff;
  --pf-v5-c-form-control--m-readonly--BackgroundColor: #f2f2f2;
}
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--before--BorderTopColor: var(--ct-teal-dark);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ct-teal-dark);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--ct-teal-dark);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ct-teal-dark);
}
.pf-v5-c-input-group .pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopWidth: 0;
  --pf-v5-c-form-control--before--BorderRightWidth: 0;
  --pf-v5-c-form-control--before--BorderBottomWidth: 0;
  --pf-v5-c-form-control--before--BorderLeftWidth: 0;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--after--BorderWidth: 0;
}
.pf-v5-c-form__actions {
  --pf-v5-c-form__actions--MarginTop: 8px;
}
.pf-v5-c-form__group-label {
  --pf-v5-c-form__group-label--PaddingBottom: 2px;
}
#kc-login,
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--after--BorderWidth: 0;
  --pf-v5-c-button--PaddingTop: 0;
  --pf-v5-c-button--PaddingBottom: 0;
  --pf-v5-c-button--BorderRadius: 25px;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--ct-bg) !important; /* .login-pf body has higher specificity */
  font-family: 'NeueSwiss', system-ui, -apple-system, sans-serif;
}

/* PatternFly reset */

.pf-v5-c-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Full-width container: lets the header below left-align the logo with
   plain padding, while .pf-v5-c-login__main centers itself independently. */
.pf-v5-c-login__container {
  display: block;
  width: 100%;
  padding-inline: 0;
}

div.pf-v5-c-login__main-header {
  grid-template: none;
}

/* Logo, via Keycloak's own .kc-logo-text hook (styles.css) */
div.kc-logo-text {
  background-image: url('../img/ct-logo.png');
  width: 157px;
  height: 20px;
  margin: 0;
}

/* Heading */
#kc-page-title,
h1.pf-v5-c-title {
  font-family: 'Aveburg Grande Condensed', Georgia, serif !important;
  font-style: italic !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: var(--ct-text) !important;
  line-height: 1.1 !important;
  margin: 0 0 8px;
}

.pf-v5-c-login__main-header {
  margin-bottom: 30px;
  padding-inline: 0;
}

.pf-v5-c-login__main-body {
  padding-inline: 0;
}

.pf-v5-c-login__main-header-desc {
  font-size: 18px;
}

ul.pf-v5-c-login__main-footer-links {
  list-style-type: none;
  padding: 0;
}

.pf-v5-c-login__main-footer {
  text-align: center;
  margin-top: 28px;
  margin-bottom: 32px;
}

/* Labels */
.pf-v5-c-form__label-text {
  color: var(--ct-text);
  font-weight: bold;
  font-size: 17px;
  font-family: 'NeueSwiss', system-ui, sans-serif;
}

.pf-v5-c-form__label {
  display: block;
}

.pf-v5-c-form__group {
  margin-bottom: 0;
}

/* Fields. PatternFly draws the border via ::before (top/left/right) and
   ::after (bottom, thickens on hover/focus) instead of a real `border`
   property — see the variable block above. */
.pf-v5-c-form-control {
  border-radius: 15px;
  height: 54px;
  padding: 0 16px;
  align-items: center;
  font-family: 'NeueSwiss', system-ui, sans-serif;
  font-size: 17px;
  width: 100%;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: inherit; /* pseudo-elements don't inherit it */
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  width: 100%;
  font: inherit;
  outline: none; /* focus shown via border-color above instead */
}
::placeholder {
  color: var(--ct-input) !important;
  opacity: 1 !important;
}

/* Composite fields (password + show/hide, locked username + restart): the
   pill moves to .pf-v5-c-input-group so there's one border, not one per
   child element. */
.pf-v5-c-input-group {
  border: 1px solid var(--ct-input);
  border-radius: 15px;
  height: 54px;
  background: #fff;
  overflow: hidden;
}
.pf-v5-c-input-group:focus-within {
  border-color: var(--ct-teal-dark);
}
.pf-v5-c-input-group:has(.pf-m-readonly) {
  background: #f2f2f2;
}
.pf-v5-c-input-group .pf-v5-c-form-control {
  border-radius: 0;
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  background-color: inherit;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  background: transparent;
  color: var(--ct-input);
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  color: var(--ct-teal-dark);
}

#kc-social-providers {
  margin-bottom: 2rem;
}

/* Checkbox */
.pf-v5-c-check__input {
  width: 22px !important;
  height: 22px !important;
  border-radius: 2px !important;
  border: 1px solid var(--ct-input) !important;
  accent-color: var(--ct-teal);
}
.pf-v5-c-check__label {
  color: var(--ct-text);
  font-size: 17px;
}

/* Buttons. .pf-v5-u-* utility classes in the markup (display-flex/align-
   items-center/m-auto, meant to center label+icon) do nothing — Keycloak
   doesn't load a utilities stylesheet — so we center for real with flex. */
#kc-login,
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  font-family: 'NeueSwiss', system-ui, sans-serif !important;
  width: 100%;
}
#kc-login,
.pf-v5-c-button.pf-m-primary {
  background: var(--ct-teal) !important;
  color: var(--ct-white) !important;
}
#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover {
  background: var(--ct-teal-dark) !important;
}
.pf-v5-c-button.pf-m-secondary {
  background: #ffffff !important;
  color: var(--ct-black) !important;
  text-decoration: none;
}
.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--ct-white) !important;
}
.pf-v5-c-button.pf-m-secondary svg {
  display: none;
}

ul.pf-v5-c-login__main-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-v5-c-login__main-footer-band {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Links */
a,
.pf-v5-c-button.pf-m-link {
  color: var(--ct-subtext);
  font-family: 'NeueSwiss', system-ui, sans-serif;
}

.pf-v5-c-login__main {
  max-width: 400px;
  width: 100%;
  margin-inline: auto;
  margin-block: 65px 20px;
}

.pf-v5-c-login__header {
  padding: 12px 0 0 40px;
  margin-block-start: 0;
}

@media (max-width: 480px) {
  .pf-v5-c-login__main {
    padding: 80px 20px 20px;
    overflow: hidden;
  }

  .pf-v5-c-login__header {
    padding-left: 20px;
  }
}

@media (min-width: 992px) {
  body {
    padding-right: 25%;
  }

  body::after {
    content: '';
    position: fixed;
    right: 0; top: 0;
    width: 25%;
    height: 100%;
    background: url('../img/ct-photo.jpg') center / cover no-repeat;
  }
}