/* =========================================================================
   KEYCLOAK 26 (PATTERNFLY 5) — XIP2 SKIN
   Generated by generate_keycloak_skins.py

   HOW TO CLONE THIS FOR ANOTHER STORE
   ------------------------------------
   1. Copy this file.
   2. Update the tokens in the :root block below.
   3. Remove the @import if the store doesn't use Encode Sans Compressed.
   4. Save as /public/keycloak/<realm-domain>/keycloak-theme.css

   TOKENS
   ─────────────────────────────────────────────────────────────────────────
   --brand-primary        Baseline colour — used ONLY for the secondary
                          button focus outline ring. Stripe, link, and focus
                          each have their own token (see below) and default
                          to this value when no per-skin override is needed.
                          DO NOT expect changes here to affect stripe/links.
   --brand-primary-hover  Darker shade of primary (for hover states that
                          still reference primary directly).
   --brand-stripe         Card header accent border — may differ from links
                          (e.g. Edinburgh: amber stripe, red links).
   --brand-link           Link colour + secondary button text / border.
   --brand-link-hover     Darker shade of --brand-link.
   --brand-secondary      Secondary button colour — defaults to --brand-link;
                          override when the button should use the primary
                          button colour instead (e.g. UW: purple).
   --brand-button         CTA button fill (Sign In / Register).
   --brand-button-hover   Darker shade — button hover fill.
   --brand-button-radius  Border-radius for the CTA button ($btn-rounded).
   --brand-button-text    CTA button text colour (default #ffffff).
   --brand-focus-color    Input focus border colour.
   --brand-focus-rgb      Space-separated R G B for the focus glow:
                          rgb(var(--brand-focus-rgb) / 0.45).
                          Both default to --brand-link unless overridden.
   --brand-heading-color  Form heading text (#5e5e5e grey by default;
                          some skins use their brand colour).
   --brand-input-border   Resting border (#d2d2d2 — same for all skins).
   --brand-input-radius   Border-radius for inputs and password group.
   --brand-page-bg        html.login-pf page background colour.
   --brand-logo-height    max-height for the logo above the card.
   --brand-logo-width     max-width for the logo (default 280px; increase
                          for wide horizontal logos like Edinburgh).
   ─────────────────────────────────────────────────────────────────────────
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  /* Base accent colour — see token table above for what this drives */
  --brand-primary:        #2E69FF;
  --brand-primary-hover:  #1f4fd6;

  /* Accent stripe (top border of card) */
  --brand-stripe:         #2E69FF;

  /* Link and secondary-button colour */
  --brand-link:           #2E69FF;
  --brand-link-hover:     #1f4fd6;

  /* Secondary button colour */
  --brand-secondary:      #2E69FF;

  /* Primary button — sharp corners, inverted hover handled below */
  --brand-button:         #2E69FF;
  --brand-button-hover:   #993BFF;
  --brand-button-radius:  0;
  --brand-button-text:    #ffffff;

  /* Input focus: border colour + glow RGB */
  --brand-focus-color:    #2E69FF;
  --brand-focus-rgb:      46 105 255;

  /* Heading text colour */
  --brand-heading-color:  #5e5e5e;

  /* Input resting border: neutral grey */
  --brand-input-border:   #d2d2d2;
  --brand-input-radius:   0;

  --brand-page-bg:        #ffffff;
  --brand-logo-height:    28px;
  /* Combined UCL Ventures + XIP gradient wordmark, 353×28px */
  --brand-logo-width:     353px;
}


/* =========================================================================
   1. PAGE BACKGROUND + VERTICAL POSITION
   ========================================================================= */
.login-pf body {
  background: none;
  background-color: var(--brand-page-bg);
}

html.login-pf {
  background-color: var(--brand-page-bg);
}

.pf-v5-c-login {
  /* PF5 is flex-direction:row — align-items controls vertical (cross-axis),
     justify-content controls horizontal (main-axis).
     Keep justify-content:center for horizontal centering; push items to top. */
  align-items: flex-start !important;
  justify-content: center !important;
}

/* The container is a CSS grid with grid-template-columns:34rem (from PF5
   styles.css). If the container spans full viewport width, the 34rem column
   sits at the grid's start (left edge). justify-content:center moves the
   column tracks to the horizontal centre of the container. */
