/**
 * Main CSS - Migrated from inline styles for CSP compliance
 * These styles complement Tailwind CSS
 */

/* ============================================
   BASE STYLES
   ============================================ */

body {
  font-family: 'Poppins', sans-serif;
}

/* ============================================
   ACCESSIBILITY STYLES
   (from layouts/main.ejs)
   ============================================ */

/* Text resize support - setting font-size on html scales all rem-based sizes (Tailwind uses rem) */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

html.text-large {
  font-size: 20px;
}

html.text-xlarge {
  font-size: 24px;
}

/* Focus styles for accessibility */
a:focus,
button:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Form inputs use Tailwind ring classes, so we remove the default outline */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* ============================================
   SKIP LINK
   (for screen reader accessibility)
   ============================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}