/* Responsive Styles - Mobile First */

/*
 * Mobile Touch Target Guidelines:
 * - Minimum 44x44px for all interactive elements (WCAG 2.1 Level AAA)
 * - Preferred 48x48px for optimal thumb accessibility
 * - Adequate spacing between touch targets (minimum 8px)
 * - Use padding to expand clickable area without affecting visual size
 */

/* Mobile adjustments */
@media (max-width: 48rem) {
  .section-title {
    font-size: var(--font-size-2xl);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }

  .solution-card {
    min-height: auto;
    padding: var(--space-8);
  }

  .solution-title {
    font-size: var(--font-size-xl);
  }

  .solution-description {
    font-size: var(--font-size-lg);
  }

  .solution-benefits li {
    font-size: var(--font-size-base);
  }
}

/* Small tablets (576px and up) */
@media (min-width: 36rem) {
  .footer-bottom {
    flex-wrap: nowrap;
  }
}

/* Tablets (768px and up) */
@media (min-width: 48rem) {
  .scenario-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large tablets (900px and up) */
@media (min-width: 56.25rem) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop (1024px and up) */
@media (min-width: 64rem) {
  .footer-columns {
    grid-template-columns: auto repeat(5, 1fr);
  }
}

/* Large Desktop (1440px and up) */
@media (min-width: 90rem) {
  :root {
    --max-width: 1400px;
  }

  .section-title {
    font-size: 4rem;
  }

  .solution-title {
    font-size: 1.75rem;
  }
}

/* Image modal responsive */
@media (max-width: 48rem) {
  .image-modal-content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: var(--space-2);
    border-radius: 0;
    border: none;
  }

  .image-modal-close {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    font-size: var(--font-size-xl);
  }

  .nav-prev {
    inset-inline-start: var(--space-1);
  }

  .nav-next {
    inset-inline-end: var(--space-1);
  }

  .zoom-controls {
    bottom: var(--space-2);
  }

  .image-indicator {
    top: var(--space-1);
  }
}

/* Safe area insets for modern phones with notches/home indicators */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nav {
    padding-top: env(safe-area-inset-top);
  }

  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Print Styles */
@media print {
  /* !important is intentionally used here to ensure these elements are hidden when printing,
       overriding any inline styles or higher specificity selectors that might interfere */
  .nav,
  .sidebar,
  .sidebar-overlay,
  .footer-social,
  .hamburger-btn,
  .search-btn,
  .search-modal,
  .image-modal {
    display: none !important;
  }

  body {
    background-color: white;
    color: black;
  }

  /* Prevent short line fragments across page breaks */
  p,
  li {
    orphans: 3;
    widows: 3;
  }

  .hero {
    margin-top: 0;
    background: white !important;
    color: black !important;
  }

  .section-title {
    break-after: avoid;
  }

  .solution-card {
    break-inside: avoid;
  }

  /* Display URLs for external links */
  a[href^='http']:not(.btn):not(.hero-cta-primary)::after {
    content: ' (' attr(href) ')';
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    word-break: break-all;
  }

  /* Don't print URLs for internal links */
  a[href^='#']::after,
  a[href^='/']::after {
    content: '';
  }

  /* Optimize images for print */
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }

  /* Better page breaks */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
  }

  ul,
  ol,
  dl {
    break-before: avoid;
  }

  /* Hide docs sidebars and simplify layout for print */
  .docs-sidebar,
  .toc-sidebar {
    display: none !important;
  }

  .docs-layout {
    grid-template-columns: 1fr !important;
  }

  .article-container {
    grid-template-columns: 1fr !important;
  }

  /* Expand collapsed sections for print */
  details {
    display: block !important;
  }

  details summary {
    display: none;
  }

  details[open] > *:not(summary) {
    display: block !important;
  }
}

/* Reduced motion - Disable View Transitions animations */
/* (Core reduced-motion rules for transitions/animations are in main.css) */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}