/* ─────────────────────────────────────────────
   Quantums — site.css
   Custom styles to complement Tailwind CDN
   ───────────────────────────────────────────── */

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

/* Font stack */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── Keyframes ── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.animate-float    { animation: float 6s ease-in-out infinite; }
.animate-fade-in  { animation: fadeIn .6s ease-out both; }
.animate-slide-up { animation: slideUp .6s ease-out both; }
.marquee-track    { animation: marquee 30s linear infinite; }

/* ── Navbar scroll effect (controlled by JS) ── */
#navbar.scrolled {
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Prose / rich text ── */
.prose h1, .prose h2, .prose h3 { color: #f9fafb; margin-top: 1.5em; }
.prose p  { color: #bdc2ca; line-height: 1.75; }
.prose a  { color: #38bdf8; }
.prose code { background: #1f2937; padding: 2px 6px; border-radius: 4px; font-size: .875em; }
.prose pre  { background: #111827; padding: 1rem; border-radius: .75rem; overflow-x: auto; }
.prose ul, .prose ol { color: #bdc2ca; padding-left: 1.5rem; }
.prose blockquote { border-left: 3px solid #3b82f6; padding-left: 1rem; color: #9ca1aa; }

/* ── Form focus ring ── */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ── Tables (admin) ── */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Toast notifications ── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 600;
  animation: slideUp .3s ease-out;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.toast-success { background: #064e3b; color: #34d399; border: 1px solid #065f46; }
.toast-error   { background: #450a0a; color: #f87171; border: 1px solid #7f1d1d; }

/* ── Line clamp ── */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Code / mono ── */
code.block-code {
  display: block;
  background: #111827;
  padding: 1rem;
  border-radius: .5rem;
  color: #67e8f9;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .85rem;
  overflow-x: auto;
}

/* ── CMS page output ── */
.cms-body img { max-width: 100%; border-radius: .5rem; }
.cms-body table { width: 100%; border-collapse: collapse; }
.cms-body td, .cms-body th { padding: .5rem .75rem; border: 1px solid #374151; color: #e0e3e7; }

/* ── Print ── */
@media print {
  #navbar, footer { display: none !important; }
  body { background: white; color: black; }
}

/* ── Dark-mode readability: gray text lifted 1/3 toward white ──
   Tailwind gray-400 #9ca3af → #bdc2ca
   Tailwind gray-500 #6b7280 → #9ca1aa
   Tailwind gray-600 #4b5563 → #878e97
   Tailwind gray-300 #d1d5db → #e0e3e7
   !important needed because Tailwind Play CDN injects its <style> block
   dynamically and ends up later in the cascade than this <link> sheet. */
.text-gray-300 { color: #e0e3e7 !important; }
.text-gray-400 { color: #bdc2ca !important; }
.text-gray-500 { color: #9ca1aa !important; }
.text-gray-600 { color: #878e97 !important; }
.hover\:text-gray-400:hover { color: #bdc2ca !important; }
.hover\:text-gray-300:hover { color: #e0e3e7 !important; }