/* Custom styles beyond Tailwind */

html {
  scroll-behavior: smooth;
}

/* Brand colour fallbacks — ensures custom colours render even if Tailwind CDN
   doesn't process the config (e.g. cold starts, CDN race conditions). */
.bg-brand-bg           { background-color: #FAFAF8; }
.bg-brand-surface      { background-color: #FFFFFF; }
.bg-brand-surface-alt  { background-color: #F5F4F0; }
.bg-brand-accent       { background-color: #1B6B6B; }
.bg-brand-accent-light { background-color: #E8F5F5; }
.bg-brand-accent-hover { background-color: #155A5A; }
.bg-brand-warm         { background-color: #C4842D; }
.bg-brand-warm-light   { background-color: #FFF8F0; }
.bg-brand-success      { background-color: #2D7D46; }
.bg-brand-success-light{ background-color: #E8F5EE; }
.bg-brand-error        { background-color: #C53030; }
.bg-brand-error-light  { background-color: #FFF5F5; }
.bg-brand-border       { background-color: #E8E6E1; }

.text-brand-text       { color: #1A1A18; }
.text-brand-secondary  { color: #6B6860; }
.text-brand-tertiary   { color: #9C9890; }
.text-brand-accent     { color: #1B6B6B; }
.text-brand-warm       { color: #C4842D; }
.text-brand-success    { color: #2D7D46; }
.text-brand-error      { color: #C53030; }

.border-brand-border   { border-color: #E8E6E1; }
.border-brand-accent   { border-color: #1B6B6B; }
.border-brand-warm     { border-color: #C4842D; }
.border-brand-error    { border-color: #C53030; }

.hover\:bg-brand-accent-hover:hover { background-color: #155A5A; }
.hover\:bg-brand-accent-light:hover  { background-color: #E8F5F5; }
.hover\:text-brand-accent:hover      { color: #1B6B6B; }
.hover\:border-brand-accent:hover    { border-color: #1B6B6B; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cookie banner slide-up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s ease forwards;
}

/* Assessment step transitions */
.step-enter {
  animation: stepIn 0.25s ease forwards;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 600px;
}

/* Guide article typography */
.guide-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #1A1A18;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.guide-body h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1A1A18;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.guide-body p {
  color: #6B6860;
  line-height: 1.72;
  margin-bottom: 1rem;
}

.guide-body ul, .guide-body ol {
  color: #6B6860;
  line-height: 1.72;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.guide-body li {
  margin-bottom: 0.4rem;
}

.guide-body ul li {
  list-style-type: disc;
}

.guide-body ol li {
  list-style-type: decimal;
}

.guide-body a:not([class*="bg-"]) {
  color: #1B6B6B;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-body a:not([class*="bg-"]):hover {
  color: #155A5A;
}

.guide-body strong {
  color: #1A1A18;
  font-weight: 600;
}

.guide-body .callout {
  background: #E8F5F5;
  border-left: 3px solid #1B6B6B;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
}

.guide-body .callout p {
  margin: 0;
  color: #1A1A18;
}

.guide-body .warning-callout {
  background: #FFF3EB;
  border-left: 3px solid #D4963C;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
}

.guide-body .warning-callout p {
  margin: 0;
  color: #1A1A18;
}

/* Assessment option buttons */
.option-btn {
  transition: all 0.15s ease;
}

.option-btn:hover {
  border-color: #1B6B6B;
  background-color: #E8F5F5;
}

.option-btn.selected {
  border-color: #1B6B6B;
  background-color: #E8F5F5;
  color: #1B6B6B;
}

/* Progress bar */
.progress-fill {
  transition: width 0.4s ease;
}

/* Checklist items */
.checklist-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid #E8E6E1;
}

.checklist-item:last-child {
  border-bottom: none;
}