/* ==========================================================================
   Responsive Styles & Media Queries
   ========================================================================== */

/* This file contains additional responsive utilities and overrides.
   Most responsive styles are included in style.css using a mobile-first approach.
   This file can be used for additional responsive adjustments as needed. */

/* Mobile devices (default - up to 640px) */
/* Styles are mobile-first by default in style.css */

/* Small devices and up (640px - landscape phones) */
@media (min-width: 640px) {
  /* Additional responsive utilities can be added here */
}

/* Medium devices and up (768px - tablets) */
@media (min-width: 768px) {
  /* Additional responsive utilities can be added here */
}

/* Large devices and up (1024px - desktops) */
@media (min-width: 1024px) {
  /* Additional responsive utilities can be added here */
}

/* Extra large devices and up (1280px - large desktops) */
@media (min-width: 1280px) {
  /* Additional responsive utilities can be added here */
}

/* Ultra wide screens (1536px+) */
@media (min-width: 1536px) {
  /* Prevent content from getting too wide on ultra-wide screens */
  :root {
    --container-max-width: 1400px;
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
  }

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

  a {
    text-decoration: underline;
  }

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