/**
 * @file
 * Custom Horizon Login Page Styling
 * Matches the horizon-crm signin page design (Figma node 6336-6691)
 * Features diagonal split layout with responsive stacking on mobile
 */

/* ============================================
   BASE LAYOUT - Full viewport, flexbox
   ============================================ */

/* Main container - full viewport with flexbox */
body.gin-login .user-form-page {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* dvh, not vh: on mobile browsers vh includes the retracting toolbar, which
     leaves a sliver of scroll on a page that should never scroll. */
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  /* The stars overlay below is intentionally oversized (150%) so its rotation
     never shows a bare corner. Without this clip that overhang became real
     page height — a permanent scrollbar on a single-screen login. */
  overflow: hidden;
}

/* ============================================
   DESKTOP LAYOUT - 65% / 35% split
   ============================================ */

/* Orange gradient wallpaper background with diagonal clip - LEFT side */
body.gin-login .user-form-page__wallpaper {
  /* The Sanibel Causeway from the air — the most recognisably Fort Myers
     image in the client's library — under a light teal wash so the white
     lockup still reads. The platform orange, and the Horizon star pattern
     that used to sit on top, both belonged to Horizon rather than to the
     client whose editors sign in here. */
  background:
    linear-gradient(45deg, rgba(16, 56, 66, 0.78), rgba(28, 96, 110, 0.68)),
    url('../images/gin-login/beach.jpg') center / cover no-repeat;
  position: relative;
  /* Diagonal cuts from top-right (100%) to bottom (80%) */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  flex: 0 0 65%;
  min-height: 100dvh;
  overflow: hidden;
  animation: slide-in-top .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Hide any wallpaper images injected by gin_login JS */
body.gin-login .user-form-page__wallpaper img {
  display: none;
}

/* Centered HRZN logo on wallpaper */
body.gin-login .user-form-page__wallpaper::after {
  content: "";
  position: absolute;
  background-image: url('../images/gin-login/fortmyers-logo--white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 500px;
  height: 240px;
  top: 50%;
  left: 40%;
  transform: translate(-30%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: fade-scale-in .8s cubic-bezier(.16, 1, .3, 1) .3s forwards;
}

/* Form panel - white background - RIGHT side */
body.gin-login .user-form-page__user-form {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
  flex: 1;
  min-height: 100dvh;
}

/* Center the form content */
body.gin-login .user-form-page__user-form .layout-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px 0 0;
  opacity: 0;
  animation: fade-slide-up .6s cubic-bezier(.16, 1, .3, 1) .5s forwards;
}

/* ============================================
   FORM STYLING
   ============================================ */

/* Hide icon/badge */
body.gin-login .user-form-page__user-form .content-header {
  display: none;
}

/* Login button follows Gin's primary blue (#003cc5 at the stock preset) so
   the login matches the admin it opens into. It was a bespoke near-black,
   which read as a different product. */
body.gin-login .button--primary,
body.gin-login .button-login,
body.gin-login .form-actions .button--primary,
body.gin-login .form-actions .button-login {
  background-color: var(--gin-color-primary, #003cc5) !important;
  border-color: var(--gin-color-primary, #003cc5) !important;
  border-radius: 6px;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

body.gin-login .button--primary:hover,
body.gin-login .button-login:hover,
body.gin-login .form-actions .button--primary:hover,
body.gin-login .form-actions .button-login:hover {
  background-color: var(--gin-color-primary-hover, #0031a3) !important;
  border-color: var(--gin-color-primary-hover, #0031a3) !important;
  box-shadow: none !important;
}

body.gin-login .button--primary:active,
body.gin-login .button-login:active,
body.gin-login .button--primary:focus,
body.gin-login .button-login:focus,
body.gin-login .form-actions .button--primary:active,
body.gin-login .form-actions .button-login:active,
body.gin-login .form-actions .button--primary:focus,
body.gin-login .form-actions .button-login:focus {
  background-color: #262626 !important;
  border-color: #262626 !important;
  box-shadow: none !important;
}

/* Links styling */
body.gin-login .link {
  color: #000000;
}

body.gin-login .link:hover {
  color: #000000;
  text-decoration: underline;
}

body.gin-login .messages__wrapper a {
  color: #cfe6ea;
}

/* Page title styling */
body.gin-login .user-form-page__page-title {
  color: #111827;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 32px;
}

/* Form elements focus state */
body.gin-login .form-element:focus {
  border-color: #2a7f8f;
  box-shadow: 0 0 0 2px rgba(42, 127, 143, 0.25);
}

/* ============================================
   MOBILE LAYOUT - Stacked vertically
   ============================================ */

@media (max-width: 1024px) {
  /* Stack columns vertically using flexbox */
  body.gin-login .user-form-page {
    flex-direction: column;
  }

  body.gin-login .user-form-page__user-form .layout-container {
    padding: 0;
  }

  /* Branding panel - full width at top with diagonal bottom edge */
  body.gin-login .user-form-page__wallpaper {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 34dvh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  /* Adjust logo position for mobile */
  body.gin-login .user-form-page__wallpaper::after {
    width: 300px;
    height: 145px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation-name: fade-scale-in-mobile;
  }

  /* Form panel - full width below, flex to fill remaining space */
  body.gin-login .user-form-page__user-form {
    flex: 1;
    width: 100%;
    /* No min-height: flex:1 already claims whatever the branding panel
       leaves. Stacking 40vh + 50vh + 80px of padding was 90vh of minimums on
       a 100vh page — that arithmetic, not the content, forced the scroll. */
    min-height: 0;
    padding: 40px 24px;
  }

  /* Smaller title on mobile */
  body.gin-login .user-form-page__page-title {
    font-size: 28px;
    text-align: center;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  body.gin-login .user-form-page__wallpaper {
    display: block;
    min-height: 30dvh;
  }

  body.gin-login .user-form-page__wallpaper::after {
    width: 260px;
    height: 125px;
  }

  body.gin-login .user-form-page__user-form {
    padding: 32px 20px;
  }

  body.gin-login .user-form-page__page-title {
    font-size: 24px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes slide-in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-scale-in {
  0% {
    transform: translate(-30%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-30%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-scale-in-mobile {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-slide-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}