/* Additional responsive design styles for Aba Heroes Awards website */

/* Ensure text is readable on all devices */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
  
  .container {
    width: 95%;
    padding: 0 10px;
  }
  
  /* Adjust hero section for mobile */
  .hero {
    padding: 6rem 1rem;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  /* Adjust section spacing */
  section {
    padding: 3rem 0;
  }
  
  /* Make category grid single column on mobile */
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  /* Adjust gallery and heroes grid for mobile */
  .gallery-grid, .heroes-grid {
    grid-template-columns: 1fr;
  }
  
  /* Adjust form layout */
  .form-container {
    padding: 1.5rem;
  }
  
  /* Adjust filter buttons to wrap properly */
  .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .filter-btn {
    margin: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Adjust contact container to stack on mobile */
  .contact-container {
    flex-direction: column;
  }
  
  .contact-info, .contact-form {
    width: 100%;
    padding-right: 0;
  }
  
  /* Adjust footer columns */
  .footer-column {
    flex: 100%;
    margin-bottom: 1.5rem;
  }
  
  /* Adjust navigation for mobile */
  .nav-links {
    background-color: var(--light-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Ensure buttons are touch-friendly */
  .btn {
    padding: 0.75rem 1.25rem;
    min-width: 120px;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Further adjust spacing */
  section {
    padding: 2.5rem 0;
  }
  
  /* Make form elements more touch-friendly */
  input, select, textarea, button {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.75rem;
  }
  
  /* Adjust logo size */
  .logo h1 {
    font-size: 1.25rem;
  }
  
  /* Ensure pagination is usable on small screens */
  .pagination-container a {
    padding: 0.5rem 0.75rem;
  }
}

/* Tablet devices */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: 90%;
  }
  
  /* Adjust grids for tablets */
  .category-grid, .gallery-grid, .heroes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Adjust hero section for tablets */
  .hero h1 {
    font-size: 2.75rem;
  }
}

/* Ensure touch targets are large enough */
@media (hover: none) {
  /* Styles for touch devices */
  .nav-links a, .btn, .filter-btn, .social-links a {
    padding: 0.75rem 1rem;
  }
  
  /* Make gallery items touch-friendly */
  .gallery-item-info {
    transform: translateY(0);
    opacity: 0.9;
  }
  
  /* Ensure FAQ toggles are easy to tap */
  .faq-question {
    padding: 1rem;
  }
  
  .faq-toggle {
    padding: 0.5rem;
  }
}

/* Print styles */
@media print {
  header, footer, .cta, .filter-buttons, .pagination-container {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  .container {
    width: 100%;
    max-width: none;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  .hero, .page-banner {
    background: none !important;
    color: #000;
    padding: 1cm 0;
  }
  
  .hero h1, .page-banner h1, .hero p, .page-banner p {
    color: #000;
  }
  
  .gallery-grid, .heroes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-item-info {
    position: static;
    transform: none;
    background: none;
    color: #000;
  }
}