/* ----------------------------------------------------------------------------
   manueltgomes login theme: the two-panel sign-in shell
   Ligaro Task: aa0b77f7 - Two-panel skin, on site tokens
   Ligaro Task: 14d70fe8 - The template.ftl fork this styles

   Layout comes from the approved mockup. COLOUR COMES FROM THE SITE, not from
   the mockup: every value below is a site design token copied by value, with the
   token named in a comment, exactly as the parent theme's manueltgomes.css does
   it. A Keycloak theme cannot @import the site's variables.css (different
   origin, and the login page must render when the site is down), so copying by
   value with the token recorded is the established pattern here.

   THE PAGE IS TWO ZONES THAT BEHAVE DIFFERENTLY, and that is the whole design:

     ASIDE = brand chrome. Forest gradient and mint, FIXED IN BOTH COLOUR
     SCHEMES, exactly as the site's own header, footer and services band are.
     Those tokens are deliberately absent from variables.css's dark block.

     FORM COLUMN = semantic surfaces. Inherited --mtg-* tokens from
     manueltgomes.css, which DO flip with prefers-color-scheme. So the column is
     light for a light-mode visitor and dark for a dark-mode one, matching
     whatever theme their site session is in.

   That is why this file defines almost no colour of its own for the right-hand
   side: the parent already mapped the site's semantic tokens, and this theme
   loads after it, so those values are simply in scope.

   NO @font-face HERE, AND NO FONTS IN THIS THEME'S JAR, deliberately. The four
   Hanken Grotesk weights are declared in the parent's css/manueltgomes.css as
   url(../fonts/*.woff2). Keycloak walks the inheritance chain for RESOURCES as
   well as templates, so those files resolve 200 under this theme's own resource
   path even though its JAR does not contain them. Verified over HTTP against a
   running instance, not by reading code (Ligaro 5fb5cb74).

   If that ever stops being true the fix is local: declare the @font-face block
   in this file, and the build bundles the woff2 automatically, because it scans
   every stylesheet in the theme for url(../fonts/...) and copies what it finds
   out of the design system.
   ---------------------------------------------------------------------------- */

:root {
  /* Brand chrome, from variables.css "Brand chrome: dark header/footer + forest
     services band (both themes)". NOT redefined under prefers-color-scheme
     below, and that is the point: the site keeps these fixed across themes. */
  --mtg-forest-1: #1f4a32;      /* token: --forest-1 */
  --mtg-forest-2: #12301f;      /* token: --forest-2 */
  --mtg-mint: #76c893;          /* token: --brand-mint */
  --mtg-chrome-ink: #d8dcd6;    /* token: --header-ink, AA on the forest */

  /* The lighter first stop of the site's own services-band gradient
     (specialty.css:189). Using the site's value rather than the mockup's
     invented #235c3c keeps the two surfaces genuinely identical. */
  --mtg-forest-lift: #2f7a4f;

  --mtg-aside-ratio: 1.05fr;
  --mtg-column-max: 430px;
}

/* --- Shell ---------------------------------------------------------------
   The parent paints `body` with --mtg-paper. That still applies and is correct:
   it is what shows behind the column. The shell fills the viewport so the two
   panels meet with no seam. */

body {
  margin: 0;
}

.mtg-shell {
  display: grid;
  grid-template-columns: var(--mtg-aside-ratio) 1fr;
  min-height: 100vh;
}

/* --- Aside ----------------------------------------------------------------
   Gradient shape copied from the site's services band (specialty.css:189):
   three stops, lighter lift first, then --forest-1, then --forest-2. home.css
   uses the same pair with two stops. Reusing the site's own recipe rather than
   the mockup's hand-picked hexes is what "match the website" means here. */

.mtg-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(40px, 5vw, 68px);
  background: linear-gradient(
    150deg,
    var(--mtg-forest-lift) 0%,
    var(--mtg-forest-1) 46%,
    var(--mtg-forest-2) 100%
  );
  color: var(--mtg-chrome-ink);
}

/* Soft mint bloom, top right. Decorative only, so it is a pseudo-element and
   carries pointer-events: none rather than sitting in the markup. */
.mtg-aside::after {
  content: '';
  position: absolute;
  top: -160px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118, 200, 147, 0.17) 0%, transparent 68%);
  pointer-events: none;
}

.mtg-aside > * {
  position: relative;
  z-index: 1;
}

