/* ===========================================================================
   Midnight — daylight theme override
   ---------------------------------------------------------------------------
   The 99 content pages (blog, games, vs, for, ideas, privacy, terms, support)
   were built against a dark Tailwind palette: `bg-void`, `text-cream/50`,
   `border-white/5`, purple + fuchsia accents. Re-authoring every page was not
   the job; flipping the palette was.

   This file is loaded AFTER index.tailwind.css and redefines exactly the
   utilities those pages actually use — 84 of them, enumerated from the markup,
   not guessed — remapping each to the 5.0 app's daylight palette. Equal
   specificity, later source order, so these win.

   Read it as a translation table: dark surface → warm ivory, light text →
   plum ink, purple/fuchsia/teal accent → Lumi yellow + star blue.
   =========================================================================== */

:root {
  --mn-canvas: #FCF8F5;
  --mn-surface: #FFFFFF;
  --mn-ink: #241E38;
  --mn-lumi: #F2C14B;
  --mn-star: #7FB2D4;
  /* Lumi yellow is a fill, never a text colour on cream — it fails contrast.
     Accent *text* uses the star blue taken down to a readable depth. */
  --mn-accent-text: #31648C;
  --mn-accent-text-strong: #24506F;
}

/* ── typography: the site used Bricolage/Quattrocento; the app is rounded ── */
.font-display, .font-body, .font-rounded,
body.font-rounded, body.font-body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif !important;
}
.font-display { font-weight: 800; letter-spacing: -0.032em; }

