/*!
 * SoloStack shared site styles.
 *
 * Every page loads this file via <link rel="stylesheet" href="/css/site.css">.
 * It holds the handful of custom CSS rules that sit on top of Tailwind's
 * utility classes — base typography, accessibility touches, and the small
 * set of micro-interactions (result fade-ins, print view) reused across
 * tool pages. Centralizing this means a change here (e.g. adjusting the
 * focus ring color) applies everywhere at once instead of needing to be
 * copy-pasted into every page's <style> block.
 *
 * Some rules below (e.g. .step-line, the print media query) only apply to
 * specific pages that use those classes/ids. Leaving them in this shared
 * file is harmless for pages that don't use them — they simply never match.
 */

/* ============ Base typography ============ */
body {
  font-family: 'Inter', sans-serif;
  background: #F7F6F3;
  color: #22262B;
}
.font-heading {
  font-family: '"Source Serif 4"', Georgia, serif;
}

/* ============ Accessibility ============ */
/* Visible keyboard-focus ring on interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #3E6B6B;
  outline-offset: 2px;
}

/* 16px minimum font size on form fields prevents iOS Safari from
   auto-zooming the page when a field is focused. */
input[type="text"],
input[type="number"],
select {
  font-size: 16px;
}

/* Respect the user's OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition-all,
  .results-in {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ Micro-interactions ============ */
/* Step-connector gradient line used on multi-step calculators
   (Irregular Income Budget Calculator, Quarterly Tax Estimator). */
.step-line {
  background: linear-gradient(to bottom, #1F3A5F, #E4E1DA);
}

/* Fade-in applied to a results panel when it's revealed (classList.remove
   ('hidden')) after a calculation. Replays automatically each time the
   element goes from display:none to visible. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.results-in {
  animation: fadeIn .3s ease-out;
}

/* ============ Print / Save-as-PDF view ============ */
/* Used by the Monthly Cash Flow Tracker's "Print / Save as PDF" button.
   Hides navigation, the disclaimer ribbon, forms, buttons, and ad slots;
   keeps the summary, entered line items, category breakdown, and the
   legal disclaimer for a clean printed record. Elements are opted in via
   the `no-print` class and the `#printHeader` block is print-only. */
#printHeader {
  display: none;
}
@media print {
  body { background: #fff !important; }
  .no-print { display: none !important; }
  #printHeader { display: block; }
  main { max-width: 100% !important; padding: 0 !important; }
  .shadow-card, .shadow-hero { box-shadow: none !important; }
}