/**
 * Focus UI Docs - Mobile Responsive Overrides
 * Fixes for mobile devices (< 768px)
 */

/* Mobile-first base styles */
@media (max-width: 767px) {
  /* Layout */
  .docs-content {
    margin-left: 0 !important;
    margin-top: 40px !important;
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .docs-layout {
    overflow-x: hidden;
  }

  /* Hero Section */
  .hero-section {
    padding: 1.5rem !important;
    margin: 0.5rem 0 !important;
  }

  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Typography */
  .docs-content > h1 {
    font-size: 1.75rem !important;
  }

  .docs-content > h2 {
    font-size: 1.5rem !important;
  }

  .docs-content > h3 {
    font-size: 1.25rem !important;
  }

  /* Component Grid */
  .component-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Card Grid */
  .focus-card-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Examples */
  .docs-example {
    margin: 1rem 0 !important;
    overflow: hidden;
  }

  .docs-preview {
    padding: 1rem !important;
    overflow-x: auto;
  }

  /* Code Blocks */
  .docs-code {
    position: relative;
    overflow-x: auto;
  }

  .docs-code pre {
    font-size: 0.75rem !important;
    padding: 0.75rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .docs-code-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  .docs-code-copy {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Props Table */
  .docs-props-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .docs-props-table table {
    min-width: 500px;
  }

  /* Options */
  .docs-options {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Sidebar */
  .docs-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px;
    max-width: 85vw;
    z-index: 1000 !important;
    background: var(--focus-color-surface) !important;
    top: 0 !important;
    padding-top: 50px;
  }

  .docs-sidebar.focus-sidebar-open {
    transform: translateX(0) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  }

  .docs-sidebar .focus-sidebar-section h4 {
    background: transparent !important;
    background-color: transparent !important;
  }

  .docs-sidebar .focus-sidebar-section {
    background: transparent !important;
  }

  .docs-sidebar * {
    background-color: var(--focus-color-surface) !important;
  }

  .docs-sidebar .focus-sidebar-item {
    background-color: transparent !important;
  }

  .docs-sidebar .focus-sidebar-item:hover {
    background-color: var(--focus-color-hover) !important;
  }

  /* Sidebar backdrop */
  .docs-sidebar.focus-sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* Mobile toggle button - ensure it's visible */
  .focus-sidebar-mobile-toggle {
    display: flex !important;
    position: relative;
    z-index: 900;
  }

  /* TOC */
  .docs-toc {
    display: none;
  }

  /* Buttons in hero */
  .hero-section .focus-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-section .focus-d-flex {
    flex-direction: column !important;
  }

  /* Buttons - prevent overflow */
  .focus-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: normal !important;
    min-height: 2.5rem;
  }

  .focus-btn-sm {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  /* Navbar brand - prevent wrapping */
  .focus-navbar-brand {
    white-space: nowrap !important;
    overflow: hidden;
  }

  .focus-navbar-brand a {
    font-size: 1rem !important;
  }

  /* Hide some nav links on very small screens */
  @media (max-width: 400px) {
    .focus-navbar-brand a:not(:first-child) {
      display: none !important;
    }
  }

  /* Fix inline flex layouts in component examples */
  .docs-preview > div[style],
  .docs-preview div[style*="display"],
  .docs-preview div[style*="flex"] {
    flex-wrap: wrap !important;
  }

  /* Force all direct children divs with inline styles to be responsive */
  .docs-preview > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .docs-preview > div[style*="display: flex"] > div {
    width: 100% !important;
  }

  /* Alternative: target by gap value */
  .docs-preview div[style*="gap: 2rem"],
  .docs-preview div[style*="gap: 1.5rem"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}

/* Tablet adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .docs-content {
    padding: 1.5rem !important;
  }

  .hero-title {
    font-size: 2.25rem !important;
  }

  .hero-subtitle {
    font-size: 1.125rem !important;
  }

  .component-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}