/* PrepZen Website — Custom CSS */
/* Tailwind handles most styling; this file adds animations, custom components, and overrides */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Prose overrides (for article content) ─────────────────────────────────── */
.prose h2 { font-family: Merriweather, Georgia, serif; font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #1A1A1A; }
.prose h3 { font-family: Merriweather, Georgia, serif; font-size: 1.1rem; font-weight: 600; margin-top: 1.25rem; color: #1A1A1A; }
.prose p  { margin-bottom: 0.75rem; line-height: 1.7; color: #374151; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose ul li { margin-bottom: 0.25rem; color: #374151; }
.prose a  { color: #8B0000; text-decoration: underline; }
.prose strong { font-weight: 700; color: #1A1A1A; }
.prose blockquote { border-left: 3px solid #FFC107; padding-left: 1rem; color: #64748B; font-style: italic; margin: 1rem 0; }

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

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }
.animate-slide-down  { animation: slideDown 0.2s ease-out forwards; }

/* ── Floating CTA animation ────────────────────────────────────────────────── */
#floating-cta {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#floating-cta.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Search dropdown ───────────────────────────────────────────────────────── */
#search-dropdown {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border: 1px solid #E5E7EB;
}

/* ── Section heading accent ────────────────────────────────────────────────── */
.section-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background-color: #FFC107;
  border-radius: 9999px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ── Table styles ──────────────────────────────────────────────────────────── */
.table-auto th {
  background-color: #0B2046;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  text-align: left;
  font-size: 0.875rem;
}
.table-auto td {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

/* ── Nav active state ──────────────────────────────────────────────────────── */
nav a.active {
  color: #FFC107 !important;
}

/* ── Article quiz option ───────────────────────────────────────────────────── */
.quiz-option.correct { background-color: #F0FDF4; border-color: #86EFAC; color: #166534; }
.quiz-option.wrong   { background-color: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }

/* ── Skeleton loading ──────────────────────────────────────────────────────── */
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Focus ring ────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid #FFC107; outline-offset: 2px; }

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  nav, footer, aside, #floating-cta, .app-cta { display: none !important; }
  body { background: white; }
  article { max-width: 100% !important; }
}

/* ── Brand color fallbacks ─────────────────────────────────────────────────
   The site's custom colors (brand-*, surface-*, ink-*) are defined only in
   the runtime tailwind.config script and generated client-side by the
   Tailwind Play CDN (cdn.tailwindcss.com). On slow/throttled mobile
   connections that script can take a long time to load, leaving elements
   like the dark footer with no background and near-invisible gray text.
   These rules hard-code the same values as plain CSS (loaded from this
   same-origin stylesheet) so pages stay legible no matter how long the
   Tailwind CDN script takes — and they are overridden harmlessly once it
   does load, since the values match. ────────────────────────────────────── */
:root {
  --brand-yellow: #FFC107;
  --brand-yellow-d: #E5A800;
  --brand-yellow-l: #FFF8E1;
  --brand-yellow-ll: #FFFDE7;
  --surface-light: #FCFBF7;
  --surface-card: #FFFFFF;
  --surface-dark: #0B2046;
  --surface-dark-2: #13305F;
  --surface-dark-3: #1E252B;
  --ink-primary: #1A1A1A;
  --ink-muted: #5B6472;
  --ink-light: #94A3B8;
}

.bg-brand-yellow    { background-color: var(--brand-yellow); }
.bg-brand-yellow-d  { background-color: var(--brand-yellow-d); }
.bg-brand-yellow-l  { background-color: var(--brand-yellow-l); }
.bg-brand-yellow-ll { background-color: var(--brand-yellow-ll); }
.bg-surface-light   { background-color: var(--surface-light); }
.bg-surface-card    { background-color: var(--surface-card); }
.bg-surface-dark    { background-color: var(--surface-dark); }
.bg-surface-dark-2  { background-color: var(--surface-dark-2); }
.bg-surface-dark-3  { background-color: var(--surface-dark-3); }

.text-brand-yellow  { color: var(--brand-yellow); }
.text-surface-dark  { color: var(--surface-dark); }
.text-ink-primary   { color: var(--ink-primary); }
.text-ink-muted     { color: var(--ink-muted); }
.text-ink-light     { color: var(--ink-light); }

.border-brand-yellow { border-color: var(--brand-yellow); }

.ring-brand-yellow { --tw-ring-color: var(--brand-yellow); }

.hover\:bg-brand-yellow:hover    { background-color: var(--brand-yellow); }
.hover\:bg-brand-yellow-d:hover  { background-color: var(--brand-yellow-d); }
.hover\:bg-brand-yellow-ll:hover { background-color: var(--brand-yellow-ll); }
.hover\:bg-surface-dark-2:hover  { background-color: var(--surface-dark-2); }
.hover\:text-brand-yellow:hover  { color: var(--brand-yellow); }

.from-brand-yellow-ll {
  --tw-gradient-from: var(--brand-yellow-ll) var(--tw-gradient-from-position, 0%);
  --tw-gradient-to: rgb(255 253 231 / 0) var(--tw-gradient-to-position, 100%);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark {
  --tw-gradient-from: var(--surface-dark) var(--tw-gradient-from-position, 0%);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position, 100%);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-surface-dark   { --tw-gradient-to: var(--surface-dark) var(--tw-gradient-to-position, 100%); }
.to-surface-dark-2 { --tw-gradient-to: var(--surface-dark-2) var(--tw-gradient-to-position, 100%); }

/* Belt-and-suspenders: the footer must never be unreadable even if every
   rule above somehow fails to match (e.g. class list reordered by a build
   step later on). */
footer.bg-surface-dark { background-color: var(--surface-dark); color: #D1D5DB; }

/* ── Gradient fallbacks (direct, order-independent) ───────────────────────
   The --tw-gradient-stops variable trick above depends on from-/via-/to-
   rules composing in a specific cascade order, which doesn't reliably hold
   when some of those utilities are custom (app.css) and others are core
   Tailwind (CDN-generated) — in practice the "to" stop kept losing and
   these boxes rendered with no visible dark gradient at all. These rules
   set background-image directly for each exact combination used on the
   site, at higher specificity (3 chained classes) than any single utility
   class, so they always win regardless of load order. ────────────────── */
.from-surface-dark.via-surface-dark-2.to-slate-900 {
  background-image: linear-gradient(to bottom right, var(--surface-dark), var(--surface-dark-2), #0f172a);
}
.from-slate-800.to-surface-dark {
  background-image: linear-gradient(to bottom right, #1e293b, var(--surface-dark));
}
.from-surface-dark.to-surface-dark-2 {
  background-image: linear-gradient(to bottom right, var(--surface-dark), var(--surface-dark-2));
}

/* ── Broadsheet theme ─────────────────────────────────────────────────────
   Newspaper-style layer on top of the existing utilities. Plain CSS so the
   masthead and dashboard stay styled even before the Tailwind CDN loads. */
:root {
  --paper: #FCFBF7;
  --navy: #0B2046;
  --crimson: #8B0000;
  --saffron: #FA6400;
  --indigreen: #138808;
  --rule: #D9D4C7;
  --font-serif: Merriweather, Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-display: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}

.bg-paper   { background-color: var(--paper); }
.text-navy  { color: var(--navy); }
.text-crimson { color: var(--crimson); }
.border-rule { border-color: var(--rule); }
.font-serif { font-family: var(--font-serif); }
.font-body  { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }

/* Ticker bar */
.ticker-bar { background: var(--navy); color: #E5E7EB; }
.wx-select {
  background: transparent; color: inherit; border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 4px; padding: 1px 4px; font-size: 12px; max-width: 8.5rem;
}
.wx-select option { color: #1A1A1A; }

/* Masthead */
.masthead { background: var(--paper); border-bottom: 3px double var(--navy); }
.wordmark {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 1.9rem; line-height: 1; color: var(--navy);
}
.wordmark-accent { color: var(--saffron); }
@media (min-width: 640px) { .wordmark { font-size: 2.6rem; } }
.masthead-tagline {
  font-family: var(--font-serif); font-style: italic; font-size: 0.75rem;
  color: #5B6472; margin-top: 4px; letter-spacing: 0.02em;
}

/* Section nav */
.section-nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.section-link {
  color: var(--navy); padding: 0 14px; line-height: 1; border-right: 1px solid var(--rule);
  transition: color .15s;
}
.section-nav .flex > .section-link:last-of-type,
.section-nav .group .section-link { border-right: 0; }
.section-link:hover, .section-link.is-active { color: var(--crimson); }

.btn-crimson {
  display: inline-flex; align-items: center; gap: 6px; background: var(--crimson); color: #fff;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; transition: background .15s;
}
.btn-crimson:hover { background: #6E0000; }

/* Editorial typography helpers */
.kicker {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--crimson);
}
.rule-double { border: 0; border-top: 3px double var(--navy); }
.rule-thin   { border: 0; border-top: 1px solid var(--rule); }
.section-title {
  font-family: var(--font-serif); font-weight: 900; color: var(--navy);
  font-size: 1.35rem; padding-bottom: 6px; border-bottom: 2px solid var(--navy);
}
.headline { font-family: var(--font-serif); color: #111; }
@media (min-width: 640px) {
  .col-rule > * + * { border-left: 1px solid var(--rule); }
}

/* Daily dashboard strip */
.daily-strip { background: #fff; border-bottom: 1px solid var(--rule); }
.daily-strip-track {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.daily-strip-track::-webkit-scrollbar { display: none; }
.rate-tile {
  flex: 0 0 auto; min-width: 9.5rem; padding: 10px 16px; border-right: 1px solid var(--rule);
}
.rate-tile:last-child { border-right: 0; }
.rate-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #5B6472; }
.rate-value { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.rate-sub   { font-size: 0.7rem; color: #5B6472; font-variant-numeric: tabular-nums; }
.delta-up   { color: var(--indigreen); font-weight: 700; }
.delta-down { color: var(--crimson); font-weight: 700; }
.delta-flat { color: #94A3B8; }

@media print {
  .ticker-bar, .masthead, .section-nav, .daily-strip { display: none !important; }
}

/* ── Representative images (Wikimedia Commons) + credits ─────────────────── */
.content-figure { margin: 0; }
.content-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: #EEE9DD; border: 1px solid var(--rule);
}
.content-figure figcaption,
.img-credit {
  font-size: 11px; line-height: 1.4; color: #6B7280; margin-top: 4px;
  overflow-wrap: anywhere;
}
.content-figure figcaption a { color: inherit; text-decoration: underline; text-decoration-color: #C9C3B5; }
.content-figure figcaption a:hover { color: var(--crimson); }
.img-credit { font-size: 10px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thumb-16x9 {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: #EEE9DD; border: 1px solid var(--rule); margin-bottom: 0 !important;
}