/* WebLynk Custom CSS */
:root {
  --brand-50: #f0f9ff;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --shadow-soft: 0 4px 20px -4px rgba(2, 132, 199, 0.15);
}

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #38bdf8, #0284c7); border-radius: 10px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0ea5e9, #0369a1); }

.prose-weblynk { font-size: 1.0625rem; line-height: 1.75; color: #334155; }
.prose-weblynk h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; scroll-margin-top: 6rem; }
.prose-weblynk h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.375rem; font-weight: 700; color: #0f172a; scroll-margin-top: 6rem; }
.prose-weblynk p { margin-bottom: 1.25rem; }
.prose-weblynk a { color: #0284c7; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(2, 132, 199, 0.4); transition: all 0.2s; }
.prose-weblynk a:hover { color: #0369a1; text-decoration-color: #0369a1; }
.prose-weblynk ul, .prose-weblynk ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.prose-weblynk ul li { list-style: none; position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.prose-weblynk ul li::before { content: "✔"; position: absolute; left: 0; color: #0ea5e9; font-weight: bold; }
.prose-weblynk ol li { list-style: decimal; margin-bottom: 0.5rem; }
.prose-weblynk blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid #0ea5e9; background: #f0f9ff; border-radius: 0.75rem; color: #075985; font-style: italic; }
.prose-weblynk code { padding: 0.15rem 0.4rem; background: #f1f5f9; border-radius: 0.375rem; font-size: 0.875em; color: #0369a1; font-family: ui-monospace, "SF Mono", Monaco, monospace; }
.prose-weblynk pre { margin: 1.5rem 0; padding: 1.25rem; background: #0f172a; color: #e2e8f0; border-radius: 1rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.7; }
.prose-weblynk pre code { background: transparent; color: inherit; padding: 0; }
.prose-weblynk img { margin: 1.5rem 0; border-radius: 1rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); }
.prose-weblynk hr { margin: 2.5rem 0; border: 0; border-top: 1px dashed #cbd5e1; }
.prose-weblynk strong { color: #0f172a; font-weight: 700; }
.prose-weblynk table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.prose-weblynk th, .prose-weblynk td { border: 1px solid #e2e8f0; padding: 10px 14px; text-align: left; }
.prose-weblynk th { background: #f8fafc; font-weight: 600; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.line-clamp-1, .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.card-hover { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

@media print {
  header, footer, aside, .no-print { display: none !important; }
  body { background: white; }
  .prose-weblynk { font-size: 11pt; }
}