/* ── page ground ─────────────────────────────────────────────────────────── */
body { background-color: var(--mn-canvas) !important; color: var(--mn-ink) !important; }
.bg-void      { background-color: var(--mn-canvas) !important; }
.bg-void\/80  { background-color: rgba(252, 248, 245, 0.86) !important; }
.bg-voidsecondary { background-color: #F7F2ED !important; }

/* ── surfaces: translucent-white panels become real white cards ─────────── */
.bg-white\/5, .bg-white\/8, .bg-white\/10 {
  background-color: var(--mn-surface) !important;
  box-shadow: 0 0 0 1px rgba(36, 30, 56, 0.05), 0 2px 4px rgba(36, 30, 56, 0.04);
}
.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover { background-color: #F7F2ED !important; }
.bg-cream\/15 { background-color: rgba(36, 30, 56, 0.05) !important; }
.bg-cream\/20 { background-color: rgba(36, 30, 56, 0.07) !important; }

/* A white button on a cream page is invisible. These pairs were the page's
   primary CTA (white pill, dark label) — invert them to the ink pill. */
.bg-white          { background-color: var(--mn-ink) !important; }
.hover\:bg-white\/90:hover { background-color: #171227 !important; }
.text-void         { color: #FFFFFF !important; }

/* ── body text ramp ──────────────────────────────────────────────────────── */
.text-cream        { color: var(--mn-ink) !important; }
.text-cream\/90    { color: rgba(36, 30, 56, 0.92) !important; }
.text-cream\/80    { color: rgba(36, 30, 56, 0.82) !important; }
.text-cream\/70    { color: rgba(36, 30, 56, 0.74) !important; }
.text-cream\/60    { color: rgba(36, 30, 56, 0.68) !important; }
.text-cream\/50    { color: rgba(36, 30, 56, 0.62) !important; }
.text-cream\/40    { color: rgba(36, 30, 56, 0.54) !important; }
.text-cream\/30    { color: rgba(36, 30, 56, 0.45) !important; }
.text-cream\/25    { color: rgba(36, 30, 56, 0.42) !important; }
.hover\:text-cream:hover { color: var(--mn-ink) !important; }

.text-white        { color: var(--mn-ink) !important; }
.text-white\/85    { color: rgba(36, 30, 56, 0.88) !important; }
.text-white\/80    { color: rgba(36, 30, 56, 0.82) !important; }
.text-white\/70    { color: rgba(36, 30, 56, 0.74) !important; }
.text-white\/60    { color: rgba(36, 30, 56, 0.68) !important; }
.text-white\/50    { color: rgba(36, 30, 56, 0.62) !important; }
.text-white\/45    { color: rgba(36, 30, 56, 0.58) !important; }
.text-white\/40    { color: rgba(36, 30, 56, 0.54) !important; }
.text-white\/35    { color: rgba(36, 30, 56, 0.48) !important; }
.text-white\/30    { color: rgba(36, 30, 56, 0.45) !important; }
.text-white\/20    { color: rgba(36, 30, 56, 0.34) !important; }
.text-white\/15    { color: rgba(36, 30, 56, 0.28) !important; }
.hover\:text-white:hover { color: var(--mn-ink) !important; }
.group:hover .group-hover\:text-white\/70 { color: rgba(36, 30, 56, 0.74) !important; }

/* ── accents: purple / fuchsia / violet / teal → star blue, Lumi yellow ─── */
.text-purple-300, .text-purple-400, .text-purple-500,
.text-violet, .text-violet-glow, .text-teal, .text-teal-glow {
  color: var(--mn-accent-text) !important;
}
.text-purple-300\/80 { color: rgba(49, 100, 140, 0.82) !important; }
.hover\:text-purple-200:hover, .hover\:text-purple-300:hover,
.hover\:text-violet-glow:hover { color: var(--mn-accent-text-strong) !important; }
.group:hover .group-hover\:text-purple-300 { color: var(--mn-accent-text-strong) !important; }

.bg-violet, .bg-teal { background-color: var(--mn-star) !important; }
.bg-violet\/10, .bg-violet\/20, .bg-violet\/40,
.bg-teal\/10, .bg-teal\/15, .bg-teal\/20 { background-color: #DCEAF5 !important; }
.bg-purple-600\/10, .bg-purple-600\/15 { background-color: #FCEFD2 !important; }
.bg-fuchsia-600\/8, .bg-fuchsia-600\/10 { background-color: #FBE3DD !important; }
.hover\:bg-purple-500\/20:hover { background-color: #FCEFD2 !important; }

/* ── borders: hairlines flip from light-on-dark to dark-on-light ────────── */
.border-white\/5  { border-color: rgba(36, 30, 56, 0.07) !important; }
.border-white\/8  { border-color: rgba(36, 30, 56, 0.09) !important; }
.border-white\/10 { border-color: rgba(36, 30, 56, 0.10) !important; }
.border-white\/15 { border-color: rgba(36, 30, 56, 0.13) !important; }
.border-white\/20 { border-color: rgba(36, 30, 56, 0.16) !important; }
.border-purple-500\/20, .border-purple-500\/30,
.border-violet\/20, .border-violet\/30,
.border-teal\/20 { border-color: rgba(127, 178, 212, 0.42) !important; }
.hover\:border-purple-500\/40:hover, .hover\:border-violet\/40:hover {
  border-color: rgba(127, 178, 212, 0.7) !important;
}
.border-t-purple-500, .border-t-violet { border-top-color: var(--mn-star) !important; }

/* ── gradients ───────────────────────────────────────────────────────────── */
.from-purple-600\/10, .from-violet\/10 { --tw-gradient-from: #FCEFD2 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(252,239,210,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-fuchsia-600\/10, .to-teal\/10 { --tw-gradient-to: #DCEAF5 var(--tw-gradient-to-position) !important; }
.via-purple-500\/30 { --tw-gradient-to: rgba(242,193,75,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(242,193,75,0.45) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.from-purple-400, .from-violet { --tw-gradient-from: var(--mn-lumi) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(242,193,75,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-fuchsia-400, .to-violet-dark { --tw-gradient-to: var(--mn-star) var(--tw-gradient-to-position) !important; }

/* ── glass panels ────────────────────────────────────────────────────────── */
.glass, .glass-card {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(36, 30, 56, 0.08) !important;
  box-shadow: 0 8px 26px rgba(36, 30, 56, 0.06) !important;
}

/* ── decorative glows were tuned for a black page; calm them down ───────── */
.glow-purple, .glow-teal, .glow-violet { box-shadow: 0 10px 28px rgba(36, 30, 56, 0.10) !important; }
.animate-pulse-glow { animation: none !important; }

/* ── prose (blog posts) ──────────────────────────────────────────────────── */
.prose { color: rgba(36, 30, 56, 0.80) !important; }
.prose :is(h1, h2, h3, h4, strong, blockquote) { color: var(--mn-ink) !important; }
.prose :is(a) { color: var(--mn-accent-text) !important; }
.prose :is(code) { color: var(--mn-ink) !important; background: #F7F2ED !important; }
.prose :is(hr) { border-color: rgba(36, 30, 56, 0.10) !important; }

/* ── the legacy fixed header is replaced by .mn-nav-bar; hide the old one ── */
body > nav.fixed[class*="top-0"],
body > div > nav.fixed[class*="top-0"] { display: none !important; }

/* Legacy pages start their content under a 5rem dark bar. The new pill floats,
   so give the first block the same clearance the old bar reserved. */
body { padding-top: 0; }
main { scroll-margin-top: 96px; }

/* ===========================================================================
   PAGE-LOCAL BLOCKS
   ---------------------------------------------------------------------------
   The blog posts and the pSEO hubs each carry an inline <style> block with
   hard-coded dark values (`.card`, `.tag`, `.article-body p`, `.hubtable`…).
   Inline <style> comes after this file in the cascade, so these need
   !important to win — every selector below is one that actually appears in
   those blocks, mapped to the daylight palette.
   =========================================================================== */

::selection { background: #FCEFD2 !important; color: var(--mn-ink) !important; }

/* pills / chips */
.tag {
  background: #FCEFD2 !important;
  border-color: rgba(242, 193, 75, 0.45) !important;
  color: #7A5B12 !important;
}

/* cards */
.card, .related-card {
  background: var(--mn-surface) !important;
  border-color: rgba(36, 30, 56, 0.08) !important;
  box-shadow: 0 1px 2px rgba(36, 30, 56, 0.04) !important;
}
.card:hover, .related-card:hover {
  border-color: rgba(127, 178, 212, 0.6) !important;
  box-shadow: 0 12px 28px rgba(36, 30, 56, 0.08) !important;
}

/* breadcrumbs */
nav.breadcrumb ol { color: rgba(36, 30, 56, 0.5) !important; }
nav.breadcrumb a { color: rgba(36, 30, 56, 0.65) !important; }
nav.breadcrumb a:hover { color: var(--mn-ink) !important; }

/* long-form body copy (blog posts and pSEO hubs share these shapes) */
.article-body h2, .prose h2 {
  color: var(--mn-ink) !important;
  border-left-color: var(--mn-lumi) !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
}
.article-body h3, .prose h3 { color: var(--mn-ink) !important; font-family: 'Nunito', system-ui, sans-serif !important; }
.article-body p, .prose p, .prose ul, .crosslinks ul { color: rgba(36, 30, 56, 0.78) !important; }
.article-body ul li { color: rgba(36, 30, 56, 0.75) !important; }
.article-body ul li::before { background: var(--mn-lumi) !important; }
.article-body .callout {
  background: linear-gradient(135deg, #FCEFD2 0%, #DCEAF5 100%) !important;
  border-color: rgba(242, 193, 75, 0.45) !important;
  color: rgba(36, 30, 56, 0.86) !important;
}
.article-body a, .prose a, .crosslinks a { color: var(--mn-accent-text) !important; }
.article-body blockquote, .prose blockquote { color: var(--mn-ink) !important; border-left-color: var(--mn-star) !important; }

/* reading-progress bar */
#progressBar { background: linear-gradient(90deg, var(--mn-lumi), var(--mn-star)) !important; }

/* the film-grain overlay was there to give a black page texture */
.grain-overlay { opacity: 0.018 !important; }

/* disclosure rows (FAQ blocks on the hubs) */
details { background: var(--mn-surface) !important; border-color: rgba(36, 30, 56, 0.09) !important; }
details summary { color: var(--mn-ink) !important; }
details p { color: rgba(36, 30, 56, 0.74) !important; }

/* comparison tables */
.hubtable th { color: var(--mn-ink) !important; font-family: 'Nunito', system-ui, sans-serif !important; }
.hubtable th, .hubtable td { color: rgba(36, 30, 56, 0.78) !important; border-bottom-color: rgba(36, 30, 56, 0.09) !important; }
.hubtable caption { color: rgba(36, 30, 56, 0.55) !important; }
.hubtable tbody tr:hover td { background: #FCEFD2 !important; }

/* ===========================================================================
   Content must not depend on JavaScript to be visible.
   ---------------------------------------------------------------------------
   The blog and pSEO templates start every block at `.reveal { opacity: 0 }`
   and rely on an IntersectionObserver to add `.visible`. If that observer
   never fires — no-JS, a script error earlier on the page, a prerender, or a
   headless/offscreen context — the article body renders blank while the text
   is still in the DOM. That is a silent failure: the page looks fine to a
   crawler and empty to a person.

   The animation is worth having, but not at that price. Blocks now start
   visible and the motion is a pure-CSS entrance, so there is no state in
   which readable text is hidden behind a callback.
   =========================================================================== */
.reveal, .reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: mnFadeUp 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* The content pages set 'Quattrocento Sans' on <body> directly, so the
   class-level font override above never reaches their body copy. */
body, .article-body, .article-body p, .article-body li,
.prose, .prose p, .prose li, .hubtable, details, .crosslinks {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif !important;
}