/* Sets a modern font everywhere */
body { /* Targets the whole document body */
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Defines font stack */
} /* End body rule */

/* Accessibility: skip-to-content link */
.skip-link { /* Styles the hidden skip link */
  position: absolute; /* Removes it from normal flow */
  left: -999px; /* Hides it off-screen */
  top: 0; /* Positions it at the top */
  background: #111827; /* Dark background for contrast */
  color: #ffffff; /* White text */
  padding: 10px 12px; /* Clickable size */
  border-radius: 12px; /* Soft rounded corners */
  z-index: 9999; /* Ensures it sits above other UI */
} /* End skip-link */

.skip-link:focus { /* Shows skip link when tabbed to */
  left: 12px; /* Moves it on screen */
  top: 12px; /* Adds spacing */
  outline: 3px solid rgba(96, 165, 250, 0.9); /* Visible focus ring */
  outline-offset: 2px; /* Adds spacing around outline */
} /* End skip-link focus */

/* Better keyboard focus everywhere */
:focus-visible { /* Applies focus ring only when keyboard focusing */
  outline: 3px solid rgba(59, 130, 246, 0.6); /* Blue focus ring */
  outline-offset: 2px; /* Prevents overlap */
} /* End focus-visible */

/* Fallback for 3-line truncation even if Tailwind line-clamp plugin isn't present */
.line-clamp-3 { /* Utility class */
  display: -webkit-box; /* Enables WebKit line clamping */
  -webkit-line-clamp: 3; /* Limits to 3 lines */
  -webkit-box-orient: vertical; /* Required for line clamp */
  overflow: hidden; /* Hides extra text */
} /* End line clamp */

/* Smooth scroll (nice for skip link and top buttons) */
html { /* Targets the root element */
  scroll-behavior: smooth; /* Smooth scroll animation */
} /* End html rule */