/* =========================================================================
   KEYCLOAK 26 (PATTERNFLY 5) — Normandie 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=Roboto:wght@700&display=swap');

:root {
  /* Base accent colour — see token table above for what this drives */
  --brand-primary:        #d15c30;
  --brand-primary-hover:  #944021;

  /* Accent stripe (top border of card) — may differ from links */
  --brand-stripe:         #d15c30;

  /* Link and secondary-button colour — may differ from stripe */
  --brand-link:           #d15c30;
  --brand-link-hover:     #944021;

  /* Secondary button colour — defaults to link, overridable */
  --brand-secondary:      #d15c30;

  /* Primary button */
  --brand-button:         #d15c30;
  --brand-button-hover:   #944021;
  --brand-button-radius:  30px;
  --brand-button-text:    #ffffff;

  /* Input focus: border colour + glow RGB (may differ from link) */
  --brand-focus-color:    #d15c30;
  --brand-focus-rgb:      209 92 48;

  /* Heading text colour — most skins use grey, some use brand */
  --brand-heading-color:  #5e5e5e;

  /* Input resting border: neutral grey (focus border uses --brand-focus-color) */
  --brand-input-border:   #d2d2d2;
  --brand-input-radius:   5px;

  --brand-page-bg:        #ffffff;
  --brand-logo-height:    50px;
  /* Logo max-width — override per skin for wide horizontal logos */
  --brand-logo-width:     280px;
}


/* =========================================================================
   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. 1.4rem sits between PF5's xl (1.25rem) and
   2xl (1.5rem) title sizes — no exact PF5 variable matches, so the value
   is set directly. Encode Sans Compressed 800 is wider than the default
   PF5 system font, so anything larger overflows next to the language
   selector on smaller desktops. heading-color defaults to #5e5e5e.
   ========================================================================= */
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 800;
  /* !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)
   ========================================================================= */
.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-radius: var(--brand-button-radius);
  color: var(--brand-button-text);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

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


/* =========================================================================
   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;
}

#kc-form {
  margin-bottom: 40px !important;
}