/* ==========================================================================
   24blog Finance — Premium stylesheet
   Deep, organic color palette. No pastels. No transparency on text.
   Layered on top of Tailwind utility classes.
   ========================================================================== */

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

body {
  background-color: #050f0e;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(16,185,129,0.06), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(245,158,11,0.05), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(139,92,246,0.04), transparent 40%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Headings use the serif family for an editorial feel */
h1, h2, h3, h4, .font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ---------- Decorative gradient text ---------- */
.text-gradient-gold {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-emerald {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #047857 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Premium glass cards ---------- */
.card-premium {
  background: linear-gradient(155deg, #0f2a26 0%, #0a1f1c 100%);
  border: 1px solid rgba(31,77,70,0.6);
  box-shadow: 0 25px 60px -25px rgba(0,0,0,0.6);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.card-premium:hover {
  transform: translateY(-6px);
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 35px 80px -25px rgba(0,0,0,0.7), 0 0 60px -15px rgba(245,158,11,0.25);
}

/* Shimmer hover effect for category tiles */
.tile-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}
.tile-shimmer:hover::before {
  opacity: 1;
  animation: shimmer 1.2s linear;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Calculator input styling ---------- */
.calc-input {
  background: #050f0e;
  border: 1px solid #1f4d46;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  color: #f7f3ea;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 100%;
}
.calc-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
  background: #0a1f1c;
}
.calc-input::placeholder { color: #4b6764; }

.calc-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}
.calc-help {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.375rem;
}

/* Result panel — the "wow" element of every calculator */
.result-panel {
  background:
    radial-gradient(circle at top right, rgba(245,158,11,0.10), transparent 60%),
    linear-gradient(160deg, #163a35 0%, #0a1f1c 100%);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 1.25rem;
  box-shadow: 0 25px 60px -25px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Primary action button */
.btn-primary {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
  color: #050f0e;
  font-weight: 700;
  padding: 0.875rem 1.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -10px rgba(245,158,11,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(245,158,11,0.7);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: #f7f3ea;
  border: 1px solid #1f4d46;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.btn-secondary:hover {
  border-color: #f59e0b;
  background-color: rgba(245,158,11,0.06);
}

/* ---------- Article prose ---------- */
.prose-finance { color: #cbd5e1; line-height: 1.85; font-size: 1.0625rem; }
.prose-finance h2 {
  color: #f7f3ea;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #1f4d46;
  scroll-margin-top: 6rem;
}
.prose-finance h3 {
  color: #fcd34d;
  font-size: 1.375rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}
.prose-finance p { margin-bottom: 1.25rem; color: #cbd5e1; }
.prose-finance strong { color: #f7f3ea; font-weight: 600; }
.prose-finance em { color: #fcd34d; font-style: italic; }
.prose-finance a { color: #fcd34d; text-decoration: underline; text-underline-offset: 2px; }
.prose-finance a:hover { color: #f59e0b; }
.prose-finance ul, .prose-finance ol { margin: 1rem 0 1.5rem 1.5rem; }
.prose-finance ul li { list-style: disc; margin-bottom: 0.5rem; }
.prose-finance ol li { list-style: decimal; margin-bottom: 0.5rem; }
.prose-finance blockquote {
  border-left: 3px solid #f59e0b;
  padding: 0.5rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(245,158,11,0.05);
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
  color: #e2e8f0;
}
.prose-finance code {
  background: #0a1f1c;
  color: #fcd34d;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'JetBrains Mono', monospace;
}
.prose-finance table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.prose-finance th, .prose-finance td {
  border: 1px solid #1f4d46;
  padding: 0.75rem 1rem;
  text-align: left;
}
.prose-finance th { background: #0a1f1c; color: #fcd34d; font-weight: 600; }
.prose-finance tr:nth-child(even) td { background: rgba(15,42,38,0.5); }

/* ---------- Table of contents (in-article) ---------- */
.toc-box {
  background: rgba(15,42,38,0.6);
  border: 1px solid #1f4d46;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 2rem 0;
}
.toc-box ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-box ol li { counter-increment: toc; margin-bottom: 0.5rem; padding-left: 2rem; position: relative; }
.toc-box ol li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: #f59e0b;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}
.toc-box a { color: #cbd5e1; text-decoration: none; transition: color 0.2s ease; }
.toc-box a:hover { color: #fcd34d; }

/* ---------- Hero gradient backgrounds ---------- */
.hero-radial {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245,158,11,0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(16,185,129,0.12), transparent),
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(139,92,246,0.08), transparent);
}

/* ---------- Stat strip ---------- */
.stat-strip {
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.05), transparent);
  border-top: 1px solid rgba(245,158,11,0.2);
  border-bottom: 1px solid rgba(245,158,11,0.2);
}

/* ---------- Skeleton/loading shimmer for results ---------- */
.skeleton {
  background: linear-gradient(90deg, #0f2a26 0%, #163a35 50%, #0f2a26 100%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Reveal-on-scroll utility ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Custom number input arrows ---------- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ---------- Select dropdowns ---------- */
select.calc-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

/* ---------- Mobile menu animation ---------- */
#mobile-menu:not(.hidden) {
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Print friendliness (for calculator results) ---------- */
@media print {
  body { background: white !important; color: black !important; }
  header, footer, .no-print { display: none !important; }
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}