/* Responsive Styles */

/* Mobile First Approach - Base styles are for mobile */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: var(--container-sm);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
  
  /* Typography adjustments */
  body {
    font-size: 1.0625rem; /* 17px */
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Mobile-specific utilities */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  /* Stack elements on mobile */
  .stack-mobile {
    flex-direction: column !important;
  }
  
  /* Full width on mobile */
  .full-width-mobile {
    width: 100% !important;
  }
  
  /* Text alignment on mobile */
  .text-center-mobile {
    text-align: center !important;
  }
}

/* Tablet and up */
@media (min-width: 768px) {
  .hide-tablet {
    display: none !important;
  }
  
  .show-tablet {
    display: block !important;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
  
  .show-desktop {
    display: block !important;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .header,
  .footer,
  .cookie-banner,
  .cookie-modal,
  .mobile-menu-toggle,
  .mobile-nav {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
}

/* Reduced motion for accessibility */
@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) {
  .btn {
    border-width: 3px;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    border-width: 3px;
  }
}

/* Dark mode support (optional, for future enhancement) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here if needed */
}