/* Custom component styles (compatible with Tailwind CDN) */
:root {
  --brand-blue: #0056A8;
  --brand-accent: #F8B400;
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600;
  color: #fff; background-color: var(--brand-blue);
}
.btn-primary:hover { background-color: #00417d; }
.btn-primary:focus { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.btn-accent {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600;
  color: #111827; background-color: var(--brand-accent);
}
.btn-accent:hover { background-color: #e5a300; }
.btn-accent:focus { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.text-brand { color: var(--brand-blue); }
.bg-brand { background-color: var(--brand-blue); }
.bg-accent { background-color: var(--brand-accent); }
.badge { display: inline-block; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; background-color: #eff6ff; color: var(--brand-blue); }
.card { border-radius: 0.75rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.04); background-color: #fff; }
.section { padding-top: 4rem; padding-bottom: 4rem; }
.container-narrow { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Custom tweaks on top of Tailwind CDN */
:root {
  --brand-blue: #0056A8;
  --brand-accent: #F8B400;
}
.btn-primary { @apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-semibold text-white bg-[color:var(--brand-blue)] hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--brand-blue)]; }
.btn-accent { @apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-semibold text-gray-900 bg-[color:var(--brand-accent)] hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--brand-accent)]; }
.text-brand { color: var(--brand-blue); }
.bg-brand { background-color: var(--brand-blue); }
.bg-accent { background-color: var(--brand-accent); }
.badge { @apply inline-block rounded-full px-3 py-1 text-sm font-medium bg-blue-50 text-[color:var(--brand-blue)]; }
.card { @apply rounded-xl border border-slate-200 shadow-sm bg-white; }
.section { @apply py-16 md:py-24; }
.container-narrow { @apply max-w-5xl mx-auto px-4; }

/* Utility for visually-hidden text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }