/* Intro / Entry landing view on ClientLogin.aspx.
   Injected from LoginPage.AddLandingStyling() during PreRender, so it loads after
   login-styles-new.css / login-styles-old.css and only when the landing view is rendering.
   Geometry is taken from the Figma frame (1280 x 832). */

/* ---------- page ---------- */

body {
  background-color: #F5F5F5;
  background-image: none;
}

/* Matches the Figma footer frame: 1280 x 56, flush to the bottom, white. Restated here rather than
   inherited so it also neutralises login-styles-old.css, which gives footer a dark gradient and
   120px of height. */
footer {
  height: 56px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  background-image: none;
}

/* #landingHeader is the immediate previous sibling of .site-content and is not rendered at all in
   the classic view, so this only cancels the 160px top margin when the landing view is showing. */
.landing-header + .site-content {
  margin-top: 0;
}

.landing-header,
.landing-view,
.login-modal-nextgen,
.footer-landing {
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- header ---------- */

.landing-header {
  display: flex;
  align-items: stretch;
  height: 84px;
  background-color: #FFFFFF;
}

.landing-logo-block {
  display: flex;
  width: 234px;
  align-items: center;
  justify-content: center;
}

.landing-logo-block-cobrand {
  width: auto;
  padding: 0 32px;
  background-color: transparent;
}

/* ---------- three-column row ---------- */

.landing-view {
  display: flex;
  align-items: flex-start;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
}

.landing-promo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 325px;
  margin-left: 177px;
  margin-top: 122px;
}

.landing-promo-images {
  display: flex;
  align-items: flex-end;
}

.landing-promo-text {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.landing-rule {
  display: flex;
  justify-content: center;
  width: 238px;
  margin-top: 194px;
}

.landing-rule > div {
  width: 1px;
  height: 282px;
  background-color: #C2C2C2;
}

.landing-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 408px;
  margin-top: 99px;
}

/* ---------- promo typography ---------- */

.landing-promo-title {
  font-size: 19px;
  line-height: 23px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

.landing-promo-body {
  width: 304px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #000000;
  margin: 0;
}

/* ---------- cards ---------- */

.landing-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px;
  background-color: #FFFFFF;
  border: 1px solid #E3E3E3;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.0509804);
}

/* Card 1 is 216px in the design, 48px taller than its 168px of content, with the slack at the
   bottom. Card 2 has no explicit height and settles at 168px. */
.landing-card-tall {
  height: 216px;
  justify-content: flex-start;
}

.landing-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-card-text h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 590;
  color: #1E1E1E;
  margin: 0;
}

.landing-card-text p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #1A1A1A;
  margin: 0;
}

/* ---------- buttons ---------- */

/* Overrides bootstrap .btn (font-size: 1rem; padding: .375rem .75rem; line-height: 1.5). */
.landing-btn {
  height: 40px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
  border-radius: 8px;
}

.landing-btn-filled {
  background-color: #7749A0;
  border: 1px solid #7749A0;
  color: #FFFFFF;
}

.landing-btn-filled:not([disabled]):hover,
.landing-btn-filled:not([disabled]):active {
  background-color: #5F3A80;
  border-color: #5F3A80;
  color: #FFFFFF;
}

.landing-btn-outlined {
  background-color: transparent;
  border: 1px solid #7749A0;
  color: #7749A0;
}

.landing-btn-outlined:not([disabled]):hover,
.landing-btn-outlined:not([disabled]):active {
  background-color: #F1EAF7;
  border-color: #7749A0;
  color: #7749A0;
}

/* Both landing buttons gray out while a submit is in flight; disableLandingButtons() sets the
   attribute. Same palette as .btn-purple[disabled] in styleguide.buttons.css, so this matches the
   Continue button on the employer card. The :not() on the hover/active rules above is load-bearing:
   .landing-btn-filled:hover is (0,2,0), the same as .landing-btn[disabled], and it comes first in the
   file - it would win the tie and repaint the button purple under the cursor. The base .landing-btn-*
   colours are only (0,1,0) and need no such guard. */
.landing-btn[disabled] {
  background-color: #F6F6F7;
  border-color: #A7A9AC;
  color: #757678;
}