/* The wordmark is an <a> back to the site (Ligaro 525827a9), so it needs the
   three things a <span> never did: the UA underline removed, a hover state that
   says it is clickable, and a focus ring. It is the FIRST tabbable element on
   the page, so losing the ring would leave a keyboard user with no idea where
   they are.

   text-decoration is neutralised rather than left alone because the wordmark is
   set at 800 weight, where an underline reads as damage rather than as a link.

   The <span> fallback shares the class and is unaffected: none of the three
   added rules apply to a non-anchor. */
.mtg-aside__wordmark {
  display: block;
  font-family: var(--mtg-font);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mtg-mint);
  text-decoration: none;
  transition: opacity 120ms ease;
}

.mtg-aside__wordmark:hover {
  opacity: 0.82;
}

.mtg-aside__wordmark:focus-visible {
  outline: 2px solid var(--mtg-mint);
  outline-offset: 4px;
  border-radius: 3px;
}

.mtg-aside__tagline {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f9c8a;
}

.mtg-aside__heading {
  margin: 0;
  max-width: 22ch;
  font-family: var(--mtg-font);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.mtg-aside__lead {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: 1.04rem;
  line-height: 1.6;
  color: #b7ccbd;
}

.mtg-aside__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mtg-aside__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 0.99rem;
  line-height: 1.5;
  color: #d7e4db;
}

.mtg-aside__tick {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  color: var(--mtg-mint);
}

.mtg-aside__note {
  margin: 0;
  font-size: 0.88rem;
  color: #8fb69c;
}

/* --- Form column ----------------------------------------------------------
   The column is NOT a card in this design. The parent theme draws
   .pf-v5-c-login__main as a bordered, rounded surface because in the
   single-column layout the card IS the page. Here the column already separates
   itself from the aside, so the border and radius are removed rather than
   restyled. Everything INSIDE (fields, buttons, alerts) keeps the parent's
   treatment untouched. */

.mtg-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px) 24px;
  background: var(--mtg-paper);
}

/* ⚠️ display: block, NOT a tweaked grid, and this is the load-bearing rule of
   the whole column. PatternFly lays .pf-v5-c-login__container out as a grid with
   named areas ("main header" side by side at xl, stacked below it), and
   .pf-v5-c-login__main-header as a second grid of `1fr auto` meant to put a
   language selector beside the title.

   Measured, with those grids left in place and only their columns overridden:
   the container column collapsed to 234px inside a 430px box, __main-header
   split into 20.86px + 197.14px, and the h1 rendered ONE CHARACTER PER LINE
   while the hint sat in the slot meant for the locale selector. Overriding
   grid-template-columns was not enough because the named AREAS and the
   auto-placement survive it.

   Taking the containers out of grid entirely is what fixes it: the column is a
   simple stack, and nothing in this design needs the side-by-side layout those
   grids exist to provide. */

.mtg-column .pf-v5-c-login {
  display: block;
  width: 100%;
  max-width: var(--mtg-column-max);
  padding: 0;
  margin: 0;
  min-height: 0;
  background: none;
}

.mtg-column .pf-v5-c-login__container {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* The header stacks title then hint. The consequence to know: with i18n enabled
   the locale selector, which PatternFly places at grid-column 2, drops BELOW the
   title instead of sitting beside it. That is acceptable here (the realm serves
   one language) and is the price of the h1 being readable. */
.mtg-column .pf-v5-c-login__main-header {
  display: block;
}

.mtg-column .pf-v5-c-login__main {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* The card's internal padding was the card's, and there is no card now. The
   column's own padding positions the content instead, so the three sections
   line up on the same left edge without inheriting an inset meant for a box. */
.mtg-column .pf-v5-c-login__main-header,
.mtg-column .pf-v5-c-login__main-body,
.mtg-column .pf-v5-c-login__main-footer {
  padding-left: 0;
  padding-right: 0;
}

.mtg-column .pf-v5-c-login__main-header {
  border-top: none;
  padding-top: 0;
}

/* ONE WORDMARK, NOT TWO. Upstream renders the realm display name above the
   heading; the design puts it in the aside instead, and the aside renders the
   same realm-driven value. Hiding rather than deleting keeps the template diff
   to insertions only, which is what makes the next upstream re-diff cheap. */
.mtg-column #kc-header {
  display: none;
}

.mtg-column #kc-page-title {
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mtg-hint {
  margin: 10px 0 32px;
  font-size: 1rem;
  color: var(--mtg-text-secondary);
}

.mtg-legal {
  margin: 26px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--mtg-text-secondary);
}

