/* ── Custom styles supplementing Tailwind ── */

/* Ensure smooth scrolling offset for fixed nav */
section[id] {
  scroll-margin-top: 80px;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #d95230;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background: #f4c0b0;
  color: #3a2218;
}

/* ── Subtle pattern overlay for texture ── */
.hero-section {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d95230' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FDF8F0;
}
::-webkit-scrollbar-thumb {
  background: #f4c0b0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d95230;
}

/* ── Image lazy-load fade ── */
img[loading="lazy"] {
  transition: opacity 0.4s ease;
}

/* ── Print styles ── */
@media print {
  .nav-glass, .mobile-menu, .cta-section { display: none; }
  body { background: #fff; color: #000; }
  .hero-section { background: #fff; }
}