/* Responsive/mobile design styles */

/* Tablet (768px to 1023px) */
@media (max-width: 1023px) {
  :root {
    --container-padding: 1.5rem;
    --font-size-base: 15px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);
  }

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

  .main-content {
    padding: var(--spacing-xl) 0;
  }

  nav {
    gap: var(--spacing-md);
  }

  nav a {
    padding: var(--spacing-sm);
    font-size: 0.95rem;
  }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
  :root {
    --container-padding: 1rem;
    --font-size-base: 14px;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
  }

  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-md);
  }

  h2 {
    font-size: 1.25rem;
    margin-top: var(--spacing-xl);
  }

  h3 {
    font-size: 1.1rem;
    margin-top: var(--spacing-lg);
  }

  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /* Header mobile */
  header {
    height: auto;
    padding: var(--spacing-md) 0;
  }

  header .container {
    padding: var(--spacing-md) var(--container-padding);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
  }

  .logo {
    font-size: 1.25rem;
    flex: 1;
  }

  /* Navigation mobile */
  nav {
    gap: 0;
    flex-wrap: wrap;
    order: 3;
    width: 100%;
  }

  nav a {
    flex: 1;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
  }

  nav a:last-child {
    border-bottom: none;
  }

  /* Main content */
  .main-content {
    padding: var(--spacing-lg) 0;
  }

  /* Posts grid to list */
  .posts-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Post card adjustments */
  .post-card {
    padding: var(--spacing-md);
  }

  .post-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  /* Article header */
  .article-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
  }

  .article-header h1 {
    margin-bottom: var(--spacing-md);
  }

  .article-meta {
    gap: var(--spacing-md);
    font-size: 13px;
  }

  /* Tags */
  .tags {
    margin: var(--spacing-md) 0;
  }

  .tag {
    padding: var(--spacing-xs) 8px;
    font-size: 12px;
  }

  /* Navigation buttons */
  .navigation {
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    padding-top: var(--spacing-lg);
  }

  .nav-previous,
  .nav-next {
    width: 100%;
  }

  .nav-previous a,
  .nav-next a {
    padding: var(--spacing-md);
  }

  /* Footer */
  footer .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-text {
    width: 100%;
  }

  .footer-links {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Buttons */
  button,
  .button {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* Forms */
  input,
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Back to top button */
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 1rem;
  }

  /* Lists */
  ul,
  ol {
    margin-left: var(--spacing-lg);
  }

  /* Code blocks */
  pre {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  code {
    font-size: 0.9em;
  }

  /* Images */
  img {
    margin: var(--spacing-md) 0;
  }

  /* Blockquote */
  blockquote {
    padding-left: var(--spacing-lg);
    margin: var(--spacing-md) 0;
  }
}

/* Extra small devices (below 480px) */
@media (max-width: 479px) {
  :root {
    --container-padding: 0.75rem;
    --font-size-base: 13px;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --spacing-2xl: 1.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  .logo {
    font-size: 1rem;
  }

  .post-card {
    padding: var(--spacing-sm);
  }

  /* Reduce touch target padding slightly */
  button,
  .button {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;
  }

  /* Article meta on new lines */
  .article-meta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* Print styles */
@media print {
  header,
  footer,
  nav,
  .navigation {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
  }

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

  p {
    orphans: 2;
    widows: 2;
  }
}