/* --- Social providers and the divider -------------------------------------
   Renders only when the realm has identity providers configured, which it does
   not yet (Ligaro bcfa5cda). Styled now so the buttons are correct the moment
   they appear rather than needing a second pass.

   The "or" divider is upstream's own footer band carrying
   msg(identity-provider-login-label); the flanking rules are drawn here. */

.mtg-column .pf-v5-c-login__main-footer-band {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  padding: 0;
  font-size: 0.84rem;
  color: var(--mtg-text-secondary);
}

.mtg-column .pf-v5-c-login__main-footer-band::before,
.mtg-column .pf-v5-c-login__main-footer-band::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mtg-border);
}

/* The registration band is NOT a divider, so it must not grow rules. It is the
   same PatternFly class, which is why this override is keyed on the id. */
.mtg-column #kc-info.pf-v5-c-login__main-footer-band {
  display: block;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--mtg-border);
  font-size: 0.99rem;
}

.mtg-column #kc-info.pf-v5-c-login__main-footer-band::before,
.mtg-column #kc-info.pf-v5-c-login__main-footer-band::after {
  content: none;
}

.mtg-column #kc-social-providers ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtg-column #kc-social-providers li {
  width: 100%;
}

.mtg-column #kc-social-providers a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 13px;
  font-weight: 600;
  font-size: 0.96rem;
  /* These are buttons that happen to be anchors. The parent theme underlines
     every <a> in the card, which is right for links in prose and wrong here:
     an underlined label inside a bordered button reads as a link inside a
     button. Verified against the rendered page, where both provider labels came
     out underlined. */
  text-decoration: none;
}

.mtg-column #kc-social-providers a:hover {
  text-decoration: none;
}

.mtg-column #kc-social-providers svg {
  width: 18px;
  height: 18px;
}

/* --- Forgot password: upstream's placement, deliberately ------------------
   The mockup puts "Forgot password?" up in the label row, opposite "Password".
   Upstream renders it BELOW the field, sharing a flex row with the remember-me
   checkbox (already justified apart). THIS THEME KEEPS UPSTREAM'S PLACEMENT.

   It was attempted. The two are not siblings: the link sits inside
   .pf-v5-c-helper-text__item inside .pf-v5-c-helper-text inside
   .pf-v5-c-form__helper-text, so lifting only it means collapsing two wrappers
   with display: contents and then placing the promoted children on the form
   group's grid. Measured outcomes across two attempts: with one wrapper
   collapsed the placement was ignored and column 2 resolved to 0px; with both
   collapsed the remember-me checkbox jumped ABOVE the field (y=449 against the
   field's y=489) because the promoted items no longer sit in the rows their
   source order implies.

   Stopped there on purpose. The two layouts are functionally identical, the
   fallback is what Keycloak ships and tests, and Ligaro aa0b77f7 recorded before
   any of this that falling back was the sanctioned outcome rather than a defeat.
   Chasing it further would trade real risk in the one form that matters for a
   cosmetic nicety. Ligaro d8918d0b holds the exact-mockup placement if it is
   ever worth revisiting.

   The row still needs styling, since it is now a visible pair rather than
   helper text. */

.mtg-column .pf-v5-c-form__group:has(#password) .pf-v5-c-helper-text {
  align-items: center;
  margin-top: 6px;
}

.mtg-column .pf-v5-c-helper-text__item a {
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Responsive -----------------------------------------------------------
   Under 900px the aside stops being a panel and becomes a header strip. The
   BULLETS and the note go; the wordmark, heading and lead stay, at a smaller
   heading size. That is the mockup's own choice and it is the right one: the
   heading is the single line that says what the account is for, and dropping it
   would leave a bare green band above a form. The bullets are what would push
   the form below the fold, so they are what goes. */

@media (max-width: 900px) {
  .mtg-shell {
    grid-template-columns: 1fr;
  }

  .mtg-aside {
    padding: 34px 26px;
    gap: 24px;
  }

  .mtg-aside__heading {
    font-size: 1.5rem;
  }

  .mtg-aside__list,
  .mtg-aside__note {
    display: none;
  }

  .mtg-column {
    padding: 40px 26px 56px;
  }
}