/* Sticky Header Styles */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* Mobile optimization */
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .font-display {
    font-size: 1.875rem;
  }

  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .hidden.sm\:block {
    display: none;
  }
}

/* Image lazy loading enhancement */
img[loading="lazy"] {
  background-color: #f5ede0;
  object-fit: cover;
}

/* Enhanced focus states for accessibility */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid #a86a3d;
  outline-offset: 2px;
}

/* Improved spacing for smaller screens */
@media (max-width: 768px) {
  .gap-16 {
    gap: 2rem;
  }

  .gap-12 {
    gap: 1.5rem;
  }

  .px-16 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ── Global mobile polish ─────────────────────────────────────────── */

/* Prevent any horizontal overflow / scroll on any page */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* Images always scale to fit their container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Minimum touch-target size per WCAG 2.5.5 */
  button,
  a,
  [role="button"] {
    min-height: 44px;
  }
}

/* Pill / filter buttons must stay auto-width at all breakpoints */
@media (max-width: 560px) {
  .filter-btn,
  button[data-filter] {
    width: auto !important;
    flex-shrink: 0;
  }
}
/* ──────────────────────────────────────────────────────────────────── */