/* Custom CSS Enhancements for Errol Massiah Ward 3 Website */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  header,
  footer,
  #volunteer-section,
  #mobile-menu-btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */

/* The header is sticky, so an in-page jump would otherwise land with the
   section heading hidden underneath it. Offset by the header height. */
html {
  scroll-padding-top: 4.5rem;
}

@media (min-width: 640px) {
  html {
    scroll-padding-top: 5.5rem;
  }
}

/* iOS Safari zooms the whole page when a field smaller than 16px takes
   focus, and never zooms back out. Keep fields at 16px on phones. */
@media (max-width: 1023px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Comfortable touch targets for the checkboxes in the volunteer form. */
@media (hover: none) and (pointer: coarse) {
  input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/* Long unbroken strings (email addresses, phone numbers) must not be able
   to push a container wider than the screen. */
body {
  overflow-wrap: break-word;
}

/* Lock the page behind the open mobile drawer. */
body.menu-open {
  overflow: hidden;
}