/* ==========================================================================
   RESPONSIVE UTILITIES
   Global responsive helpers and print styles
   ========================================================================== */

/* Responsive Container Adjustments */
@media (max-width: 1400px) {
  .container-wide {
    padding: 0 30px;
  }
}

@media (max-width: 1024px) {
  :root {
    --gap: 1rem;
  }
}

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

  .container-wide {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.75rem;
  }
}

/* Responsive Typography */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

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

/* Hide/Show Utilities */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Print Styles */
@media print {
  /* Hide non-essential elements */
  .site-header,
  .site-footer,
  .mobile-menu-toggle,
  .hero-buttons,
  .btn,
  .portfolio-nav,
  .portfolio-slider .slick-dots,
  .post-nav-links,
  .comments-wrapper {
    display: none !important;
  }

  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  .hero-image,
  .portfolio-item img,
  .intro-image,
  .post-hero-image img {
    page-break-inside: avoid;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Remove shadows for print */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* 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;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --accent: #0066cc;
    --text: #000000;
    --bg: #ffffff;
  }

  .btn {
    border-width: 2px;
  }
}

/* Dark Mode Support (Optional - for future implementation) */
@media (prefers-color-scheme: dark) {
  /* Uncomment and customize when ready to implement dark mode
  :root {
    --text: #f0f0f0;
    --bg: #1a1a1a;
    --muted: #a0a0a0;
  }
  */
}