/* ============================================
   RESPONSIVE DESIGN & MEDIA QUERIES
   ============================================ */

/* Breakpoints:
   Mobile: < 768px
   Tablet: 768px - 1024px
   Desktop: > 1024px
*/

/* ============================================
   MOBILE FIRST (< 768px)
   ============================================ */

@media (max-width: 767px) {
  :root {
    --space-xl: 2rem;     /* 32px instead of 64px */
    --space-2xl: 3rem;    /* 48px instead of 96px */
  }

  /* Typography adjustments */
  h1 {
    font-size: 1.875rem;  /* 30px */
    margin-bottom: var(--space-md);
  }

  h2 {
    font-size: 1.5rem;    /* 24px */
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  h3 {
    font-size: 1.25rem;   /* 20px */
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  body {
    font-size: 0.9375rem; /* 15px for smaller screens */
  }

  /* Container adjustments */
  .container {
    padding: 0 var(--space-md);
  }

  /* Navigation */
  nav {
    gap: var(--space-md);
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) 0;
    width: 100%;
    z-index: var(--z-dropdown);
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    margin: 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-menu a {
    display: block;
    padding: var(--space-md) var(--space-lg);
    border-radius: 0;
    width: 100%;
  }

  .nav-menu a::after {
    display: none;
  }

  .nav-menu a.active {
    background-color: var(--surface);
    border-left: 4px solid var(--primary-color);
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
  }

  /* Hero section */
  .hero {
    min-height: auto;
    padding: var(--space-lg) 0;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-image img, .hero-image svg {
    max-width: 100%;
  }

  /* Grid layouts */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Cards */
  .card {
    padding: var(--space-md);
  }

  .article-card-content {
    padding: var(--space-md);
  }

  /* Article content */
  .article-body {
    font-size: 1rem;
    padding: 0;
  }

  article .intro {
    padding: var(--space-md);
  }

  /* Footer */
  footer {
    padding: var(--space-lg) 0;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  /* Tables */
  table {
    font-size: 0.875rem;
  }

  th, td {
    padding: var(--space-sm) var(--space-md);
  }

  /* CTA Section */
  .cta-section {
    padding: var(--space-lg);
  }

  /* Modal */
  .modal {
    width: 95%;
    padding: var(--space-lg);
  }

  /* Buttons */
  button, .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta button, .hero-cta .btn {
    width: 100%;
  }

  /* Utilities */
  .flex-between {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  .footer-bottom {
    justify-content: flex-start;
  }

  /* Hide on mobile */
  @media (max-width: 480px) {
    h1 {
      font-size: 1.5rem;
    }

    h2 {
      font-size: 1.25rem;
    }

    .hero {
      padding: var(--space-md) 0;
    }

    .container {
      padding: 0 var(--space-sm);
    }

    .hero-image {
      margin-top: var(--space-lg);
    }

    .article-card-image {
      height: 150px;
    }

    .hero h1 {
      font-size: 1.75rem;
    }

    .hero-subtitle {
      font-size: 0.9375rem;
    }

    .accordion-header {
      padding: var(--space-md);
    }
  }
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .container {
    padding: 0 var(--space-lg);
  }
}

/* ============================================
   DESKTOP (> 1024px)
   ============================================ */

@media (min-width: 1025px) {
  /* Desktop optimizations */
  .nav-toggle {
    display: none !important;
  }

  .nav-menu {
    display: flex !important;
  }
}

/* ============================================
   TOUCH DEVICES
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  button, .btn, a {
    padding: 0.875rem 1.5rem;
  }

  .nav-menu a {
    padding: 0.75rem;
  }

  button:hover, .btn:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (min-device-pixel-ratio: 2) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--space-lg) 0;
  }

  h1 {
    font-size: 1.875rem;
    margin-bottom: var(--space-md);
  }

  .hero-image {
    margin-top: var(--space-md);
  }
}

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

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  p {
    widows: 3;
    orphans: 3;
  }

  nav, footer, header {
    display: none;
  }
}

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

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

/* Forced colors / high contrast mode */
@media (forced-colors: active) {
  button, .btn {
    border: 2px solid currentColor;
  }

  .card {
    border: 2px solid currentColor;
  }

  a {
    text-decoration: underline;
  }
}

/* Dark color scheme preference */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-light: #60a5fa;
    --primary-dark: #1e40af;
  }

  .feature-icon {
    background-color: rgba(37, 99, 235, 0.2);
  }

  .alert-info {
    background-color: rgba(59, 130, 246, 0.2);
  }

  .alert-success {
    background-color: rgba(16, 185, 129, 0.2);
  }

  .alert-warning {
    background-color: rgba(245, 158, 11, 0.2);
  }

  .alert-error {
    background-color: rgba(239, 68, 68, 0.2);
  }
}

/* Light color scheme preference */
@media (prefers-color-scheme: light) {
  :root {
    --background: #ffffff;
    --surface: #f8f9fa;
    --text-primary: #1a1a1a;
  }
}

/* ============================================
   SPECIFIC DEVICE FIXES
   ============================================ */

/* iOS fixes */
input[type="text"],
input[type="email"],
textarea,
select {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Android fixes */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 28px;
}

/* ============================================
   CONTAINER QUERIES (for future support)
   ============================================ */

@supports (container-type: inline-size) {
  .card {
    container-type: inline-size;
  }

  @container (max-width: 400px) {
    .card-title {
      font-size: 1.125rem;
    }

    .card-body {
      font-size: 0.875rem;
    }
  }
}