.landing-btn:focus,
.landing-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(119, 73, 160, 0.5);
}

/* ---------- login help ---------- */

.landing-login-help {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 47px;
}

.landing-login-help > a {
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: #7749A0;
  text-decoration: underline;
}

/* ---------- employer login card, NextGen chrome ----------
   Everything here is scoped under .login-modal-nextgen, which ApplyViewVisibility() only puts on
   #loginmodal when the NextGen flag is on and the member has chosen "Employer log in". None of it
   can reach the legacy rendering. */

.login-modal-nextgen {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 76px; /* 84px header + 76 puts the card top at 160, per the Figma frame */
}

.login-modal-nextgen .login-container {
  width: 348px;
  border: 1px solid #E3E3E3;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.0509804);
  overflow: hidden; /* clips the purple header's 8px corners to the card's 12px */
}

.login-nextgen-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}

.login-nextgen-heading h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 590;
  color: #1E1E1E;
  margin: 0;
}

.login-nextgen-heading p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #1A1A1A;
  margin: 0;
}

.login-modal-nextgen .login-body label {
  font-size: 13px;
  line-height: 20px;
  color: #49454F;
  margin-bottom: 4px;
}

.login-modal-nextgen .form-control {
  height: 48px;
  border-radius: 8px;
  border: 1px solid #79747E;
}

.login-modal-nextgen .btn-continue {
  border-radius: 8px;
}

/* Colours only while the button is enabled. The disabled state deliberately falls through to
   .btn-purple[disabled] in styleguide.buttons.css (#757678 on #f6f6f7, #a7a9ac border), which is how
   Continue looked before this redesign. The :not() is load-bearing: without it these rules tie with
   .btn-purple[disabled] on specificity and win on load order, leaving the button purple while it is
   still disabled. The markup ships the button disabled and validateInput() removes the attribute on
   first keystroke. */
.login-modal-nextgen .btn-continue:not([disabled]) {
  background-color: #7749A0;
  border-color: #7749A0;
  color: #FFFFFF;
}

.login-modal-nextgen .btn-continue:not([disabled]):hover,
.login-modal-nextgen .btn-continue:not([disabled]):active {
  background-color: #5F3A80;
  border-color: #5F3A80;
  color: #FFFFFF;
}

/* .login-help is already display:flex/justify-end, but inside the centred column above it would
   centre itself, so pin it to the card's width. */
.login-modal-nextgen .login-help {
  width: 348px;
  justify-content: flex-end;
  padding-top: 8px;
}

/* ---------- footer ---------- */

/* Deliberately does not reuse .footer-new / .footer-nav: .footer-nav is position:absolute, which
   would take both lists out of flow and defeat the space-between row. */
.footer-landing {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
}

.landing-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-footer-links a {
  font-size: 14px;
  line-height: 20px;
}

.landing-footer-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-footer-copyright {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.landing-footer-logo {
  width: 97.787px;
  height: 15.824px;
  flex-shrink: 0;
}

/* ---------- responsive ----------
   The 1280px frame is the spec. Figma supplied no smaller frames, so everything below reuses the
   breakpoints already in login-styles-new.css and is a sane fallback rather than a matched layout. */

@media only screen and (max-width: 991px) {
  .landing-view {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .landing-rule {
    display: none;
  }

  .landing-promo {
    order: 2;
    margin-left: 0;
    margin-top: 48px;
  }

  .landing-cards {
    order: 1;
    margin-top: 48px;
  }

  /* The 56px fixed bar cannot hold the wrapped footer content at this width. */
  footer {
    height: auto;
    position: static;
  }

  .footer-landing {
    flex-direction: column;
    height: auto;
    padding: 16px 24px;
    gap: 16px;
  }

  .landing-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }

  .landing-footer-meta {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media only screen and (max-width: 839px) {
  .landing-header {
    height: 64px;
  }

  .landing-logo-block {
    width: 180px;
  }

  .landing-cards {
    width: 100%;
    max-width: 408px;
    padding: 0 16px;
  }

  .landing-login-help {
    justify-content: center;
  }
}