/**
 * RESPONSIVE OPTIMIZATION FOR ALL DEVICES
 * Signal Pilot Documentation
 *
 * Optimizes the site for mobile, tablet, and desktop devices
 * Ensures proper display on all screen sizes from 280px to 4K+
 */

/* ============================================
   TABLE RESPONSIVENESS
   ============================================ */

/* Wrap all tables in a scrollable container on small screens */
@media screen and (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }

  /* Allow table cells to wrap text properly on mobile */
  table th,
  table td {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 80px;
    padding: 12px 8px;
    font-size: 14px;
    vertical-align: top;
  }

  /* First column should be sticky on mobile for better UX */
  table th:first-child,
  table td:first-child {
    position: sticky;
    left: 0;
    background: var(--md-default-bg-color, #fff);
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
  }
}

/* Medium screens: allow more breathing room */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  table {
    width: 100%;
    font-size: 15px;
  }

  table th,
  table td {
    padding: 14px 12px;
  }
}

/* ============================================
   IMAGE RESPONSIVENESS
   ============================================ */

/* All images should be responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Content images with proper margins */
.md-content img,
article img {
  margin: 1.5rem auto;
  border-radius: 8px;
}

/* Small screens: reduce image margins */
@media screen and (max-width: 480px) {
  .md-content img,
  article img {
    margin: 1rem auto;
  }
}

/* ============================================
   TYPOGRAPHY RESPONSIVENESS
   ============================================ */

/* Base font size scaling */
@media screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 15px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  h3 {
    font-size: 1.35rem;
  }
}

/* ============================================
   TOUCH TARGETS (Minimum 44x44px)
   ============================================ */

@media (pointer: coarse) {
  /* Buttons */
  button,
  .md-button,
  a.md-button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    font-size: 16px;
  }

  /* Links in content */
  .md-content a {
    padding: 4px 0;
    display: inline-block;
  }

  /* Navigation items */
  .md-nav__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
  }

  /* Form inputs */
  input,
  textarea,
  select {
    min-height: 44px;
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ============================================
   CODE BLOCKS RESPONSIVENESS
   ============================================ */

@media screen and (max-width: 768px) {
  pre,
  code {
    font-size: 13px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre {
    padding: 12px;
    border-radius: 6px;
    margin: 1rem 0;
  }

  /* Inline code */
  code:not(pre code) {
    padding: 2px 6px;
    word-break: break-word;
  }
}

/* ============================================
   CALLOUT BOXES (sp-callout)
   ============================================ */

@media screen and (max-width: 768px) {
  .sp-callout {
    margin: 1.5rem 0 !important;
    padding: 1rem !important;
  }

  .sp-callout__content {
    padding-left: 0 !important;
  }

  .sp-callout__icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem;
  }

  /* Stack icon and content vertically on very small screens */
  @media screen and (max-width: 480px) {
    .sp-callout {
      display: block !important;
    }

    .sp-callout__icon {
      display: block;
      margin-bottom: 0.75rem;
    }
  }
}

/* ============================================
   MERMAID DIAGRAMS
   ============================================ */

.mermaid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
  .mermaid {
    font-size: 12px;
    padding: 1rem 0;
  }

  .mermaid svg {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .mermaid {
    font-size: 10px;
  }
}

/* ============================================
   NAVIGATION RESPONSIVENESS
   ============================================ */

@media screen and (max-width: 768px) {
  /* Ensure mobile menu is accessible */
  .md-header__button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Navigation drawer on mobile */
  .md-nav--primary {
    font-size: 16px;
  }

  .md-nav__item {
    padding: 4px 0;
  }
}

/* ============================================
   CONTENT CONTAINER WIDTH
   ============================================ */

@media screen and (max-width: 480px) {
  .md-content {
    padding: 1rem 0.75rem;
  }

  .md-content__inner {
    padding: 0 0.5rem;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .md-content {
    padding: 1.5rem 1rem;
  }
}

/* ============================================
   LISTS RESPONSIVENESS
   ============================================ */

@media screen and (max-width: 480px) {
  ul, ol {
    padding-left: 1.5rem;
  }

  li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
  }
}

/* ============================================
   HORIZONTAL RULES
   ============================================ */

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 480px) {
  hr {
    margin: 1.5rem 0;
  }
}

/* ============================================
   DETAILS/SUMMARY (Collapsible sections)
   ============================================ */

@media screen and (max-width: 768px) {
  details {
    margin: 1rem 0;
  }

  summary {
    padding: 12px;
    font-size: 16px;
    min-height: 44px;
    cursor: pointer;
  }

  details[open] summary {
    margin-bottom: 1rem;
  }
}

/* ============================================
   PRODUCT CARDS / BADGES
   ============================================ */

@media screen and (max-width: 768px) {
  .skill-badge,
  .product-card {
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }
}

/* Grid layouts should stack on mobile */
@media screen and (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
}

/* ============================================
   SEARCH BAR
   ============================================ */

@media screen and (max-width: 768px) {
  .md-search__input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
  }
}

/* ============================================
   FOOTER
   ============================================ */

@media screen and (max-width: 768px) {
  .md-footer {
    font-size: 14px;
    padding: 1rem 0.75rem;
  }

  .md-footer-meta {
    padding: 1rem 0.75rem;
  }
}

/* ============================================
   HERO SECTIONS
   ============================================ */

@media screen and (max-width: 768px) {
  .md-typeset h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================
   PREVENT HORIZONTAL OVERFLOW
   ============================================ */

body {
  overflow-x: hidden;
}

.md-content,
.md-main,
article {
  overflow-x: hidden;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Enable GPU acceleration for smooth scrolling */
.md-nav,
.md-sidebar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Optimize font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================ */

@media screen and (max-width: 896px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape mode */
  h1, h2, h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .sp-callout {
    margin: 1rem 0 !important;
    padding: 0.75rem !important;
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  table th:first-child,
  table td:first-child {
    background: var(--md-default-bg-color, #1e1e1e);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Remove interactive elements */
  .md-header,
  .md-sidebar,
  .md-nav,
  button,
  .md-button {
    display: none !important;
  }

  /* Expand content to full width */
  .md-content {
    max-width: 100%;
    padding: 0;
  }

  /* Prevent page breaks inside important elements */
  table,
  .sp-callout,
  pre,
  blockquote {
    page-break-inside: avoid;
  }

  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid #4caf50;
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  table {
    border: 2px solid currentColor;
  }

  table th,
  table td {
    border: 1px solid currentColor;
  }
}