/* Responsive design for Flash API Documentation
 * This file contains styles for responsive behavior across devices
 */

/* Base mobile styles */
@media (max-width: 768px) {
  /* General layout */
  main {
    flex-direction: column !important;
  }
  
  .sidebar {
    width: 100% !important;
    padding: 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid #e1e1e1 !important;
  }
  
  .content {
    padding: 1rem !important;
  }
  
  /* Header mobile styling */
  header {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap !important;
  }
  
  .header-links {
    margin-top: 0.5rem !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
  }
  
  .header-links a {
    margin-left: 0 !important;
    font-size: 0.875rem !important;
  }
  
  /* Buttons and interactive elements */
  .button {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }
  
  div[style="margin: 2rem 0;"] {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Code blocks and examples */
  .code-sample {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    border-radius: 0 !important;
    font-size: 0.875rem !important;
  }
  
  .code-sample pre {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Code tabs (multi-language examples) */
  .code-tabs-header {
    padding: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  
  .code-tab-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  
  /* Diagrams and images */
  .auth-diagram img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Further adjustments for very small screens */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  .logo {
    font-size: 1.25rem !important;
  }
  
  .logo img {
    height: 30px !important;
  }
  
  /* Steps section adjustments */
  .steps li {
    padding-left: 2.5rem !important;
  }
  
  .steps li:before {
    width: 25px !important;
    height: 25px !important;
    font-size: 0.875rem !important;
  }
  
  /* Language badge and copy button positioning */
  .code-language-badge {
    top: 0.25rem !important;
    right: 2.25rem !important;
    font-size: 0.625rem !important;
    padding: 0.125rem 0.5rem !important;
  }
  
  .code-sample .copy-button {
    top: 0.25rem !important;
    right: 0.25rem !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjust sidebar width */
  .sidebar {
    width: 220px !important;
    padding: 1.5rem !important;
  }
  
  .content {
    padding: 1.5rem !important;
  }
  
  /* Main content adjustments */
  #spectaql #docs {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }
  
  body#spectaql.sidebar-collapsed #docs {
    margin-left: var(--sidebar-collapsed-width) !important;
    width: calc(100% - var(--sidebar-collapsed-width)) !important;
  }
  
  /* Position sidebar toggle button appropriately */
  #sidebar-toggle {
    left: calc(220px - 15px) !important;
  }
}

/* Print styles for documentation */
@media print {
  .sidebar, 
  header, 
  footer, 
  .code-language-badge, 
  .code-sample .copy-button,
  #sidebar-toggle,
  .back-to-top {
    display: none !important;
  }
  
  body, 
  main, 
  .content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .content {
    font-size: 11pt !important;
  }
  
  h1 {
    font-size: 18pt !important;
    margin-top: 2cm !important;
  }
  
  h2 {
    font-size: 16pt !important;
    margin-top: 1.5cm !important;
  }
  
  h3 {
    font-size: 14pt !important;
    margin-top: 1cm !important;
  }
  
  .code-sample {
    border: 1px solid #ddd !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  a {
    text-decoration: none !important;
    color: #000 !important;
  }
  
  a:after {
    content: " (" attr(href) ")" !important;
    font-style: italic !important;
    font-size: 80% !important;
  }
  
  /* Break content after major sections */
  h2 {
    page-break-before: always !important;
  }
  
  h2:first-of-type {
    page-break-before: avoid !important;
  }
}

/* Responsive sidebar-specific styles from reset.css */
@media (max-width: 768px) {
  /* Mobile navigation drawer */
  body#spectaql #page {
    padding-top: 60px !important;
  }
  
  body#spectaql #mobile-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    height: 60px !important;
    z-index: 998 !important;
    background-color: white !important;
    border-bottom: 1px solid var(--border-color) !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }
  
  body#spectaql .sidebar-open-button {
    display: block !important;
    padding: 8px !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: var(--text-color) !important;
  }
  
  body#spectaql .drawer-overlay {
    display: none !important;
  }
  
  body#spectaql.drawer-open .drawer-overlay {
    display: block !important;
  }
  
  body#spectaql #sidebar .close-button {
    display: block !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: var(--text-color) !important;
  }
  
  /* Responsive logo */
  body#spectaql #logo img {
    max-width: 120px !important;
  }
}

/* Responsive API reference table styles */
@media (max-width: 768px) {
  #spectaql .doc-row {
    flex-direction: column !important;
  }
  
  #spectaql .doc-copy, 
  #spectaql .doc-examples {
    width: 100% !important;
    padding-right: 0 !important;
  }
  
  /* Make tables scrollable on mobile */
  #spectaql table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  
  /* Adjust code font size */
  #spectaql pre, 
  #spectaql code {
    font-size: 12px !important;
  }
}

/* Collapsible sections for mobile */
@media (max-width: 768px) {
  .mobile-section {
    margin-bottom: 1rem !important;
  }
  
  .mobile-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem !important;
    background-color: #f5f5f5 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
  }
  
  .mobile-section-header:after {
    content: "+" !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
  }
  
  .mobile-section.open .mobile-section-header:after {
    content: "−" !important;
  }
  
  .mobile-section-content {
    display: none !important;
    padding: 0.75rem !important;
    border: 1px solid #f5f5f5 !important;
    border-top: none !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  
  .mobile-section.open .mobile-section-content {
    display: block !important;
  }
}