.pf-v5-c-login__container {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Also ensure the main card itself fills and centres within its grid cell */
.pf-v5-c-login__main {
  justify-self: center;
  overflow: hidden;
}


/* =========================================================================
   2. LOGIN CARD
   Shadow values from computed styles on live auth-v4.e-lucid.com form.
   width:100% + margin:auto ensures sign-in and registration modals are
   always the same width (both fill their 34rem grid column).
   ========================================================================= */
.pf-v5-c-login__main {
  max-width: 500px;
  width: 100%;
  background-color: #ffffff;
  box-shadow:
    rgba(3, 3, 3, 0.16) 0px 16px 32px 0px,
    rgba(3, 3, 3, 0.10) 0px 0px 8px 0px;
  overflow: hidden;
}


/* =========================================================================
   3. CARD HEADER — accent stripe + layout
   PF5 renders main-header as a flex row: h1 on the left, language selector
   on the right. h1 needs flex:1 + min-width:0 so it shrinks and doesn't
   push the selector out of the container.
   ========================================================================= */
.pf-v5-c-login__main-header {
  border-top: 4px solid var(--brand-stripe);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.pf-v5-c-login__main-header h1,
.pf-v5-c-login__main-header .pf-v5-c-title {
  flex: 1;
  min-width: 0;
}

.pf-v5-c-login__main-header-utilities {
  flex-shrink: 0;
}


/* =========================================================================
   4. LOGO
   In PF5, the logo lives in .pf-v5-c-brand / #kc-header-wrapper, which is
   ABOVE the card (outside <main>). max-height comes from the skin's
   img.storefront-logo override in custom.scss.
   ========================================================================= */
.pf-v5-c-brand img,
#kc-header-wrapper img {
  display: block;
  margin: 40px auto 0;
  /* max-width capped at viewport width on narrow screens via min() */
  max-width: min(var(--brand-logo-width), 90vw);
  max-height: var(--brand-logo-height);
  object-fit: contain;
}


/* =========================================================================
   5. HEADING — left-aligned. Space Grotesk 700 for the display typeface.
   ========================================================================= */
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif;
  font-weight: 700;
  /* !important needed: PF5's .pf-v5-c-title.pf-m-3xl (0,2,0 specificity)
     beats a single-class selector (0,1,0) */
  font-size: 1.4rem !important;
  color: var(--brand-heading-color);
  text-align: left;
}


/* =========================================================================
   6. INPUT FIELDS
   =========================================================================
   PF5's ::after pseudo-element draws the bottom border; combining it with a
   real CSS border produces a double line and prevents border-radius.
   Fix: real border + overflow:hidden on the wrapper; suppress ::after.
   body prefix matches the server CSS's specificity (border-color:transparent
   !important on body .pf-v5-c-form-control).
   ========================================================================= */
body .pf-v5-c-form-control {
  border: 1px solid var(--brand-input-border) !important;
  border-radius: var(--brand-input-radius);
  overflow: hidden;
}

body .pf-v5-c-form-control::after,
body .pf-v5-c-form-control:focus::after,
body .pf-v5-c-form-control:focus-within::after,
body .pf-v5-c-form-control:active::after {
  border: none !important;
}

body .pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: var(--brand-input-radius);
}

/* Registration form: Keycloak puts pf-v5-c-form-control class on BOTH the
   <span> wrapper and the <input> inside it. Our border rule would hit both,
   creating a double outline. Strip the border from the raw input. */
body span.pf-v5-c-form-control > input.pf-v5-c-form-control,
body span.pf-v5-c-form-control > select.pf-v5-c-form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: var(--brand-input-radius);
}

body .pf-v5-c-form-control:focus,
body .pf-v5-c-form-control:focus-within,
body .pf-v5-c-form-control:active {
  border-color: var(--brand-focus-color) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),
              0 0 8px rgb(var(--brand-focus-rgb) / 0.45) !important;
  /* Suppress PF5's native focus outline — our box-shadow replaces it */
  outline: none !important;
}

body .pf-v5-c-form-control[aria-invalid="true"] {
  border-bottom-color: #c9190b !important;
  border-bottom-width: 2px !important;
}

body .pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline:    none !important;
  box-shadow: none !important;
}


/* -------------------------------------------------------------------------
   INPUT GROUP (password field + eye toggle)
   Border/radius on the group container; children clipped by overflow:hidden.
   ------------------------------------------------------------------------- */
