/* SME Digital Advisor — shared site styles.
   Loaded as <link rel="stylesheet" href="/assets/site.css"> on every page.
   Pages still inline a tiny tailwind.config block + Tailwind Play CDN script. */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #334155; }

/* Gradients used across hero accents, dots, bands */
.gradient-text {
  background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-bg { background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%); }
.hero-underline { background: linear-gradient(135deg, #0891b2, #22d3ee); height: 6px; border-radius: 3px; }

/* Used in services finds/output bullets */
.check-dot { color: #0891b2; flex-shrink: 0; }

/* Anchor offset under sticky 64px header */
section[id], article[id] { scroll-margin-top: 5rem; }

/* Form controls */
.field-label { display: block; font-size: 0.875rem; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.field-input {
  width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: white; font-family: inherit; font-size: 1rem; color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus {
  outline: none; border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.field-input:invalid:not(:placeholder-shown) { border-color: #dc2626; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Risk page accents */
.risk-block { border-left: 3px solid #e2e8f0; padding-left: 1.5rem; }
.risk-block:hover { border-left-color: #0891b2; }

/* Subtle hover lift for cards */
.card-hover { transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.card-hover:hover { border-color: #0f172a; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.15); }

/* ---- Flashcards: 3D flip on click ---- */
.flashcard {
  perspective: 1200px;
  height: 320px;
  cursor: pointer;
  outline: none;
}
.flashcard:focus-visible .flashcard-inner {
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.4);
  border-radius: 0.75rem;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flashcard-back {
  transform: rotateY(180deg);
}

/* ---- Policy / scenarios prose ---- */
.prose-policy ul, .prose-policy ol {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.prose-policy li {
  margin-top: 0.25rem;
}
.prose-policy table {
  margin-top: 1rem;
  border: 1px solid #e2e8f0;
}
.prose-policy td, .prose-policy th {
  padding: 0.5rem 0.75rem;
  vertical-align: top;
}
.prose-policy p {
  margin-bottom: 0.5rem;
}