/* ========================================
   RESPONSIVE LAYOUT
   ========================================= */

/* Container Responsive */
@media (max-width: 1200px) {
  .container {
    max-width: 900px;
  }

  :root {
    --content-width: 900px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 1rem;
  }

  :root {
    --content-width: 100%;
    --gap-section: 2rem;
  }

  body {
    font-size: 15px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }

  p {
    margin-bottom: 1.25em;
  }

  ul, ol {
    margin-left: 1.25em;
    margin-bottom: 1.25em;
  }

  /* Hide TOC on mobile by default */
  .toc {
    display: none;
  }

  /* Make sidebar full width on mobile */
  .post-sidebar {
    width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 14px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.1rem; }

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

  .step-card {
    gap: 1rem;
  }

  .step-card__number {
    min-width: 45px;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  /* Adjust button sizes */
  .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
  }

  /* Table horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
  }

  th, td {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .post-sidebar,
  .hero-buttons,
  .post-cta-section,
  .related-tools {
    display: none;
  }

  .container {
    max-width: 100%;
  }

  a {
    color: var(--primary-color);
  }

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

  p {
    orphans: 3;
    widows: 3;
  }
}