body .pf-v5-c-input-group {
  border: 1px solid var(--brand-input-border);
  border-radius: var(--brand-input-radius);
  overflow: hidden;
}

body .pf-v5-c-input-group .pf-v5-c-form-control {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
body .pf-v5-c-input-group .pf-v5-c-form-control::after,
body .pf-v5-c-input-group .pf-v5-c-form-control:focus::after,
body .pf-v5-c-input-group .pf-v5-c-form-control:focus-within::after {
  border: none !important;
}
body .pf-v5-c-input-group .pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: 0 !important;
}

body .pf-v5-c-input-group:focus-within {
  border-color: var(--brand-focus-color);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),
              0 0 8px rgb(var(--brand-focus-rgb) / 0.45);
  outline: none;
}


/* =========================================================================
   7. FORM LABELS
   ========================================================================= */
.pf-v5-c-form__label-text {
  font-size: 0.8rem;
}


/* =========================================================================
   8. PRIMARY BUTTON (Sign In / Register)
   XIP2 uses an inverted hover: transparent background with Bright Purple
   (#993BFF) border and text, matching the storefront's btn hover style.
   ========================================================================= */
.pf-v5-c-button.pf-m-block {
  display: block;
  width: 100%;
  padding: 10px 16px;
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--brand-button);
  border: 2px solid var(--brand-button);
  border-radius: var(--brand-button-radius);
  color: var(--brand-button-text);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: transparent !important;
  border-color: var(--brand-button-hover) !important;
  color: var(--brand-button-hover) !important;
}


/* =========================================================================
   9. SECONDARY BUTTONS (social / admin login)
   Uses --brand-secondary which defaults to --brand-link. Some skins
   (e.g. UW) override --brand-secondary to the button colour for consistency.
   ========================================================================= */
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--after--BorderColor: transparent;
  --pf-v5-c-button--after--BorderWidth: 0;
  background-color: transparent;
  color: var(--brand-secondary);
  border: 2px solid var(--brand-secondary) !important;
  font-weight: 500;
  width: 100% !important;
  padding: 10px 16px !important;
  /* Override pf-v5-u-justify-content-space-between so icon + text are
     centred instead of spread across the button with an empty right span */
  justify-content: center !important;
  gap: 8px;
  transition:
    background-color 0.5s ease-in-out,
    border-color     0.3s ease-in-out,
    color            0.3s ease-in-out;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--brand-secondary);
  color: #ffffff;
  border-color: var(--brand-secondary);
}

.pf-v5-c-button.pf-m-secondary:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.pf-v5-c-button.pf-m-secondary::after,
.pf-v5-c-button.pf-m-secondary:hover::after,
.pf-v5-c-button.pf-m-secondary:focus::after {
  border: none !important;
}


/* =========================================================================
   10. PASSWORD VISIBILITY TOGGLE (eye button)
   ========================================================================= */
body .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--BorderRadius: 0;
  --pf-v5-c-button--disabled--BackgroundColor: #bfbfbf;
  --pf-v5-c-button--after--BorderWidth: 0 !important;
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--hover--after--BorderWidth: 0 !important;
  --pf-v5-c-button--m-control--focus--after--BorderWidth: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff;
  color: #5e5e5e;
  border-left: 1px solid var(--brand-input-border) !important;
}

body .pf-v5-c-button.pf-m-control::after,
body .pf-v5-c-button.pf-m-control:hover::after,
body .pf-v5-c-button.pf-m-control:focus::after {
  border: none !important;
}


/* =========================================================================
   11. SOCIAL / ADMIN LOGIN SVG ICONS
   ========================================================================= */
body #kc-social-providers svg:not(.google) {
  filter: none !important;
}

body #kc-social-providers svg:not(.google) path {
  fill: var(--brand-link) !important;
}


/* =========================================================================
   12. LINKS — use --brand-link (may differ from accent stripe)
   ========================================================================= */
.pf-v5-c-login__main-body a,
.pf-v5-c-login__main-footer a,
.pf-v5-c-login__main-footer-links a,
.pf-v5-c-check a {
  color: var(--brand-link);
}

.pf-v5-c-login__main-body a:hover,
.pf-v5-c-login__main-footer a:hover,
.pf-v5-c-login__main-footer-links a:hover {
  color: var(--brand-link-hover);
}


