/* Custom styles that complement Tailwind */

/* Smooth focus visible outlines */
*:focus-visible {
  outline: 2px solid #d44a24;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background: #d44a24;
  color: white;
}

/* Subtle page transition */
body {
  opacity: 1;
}

/* Ensure hero doesn't get cut off by fixed nav */
#hero {
  padding-top: 0;
}

/* Improve image loading */
img {
  max-width: 100%;
  height: auto;
}

/* Print styles */
@media print {
  #navbar, #mobile-menu, .reveal { display: none; }
  body { color: #000; background: #fff; }
}

/* Extra small screens */
@media (max-width: 360px) {
  .font-serif {
    font-size: 1.75rem;
  }
}