/* Mobile-only overrides: these load only when viewport <= 640px */
:root { --space: 14px; --radius: 16px; }
html, body { overscroll-behavior-y: none; }
body { padding: var(--space); }

/* Header / nav */
header .nav, nav[aria-label="Main"], nav[aria-label="Footer"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
header .nav a, nav[aria-label="Main"] a, nav[aria-label="Footer"] a {
  width: 100%;
  justify-content: center;
}

/* Brand */
a.logo img { height: 28px; width: 28px; margin-right: 8px; }
a.logo strong { font-size: 1.05rem; }

/* Layout */
.section { padding: calc(var(--space) * 0.9) }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grid.grid-2, .grid.grid-3, .grid.grid-4 { grid-template-columns: 1fr; }
.card { border-radius: var(--radius); padding: calc(var(--space) * 1.0); }
.btn { width: 100%; margin: 6px 0 !important; }

/* Tables: make scrollable */
.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table table { width: 640px; max-width: none; } /* preserve columns */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; }

/* Forms / inputs */
input, select, textarea, button { font-size: 16px; } /* avoid iOS zoom */
.form-row, .input-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
label { display: block; margin-bottom: 6px; }

/* Hero/intro blocks */
.hero, .intro { text-align: left; }
.hero .actions a, .intro .actions a { width: 100%; }

/* Calculator panel */
#dti-app, .tool, .panel, .calculator {
  padding: calc(var(--space) * 1.0);
  border-radius: var(--radius);
}
#results, .results, .output { font-size: 1.05rem; }

/* Blog list cards */
.blog .card h2 { font-size: 1.1rem; line-height: 1.25; }
.blog .card p { font-size: 0.95rem; }

/* Images */
img { max-width: 100%; height: auto; border-radius: 12px; }

/* Footer */
footer .grid { grid-template-columns: 1fr !important; }
footer .btn { width: 100%; }
footer nav a { margin: 6px 0 !important; }

/* === Mobile enhancement: Other Monthly Debts visibility === */
@media (max-width: 640px) {
  .other-debts, [data-section="other-debts"] { 
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,106,0,0.04);
  }
  .other-debts h2, .other-debts h3, [data-section="other-debts"] h2, [data-section="other-debts"] h3 {
    margin-top: 0;
    font-size: 1.05rem;
  }
  .other-debts .hint, [data-section="other-debts"] .hint {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 6px 0 10px 0;
  }
  /* Force labels to show and sit above inputs */
  .other-debts label, [data-section="other-debts"] label {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    position: static !important;
    margin-bottom: 4px;
    font-weight: 600;
  }
  .other-debts .input-row, [data-section="other-debts"] .input-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .other-debts input[type="number"],
  .other-debts input[type="text"],
  [data-section="other-debts"] input[type="number"],
  [data-section="other-debts"] input[type="text"] {
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
  }
}