/**
 * Responsive Styles
 * 
 * Media queries for mobile and tablet layouts.
 */

/* Tablet and below */
@media (max-width: 768px) {
  #title {
    padding: 12px 16px;
  }
  
  #title h1 {
    font-size: 1.25rem;
  }
  
  #menu {
    padding: 8px 12px;
  }
  
  #menu .ulhoriz {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  #menu .ulhoriz li {
    margin-right: 0;
    padding: 6px 10px;
    font-size: 0.875rem;
  }
  
  .home-search {
    margin: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
  }
  
  #search {
    width: calc(100% - 56px);
    font-size: 1rem;
    height: 48px;
  }
  
  #zoom-control li {
    width: 48px;
    height: 48px;
  }
  
  .feature-container {
    padding: 0 12px;
  }
  
  .feature {
    padding: 16px;
    margin: 8px 0;
  }
  
  .feature h2 {
    font-size: 1.25rem;
  }
  
  .feature h3 {
    font-size: 1rem;
  }
  
  .feature-image {
    float: none;
    width: 100%;
    max-width: 200px;
    margin-bottom: 12px;
  }
  
  #data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #title {
    padding: 10px 12px;
  }
  
  #title h1 {
    font-size: 1.1rem;
  }
  
  .audioblast-flash {
    height: 32px;
    padding-right: 8px;
  }
  
  .home-search {
    margin: 12px;
    padding: 12px;
  }
  
  #search {
    width: calc(100% - 48px);
    font-size: 0.9rem;
    height: 44px;
    padding: 0 12px;
  }
  
  #zoom-control li {
    width: 44px;
    height: 44px;
  }
  
  .feature {
    padding: 12px;
  }
  
  .feature p {
    font-size: 0.9rem;
  }
}