/*
 * tailwind-custom.css
 * Hand-compiled minimal Tailwind utility subset for mutualfundreport.netlify.app
 * Replaces: https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css
 *
 * Classes covered: all 15 Tailwind utility classes actually used across
 *   index.html, howto.html, faq.html, analyze-mutual-fund-portfolio-cas.html, about.html
 *
 * File size: ~900 bytes vs ~300KB+ for full Tailwind CDN
 * Generated: March 2026
 */

/* ── Layout ─────────────────────────────────────────── */

.relative {
  position: relative;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

/* ── Sizing ──────────────────────────────────────────── */

.max-w-4xl {
  max-width: 56rem; /* 896px */
}

.max-w-2xl {
  max-width: 42rem; /* 672px */
}

/* ── Spacing ─────────────────────────────────────────── */

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ── Typography ──────────────────────────────────────── */

.text-center {
  text-align: center;
}

.text-sm {
  font-size: 0.875rem;   /* 14px */
  line-height: 1.25rem;  /* 20px */
}

.text-gray-300 {
  color: #d1d5db;
}

/* ── Backgrounds & Gradients ─────────────────────────── */

/*
 * bg-gradient-to-b + from-gray-900 + via-gray-800 + to-gray-900
 * These four classes work together to produce the hero gradient.
 * In Tailwind they compose via CSS custom properties.
 * We implement them as a combined rule for the pattern used on all pages.
 */

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-gray-900 {
  --tw-gradient-from: #111827;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(17 24 39 / 0));
}

.via-gray-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, rgb(31 41 55 / 0));
}

.to-gray-900 {
  --tw-gradient-to: #111827;
}

/* ── Responsive ──────────────────────────────────────── */

@media (min-width: 768px) {
  .md\:text-base {
    font-size: 1rem;      /* 16px */
    line-height: 1.5rem;  /* 24px */
  }
}