/*
  MoneyCalc4All - Global typography and mobile usability
  Shared by all public HTML pages. Calculator logic and SEO metadata are untouched.
*/
:root {
  --mca-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mca-body-size: 16px;
  --mca-muted-size: 14px;
  --mca-small-size: 13px;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--mca-font-family) !important;
  font-size: var(--mca-body-size) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
p, li { line-height: 1.6; }
h1 { font-size: clamp(1.65rem, 4vw, 2rem) !important; line-height: 1.2; }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem) !important; line-height: 1.3; }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.2rem) !important; line-height: 1.35; }
small, .muted, .small, .help-text, .hint { font-size: var(--mca-small-size); }
label, .form-label { font-size: 14px; line-height: 1.45; }
input, select, textarea, button {
  font-family: inherit;
  max-width: 100%;
}
input, select, textarea { font-size: 16px !important; }
button, input[type="button"], input[type="submit"], a.button, .btn {
  min-height: 42px;
}
img, video, canvas, svg { max-width: 100%; }
table { max-width: 100%; }
.tablewrap, .table-wrap, .table-container, .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:focus-visible { outline-offset: 2px; }

@media (max-width: 768px) {
  body { font-size: 14px !important; }
  p, li { font-size: 14px; }
  label, .form-label { font-size: 13px; }
  small, .muted, .small, .help-text, .hint { font-size: 12px; }
  table { font-size: 13px; }
  button, input[type="button"], input[type="submit"], a.button, .btn {
    font-size: 14px;
  }
  .wrap, main, .container, .content, .page-container {
    max-width: 100%;
  }
  .wrap { padding-left: 14px; padding-right: 14px; }
  main { padding-left: 14px; padding-right: 14px; }
  .card, .panel, .box, .stat, .result-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .toolbar, .filters, .actions, .button-row {
    flex-wrap: wrap;
  }
  .toolbar input, .toolbar select, .filters input, .filters select {
    min-width: 0;
    max-width: 100%;
  }
  .tablewrap table, .table-wrap table, .table-container table,
  .table-responsive table { min-width: 520px; }
  .site-banner-inner, .head, .top, .topbar {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  html { font-size: 16px; }
  body { font-size: 14px !important; line-height: 1.55; }
  h1 { font-size: 23px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  p, li { font-size: 14px; }
  label, .form-label { font-size: 13px; }
  small, .muted, .small, .help-text, .hint { font-size: 12px; }
  table { font-size: 13px; }
  button, .btn, a.button, input[type="button"], input[type="submit"] {
    font-size: 14px;
  }
  .wrap { padding: 16px 12px 28px; }
  main { padding: 14px 12px; }
  .card, .panel, .box { padding: 14px; border-radius: 12px; }
  input, select, textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px !important; /* prevents automatic zoom on iOS */
  }
  button, .btn, a.button, input[type="button"], input[type="submit"] {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  nav, .site-nav, .toolbar, .filters {
    gap: 8px;
  }
  .site-nav a, nav a { min-height: 40px; }
  .grid, .stats, .top-grid, .result-grid, .calculator-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .stat strong { font-size: 23px; }
  .tablewrap, .table-wrap, .table-container, .table-responsive {
    margin-left: -2px;
    margin-right: -2px;
  }
}