/* Page-specific CSS to make login page fit within a single viewport height.
   Scoped to .login-viewport (added to the login template). Keep this file
   intentionally small and specific so it won't affect other pages. */

.login-viewport {
  height: 100vh;
  box-sizing: border-box;
}

.login-viewport .login-brand {
  margin-bottom: 0.5rem;
}

.login-viewport .login-brand h1 {
  /* Increase title size to at least 1.5x the previous value (2.25rem -> 3.375rem)
     Use clamp so it scales with viewport width but caps to avoid overshoot. */
  font-size: clamp(3.375rem, 6.5vw, 4rem);
  line-height: 1.02;
  margin-bottom: 0.25rem;
}

.login-viewport .login-brand p {
  margin: 0;
}

.login-viewport .login-card {
  padding: 1rem; /* reduce default p-8 on this page */
  max-width: 100%;
}

.login-viewport .login-card .w-14 {
  width: 48px; height: 48px;
}

.login-viewport .login-button {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

@media (max-height: 820px) {
  /* Slightly reduce sizes on shorter viewports so content doesn't overflow */
  .login-viewport { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .login-viewport .login-brand h1 { font-size: 2.8rem; }
  .login-viewport .login-card { padding: 0.75rem; }
  .login-viewport .text-center.mt-6 { margin-top: 0.25rem; font-size: 0.75rem; }
}

@media (max-height: 680px) {
  /* Aggressive shrink on very short screens to prevent scrolling */
  .login-viewport .login-brand h1 { font-size: 2.2rem; }
  .login-viewport .login-card { padding: 0.5rem; }
  .login-viewport .login-card .text-sm,
  .login-viewport .login-card .text-xs { font-size: 0.75rem; }
  .login-viewport .login-button { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
}