
/* Base */
:root {
  --shadow: 0 10px 22px -12px rgba(2,6,23,0.25);
}
* { box-sizing: border-box; }
.prose h2 { @apply text-xl font-semibold mt-6; }
.prose p, .prose li { @apply text-slate-700; }

/* Utility components */
.nav-link { @apply text-slate-700 hover:text-slate-900; }
.nav-link.active { @apply text-slate-900 font-semibold; }
.btn-accent { @apply inline-flex items-center justify-center rounded-md bg-brand-accent text-white px-4 py-2 font-medium hover:brightness-110 transition; }
.btn-outline { @apply inline-flex items-center justify-center rounded-md border border-slate-300 px-4 py-2 text-slate-800 hover:bg-slate-100 transition; }
.btn-light { @apply inline-flex items-center justify-center rounded-md bg-white text-slate-900 px-4 py-2 font-medium border border-white/20 hover:bg-white/90; }
.section-title { @apply text-2xl md:text-3xl font-bold; }
.card { @apply bg-white rounded-lg overflow-hidden shadow-sm border border-slate-200; box-shadow: var(--shadow); }
.card-img { @apply w-full h-56 object-cover; }
.card-title { @apply text-lg font-semibold; }
.card-text { @apply text-slate-700 mt-2; }
.link-accent { @apply text-brand-accent hover:underline; }
.badge { @apply absolute bottom-2 right-2 bg-white/90 text-slate-900 text-xs px-2 py-1 rounded; }
.form-label { @apply block text-sm font-medium text-slate-700; }
.form-input { @apply mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand-accent; }
.faq { @apply bg-white p-4 rounded-lg border border-slate-200; }
.faq > summary { @apply cursor-pointer font-medium; }
.faq[open] { @apply ring-1 ring-brand-accent/20; }

/* Cookie banner */
.cookie-banner {
  position: fixed; inset-block-end: 16px; inset-inline: 16px;
  background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0;
  border-radius: 12px; box-shadow: var(--shadow); z-index: 60; max-width: 520px;
}
.cookie-content { padding: 16px; }

/* Accessibility */
:focus-visible { outline: 2px solid #d97706; outline-offset: 2px; }

/* Small helpers */
.hidden { display: none; }