/* =========================================================================
   13. FOOTER / INFO BAND
   Structure (from live auth.dev.e-lucid.com):
     .pf-v5-c-login__main-footer  (inside .pf-v5-c-login__main-body)
       .pf-v5-c-login__main-footer-band           ← "Or sign in with"
       #kc-social-providers                        ← social buttons
       .pf-v5-c-login__main-footer-band.pf-v5-c-form  ← "New user? Register"

   Root cause of the white bar: .pf-v5-c-login__main-body has padding-bottom
   32px which renders AFTER the footer regardless of the footer's negative
   margin. Fix: zero out body padding-bottom so the grey band is the last
   visible element in the card. Side padding is preserved for the form content
   above; the footer uses negative side margins to escape it.
   ========================================================================= */

/* Zero out body's bottom padding — the grey footer band replaces it */
.pf-v5-c-login__main-body {
  padding-bottom: 0 !important;
}

/* Registration form: Keycloak also inserts an empty .pf-v5-c-login__main-footer
   at the end of the body; suppress it to avoid a gap after the grey band. */
.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer:empty {
  display: none;
}

.pf-v5-c-login__main-footer {
  font-size: 13px;
  background-color: transparent;
  padding: 0;
  margin-top: 20px;
  /* Escape body's side padding so grey band fills full card width */
  margin-left:  -48px;
  margin-right: -48px;
  /* No negative bottom margin needed — padding-bottom is now 0 */
  margin-bottom: 0;
  border-top: none !important;
}

/* "Or sign in with" — direct child of footer only (not back-to-login) */
.pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form) {
  background-color: transparent;
  padding: 0 48px;
  text-align: center;
  color: #6a6e73;
  font-size: 13px;
  border-top: none;
}

/* Constrained divider line — only on the "Or sign in with" band, which is a
   direct child of .pf-v5-c-login__main-footer. The registration form's
   back-to-login band is nested deeper (inside the form), so the > combinator
   excludes it. */
.pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form)::before {
  content: '';
  display: block;
  border-top: 1px solid #e0e0e0;
  margin-bottom: 16px;
}

/* Social providers — full-width block layout so the button fills the
   same width as the primary Sign In button. The footer container may be
   flex, so width:100% is needed at every level of the chain. */
#kc-social-providers {
  display: block;
  width: 100%;
  padding: 0 48px;
  margin-top: 8px;
  margin-bottom: 20px;
}

#kc-social-providers ul,
#kc-social-providers .pf-v5-c-login__main-footer-links {
  display: block !important;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

#kc-social-providers li,
#kc-social-providers .pf-v5-c-login__main-footer-links-item {
  display: block !important;
  width: 100%;
  padding: 0 !important;
  margin: 0;
}

/* "New user? Register" — grey, full-width, flush to card bottom */
.pf-v5-c-login__main-footer-band.pf-v5-c-form {
  background-color: #f0f0f0;
  text-align: center;
  font-size: 13px;
  padding: 15px 48px;
  margin-top: 0;
}

/* "Back to Login" on the registration form.
   Lives inside #kc-register-form (inside .pf-v5-c-login__main-body).
   Body padding-bottom is now 0, so only side margins needed to escape
   the body's 48px side padding. */
.pf-v5-c-form__group.pf-v5-c-login__main-footer-band {
  background-color: #f0f0f0;
  text-align: center;
  font-size: 13px;
  padding: 15px 48px;
  margin-top: 16px;
  margin-left:  -48px;
  margin-right: -48px;
  margin-bottom: 0;
}


/* =========================================================================
   14. INLINE ALERTS
   PF5's default alert has a top border in addition to the left stripe.
   Suppress the top border — only the left-side stripe should show.
   ========================================================================= */
.pf-v5-c-alert.pf-m-inline {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger  { border-left-color: #c9190b; }
.pf-v5-c-alert.pf-m-inline.pf-m-warning { border-left-color: #f0ab00; }
.pf-v5-c-alert.pf-m-inline.pf-m-success { border-left-color: #92d400; }


/* =========================================================================
   15. RESPONSIVE
   =========================================================================
   PF5 breakpoints:
   - below 576px  : mobile — card fills full width, smaller padding
   - 576px–767px  : small — PF5 zeroes header/footer side padding
   - 768px+       : medium — desktop main-header padding applies

   All desktop-specific overrides (negative margins tied to 48px body
   padding, centering via justify-content/margin:auto) must be reset for
   mobile and replaced with values that match the actual mobile padding.
   ========================================================================= */

/* ── Tablet / medium+ (≥ 768px): pin the card's justify-self to centre.
   The flex-parent centering is already in the base rules above; this only
   reinforces the grid item alignment that PF5 may override at intermediate
   breakpoints via its own responsive custom-property updates. ── */
@media (min-width: 768px) {
  .pf-v5-c-login__main {
    justify-self: center;
    overflow: hidden;
}
}

/* ── Small / mobile (< 768px) ── */
@media (max-width: 767px) {

  /* Page background stays brand colour */
  .login-pf body {
    background-color: var(--brand-page-bg);
  }

  /* Reset desktop centering — on mobile the container fills the screen
     minus 10px on each side to keep the modal frame visible. */
  .pf-v5-c-login {
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .pf-v5-c-login__container {
    /* PF5 sets grid-template-columns:34rem which overflows narrow viewports.
       Override to 100% of the container width. !important needed to beat
       PF5's base CSS specificity. */
    grid-template-columns: 100% !important;
    justify-content: center;
    /* 10px modal margin: container is viewport - 20px, centred */
    width: calc(100% - 20px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .pf-v5-c-login__main {
    max-width: none;
    width: 100%;
    justify-self: stretch;
    /* Shadow retained so the modal frame is visible on mobile */
    overflow: hidden;
}

  /* PF5 uses ~24px (1.5rem) side padding below the md breakpoint.
     Lock this in explicitly so footer negative margins match exactly. */
  .pf-v5-c-login__main-body {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Adjust footer container margins to match 24px mobile body padding */
  .pf-v5-c-login__main-footer {
    margin-left:  -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 0;
  }

  /* Restore content padding inside bands */
  .pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form) {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  .pf-v5-c-login__main-footer-band.pf-v5-c-form {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  #kc-social-providers {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 8px;
  }

  /* Registration back-to-login band */
  .pf-v5-c-form__group.pf-v5-c-login__main-footer-band {
    margin-left:  -1.5rem;
    margin-right: -1.5rem;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  /* Constrained divider — restore spacing below line on mobile */
  .pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form)::before {
    margin-bottom: 12px;
  }

  /* Header: language selector on row 1 (right), title wraps to full row 2 */
  .pf-v5-c-login__main-header {
    flex-wrap: wrap;
  }
  .pf-v5-c-login__main-header-utilities {
    order: 1;
    margin-left: auto;
  }
  .pf-v5-c-login__main-header h1,
  .pf-v5-c-login__main-header .pf-v5-c-title {
    order: 2;
    width: 100%;
    flex: none;
  }
}

.pf-v5-c-login__main > .pf-v5-c-login__main-footer {
  margin-top: 0 !important;
}

.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer:not(:has(*)) {
  margin-top: 0 !important;
}

/* =========================================================================
   REGISTRATION FORM: override inline <style> from register.ftl
   Uses html:has(#kc-register-form) (specificity 1,1,*) to beat both the
   template's single-class !important rules AND stay registration-page-only.
   display:contents on h1 makes "Register" text + language selector share
   line 1; promo/signin spans go full-width on subsequent lines via order.
   ========================================================================= */

html:has(#kc-register-form) .pf-v5-c-login__main-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  position: static !important;
}

html:has(#kc-register-form) #kc-page-title {
  display: contents !important;
}

html:has(#kc-register-form) .pf-v5-c-login__main-header-utilities {
  order: 1 !important;
  margin-left: auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}

html:has(#kc-register-form) .register-promo-text {
  order: 2 !important;
  flex-basis: 100% !important;
  font-size: 0.8rem !important;
  font-weight: normal !important;
  text-align: left !important;
  color: var(--pf-v5-global--Color--200, #6a6e73) !important;
}

html:has(#kc-register-form) .register-signin-header {
  order: 3 !important;
  flex-basis: 100% !important;
  font-size: 0.8rem !important;
  font-weight: normal !important;
  text-align: left !important;
  color: var(--pf-v5-global--Color--200, #6a6e73) !important;
}

/* Bottom breathing room when no footer band (minimal sign-in forms) */
.pf-v5-c-login__main-body {
  padding-bottom: 24px !important;
}
.pf-v5-c-login__main-body:has(.pf-v5-c-login__main-footer-band) {
  padding-bottom: 0 !important;
}