/**
 * Manuel's Crêperie - Custom Styles
 * Most styling is handled by Tailwind CSS via CDN
 */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Custom scrollbar (webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f4;
}

::-webkit-scrollbar-thumb {
  background: #a8a29e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #78716c;
}

/* Animation for mobile menu */
#mobile-menu {
  transition: max-height 0.3s ease-out;
}

/* Gallery item hover effect */
.gallery-item img {
  will-change: transform;
}

/* Form input transition */
input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Button hover lift effect */
button,
a[class*="bg-primary"] {
  transition: all 0.2s ease;
}

/* Honeypot field - hidden from humans, visible to bots */
.form-field-extra {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Print styles */
@media print {
  nav,
  footer,
  .no-print {
    display: none !important;
  }

  main {
    padding: 0 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.875rem;
    color: #666;
  }
}