/* Quiz error highlight for unanswered questions */
.quiz-required {
  border: 2px solid #ef4444; /* Tailwind red-500 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1rem;
  background: transparent;
}
/* Accessible Skip Link Styles */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: #1AA6A6;
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, pointer-events 0.2s;
}
.skip-link:focus, .skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: none;
  box-shadow: 0 0 0 3px #8BC34A;
}
/* Family Ready Coach - Custom CSS */
/* Based on Style Board Palette A */

.prose h2, .prose h3 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #222;
}
.dark .prose h2, .dark .prose h3 {
  color: #fff;
}
  --small-line: 1.375rem; /* 22px */
  
  /* Shape Language */
  --corner-radius: 12px;
  --corner-radius-large: 20px;
  --shadow-level-1: 0 2px 6px rgba(13, 43, 69, 0.09);
  --shadow-level-2: 0 8px 24px rgba(13, 43, 69, 0.12);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

  /* Focus styles for accessibility */
  *:focus {
    outline: 2px solid #13797A;
    outline-offset: 2px;
  }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Custom button styles */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.btn-outline {
  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.btn-accent {
  @apply bg-accent text-white px-6 py-3 rounded-lg font-medium hover:bg-accent/90 transition-colors focus:ring-2 focus:ring-accent focus:ring-offset-2;
}

/* Strong primary button for high-contrast/hero use */
.btn-primary-strong {
  background: linear-gradient(180deg, #0f7a78 0%, #1aa6a6 100%);
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(26, 166, 166, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary-strong:hover {
  transform: translateY(-2px);
  filter: brightness(0.97);
  box-shadow: 0 14px 40px rgba(26, 166, 166, 0.22);
}
.btn-primary-strong:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(26, 166, 166, 0.12);
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100;
}

.form-textarea {
  @apply w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 resize-vertical;
}

/* Card styles */
.card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-700 p-6;
}

.card-hover {
  @apply card hover:shadow-xl transition-shadow duration-300;
}

/* Typography */
.text-balance {
  text-wrap: balance;
}

/* Loading states */
.loading {
  @apply animate-pulse;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    color: black !important;
    background: white !important;
  }
}

/* Card image helpers (DRY): keeps top of image visible and enables smooth hover) */
.card-image-wrapper {
  height: 12rem; /* matches h-48 */
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* show more from the top so titles are visible */
  transition: transform 0.5s ease;
  display: block;
}

.card-image:hover {
  transform: scale(1.05);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-primary {
    background-color: #000 !important;
  }
  
  .text-primary {
    color: #000 !important;
  }
  
  .border-primary {
    border-color: #000 !important;
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Dark mode transitions */
.dark-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}