/* =====================================================
   UDDS OX API Documentation - Responsive Styles
   Mobile-first approach with breakpoints
   ===================================================== */

/* === Tablet (768px - 1024px) === */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 240px;
  }
  
  .main-content {
    padding: var(--spacing-lg);
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.35rem;
  }
  
  h3 {
    font-size: 1.15rem;
  }
}

/* === Mobile (< 768px) === */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }
  
  /* Header */
  .header {
    padding: 0 var(--spacing-md);
  }
  
  .header-logo {
    font-size: 1rem;
  }
  
  .header-version {
    display: none;
  }
  
  .header-link {
    display: none;
  }
  
  /* Menu Toggle */
  .menu-toggle {
    display: block;
    margin-right: var(--spacing-sm);
  }
  
  /* Sidebar - Hidden by default on mobile */
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    top: 0;
    height: 100vh;
    padding-top: calc(var(--header-height) + var(--spacing-lg));
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  /* Main Content - Full width on mobile */
  .main-content {
    margin-left: 0;
    padding: var(--spacing-md);
  }
  
  /* Typography */
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
    padding: var(--spacing-sm);
  }
  
  h3 {
    font-size: 1.1rem;
    padding: var(--spacing-sm);
  }
  
  /* Code blocks */
  pre {
    padding: var(--spacing-sm);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
  }
  
  .code-copy-btn {
    opacity: 1;
    padding: 2px 6px;
    font-size: 0.7rem;
  }
  
  /* Tables - Horizontal scroll */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-md) calc(-1 * var(--spacing-md));
    padding: 0 var(--spacing-md);
  }
  
  table {
    min-width: 500px;
    font-size: 0.8rem;
  }
  
  th, td {
    padding: var(--spacing-sm);
  }
  
  /* Lists */
  ul, ol {
    padding-left: var(--spacing-md);
  }
  
  /* Welcome card */
  .welcome-card {
    padding: var(--spacing-lg);
  }
  
  /* Info boxes */
  .info-box {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  /* Footer */
  .footer {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: var(--spacing-md);
  }
  
  /* Logo */
  .header-logo .logo-img {
    height: 22px;
  }
}

/* === Small Mobile (< 480px) === */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .header-logo .logo-text {
    display: none;
  }
  
  .header-logo .logo-icon {
    font-size: 1.25rem;
  }
  
  h1 {
    font-size: 1.35rem;
  }
  
  pre {
    font-size: 0.75rem;
  }
  
  .menu-item {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/* === Large Desktop (> 1440px) === */
@media (min-width: 1440px) {
  :root {
    --sidebar-width: 300px;
    --content-max-width: 1000px;
  }
  
  .main-content {
    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
  }
}

/* === Extra Large Desktop (> 1920px) === */
@media (min-width: 1920px) {
  :root {
    --sidebar-width: 320px;
    --content-max-width: 1100px;
  }
  
  html {
    font-size: 18px;
  }
}

/* === Hover Capability Detection === */
@media (hover: none) {
  /* Touch devices - always show copy button */
  .code-copy-btn {
    opacity: 1;
  }
  
  /* Disable hover effects that might cause issues */
  .menu-item:hover {
    background: transparent;
  }
  
  .menu-item:active {
    background: var(--bg-tertiary);
  }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
  :root {
    --border-color: #ffffff;
    --text-secondary: #e0e0e0;
  }
  
  .menu-item:hover,
  .menu-item.active {
    outline: 2px solid var(--text-primary);
  }
}

/* === Dark Mode System Preference (already dark, but for completeness) === */
@media (prefers-color-scheme: light) {
  /* Could add light theme variables here if needed in future */
  /* Currently using dark theme by default */
}