/* Shared readability and responsive fixes, kept separate from legacy styles. */
[hidden] { display: none !important; }
html { scroll-padding-top: 6rem; }
.site-fallback, .no-script-note {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;
}
.site-fallback { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-fallback a, .no-script-note a { color: #4338ca; text-decoration: underline; }
.dark .site-fallback a, .dark .no-script-note a { color: #a5b4fc; }
.calculator-privacy { margin-top: .75rem; color: #475569; font-size: .8125rem; line-height: 1.6; }
.dark .calculator-privacy { color: #cbd5e1; }
.home-page .hero-compact { margin-bottom: 1.25rem; }
.home-page .hero-glow::before { animation: none; opacity: .35; }
.home-page #quickAnswerBox { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.home-page #quickAnswerBox .glass-card { height: auto; }
.home-page .calc-grid > *, .home-page .input-wrapper { min-width: 0; }
.home-page #resNetto { font-size: clamp(2rem, 4.5vw, 3.75rem); overflow-wrap: anywhere; }
.home-page #mainInput { min-width: 0; }
#familyCount { min-height: 44px; min-width: 5rem; margin: .5rem; padding: .5rem; color: inherit; background: transparent; border: 1px solid #94a3b8; border-radius: .5rem; }
#familyScopeNote a { text-decoration: underline; }
.home-page .calc-left .profile-btn,
.home-page .calc-left .toggle-btn,
.home-page .mode-btn { min-height: 44px; }
.article-content p, .article-content li { line-height: 1.8; }
.article-content img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .home-page #mainInput { font-size: max(1rem, 4.5vw); }
  .home-page .hero-compact h1 { font-size: 1.75rem; line-height: 1.25; }
  .home-page .calc-right { position: static; }
  .home-page #quickAnswerBox .text-\[10px\] { font-size: .75rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Header is in normal flow; remove the obsolete fixed-header spacer. */
body { padding-top: 0; }
#mobile-menu-overlay.translate-x-full { display: none !important; }
article, main, .article-content { min-width: 0; }
.article-content { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .site-header nav { display: none !important; }
  .site-header button[data-action="toggle-menu"] { display: block !important; }
  #mobile-menu-overlay:not(.translate-x-full) { display: block !important; }
}
.home-page .page-shell { padding-top: 1rem; }
.home-page .section-hero--calc { padding-top: 0; }
.home-page #calculatorSection { padding-top: 1rem; }
.home-page #trust-note-2026 { margin-left: 0; }
@media (max-width: 640px) {
  .home-page .page-shell { padding: .75rem .5rem 2rem; }
  .home-page .page-card { padding: .5rem; }
  .home-page #calculatorSection { padding: .5rem; }
  .home-page .hero-compact h1 { font-size: 1.5rem; }
  .home-page .calc-left { padding: 1rem; }
  .home-page .calc-left > .mb-10 { margin-bottom: 1.25rem; }
  .home-page .input-prefix { display: none; }
}

.article-content { width: 100%; max-width: 100%; }
@media(max-width:1023px){ main .grid:has(> .article-content) { grid-template-columns: minmax(0,1fr); } }

/* Keep dark-mode surfaces and form text legible after the light-theme refinements. */
html.dark body { background: #0b1220; color: #e2e8f0; }
html.dark .site-header { background: #0f172a !important; border-color: #334155 !important; }
html.dark .site-header a, html.dark .site-header button { color: #f1f5f9; }
html.dark .home-page .page-card, html.dark .home-page .section-hero--calc { background: #182237 !important; }
html.dark .home-page .calc-left { background: #0f172a !important; box-shadow: none; }
html.dark .home-page .input-wrapper { background: #1e293b !important; border-color: #64748b; }
html.dark .home-page #mainInput { color: #f8fafc !important; }
html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-slate-600,
html.dark .home-page .hero-compact p, html.dark .home-page .input-prefix,
html.dark .home-page .input-suffix { color: #cbd5e1 !important; }
html.dark .home-page #trust-note-2026 { color: #cbd5e1 !important; }
html.dark .home-page #trust-note-2026 a { color: #c7d2fe !important; }
html.dark .input-help { color: #cbd5e1 !important; }
html.dark .calc-step, html.dark .calc-step.active { color: #c7d2fe; }