/* CSS Responsive Media Queries */

/* --- xs Breakpoint (< 480px) --- */
@media (max-width: 479px) {
  .hero-section {
    padding: 32px 16px;
  }
  
  .radar-rings-container {
    display: none; /* Hide decorative background to save space */
  }
  
  .input-row {
    flex-direction: column; /* Stack input and check button vertically */
    gap: 8px;
  }
  
  .btn-primary {
    height: 48px;
    width: 100%;
  }
  
  .hero-logo-letter {
    font-size: 3rem;
  }
  
  .signals-grid {
    grid-template-columns: 1fr; /* Single column layout for signal items */
    gap: 12px;
  }
  
  #currentLangName {
    display: none; /* Only show globe icon on very small screens */
  }
  
  .btn-icon-text {
    padding: 0 12px;
  }
  
  .history-panel {
    width: 100%; /* Take full screen width on mobile */
  }
}

/* --- sm Breakpoint (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
  .signals-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns grid */
  }
}

/* --- md Breakpoint (768px+) --- */
@media (min-width: 768px) {
  .signals-grid {
    grid-template-columns: repeat(3, 1fr); /* Standard 3 columns grid */
  }
}

/* --- lg Breakpoint (1024px+) --- */
@media (min-width: 1024px) {
  .app-main {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  
  .hero-section {
    padding: 64px 48px;
  }
}

/* --- 4K/Ultra-Wide Breakpoint (1536px+) --- */
@media (min-width: 1536px) {
  :root {
    --container-max: 900px; /* Increase container limit */
  }
  
  html {
    font-size: 105%; /* Slightly scale up text */
  }
}

/* --- Touch Devices Optimization (Mobile/Tablet) --- */
@media (hover: none) and (pointer: coarse) {
  /* Enforce WCAG AA standard touch targets (min 48px) */
  .url-input {
    min-height: 48px;
  }
  
  .btn-primary, .btn-secondary, .btn-icon, .btn-icon-text, .btn-danger {
    min-height: 48px;
  }
  
  .tab-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Remove sticky hover effects on touch screens */
  .btn-icon:hover, 
  .btn-icon-text:hover,
  .btn-primary:hover,
  .btn-secondary:hover:not(:disabled),
  .btn-danger:hover:not(:disabled),
  .btn-history-recheck:hover {
    box-shadow: none !important;
    background-color: inherit;
    color: inherit;
    border-color: inherit;
  }
  
  /* Maintain active press states for feedback */
  .btn-primary:active {
    background-color: hsl(var(--accent-hover));
    opacity: 0.9;
  }
  
  .btn-icon:active, .btn-icon-text:active {
    background-color: hsla(var(--accent-dim));
  }
}