/* ── Design token variables ──────────────────────────────────────────────
   Space-separated RGB channels, consumed by js/tailwind-config.js color
   entries in the form rgb(var(--color-x) / <alpha-value>) so Tailwind's
   opacity modifiers (bg-primary/20, etc.) keep working. This block is the
   light-mode (default) values — identical to the hex values every page has
   always rendered with, just re-expressed as RGB triplets, so marketing
   pages (which never set data-theme) are visually unchanged. Admin pages
   additionally load admin/css/theme.css, which overrides these under
   [data-theme="dark"]. */
:root {
  --color-background: 247 249 252;
  --color-category-humanities: 245 158 11;
  --color-category-law: 20 184 166;
  --color-category-medicine: 236 72 153;
  --color-category-stem: 99 102 241;
  --color-error: 186 26 26;
  --color-error-container: 255 218 214;
  --color-feature-highlight: 138 168 224;
  --color-inverse-on-surface: 239 241 244;
  --color-inverse-primary: 171 199 255;
  --color-inverse-surface: 45 49 51;
  --color-on-background: 25 28 30;
  --color-on-error: 255 255 255;
  --color-on-error-container: 147 0 10;
  --color-on-primary: 255 255 255;
  --color-on-primary-container: 138 168 224;
  --color-on-primary-fixed: 0 27 63;
  --color-on-primary-fixed-variant: 38 70 121;
  --color-on-secondary: 255 255 255;
  --color-on-secondary-container: 14 116 42;
  --color-on-secondary-fixed: 0 33 6;
  --color-on-secondary-fixed-variant: 0 83 26;
  --color-on-surface: 25 28 30;
  --color-on-surface-variant: 67 71 79;
  --color-on-tertiary: 255 255 255;
  --color-on-tertiary-container: 255 129 131;
  --color-on-tertiary-fixed: 65 0 8;
  --color-on-tertiary-fixed-variant: 131 36 42;
  --color-outline: 116 119 128;
  --color-outline-variant: 196 198 208;
  --color-primary: 0 38 83;
  --color-primary-container: 26 60 110;
  --color-primary-fixed: 215 227 255;
  --color-primary-fixed-dim: 171 199 255;
  --color-secondary: 0 110 37;
  --color-secondary-container: 153 248 157;
  --color-secondary-fixed: 153 248 157;
  --color-secondary-fixed-dim: 126 219 131;
  --color-surface: 247 249 252;
  --color-surface-bright: 247 249 252;
  --color-surface-card: 255 255 255;
  --color-surface-container: 236 238 241;
  --color-surface-container-high: 230 232 235;
  --color-surface-container-highest: 224 227 230;
  --color-surface-container-low: 242 244 247;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-dim: 216 218 221;
  --color-surface-tint: 64 94 146;
  --color-surface-variant: 224 227 230;
  --color-tertiary: 86 0 14;
  --color-tertiary-container: 117 25 33;
  --color-tertiary-fixed: 255 218 217;
  --color-tertiary-fixed-dim: 255 179 178;
}

/* ── Blog post body content ──────────────────────────────────────────────
   The rich-text editor's toolbar (admin/blog-edit.php) produces plain semantic
   HTML via execCommand — <h2>, <blockquote>, <ul>, <a>, <img>, <pre> — with no
   classes attached. Without rules for those bare tags, a published post would
   render with default browser typography instead of the site's design system.
   This block is the single source of truth for that look, applied to BOTH the
   admin editor (#rich-editor) and the public article body (blog-post.php) via
   the shared .blog-prose class, so what you see while writing is what
   publishes. Values mirror the design tokens in js/tailwind-config.js
   (headline-lg, headline-md, body-reading, primary, primary-fixed) rather
   than the Tailwind utilities themselves, since this content is saved as raw
   HTML and can't carry Tailwind classes on every element. */
.blog-prose { font-size: 20px; line-height: 1.7; letter-spacing: -0.01em; color: #191c1e; }
.blog-prose > * { margin: 0 0 1.5rem 0; }
.blog-prose > *:last-child { margin-bottom: 0; }
.blog-prose h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: #191c1e; margin-top: 2.5rem; scroll-margin-top: 8rem; }
.blog-prose h3 { font-size: 20px; line-height: 1.4; font-weight: 600; color: #191c1e; margin-top: 1.5rem; scroll-margin-top: 8rem; }
.blog-prose p { font-size: 20px; line-height: 1.7; letter-spacing: -0.01em; }
.blog-prose blockquote { padding: 1.5rem 1.5rem 1.5rem 2rem; border-left: 4px solid #002653; background: rgba(215, 227, 255, 0.35); border-radius: 0 0.75rem 0.75rem 0; font-size: 20px; font-weight: 600; font-style: italic; color: #002653; }
.blog-prose blockquote > *:last-child { margin-bottom: 0; }
.blog-prose ul, .blog-prose ol { padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.blog-prose ul { list-style-type: disc; }
.blog-prose ol { list-style-type: decimal; }
.blog-prose li::marker { color: #002653; }
.blog-prose strong, .blog-prose b { font-weight: 700; color: #191c1e; }
.blog-prose a { color: #002653; text-decoration: underline; text-underline-offset: 2px; }
.blog-prose a:hover { opacity: 0.75; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 0.75rem; display: block; }
.blog-prose pre { background: #e6e8eb; padding: 1rem 1.25rem; border-radius: 0.5rem; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }

/* The empty-editor placeholder ("Start writing your post...") shouldn't inherit
   blog-prose's 1.7 line-height/negative letter-spacing sizing quirks before
   there's real content — kept plain and muted instead. */
#rich-editor:empty:before { font-size: 20px; letter-spacing: normal; }

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

/* ── Scroll-reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
/* Opacity-only variant for elements that already have their own hover transform (e.g. hover-lift cards),
   so the reveal animation's transform never fights the hover utility's transform. */
.reveal-fade { opacity: 0; transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal-fade.revealed { opacity: 1; }
.reveal-delay-1.revealed { transition-delay: 0.1s; }
.reveal-delay-2.revealed { transition-delay: 0.2s; }
.reveal-delay-3.revealed { transition-delay: 0.3s; }

/* ── Ambient motion ── */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.animate-float { animation: float 7s ease-in-out infinite; }
.animate-float-slow { animation: float 9s ease-in-out infinite; animation-delay: 1.5s; }

@keyframes heroCardIn { from { opacity: 0; } to { opacity: 1; } }
.hero-card-enter { animation: heroCardIn 0.9s ease-out 0.4s both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.revealed, .reveal-fade, .reveal-fade.revealed, .animate-float, .animate-float-slow, .hero-card-enter {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* iPhone (Safari — and Chrome/every other iOS browser, which all use Safari's
   engine) zooms the whole page in when you tap a text box whose text is under
   16px, and doesn't zoom back out, leaving the layout looking broken. On touch
   phones, keep every form field at 16px so there's nothing to zoom for.
   (Deliberately NOT maximum-scale=1 in the viewport: that would also block
   pinch-zoom for people who need it.) */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select { font-size: 16px !important; }
}

/* "Get the app" buttons stay hidden until js/install-app.js decides this device can install */
[data-install-app][hidden] { display: none !important; }