/* ==========================================================================
   Forgot Password Page - Responsive Overrides
   ========================================================================== */

/* CSS Variables */
:root {
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --touch-target-min: 44px;
}

/* Remove fixed width constraints */
html.responsive {
  min-width: 0 !important;
}

@media (max-width: 767px) {
  html.responsive {
    background-size: cover !important;
    background-position: center !important;
  }

  /* Page title */
  .responsive h1 {
    min-width: 0 !important;
    width: 100% !important;
    font-size: clamp(1.25rem, 5vw, 2.5rem) !important;
    padding: 0 var(--space-md);
    margin-top: var(--space-lg) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* Form wrapper */
  .responsive .wrapper {
    width: 90% !important;
    max-width: 320px !important;
    height: auto !important;
    padding: var(--space-md);
  }

  .responsive .container {
    max-width: 100% !important;
    height: auto !important;
    padding: var(--space-sm) 0;
  }

  /* Form */
  .responsive form {
    padding: var(--space-sm) 0;
  }

  /* Form inputs - full width and touch-friendly */
  .responsive form input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--touch-target-min);
    font-size: 16px !important; /* Prevent iOS zoom */
    box-sizing: border-box !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .responsive form input:focus {
    width: 100% !important;
  }

  /* Buttons */
  .responsive form button {
    width: 100% !important;
    min-height: var(--touch-target-min);
    box-sizing: border-box !important;
  }

  /* Nav links */
  .responsive a.navlinks {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    min-height: var(--touch-target-min);
  }
}