/*
 * features/accessibility-volunteer-mobile.css
 *
 * Targeted readability/accessibility overrides for volunteers using mobile.
 * Scope is limited to `body:not(.is-admin)` under small screens and coarse pointers.
 *
 * Rollback: remove this stylesheet link from templates to revert.
 */

/* Volunteers on small screens */
@media (max-width: 640px) {
  body:not(.is-admin) {
    /* Encourage readable line-height globally on mobile */
    line-height: 1.5;
  }

  /* Reduce extra top/bottom space in header for mobile volunteers */
  body:not(.is-admin) header {
    padding: 0 !important; /* remove extra spacing above/below login */
  }

  /* Buttons: ensure larger readable text and tap targets */
  body:not(.is-admin) .btn {
    font-size: 1rem;
    line-height: 1.4;
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* Header login anchor: make full-width for consistent visual weight */
  body:not(.is-admin) header a.btn {
    display: flex; /* override inline-flex for block-like sizing */
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  /* Floating action button: meet 44×44 tap target */
  body:not(.is-admin) .fab {
    width: 44px;
    height: 44px;
  }

  /* Inline messages: avoid tiny text */
  body:not(.is-admin) .msg {
    font-size: 0.95rem;
  }

  /* Week meta text: keep readable size */
  body:not(.is-admin) .cell .meta {
    font-size: 0.9rem;
  }

  /* Links: keep underlines for clearer affordance */
  body:not(.is-admin) a {
    text-decoration: underline;
  }
  /* But buttons should not show underlines */
  body:not(.is-admin) a.btn {
    text-decoration: none;
  }

  /* Consistent vertical spacing for mobile buttons */
  body:not(.is-admin) header a.btn {
    margin: 0.5rem 0;
  }
  body:not(.is-admin) .roster-mobile-events-toolbar .btn {
    margin: 0.5rem 0;
  }

  /* Mobile week toolbar: make action buttons full-width and centered */
  body:not(.is-admin) .roster-mobile-events-toolbar .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

/* Volunteers on touch devices (covers tablets with coarse pointers) */
@media (pointer: coarse) {
  body:not(.is-admin) .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  body:not(.is-admin) .fab {
    width: 44px;
    height: 44px;
  }
}

/* Consistent focus-visible outline for interactive elements */
body:not(.is-admin) a:focus-visible,
body:not(.is-admin) button:focus-visible,
body:not(.is-admin) [role="button"]:focus-visible,
body:not(.is-admin) input:focus-visible,
body:not(.is-admin) select:focus-visible,
body:not(.is-admin) textarea:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}