/**
 * ============================================================================
 * Business Questionnaire - Styles
 * ============================================================================
 *
 * Custom styles for the Business Questionnaire application.
 * Works alongside Tailwind CSS for utility-first styling.
 *
 * Note: Colors and shadows are defined in Tailwind config (inline in HTML).
 * This file handles interactive states, animations, and custom components
 * that require more complex CSS than Tailwind utilities provide.
 *
 * ============================================================================
 */

/* ==========================================
   Design Tokens (CSS Custom Properties)
   ========================================== */
:root {
  /* Transitions */
  --transition-fast: 100ms ease-out;
  --transition-base: 150ms ease-out;
  --transition-slow: 200ms ease-out;

  /* Focus ring */
  --focus-ring-color: rgba(29, 78, 216, 0.1);
  --focus-ring-color-strong: rgba(29, 78, 216, 0.3);

  /* Colors (reference Tailwind config values) */
  --color-accent: #1d4ed8;
  --color-accent-hover: #1e40af;
  --color-text-primary: #19213d;
  --color-surface-sunken: #f0f3f9;
  --color-scrollbar-thumb: #c7d0e0;
  --color-scrollbar-thumb-hover: #a8b5c9;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 30px;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.anim-fade-in-up { animation: fade-in-up 0.4s ease-out both; }
.anim-scale-in { animation: scale-in 0.35s ease-out both; }

/* ==========================================
   Base Element Styles
   ========================================== */

textarea {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-surface-sunken);
}

textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

textarea.autosave-input {
  overflow-y: hidden;
  resize: none;
  min-height: 100px;
}

/* Textarea scrollbar (Webkit) */
textarea::-webkit-scrollbar {
  width: 6px;
}
textarea::-webkit-scrollbar-track {
  background: var(--color-surface-sunken);
  border-radius: 3px;
}
textarea::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 3px;
}
textarea::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* ==========================================
   Component Styles
   ========================================== */

button[type="submit"] {
  transition: transform var(--transition-fast), background-color var(--transition-base), box-shadow var(--transition-base);
}
button[type="submit"]:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}
button[type="submit"]:active:not(:disabled) {
  transform: scale(0.98);
}
button[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color-strong);
}

/* Navigation link */
.nav-link {
  transition: color var(--transition-base);
}
.nav-link:hover {
  color: var(--color-text-primary);
}

/* Progress dot */
.progress-dot {
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.nav-link:hover .progress-dot {
  background-color: var(--color-accent);
  transform: scale(1.3);
}

/* Save indicator */
.save-indicator {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.save-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Logo container (reusable) */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(25, 33, 61, 0.03), 0 2px 6px rgba(25, 33, 61, 0.02);
}

/* ==========================================
   Submission View
   ========================================== */

.submission-markdown,
.submission-markdown * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.submission-markdown h1,
.submission-markdown h2,
.submission-markdown h3 {
  line-height: 1.25;
}

.submission-markdown ul {
  margin-top: 0.5rem;
}